refactor(numberkeyboard): optimize code & correct defaultProps (#2508)

* refactor(numberkeyboard): refactor * chore: delete useless
jdf2e · Aug 2, 2024 · 1a35e29 · 1a35e29
1 parent 5511672
commit 1a35e29
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 36 deletions.
diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx
@@ -49,7 +49,7 @@ export const NumberKeyboard: FunctionComponent<
     onClose,
     onConfirm,
     ...rest
-  } = props
+  } = { ...defaultProps, ...props }
   const classPrefix = 'nut-numberkeyboard'
 
   const getBasicKeys = () => {
@@ -100,17 +100,37 @@ export const NumberKeyboard: FunctionComponent<
     }
     const onTouchEnd = (item: { id: string; type: string }) => {
       setActive(false)
-      if (item.type === 'num' || item.type === 'custom') {
-        onChange && onChange(item.id)
+      switch (item.type) {
+        case 'num':
+        case 'custom':
+          onChange?.(item.id)
+          break
+        case 'close':
+          onClose?.()
+          break
+        case 'delete':
+          onDelete?.()
+          break
+        case 'confirm':
+          onConfirm?.()
+          break
+        default:
+          break
       }
-      if (item.type === 'close') {
-        onClose && onClose()
-      }
-      if (item.type === 'delete') {
-        onDelete && onDelete()
-      }
-      if (item.type === 'confirm') {
-        onConfirm && onConfirm()
+    }
+    const renderContent = (item: { id: string; type: string }) => {
+      switch (item.type) {
+        case 'num':
+        case 'custom':
+          return <div>{item.id}</div>
+        case 'delete':
+          return <DeleteIcon />
+        case 'close':
+          return <ArrowDown size={18} />
+        case 'confirm':
+          return <>{confirmText || locale.done}</>
+        default:
+          return null
       }
     }
     return (
@@ -127,26 +147,21 @@ export const NumberKeyboard: FunctionComponent<
           onTouchEnd={() => onTouchEnd(item)}
           onTouchCancel={() => onTouchEnd(item)}
         >
-          {(item.type === 'num' || item.type === 'custom') && (
-            <div>{item.id}</div>
-          )}
-          {item.type === 'delete' && <DeleteIcon />}
-          {item.type === 'close' && <ArrowDown size={18} />}
-          {item.type === 'confirm' && <>{confirmText || locale.done}</>}
+          {renderContent(item)}
         </div>
       </div>
     )
   }
 
   return (
     <Popup
+      {...rest}
       visible={visible}
       position="bottom"
       onOverlayClick={onClose}
       onCloseIconClick={onClose}
       zIndex={9999}
       overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
-      {...rest}
     >
       <div className={classNames(classPrefix, className)} style={style}>
         {title && (

diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx
@@ -48,7 +48,7 @@ export const NumberKeyboard: FunctionComponent<
     onClose,
     onConfirm,
     ...rest
-  } = props
+  } = { ...defaultProps, ...props }
   const classPrefix = 'nut-numberkeyboard'
 
   const getBasicKeys = () => {
@@ -104,17 +104,37 @@ export const NumberKeyboard: FunctionComponent<
     }
     const onTouchEnd = (item: { id: string; type: string }) => {
       setActive(false)
-      if (item.type === 'num' || item.type === 'custom') {
-        onChange && onChange(item.id)
+      switch (item.type) {
+        case 'num':
+        case 'custom':
+          onChange?.(item.id)
+          break
+        case 'close':
+          onClose?.()
+          break
+        case 'delete':
+          onDelete?.()
+          break
+        case 'confirm':
+          onConfirm?.()
+          break
+        default:
+          break
       }
-      if (item.type === 'close') {
-        onClose && onClose()
-      }
-      if (item.type === 'delete') {
-        onDelete && onDelete()
-      }
-      if (item.type === 'confirm') {
-        onConfirm && onConfirm()
+    }
+    const renderContent = (item: { id: string; type: string }) => {
+      switch (item.type) {
+        case 'num':
+        case 'custom':
+          return <div>{item.id}</div>
+        case 'delete':
+          return <DeleteIcon />
+        case 'close':
+          return <ArrowDown width={18} height={18} />
+        case 'confirm':
+          return <>{confirmText || locale.done}</>
+        default:
+          return null
       }
     }
     return (
@@ -131,26 +151,21 @@ export const NumberKeyboard: FunctionComponent<
           onTouchEnd={() => onTouchEnd(item)}
           onTouchCancel={() => onTouchEnd(item)}
         >
-          {(item.type === 'num' || item.type === 'custom') && (
-            <div>{item.id}</div>
-          )}
-          {item.type === 'delete' && <DeleteIcon />}
-          {item.type === 'close' && <ArrowDown width={18} height={18} />}
-          {item.type === 'confirm' && <>{confirmText || locale.done}</>}
+          {renderContent(item)}
         </div>
       </div>
     )
   }
 
   return (
     <Popup
+      {...rest}
       visible={visible}
       position="bottom"
       onOverlayClick={onClose}
       onCloseIconClick={onClose}
       zIndex={9999}
       overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
-      {...rest}
     >
       <div className={classNames(classPrefix, className)} style={style}>
         {title && (