feat(shortpassword): 支持自动聚焦 (#693)

src/packages/shortpassword/demo.taro.tsx

@@ -29,6 +29,7 @@ const ShortPasswordDemo = () => {
   const [visible2, setVisible2] = useState(false)
   const [visible3, setVisible3] = useState(false)
   const [visible4, setVisible4] = useState(false)
+  const [visible5, setVisible5] = useState(false)
   const [value, setValue] = useState<string | number>('')
   const change = (value: number | string) => {
     setValue(value)
@@ -129,6 +130,23 @@ const ShortPasswordDemo = () => {
             SetShow(false)
           }}
         />
+        <h2>自动聚焦</h2>
+        <Cell
+          title="自动聚焦"
+          isLink
+          onClick={() => {
+            setVisible5(true)
+          }}
+        />
+        <ShortPassword
+          visible={visible5}
+          modelValue={value}
+          onClose={() => {
+            setVisible5(false)
+            setValue('')
+          }}
+          autoFocus
+        />
       </div>
     </>
   )

src/packages/shortpassword/demo.tsx

@@ -29,6 +29,7 @@ const ShortPasswordDemo = () => {
   const [visible2, setVisible2] = useState(false)
   const [visible3, setVisible3] = useState(false)
   const [visible4, setVisible4] = useState(false)
+  const [visible5, setVisible5] = useState(false)
   const [value, setValue] = useState<string | number>('')
   const change = (value: number | string) => {
     console.log(value)
@@ -109,6 +110,23 @@ const ShortPasswordDemo = () => {
         }}
         onTips={() => onTips()}
       />
+      <h2>自动聚焦</h2>
+      <Cell
+        title="自动聚焦"
+        isLink
+        onClick={() => {
+          setVisible5(true)
+        }}
+      />
+      <ShortPassword
+        visible={visible5}
+        modelValue={value}
+        onClose={() => {
+          setVisible5(false)
+          setValue('')
+        }}
+        autoFocus
+      />
     </div>
   )
 }

src/packages/shortpassword/doc.en-US.md

@@ -191,6 +191,7 @@ export default App;
 | noButton              | whether to hide the bottom button    | Boolean        | true                         |
 | length                 | ShortPassword lenght The value is 4~6 | String｜Number | 6                            |
 | errorMsg              | Error message         | String         | ''                           |
+| autoFocus              | Be focused when ShortPassword is displayed | Boolean         | false                           |
 
 ### Events
 

src/packages/shortpassword/doc.md

@@ -189,6 +189,7 @@ export default App;
 | noButton              | 是否隐藏底部按钮    | Boolean        | true                         |
 | length                 | 密码长度，取值为4~6 | String｜Number | 6                            |
 | errorMsg              | 错误信息提示        | String         | ''                           |
+| autoFocus              | 自动聚焦        | Boolean         | false                           |
 
 ### Events
 

src/packages/shortpassword/doc.taro.md

@@ -188,6 +188,7 @@ export default App;
 | noButton              | 是否隐藏底部按钮    | Boolean        | true                         |
 | length                 | 密码长度，取值为4~6 | String｜Number | 6                            |
 | errorMsg              | 错误信息提示        | String         | ''                           |
+| autoFocus              | 自动聚焦        | Boolean         | false                           |
 
 ### Events
 

src/packages/shortpassword/doc.zh-TW.md

@@ -189,6 +189,7 @@ export default App;
 | noButton              | 是否隱藏底部按鈕    | Boolean        | true                         |
 | length                 | 密碼長度，取值為4~6 | String｜Number | 6                            |
 | errorMsg              | 錯誤信息提示        | String         | ''                           |
+| autoFocus              | 自動聚焦        | Boolean         | false                           |
 
 ### Events
 

src/packages/shortpassword/shortpassword.taro.tsx

@@ -24,6 +24,7 @@ export interface ShortPasswordProps extends BasicComponent {
   length: string | number
   className: string
   style?: CSSProperties
+  autoFocus?: boolean
   onChange: (value: string | number) => void
   onOk: (value: string | number) => void
   onCancel: () => void
@@ -44,6 +45,7 @@ const defaultProps = {
   closeOnClickOverlay: true,
   length: 6, // 1~6
   className: '',
+  autoFocus: false,
   onChange: (value: number | string) => {},
   onOk: (value: number | string) => {},
   onCancel: () => {},
@@ -76,6 +78,7 @@ export const ShortPassword: FunctionComponent<
     onComplete,
     iconClassPrefix,
     iconFontClassName,
+    autoFocus,
     ...reset
   } = props
   const b = bem('shortpassword')
@@ -163,6 +166,7 @@ export const ShortPassword: FunctionComponent<
               style={systemStyle()}
               maxLength={6}
               value={inputValue}
+              autoFocus={autoFocus}
               onChange={(e) => changeValue(e)}
             />
             <div className={b('input-site')} />

src/packages/shortpassword/shortpassword.tsx

@@ -24,6 +24,7 @@ export interface ShortPasswordProps extends BasicComponent {
   length: string | number
   className: string
   style?: CSSProperties
+  autoFocus?: boolean
   onChange: (value: string | number) => void
   onOk: (value: string | number) => void
   onCancel: () => void
@@ -44,6 +45,7 @@ const defaultProps = {
   closeOnClickOverlay: true,
   length: 6, // 1~6
   className: '',
+  autoFocus: false,
   onChange: (value: number | string) => {},
   onOk: (value: number | string) => {},
   onCancel: () => {},
@@ -76,6 +78,7 @@ export const ShortPassword: FunctionComponent<
     onComplete,
     iconClassPrefix,
     iconFontClassName,
+    autoFocus,
     ...reset
   } = props
   const b = bem('shortpassword')
@@ -163,6 +166,7 @@ export const ShortPassword: FunctionComponent<
               style={systemStyle()}
               maxLength={6}
               value={inputValue}
+              autoFocus={autoFocus}
               onChange={(e) => changeValue(e)}
             />
             <div className={b('input-site')} />