React Binding Toolkit

Description

A set of common React components used in binding project;

Usage

import {FormValidator, SMSButton} from "curio-binding-toolkit"

FormValidator

Example usage can be found in js/entries/test.tsx

Props

interface FormField {
    validators: InputValidator[]
    defaultValue: any
    errMsg: string
    inWhiteList?: boolean
}

interface InputValidator[] {
    (value: any) => boolean
}

interface Errors {
    [fieldName: string]: string | boolean
}

| Prop | Type | Note | | ---- | ---- | ---- | |fields|FormField[]|| |onError|(errors: Errors) => any||

Methods

| Method | Signature | Note | | --- | --- | --- | | set | (field: string, value: any) | Update field's value | | validate | (field?: string) | validate the value of field when field is provided, otherwise validate all fields |

1. Parent component need to render input component by themself, and call FormValidator.set(f, v) in onChange() method;
2. Parent component should call FormValidator.validate() before they submit the form;
3. Parent compoennt should call FormValidator.validate(fieldName) after user complete the inputting of certain field; onBlur() handler is usually where FormValidator.validate(fieldName) should be called;
4. Set a field's inWhiteList prop to true to skip this field when form is validating;

SMSButton

Props

| Prop | Type | DefaultValue | | ---- | ---- | ---- | |text |string| The default text displayed on the button| |disabledColor|string|The background color when button is disabled| "#fefefe" |countDownText|string|Text displayed on disabled button| "%s" |interval|number|The minimum interval between two sms send in second| 60 |handler|(success: any, fail: any) => any||

1. countDownText is supposed to be a string that contains a %, where % will be replaced by the remaining time after which the user can send sms again;
2. handler is the action when button is clicked. It receives two arguments: success and fail. Simply call them when sending sms success or fails; For example:

const handler = (success: any, fail: any) => {
    axios.post("/api/sms/send", {phone: "1234567"}).then(res => {
        if (res.data.code === 200) {
            success()
            alert("send sms successfully!")
        }
        else fail()
    }).catch(fail)
}

Calling success() will start the count down process, and call fail() will enable the button again, because we have already disabled it when the button is clicked;