From 2bcf9dcdc081f6a2bfbd32dfb41be0271f9f36e3 Mon Sep 17 00:00:00 2001 From: Drjingfubo <50685476+Drjingfubo@users.noreply.github.com> Date: Thu, 18 Aug 2022 10:17:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(shortpassword):=20=E4=BC=98=E5=8C=96demo?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=9B=BD=E9=99=85=E5=8C=96=20(#222)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shortpassword/_test_/index.spec.tsx | 69 +++++++++++ src/packages/shortpassword/demo.tsx | 25 +++- src/packages/shortpassword/doc.en-US.md | 110 +++++++++++------- src/packages/shortpassword/doc.md | 52 ++++++--- src/packages/shortpassword/doc.zh-TW.md | 106 ++++++++++------- src/packages/shortpassword/shortpassword.tsx | 42 ++++--- src/styles/variables.scss | 1 - 7 files changed, 283 insertions(+), 122 deletions(-) create mode 100644 src/packages/shortpassword/_test_/index.spec.tsx diff --git a/src/packages/shortpassword/_test_/index.spec.tsx b/src/packages/shortpassword/_test_/index.spec.tsx new file mode 100644 index 0000000..dd16afc --- /dev/null +++ b/src/packages/shortpassword/_test_/index.spec.tsx @@ -0,0 +1,69 @@ +import * as React from 'react' +import { fireEvent, render } from '@testing-library/react' +import '@testing-library/jest-dom' + +import { ShortPassword } from '../shortpassword' + +test('should render shortpassword when visible is true', async () => { + const { container } = render() + const input = container.querySelector('.nut-shortpassword__input-real') + expect(input).toBeTruthy() + const psdLength = container.querySelectorAll( + '.nut-shortpassword__input-fake__li' + ) + expect(psdLength.length).toBe(6) + expect((input as HTMLInputElement).value).toBe('123') +}) +test('should render buttonShortpassword and error msg when noButton is false ', () => { + let value = 0 + let inputValue: number | string = '' + const onCancel = () => { + value = 1 + } + const onOk = (value: number | string) => { + inputValue = value + } + const { container } = render( + + ) + const input = container.querySelector('.nut-shortpassword__input-real') + expect(input).toBeTruthy() + const psdLength = container.querySelectorAll( + '.nut-shortpassword__input-fake__li' + ) + expect(psdLength.length).toBe(4) + const error = container.querySelector('.nut-shortpassword__message__error') + expect(error).toBeTruthy() + expect((error as HTMLElement).innerHTML).toBe('错误信息') + const cancle = container.querySelector('.nut-shortpassword__footer__cancel') + expect(cancle).toBeTruthy() + const sure = container.querySelector('.nut-shortpassword__footer__sure') + expect(sure).toBeTruthy() + fireEvent.click(cancle as HTMLElement) + expect(value).toBe(1) + fireEvent.click(sure as HTMLElement) + expect(inputValue).toBe(123) +}) + +test('should limit input value when input', async () => { + let value = 0 + const onChange = (v: string | number) => { + value = Number(v) + } + const { container } = render( + + ) + container.querySelector('input')?.focus() + fireEvent.change(container.querySelector('input')!, { + target: { value: '111111' }, + }) + expect(value).toBe(1111) +}) diff --git a/src/packages/shortpassword/demo.tsx b/src/packages/shortpassword/demo.tsx index cce447a..f92a585 100644 --- a/src/packages/shortpassword/demo.tsx +++ b/src/packages/shortpassword/demo.tsx @@ -29,8 +29,11 @@ const ShortPasswordDemo = () => { setVisible1(false)} - change={(value) => change(value)} + onClose={() => { + setVisible1(false) + setValue('') + }} + onChange={(value) => change(value)} />

显示按钮组

{ /> setVisible2(false)} + modelValue={value} + onClose={() => { + setVisible2(false) + setValue('') + }} noButton={false} onOk={() => setVisible2(false)} onCancel={() => setVisible2(false)} @@ -57,7 +64,11 @@ const ShortPasswordDemo = () => { /> setVisible3(false)} + modelValue={value} + onClose={() => { + setVisible3(false) + setValue('') + }} length={4} />

忘记密码提示语事件回调

@@ -70,7 +81,11 @@ const ShortPasswordDemo = () => { /> setVisible4(false)} + modelValue={value} + onClose={() => { + setVisible4(false) + setValue('') + }} onTips={() => onTips()} /> diff --git a/src/packages/shortpassword/doc.en-US.md b/src/packages/shortpassword/doc.en-US.md index b8ddd68..238cb42 100644 --- a/src/packages/shortpassword/doc.en-US.md +++ b/src/packages/shortpassword/doc.en-US.md @@ -1,18 +1,18 @@ -# ShortPassword 短密码 +# ShortPassword -### 介绍 +### Intro -短密码输入框，可用于输入密码、短信验证码等 +Short password input box, which can be used to enter passwords, SMS verification codes, etc. -### 安装 +### Install ```js import { ShortPassword } from '@nutui/nutui-react'; ``` -## 代码演示 +## Demo -### 基础用法 +### Basic Usage :::demo ```tsx import React, { useState } from "react"; @@ -21,13 +21,14 @@ import { Cell,ShortPassword } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -36,8 +37,8 @@ const App = () => { setVisible(false)} - change={(value) => change(value)} + onClose={() => close()} + onChange={(value) => setValue(value)} /> ) @@ -45,8 +46,11 @@ const App = () => { export default App; ``` +::: + -### 显示按钮组 +### Show Button Group +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -56,11 +60,15 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -68,8 +76,10 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onClose={() => close()} noButton={false} + onChange={(value) => setValue(value)} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} /> @@ -79,8 +89,11 @@ const App = () => { export default App; ``` +::: + -### 自定义密码长度4 +### Custom Password Length +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -90,11 +103,15 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -102,7 +119,9 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} length={4} /> @@ -111,7 +130,10 @@ const App = () => { export default App; ``` -### 忘记密码提示语事件回调 +::: + +### Forget password callback +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; @@ -119,24 +141,27 @@ import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) - } const onTips = () => { - Toast.text('执行忘记密码提示语') + Toast.text('Execute forgotten password logic') + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) }} /> - setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} onTips={() => onTips()} /> @@ -145,6 +170,7 @@ const App = () => { export default App; ``` +::: @@ -152,25 +178,25 @@ export default App; ### Props -| 参数 | 说明 | 类型 | 默认值 | +| Attribute | Description | Type | Default | |--------------|----------------------------------|--------|------------------| -| modelValue | 密码初始值 | String｜Number | - | -| visible | 是否展示短密码框 | Boolean | false | -| title | 标题 | String | 请输入密码 | -| desc | 密码框描述 | String | 您使用了虚拟资产，请进行验证 | -| tips | 提示语 | String | 忘记密码 | -| closeOnClickOverlay | 是否点击遮罩关闭 | Boolean | true | -| noButton | 是否隐藏底部按钮 | Boolean | true | -| length | 密码长度，取值为4~6 | String｜Number | 6 | -| errorMsg | 错误信息提示 | String | '' | +| modelValue | Current value | String｜Number | - | +| visible | Whether to show shortpassword | Boolean | false | +| title | title | String | Please input a password | +| desc | desc | String | Verify | +| tips | tips | String | Forget password | +| closeOnClickOverlay | Click to close the mask | Boolean | true | +| noButton | whether to hide the bottom button | Boolean | true | +| length | ShortPassword lenght The value is 4~6 | String｜Number | 6 | +| errorMsg | Error message | String | '' | ### Events -| 事件名 | 说明 | 回调参数 | +| Event | Description | Arguments | |--------|----------------|--------------| -| change | 输入密码时触发事件 | 当前输入框值value | -| onOk | 点击确实时触发事件 | 当前输入框值value | -| onCancel | 点击取消时触发事件 | - | -| onClose | 点击关闭图标和遮罩时触发事件 | - | -| onTips | 点击忘记密码时触发事件 | - | -| complete | 输入完成的回调 | 当前输入框值value | +| onChange | Trigger event when password is entered | value | +| onOk | Trigger event when true is clicked | value | +| onCancel | Trigger an event when the popup layer is clicked or canceled | - | +| onClose | Trigger an event when the close icon is clicked | - | +| onTips | Trigger an event when the forget password is clicked | - | +| onComplete | Input complete callback | value | diff --git a/src/packages/shortpassword/doc.md b/src/packages/shortpassword/doc.md index b8ddd68..273d51f 100644 --- a/src/packages/shortpassword/doc.md +++ b/src/packages/shortpassword/doc.md @@ -21,8 +21,9 @@ import { Cell,ShortPassword } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> @@ -36,8 +37,8 @@ const App = () => { setVisible(false)} - change={(value) => change(value)} + onClose={() => close()} + onChange={(value) => setValue(value)} /> ) @@ -45,8 +46,11 @@ const App = () => { export default App; ``` +::: + ### 显示按钮组 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -56,6 +60,10 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> @@ -68,8 +76,10 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onClose={() => close()} noButton={false} + onChange={(value) => setValue(value)} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} /> @@ -79,8 +89,10 @@ const App = () => { export default App; ``` +::: ### 自定义密码长度4 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -90,6 +102,10 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> @@ -102,7 +118,9 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} length={4} /> @@ -111,7 +129,9 @@ const App = () => { export default App; ``` +::: ### 忘记密码提示语事件回调 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; @@ -119,11 +139,12 @@ import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) - } const onTips = () => { Toast.text('执行忘记密码提示语') + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> @@ -136,7 +157,9 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} onTips={() => onTips()} /> @@ -145,6 +168,7 @@ const App = () => { export default App; ``` +::: @@ -154,7 +178,7 @@ export default App; | 参数 | 说明 | 类型 | 默认值 | |--------------|----------------------------------|--------|------------------| -| modelValue | 密码初始值 | String｜Number | - | +| modelValue | 内容 | String｜Number | - | | visible | 是否展示短密码框 | Boolean | false | | title | 标题 | String | 请输入密码 | | desc | 密码框描述 | String | 您使用了虚拟资产，请进行验证 | @@ -168,9 +192,9 @@ export default App; | 事件名 | 说明 | 回调参数 | |--------|----------------|--------------| -| change | 输入密码时触发事件 | 当前输入框值value | -| onOk | 点击确实时触发事件 | 当前输入框值value | +| onChange | 输入密码时触发事件 | 当前输入框值value | +| onOk | 点击确认时触发事件 | 当前输入框值value | | onCancel | 点击取消时触发事件 | - | | onClose | 点击关闭图标和遮罩时触发事件 | - | | onTips | 点击忘记密码时触发事件 | - | -| complete | 输入完成的回调 | 当前输入框值value | +| onComplete | 输入完成的回调 | 当前输入框值value | diff --git a/src/packages/shortpassword/doc.zh-TW.md b/src/packages/shortpassword/doc.zh-TW.md index b8ddd68..5672396 100644 --- a/src/packages/shortpassword/doc.zh-TW.md +++ b/src/packages/shortpassword/doc.zh-TW.md @@ -1,18 +1,18 @@ -# ShortPassword 短密码 +# ShortPassword -### 介绍 +### 介紹 -短密码输入框，可用于输入密码、短信验证码等 +短密碼輸入框，可用於輸入密碼、短信驗證碼等 -### 安装 +### 安裝 ```js import { ShortPassword } from '@nutui/nutui-react'; ``` -## 代码演示 +## 代碼演示 -### 基础用法 +### 基礎用法 :::demo ```tsx import React, { useState } from "react"; @@ -21,13 +21,14 @@ import { Cell,ShortPassword } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -36,8 +37,8 @@ const App = () => { setVisible(false)} - change={(value) => change(value)} + onClose={() => close()} + onChange={(value) => setValue(value)} /> ) @@ -45,8 +46,11 @@ const App = () => { export default App; ``` +::: -### 显示按钮组 + +### 顯示按鈕組 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -56,11 +60,15 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -68,8 +76,10 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onClose={() => close()} noButton={false} + onChange={(value) => setValue(value)} onOk={() => setVisible(false)} onCancel={() => setVisible(false)} /> @@ -79,8 +89,10 @@ const App = () => { export default App; ``` +::: -### 自定义密码长度4 +### 自定義密碼長度 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword } from '@nutui/nutui-react'; @@ -90,11 +102,15 @@ const App = () => { const [value,setValue] = useState('') const change = (value)=>{ setValue(value) + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -102,7 +118,9 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} length={4} /> @@ -111,7 +129,9 @@ const App = () => { export default App; ``` -### 忘记密码提示语事件回调 +::: +### 忘記密碼提示語事件回調 +:::demo ```tsx import React, { useState } from "react"; import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; @@ -119,16 +139,17 @@ import { Cell,ShortPassword,Toast } from '@nutui/nutui-react'; const App = () => { const [visible,setVisible] = useState(false) const [value,setValue] = useState('') - const change = (value)=>{ - setValue(value) - } const onTips = () => { - Toast.text('执行忘记密码提示语') + Toast.text('執行忘記密碼提示語') + } + const close = ()=>{ + setVisible(false) + setValue('') } return ( <> { setVisible(true) @@ -136,7 +157,9 @@ const App = () => { /> setVisible(false)} + modelValue={value} + onChange={(value) => setValue(value)} + onClose={() => close()} onTips={() => onTips()} /> @@ -145,6 +168,7 @@ const App = () => { export default App; ``` +::: @@ -152,25 +176,25 @@ export default App; ### Props -| 参数 | 说明 | 类型 | 默认值 | +| 參數 | 說明 | 類型 | 默認值 | |--------------|----------------------------------|--------|------------------| -| modelValue | 密码初始值 | String｜Number | - | -| visible | 是否展示短密码框 | Boolean | false | -| title | 标题 | String | 请输入密码 | -| desc | 密码框描述 | String | 您使用了虚拟资产，请进行验证 | -| tips | 提示语 | String | 忘记密码 | -| closeOnClickOverlay | 是否点击遮罩关闭 | Boolean | true | -| noButton | 是否隐藏底部按钮 | Boolean | true | -| length | 密码长度，取值为4~6 | String｜Number | 6 | -| errorMsg | 错误信息提示 | String | '' | +| modelValue | 內容 | String｜Number | - | +| visible | 是否展示短密碼框 | Boolean | false | +| title | 標題 | String | 請輸入密碼 | +| desc | 密碼框描述 | String | 您使用了虛擬資產，請進行驗證| +| tips | 提示語 | String | 忘記密碼 | +| closeOnClickOverlay | 是否點擊遮罩關閉 | Boolean | true | +| noButton | 是否隱藏底部按鈕 | Boolean | true | +| length | 密碼長度，取值為4~6 | String｜Number | 6 | +| errorMsg | 錯誤信息提示 | String | '' | ### Events -| 事件名 | 说明 | 回调参数 | +| 事件名 | 說明 | 回調參數 | |--------|----------------|--------------| -| change | 输入密码时触发事件 | 当前输入框值value | -| onOk | 点击确实时触发事件 | 当前输入框值value | -| onCancel | 点击取消时触发事件 | - | -| onClose | 点击关闭图标和遮罩时触发事件 | - | -| onTips | 点击忘记密码时触发事件 | - | -| complete | 输入完成的回调 | 当前输入框值value | +| onChange | 輸入密碼時觸發事件 | value | +| onOk | 點擊確認時觸發事件 | value | +| onCancel | 點擊取消時觸發事件 | - | +| onClose | 點擊關閉圖標和遮罩時觸發事件 | - | +| onTips | 點擊忘記密碼時觸發事件 | - | +| onComplete | 輸入完成的回調 | value | diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx index f105c03..8d6b972 100644 --- a/src/packages/shortpassword/shortpassword.tsx +++ b/src/packages/shortpassword/shortpassword.tsx @@ -22,17 +22,17 @@ export interface ShortPasswordProps { length: string | number className: string style?: CSSProperties - change: (value: string | number) => void + onChange: (value: string | number) => void onOk: (value: string | number) => void onCancel: () => void onClose: () => void onTips: () => void - complete: (value: string | number) => void + onComplete: (value: string | number) => void } const defaultProps = { - title: '请输入密码', - desc: '您使用了虚拟资产，请进行验证', - tips: '忘记密码', + title: '', + desc: '', + tips: '', visible: false, modelValue: '', errorMsg: '', @@ -40,15 +40,16 @@ const defaultProps = { closeOnClickOverlay: true, length: 6, // 1~6 className: '', - change: (value: number | string) => {}, + onChange: (value: number | string) => {}, onOk: (value: number | string) => {}, onCancel: () => {}, onClose: () => {}, onTips: () => {}, - complete: (value: number | string) => {}, + onComplete: (value: number | string) => {}, } as ShortPasswordProps export const ShortPassword: FunctionComponent< - Partial & React.HTMLAttributes + Partial & + Omit, 'onChange'> > = (props) => { const { locale } = useConfig() const { @@ -63,12 +64,12 @@ export const ShortPassword: FunctionComponent< length, style, className, - change, + onChange, onOk, onTips, onCancel, onClose, - complete, + onComplete, ...reset } = props const b = bem('shortpassword') @@ -83,7 +84,7 @@ export const ShortPassword: FunctionComponent< setInnerVisible(visible) }, [visible]) useEffect(() => { - if (modelValue) { + if (typeof modelValue !== 'undefined') { setInputValue(modelValue) } }, [modelValue]) @@ -94,25 +95,28 @@ export const ShortPassword: FunctionComponent< } setInputValue(inputValue) if (String(inputValue).length === comLen) { - complete && complete(inputValue) + onComplete && onComplete(inputValue) } - change && change(inputValue) + onChange && onChange(inputValue) } const systemStyle = () => { const u = navigator.userAgent const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 + let style = {} + console.log(isIOS, isAndroid) if (isIOS) { - return { + style = { paddingRight: '1200px', } } if (isAndroid) { - return { + style = { opacity: 0, zIndex: 10, } } + return style } const focus = () => { if (textInput.current) { @@ -139,10 +143,10 @@ export const ShortPassword: FunctionComponent< >
- {locale.shortpassword.title || title} + {title || locale.shortpassword.title}
- {locale.shortpassword.desc || desc} + {desc || locale.shortpassword.desc}
@@ -170,10 +174,10 @@ export const ShortPassword: FunctionComponent<
{errorMsg}
- {tips ? ( + {tips || locale.shortpassword.tips ? (
-
{locale.shortpassword.tips || tips}
+
{tips || locale.shortpassword.tips}
) : null}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 8250ecb..32f13ab 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -495,7 +495,6 @@ $divider-vertical-top: 2px !default; $divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default; $divider-vertical-margin: 0 8px !default; - // swiper $swiper-pagination-item-background-color: #ddd !default; -- GitLab