feat(numberkeyboard): add title right actions (jdf2e#1881)

src/packages/numberkeyboard/demo.taro.tsx

@@ -113,6 +113,7 @@ const NumberKeyboardDemo = () => {
         <NumberKeyboard
           visible={visible4}
           title={translated.title}
+          rightActions={<span>Done</span>}
           custom={['.']}
           onChange={onChange}
           onDelete={onDelete}

src/packages/numberkeyboard/demo.tsx

@@ -103,6 +103,7 @@ const NumberKeyboardDemo = () => {
       <NumberKeyboard
         visible={visible4}
         title={translated.title}
+        rightActions={<span>Done</span>}
         custom={['.']}
         onChange={onChange}
         onDelete={onDelete}

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 | `-` | `-` |

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 | 点击关闭按钮或非键盘区域时触发 | `-` | `-` |

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 | 点击关闭按钮或非键盘区域时触发 | `-` | `-` |

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 | 點擊確定按鈕時觸發 | `-` | `-` |
 
-## 主題定制
+## 主題定製
 
 ### 樣式變量
 

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<string>
@@ -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}
               </span>
             )}
           </div>

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<string>
@@ -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}
               </span>
             )}
           </div>