Component publish build Template

Quick Start

npm i tlf-form --save

index.tsx

import 'tlf-form/dist/styles/tlf-form.css';

基础使用

<TLFForm fileds={{
    username: {
        label: '用户名',
        placeholder: '用户名',
        component: TLFFormType.INPUT,
        yup: Yup.string().min(4, '用户名长度大于4 .').required('请输入用户名')
    },
    country: {
        label: '国家',
        placeholder: '国家',
        component: TLFFormType.SELECT,
        yup: Yup.string().required('请选择国家'),
        store: [
            { id: 1, name: 'test' },
            { id: 2, name: 'test1' }
        ],
        // multiple: true
    },
    username1: {
        label: '用户名',
        placeholder: '用户名',
        component: TLFFormType.INPUT,
        yup: Yup.string().min(4, '用户名长度大于4 .').required('请输入用户名')
    },
    country1: {
        label: '国家',
        placeholder: '国家',
        component: TLFFormType.SELECT,
        yup: Yup.string().required('请选择国家'),
        store: [
            { id: 1, name: 'test' },
            { id: 2, name: 'test1' }
        ],
        // multiple: true
    },
    username2: {
        label: '用户名',
        placeholder: '用户名',
        component: TLFFormType.INPUT,
        yup: Yup.string().min(4, '用户名长度大于4 .').required('请输入用户名')
    },
    country2: {
        label: '国家',
        placeholder: '国家',
        component: TLFFormType.SELECT,
        yup: Yup.string().required('请选择国家'),
        store: [
            { id: 1, name: 'test' },
            { id: 2, name: 'test1' }
        ],
        // multiple: true
    }
}} maxCol={4}>
    {(form: TLFForm) => (
        <div className="tlfbtns">
            <div className="tlfbtns-item">
                <span>
                    <Button onClick={form.submit.bind(form)} htmlType="submit" type="primary" shape="circle" icon="search" />
                </span>
            </div>
            <div className="tlfbtns-item">
                <span>
                    <Button htmlType="submit" type="primary">创建</Button>
                </span>
            </div>
        </div>
    )}
</TLFForm>

TLFForm 参数说明

export interface TLFFormProps {
    // 最大列数
    maxCol: number;
    // 需要表单的字段
    fileds: {
        [x: string]: TLFFormFileds
    };
    // 是否 inline label与input
    inline?: boolean;
    // 提交回调, 验证成功调用, 不成功不进入回调。自动显示错误信息以及样式
    onSubmit?: (formData: { [x: string]: any }) => any;
}

export interface TLFFormFileds {
    // label 说明
    label?: string;
    // placeholder
    placeholder?: string;
    // component 类型 
    // export enum TLFFormType {
    //     INPUT = 'input',
    //     SELECT = 'select',
    //     EMPTY = 'empty',
    //     CUSTOM = 'custom'
    // }
    component: TLFFormType;
    // 验证工具采用 Yup [https://github.com/jquense/yup.git]
    yup?: Schema<any>;
    // 大小 可忽略
    col?: number;
    // 是否显示
    show?: boolean;
    // 可选状态
    enabled?: boolean;
    // value双向绑定
    value?: any;
    // select的数据源
    store?: any;
    // 可否多选
    multiple?: boolean;
    // 搜索回调
    onSearch?: (filter: string, store: any) => any;
    // 自定义 render
    custom?: (props: FieldProps) => any;
}