From bbdb1e73f44e0e5f056f017a5cb90549cb20c6d5 Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Fri, 19 Jan 2024 16:16:53 +0800 Subject: [PATCH] feat(numberkeyboard): add title right actions (#1881) --- src/packages/numberkeyboard/demo.taro.tsx | 1 + src/packages/numberkeyboard/demo.tsx | 1 + src/packages/numberkeyboard/doc.en-US.md | 5 ++++- src/packages/numberkeyboard/doc.md | 5 ++++- src/packages/numberkeyboard/doc.taro.md | 5 ++++- src/packages/numberkeyboard/doc.zh-TW.md | 7 +++++-- src/packages/numberkeyboard/numberkeyboard.taro.tsx | 7 +++++-- src/packages/numberkeyboard/numberkeyboard.tsx | 7 +++++-- 8 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/packages/numberkeyboard/demo.taro.tsx b/src/packages/numberkeyboard/demo.taro.tsx index 641b752137..3c471e9371 100644 --- a/src/packages/numberkeyboard/demo.taro.tsx +++ b/src/packages/numberkeyboard/demo.taro.tsx @@ -113,6 +113,7 @@ const NumberKeyboardDemo = () => { Done} custom={['.']} onChange={onChange} onDelete={onDelete} diff --git a/src/packages/numberkeyboard/demo.tsx b/src/packages/numberkeyboard/demo.tsx index a0ad2462cf..8824e8ed54 100644 --- a/src/packages/numberkeyboard/demo.tsx +++ b/src/packages/numberkeyboard/demo.tsx @@ -103,6 +103,7 @@ const NumberKeyboardDemo = () => { Done} custom={['.']} onChange={onChange} onDelete={onDelete} diff --git a/src/packages/numberkeyboard/doc.en-US.md b/src/packages/numberkeyboard/doc.en-US.md index cf5361ae58..4c3f19f3b1 100644 --- a/src/packages/numberkeyboard/doc.en-US.md +++ b/src/packages/numberkeyboard/doc.en-US.md @@ -128,6 +128,8 @@ export default App; ### Show Keyboard With Title +You can use `rightActions` when you want to set the right actions on the title bar.The vuale of it is `Done`. + :::demo ```tsx @@ -253,10 +255,11 @@ export default App; | --- | --- | --- | --- | | visible | Whether to show keyboard | `boolean` | `false` | | title | Keyboard title | `ReactNode` | `-` | +| rightActions | Right actions at title bar | `ReactNode` | `-` | | type | Keyboard type, default/rightColumn | `'default' \| 'rightColumn'` | `default` | | random | Whether to shuffle the order of keys | `boolean` | `false` | | custom | Content of bottom left key, Array form supports adding up to two | `string[]` | `-` | -| confirmText | Custom done button text,Such as "pay", "next", "submit" | `string` | `done` | +| confirmText | Custom done button text, Such as "pay", "next", "submit", used by `rightColumn` | `string` | `done` | | onChange | Emitted when a key is pressed | `(value: string) => void` | `-` | | onDelete | Emitted when the delete key is pressed | `-` | `-` | | onClose | Emitted when the close button or non-keyboard area is clicked is clicked | `-` | `-` | diff --git a/src/packages/numberkeyboard/doc.md b/src/packages/numberkeyboard/doc.md index bfd0aa3ab7..ce4cc15067 100644 --- a/src/packages/numberkeyboard/doc.md +++ b/src/packages/numberkeyboard/doc.md @@ -128,6 +128,8 @@ export default App; ### 带标题栏键盘 +可使用 `rightActions` 设置标题右侧内容，默认为 `完成`。 + :::demo ```tsx @@ -253,10 +255,11 @@ export default App; | --- | --- | --- | --- | | visible | 是否显示键盘 | `boolean` | `false` | | title | 键盘标题 | `ReactNode` | `-` | +| rightActions | 标题右侧内容 | `ReactNode` | `-` | | type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `'default' \| 'rightColumn'` | `default` | | random | 随机数 | `boolean` | `false` | | custom | 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项 | `string[]` | `-` | -| confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | +| confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等，搭配 `rightColumn` 使用| `string` | `完成` | | onChange | 点击按键时触发 | `(value: string) => void` | `-` | | onDelete | 点击删除键时触发 | `-` | `-` | | onClose | 点击关闭按钮或非键盘区域时触发 | `-` | `-` | diff --git a/src/packages/numberkeyboard/doc.taro.md b/src/packages/numberkeyboard/doc.taro.md index 4d44fa115e..eaf0628d23 100644 --- a/src/packages/numberkeyboard/doc.taro.md +++ b/src/packages/numberkeyboard/doc.taro.md @@ -128,6 +128,8 @@ export default App; ### 带标题栏键盘 +可使用 `rightActions` 设置标题右侧内容，默认为 `完成`。 + :::demo ```tsx @@ -253,10 +255,11 @@ export default App; | --- | --- | --- | --- | | visible | 是否显示键盘 | `boolean` | `false` | | title | 键盘标题 | `ReactNode` | `-` | +| rightActions | 标题右侧内容 | `ReactNode` | `-` | | type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `'default' \| 'rightColumn'` | `default` | | random | 随机数 | `boolean` | `false` | | custom | 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项 | `string[]` | `-` | -| confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | +| confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等，搭配 `rightColumn` 使用 | `string` | `完成` | | onChange | 点击按键时触发 | `(value: string) => void` | `-` | | onDelete | 点击删除键时触发 | `-` | `-` | | onClose | 点击关闭按钮或非键盘区域时触发 | `-` | `-` | diff --git a/src/packages/numberkeyboard/doc.zh-TW.md b/src/packages/numberkeyboard/doc.zh-TW.md index 209657238f..16eab69e0f 100644 --- a/src/packages/numberkeyboard/doc.zh-TW.md +++ b/src/packages/numberkeyboard/doc.zh-TW.md @@ -128,6 +128,8 @@ export default App; ### 帶標題欄鍵盤 +可使用 `rightActions` 設置標題右側內容，默認為 `完成`。 + :::demo ```tsx @@ -253,16 +255,17 @@ export default App; | --- | --- | --- | --- | | visible | 是否顯示鍵盤 | `boolean` | `false` | | title | 鍵盤標題 | `ReactNode` | `-` | +| rightActions | 標題右側內容 | `ReactNode` | `-` | | type | 鍵盤模式, default：默認樣式 rightColumn：帶右側欄 | `'default' \| 'rightColumn'` | `default` | | random | 隨機數 | `boolean` | `false` | | custom | 自定義鍵盤額外的鍵, 數組形式最多支持添加 2 個, 超出默認取前 2 項 | `string[]` | `-` | -| confirmText | 自定義完成按鈕文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | +| confirmText | 自定義完成按鈕文字，如"支付"，"下一步"，"提交"等，搭配 `rightColumn` 使用| `string` | `完成` | | onChange | 點擊按鍵時觸發 | `(value: string) => void` | `-` | | onDelete | 點擊刪除鍵時觸發 | `-` | `-` | | onClose | 點擊關閉按鈕或非鍵盤區域時觸發 | `-` | `-` | | onConfirm | 點擊確定按鈕時觸發 | `-` | `-` | -## 主題定制 +## 主題定製 ### 樣式變量 diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx index 69ef630870..8cc9b0cb5c 100644 --- a/src/packages/numberkeyboard/numberkeyboard.taro.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.taro.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useMemo, useState } from 'react' +import React, { FunctionComponent, ReactNode, useMemo, useState } from 'react' import classNames from 'classnames' import { ArrowDown } from '@nutui/icons-react-taro' import { View } from '@tarojs/components' @@ -9,6 +9,7 @@ import { ComponentDefaults } from '@/utils/typings' export interface NumberKeyboardProps extends PopupProps { visible: boolean + rightActions: ReactNode confirmText?: string type: 'default' | 'rightColumn' custom: Array @@ -21,6 +22,7 @@ export interface NumberKeyboardProps extends PopupProps { const defaultProps = { ...ComponentDefaults, visible: false, + rightActions: '', type: 'default', custom: [], random: false, @@ -34,6 +36,7 @@ export const NumberKeyboard: FunctionComponent< const { locale } = useConfig() const { title, + rightActions, confirmText, visible, type, @@ -154,7 +157,7 @@ export const NumberKeyboard: FunctionComponent< className={`${classPrefix}-header-close`} onClick={onConfirm} > - {locale.done} + {rightActions || locale.done} )} diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx index b785624566..2edb273c6f 100644 --- a/src/packages/numberkeyboard/numberkeyboard.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useMemo, useState } from 'react' +import React, { FunctionComponent, ReactNode, useMemo, useState } from 'react' import classNames from 'classnames' import { ArrowDown } from '@nutui/icons-react' import Popup from '@/packages/popup' @@ -8,6 +8,7 @@ import { ComponentDefaults } from '@/utils/typings' export interface NumberKeyboardProps extends PopupProps { visible: boolean + rightActions: ReactNode confirmText?: string type: 'default' | 'rightColumn' custom: Array @@ -20,6 +21,7 @@ export interface NumberKeyboardProps extends PopupProps { const defaultProps = { ...ComponentDefaults, visible: false, + rightActions: '', type: 'default', custom: [], random: false, @@ -33,6 +35,7 @@ export const NumberKeyboard: FunctionComponent< const { locale } = useConfig() const { title, + rightActions, confirmText, visible, type, @@ -158,7 +161,7 @@ export const NumberKeyboard: FunctionComponent< className={`${classPrefix}-header-close`} onClick={onConfirm} > - {locale.done} + {rightActions || locale.done} )}