zarm & react-hook-form

[Yang03]

import * as React from "react";
import { useForm } from "react-hook-form";
import { Input, Cell, Button, Message, Icon } from "zarm";

import 'zarm/dist/zarm.min.css';

function Demo() {
  const { trigger, register, handleSubmit, setValue, errors } = useForm({
    // mode: 'onBlur',
    reValidateMode: 'onChange',
   });

   const onSubmit = data => console.log(data);

   const handleChange = (name, value) => {
     console.log(name, value)
     setValue(name, value );
   }

   React.useEffect(() => {
     register({name: 'name'}, {required: true, pattern: {
       value: /[A-Za-z]{3}/,
       message: '最少三个英文字符' // <p>error message</p>
     }}); // custom register Antd input

     register({name: 'applicantCertiNo'}, {required: true});
     register({name: 'applicantPhone'}, {required: true});
   }, [register])
   return (
     <div style={{margin: '20px'}}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Cell title="投保人姓名" help={errors.name ? <Message theme="danger" icon={<Icon type="warning-round" size="sm" />}>{errors.name.message || '必填'}</Message> : ''}>
           <Input name="name" onChange={(value) => handleChange('name', value)} placeholder="投保人姓名"  onBlur={() => trigger('name')}/>
         </Cell>
         <Cell title="身份证号码" help={errors.applicantCertiNo ? <Message theme="danger" icon={<Icon type="warning-round" size="sm" />}>{errors.applicantCertiNo.message || '必填'}</Message> : ''}>
           <Input name="applicantCertiNo" onChange={(value) => handleChange('applicantCertiNo', value)} placeholder="身份证号码"/>
         </Cell>
         <Cell title="手机号"  help={errors.applicantPhone ? <Message theme="danger" icon={<Icon type="warning-round" size="sm" />}>{errors.applicantPhone.message || '必填'}</Message> : ''} description={<Button size="sm" onClick={(value) => trigger('applicantPhone')} >发送验证码</Button>}>
           <Input name="applicantPhone" onChange={(value) => handleChange('applicantPhone', value)} placeholder="身份证号码"/>
         </Cell>
         <Button htmlType="submit" block>提交</Button>
       </form>
     </div>
   );
}

export default Demo

[Yang03]

https://codesandbox.io/s/y2erx?file=/src/demo.js:0-2101

[Yang03]

const canvasRef = useRef();

const drawCircle = (ctx, color, percent) => { ctx.beginPath(); ctx.lineCap = 'round'; ctx.strokeStyle = color; ctx.lineWidth = 8; ctx.arc(150, 75, 70, Math.PI 0, Math.PI percent, 0); ctx.stroke(); ctx.closePath(); };

const drawPercent = (ctx, percent = 1) => { // let max = nowSteps / userTarget + 1 // max = max >= 2 ? 2 : max const timer = setInterval(() => { if (percent < 1.5) { percent += 0.01; // drawCircle(ctx, '#ffa62b', 2); drawCircle(ctx, '#fff', percent); // this.ctx.draw() } else { clearInterval(timer); } }, 1000 / 60); };