fix(VerificationCode):优化VerificationCode倒计时组件代码和文档

hy · hy · commit ccde846516e0 · 2023-04-21T14:12:44.000+08:00
diff --git a/example/examples/src/routes/VerificationCode/index.tsx b/example/examples/src/routes/VerificationCode/index.tsx
@@ -1,95 +1,80 @@
-import React, { Component, useState } from 'react';
-import { VerificationCode } from '@uiw/react-native';
-import Layout, { Container } from '../../Layout';
-import { ComProps } from '../../routes';
+import React, {Component, useState} from 'react';
+import {VerificationCode} from '@uiw/react-native';
+import Layout, {Container} from '../../Layout';
+import {ComProps} from '../../routes';
 
-const { Header, Body, Card, Footer } = Layout;
+const {Header, Body, Card, Footer} = Layout;
 
 export interface VerificationCodeProps extends ComProps {
   onBefore?: () => Promise<boolean>;
   onSend?: () => Promise<boolean> | boolean;
 }
 
-const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
+const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
   const [value, setValue] = useState('');
   const description = route.params.description;
   const title = route.params.title;
 
   const onChange = (val: string) => {
     console.log('onChange--> 输入改变事件	 ', val);
-    setValue(val)
+    setValue(val);
   };
 
   const onBefore = async () => {
     console.log('onBefore--> 发验证码之前的回调	');
     return true;
-  }
+  };
 
   const onSend = async () => {
     console.log('onSend--> 发送验证码');
     return true;
-  }
+  };
 
   const onEnd = () => {
     console.log('onEnd--> 倒计时结束后的回调');
-  }
+  };
 
   return (
     <Container>
       <Layout>
         <Header title={title} description={description} />
-        <Body style={{ paddingLeft: 16, paddingRight: 16 }}>
+        <Body style={{paddingLeft: 16, paddingRight: 16}}>
           <Card title="基础实例">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="无边框">
             <VerificationCode
               bordered={false}
-              label='我没框框哦'
+              label="我没框框哦"
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFF' }}
+              outerStyle={{backgroundColor: '#FFF'}}
+              buttonStyle={{backgroundColor: '#fff'}}
             />
           </Card>
           <Card title="自定义倒计时文字和重新发送文字">
             <VerificationCode
-              label='点我'
-              resendLabel='好了'
+              label="点我"
+              resendLabel="好了"
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义倒计时时长">
-            <VerificationCode
-              count={10}
-              value={value}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="输入改变事件">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="发验证码之前的回调">
             <VerificationCode
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
               onBefore={onBefore}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="发送验证码">
@@ -98,7 +83,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               onSend={onSend}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="倒计时结束后的回调">
@@ -107,15 +92,15 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               onEnd={onEnd}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义外层输入框样式">
             <VerificationCode
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFD21D', borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义内层按钮样式">
@@ -124,34 +109,28 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({ route }) => {
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              buttonStyle={{ backgroundColor: '#F86E21' }}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
+              buttonStyle={{backgroundColor: '#F86E21'}}
+              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义按钮文字样式">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
           </Card>
           <Card title="自定义输入框提示文字">
             <VerificationCode
               bordered={false}
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              placeholder='请输入112233.....'
-              outerStyle={{ borderBottomWidth: 1, borderBottomColor: '#CCC' }}
+              placeholder="请输入112233....."
+              outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
             />
           </Card>
         </Body>
         <Footer />
       </Layout>
     </Container>
   );
-}
+};
 
 export default VerificationCodeDemo;
-
diff --git a/packages/core/src/VerificationCode/index.tsx b/packages/core/src/VerificationCode/index.tsx
@@ -23,15 +23,15 @@ interface VerificationCodeProps {
 }
 
 const VerificationCode: FC<VerificationCodeProps> = ({
-  bordered = true,
+  bordered = false,
   label = '获取验证码',
   resendLabel = '重新发送',
   count = 60,
   value = '',
-  onChange = () => { },
+  onChange = () => {},
   onBefore = async () => true,
   onSend = async () => true,
-  onEnd = () => { },
+  onEnd = () => {},
   outerStyle = {},
   buttonStyle = {},
   placeholder = '请输入验证码',
@@ -40,7 +40,6 @@ const VerificationCode: FC<VerificationCodeProps> = ({
   const [disabled, setDisabled] = useState(false);
   const theme = useTheme<Theme>();
 
-
   useEffect(() => {
     let interval: ReturnType<typeof setInterval>;
     if (timer > 0 && disabled) {
@@ -66,18 +65,23 @@ const VerificationCode: FC<VerificationCodeProps> = ({
   return (
     <Input
       border={null}
-      containerStyle={[{ height: 50 }, outerStyle]}
+      containerStyle={[{ height: 40 }, outerStyle]}
       placeholder={placeholder}
       value={value}
       onChangeText={(text) => onChange(text)}
       extraEnd={
-        <Button bordered={bordered} disabled={disabled} onPress={handleClick} color={theme.colors.background || '#fff'} style={buttonStyle}>
-          <Text color={disabled ? "disabled" : "text"}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
+        <Button
+          bordered={bordered}
+          disabled={disabled}
+          onPress={handleClick}
+          color={theme.colors.background || '#fff'}
+          style={buttonStyle}
+        >
+          <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
         </Button>
       }
     />
   );
 };
 
 export default VerificationCode;
-
