curio-binding-toolkit v0.0.1

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
}

Methods

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

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;