Skip to content

Commit

Permalink
fix: docs (jdf2e#2023)
Browse files Browse the repository at this point in the history 
Co-authored-by: xiaoyatong <[email protected]>
  • Loading branch information
@xiaoyatong
xiaoyatong and xiaoyatong authored Mar 14, 2024
1 parent 3770b6d commit b06ce0e
Show file tree
Hide file tree
Showing 24 changed files with 523 additions and 1,016 deletions.
150 changes: 24 additions & 126 deletions src/packages/inputnumber/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -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秒后更改',
Expand All @@ -57,8 +24,7 @@ const InputNumberDemo = () => {
'9636103a': '限制输入范围',
'181965e2': '禁用操作',
e7b2ce1f: '只读禁用输入框',
e7b2ce1g: '自定义按钮样式1',
e7b2ce1y: '自定义按钮样式2',
e7b2ce1g: '自定义按钮样式',
'3a42134b': '支持小数点',
'65bafb1d': '支持异步修改',
'7e2394ae': '自定义按钮大小',
Expand All @@ -72,8 +38,7 @@ const InputNumberDemo = () => {
'9636103a': '限制輸入範圍',
'181965e2': '禁用操作',
e7b2ce1f: '只讀禁用輸入框',
e7b2ce1g: '自定義按钮样式1',
e7b2ce1y: '自定義按钮样式2',
e7b2ce1g: '自定義按钮样式',
'3a42134b': '支持小數點',
'65bafb1d': '支持異步修改',
'7e2394ae': '自定義按鈕大小',
Expand All @@ -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>
</>
)
Expand Down
Loading

0 comments on commit b06ce0e

Please sign in to comment.