Count Down

#CountDown component

The part of the countdown component that calls the backend interface to send the request is implemented by the developer (including mobile phone number verification, etc.).

Effect demonstration

1. Default configuration

import { Form, CountDown, InputItem } from "packages/components";
const { FormItem, useForm } = Form;
const [form] = useForm();

<Form onFinish={handleFinish} form={form}>
  <Form.FormListItem
    title="Phone number"
    required
    name="useCharacter"
    rules={[
      {
        required: true,
        message: "Please enter your phone number",
      },
    ]}
  >
    <InputItem
      keyboardType="number-pad"
      border={false}
      placeholder="Please enter your phone number"
      inputStyle={{ textAlign: "right" }}
    />
  </Form.FormListItem>
  <WhiteSpace size="x4" />
  <FormItem
    type={bordered ? "all" : "bottom"}
    name="sms"
    rules={[{ required: true, message: "Please enter verification code" }]}
  >
    <CountDown
      bordered={false}
      onSend={() => {
        // Send code
        console.log(form.getFieldValue("useCharacter"));
      }}
    />
  </FormItem>
  <WhiteSpace size="x4" />
  <Button title="Login" onPress={() => {}} />
</Form>;

2. Configure codeType

<Form onFinish={handleFinish} form={form}>
  <FormListItem
    title="Mobile phone number"
    required
    name="useCharacter"
    rules={[
      { required: true, message: "Please enter your mobile phone number" },
    ]}
  >
    <InputItem
      border={false}
      placeholder="Please enter your mobile phone number"
      inputStyle={{ textAlign: "right" }}
    />
  </FormListItem>
  <WhiteSpace size="x4" />
  <FormItem
    type={bordered ? "all" : "bottom"}
    name="sms"
    rules={[{ required: true, message: "Please enter the verification code" }]}
  >
    <CountDown
      bordered={bordered}
      codeType="border"
      onSend={() => {
        console.log("123");
      }}
    />
  </FormItem>
</Form>

API

Properties	Required	Description	Type	Default Value
label	false	Countdown text	string	Get verification code
resendLabel	false	Resend text	string	Resend
count	false	Countdown duration	number	60
onBefore	false	Callback before sending verification code	() => Promise<boolean>
onSend	true	Send verification code	() => void
onEnd	false	Callback after countdown ends	() => void
bordered	false	Whether to display the outer border	boolean	false
codeType	false	Whether the verification code style has a border	normal | border	normal
brief	false	Extras	ReactNode
style	false	Input box custom style	ViewStyle
activeOpacity	false	Opacity when pressed	number	0.6
placeholder	false	default prompt	string
leftIcon	false	left icon	ReactNode
value	false	Verification code value	string
onChange	false	Input change event	(value: string) => void