fix: docs (#2023)

Co-authored-by: xiaoyatong <hanyuxingint@sina.cn>

src/packages/inputnumber/demo.taro.tsx

@@ -1,54 +1,21 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import {
-  InputNumber,
-  Cell,
-  Toast,
-  ConfigProvider,
-} from '@/packages/nutui.react.taro'
+import { Cell } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
 
-interface T {
-  '6333c786': string
-  '0137871a': string
-  '84aa6bce': string
-  '55cc5fb7': string
-  '9636103a': string
-  '181965e2': string
-  e7b2ce1f: string
-  e7b2ce1g: string
-  e7b2ce1y: string
-  '3a42134b': string
-  '65bafb1d': string
-  '7e2394ae': string
-  '7e2394be': string
-}
-
-const customTheme = {
-  nutuiInputnumberButtonWidth: '30px',
-  nutuiInputnumberButtonHeight: '30px',
-  nutuiInputnumberButtonBorderRadius: '2px',
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputHeight: '30px',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme2 = {
-  nutuiInputnumberButtonWidth: '24px',
-  nutuiInputnumberButtonHeight: '24px',
-  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,
-  nutuiInputnumberInputBackgroundColor: '#fff',
-  nutuiInputnumberInputMargin: '0 2px',
-}
-
-const customTheme3 = {
-  nutuiInputnumberInputWidth: '60px',
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const InputNumberDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '6333c786': '超出限制事件触发',
       '0137871a': '异步演示2秒后更改',
@@ -57,8 +24,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制输入范围',
       '181965e2': '禁用操作',
       e7b2ce1f: '只读禁用输入框',
-      e7b2ce1g: '自定义按钮样式1',
-      e7b2ce1y: '自定义按钮样式2',
+      e7b2ce1g: '自定义按钮样式',
       '3a42134b': '支持小数点',
       '65bafb1d': '支持异步修改',
       '7e2394ae': '自定义按钮大小',
@@ -72,8 +38,7 @@ const InputNumberDemo = () => {
       '9636103a': '限制輸入範圍',
       '181965e2': '禁用操作',
       e7b2ce1f: '只讀禁用輸入框',
-      e7b2ce1g: '自定義按钮样式1',
-      e7b2ce1y: '自定義按钮样式2',
+      e7b2ce1g: '自定義按钮样式',
       '3a42134b': '支持小數點',
       '65bafb1d': '支持異步修改',
       '7e2394ae': '自定義按鈕大小',
@@ -87,125 +52,58 @@ const InputNumberDemo = () => {
       '9636103a': 'Limit input range',
       '181965e2': 'Disable operation',
       e7b2ce1f: 'read-only disabled input box',
-      e7b2ce1g: 'Custom Button CSS1',
-      e7b2ce1y: 'Custom Button CSS2',
+      e7b2ce1g: 'Custom Button CSS',
       '3a42134b': 'support decimal point',
       '65bafb1d': 'Support for asynchronous modification',
       '7e2394ae': 'custom button size',
       '7e2394be': 'support formatter',
     },
   })
 
-  const [inputValue, setInputValue] = useState(-1)
-  const overlimit = () => {
-    toastShow(translated['6333c786'], 'warn')
-  }
-  const onChange = (value: string | number) => {
-    toastShow(translated['0137871a'], 'loading')
-    setTimeout(() => {
-      setInputValue(Number(value))
-      SetShow(false)
-    }, 2000)
-  }
-  const [show, SetShow] = useState(false)
-  const [toastMsg, SetToastMsg] = useState('')
-  const [toastType, SetToastType] = useState('text')
-  const toastShow = (msg: any, type: string) => {
-    SetToastMsg(msg)
-    SetToastType(type)
-    SetShow(true)
-  }
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <InputNumber defaultValue={1} allowEmpty />
+          <Demo1 />
         </Cell>
 
         <h2>{translated['55cc5fb7']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} min={0} step={5} />
+          <Demo2 />
         </Cell>
 
         <h2>{translated['9636103a']}</h2>
         <Cell>
-          <InputNumber
-            defaultValue={10}
-            min={10}
-            max={20}
-            onOverlimit={overlimit}
-          />
+          <Demo3 />
         </Cell>
 
         <h2>{translated['181965e2']}</h2>
         <Cell>
-          <InputNumber defaultValue={0} disabled />
+          <Demo4 />
         </Cell>
 
         <h2>{translated.e7b2ce1f}</h2>
         <Cell>
-          <InputNumber defaultValue={1} readOnly />
+          <Demo5 />
         </Cell>
 
         <h2>{translated.e7b2ce1g}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
-
-        <h2>{translated.e7b2ce1y}</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme2}>
-            <InputNumber defaultValue={1} />
-          </ConfigProvider>
-        </Cell>
+        <Demo6 />
 
         <h2>{translated['3a42134b']}</h2>
         <Cell>
-          <InputNumber defaultValue={5.5} step={0.1} digits={1} readOnly />
+          <Demo7 />
         </Cell>
 
         <h2>{translated['65bafb1d']}</h2>
         <Cell>
-          <InputNumber value={inputValue} min={-6} onChange={onChange} async />
+          <Demo8 />
         </Cell>
 
         <h2>Formatter</h2>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={1000}
-              min={10}
-              max={15020}
-              formatter={(value) =>
-                `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-              }
-            />
-          </ConfigProvider>
-        </Cell>
-        <Cell>
-          <ConfigProvider theme={customTheme3}>
-            <InputNumber
-              className="format-width"
-              defaultValue={100}
-              min={0}
-              max={100}
-              formatter={(value) => `${value}%`}
-            />
-          </ConfigProvider>
-        </Cell>
-        <Toast
-          type={toastType}
-          visible={show}
-          content={toastMsg}
-          onClose={() => {
-            SetShow(false)
-          }}
-        />
+        <Demo9 />
       </div>
     </>
   )