@para-ui/core 2.1.32 → 2.1.35

package/docs/view/form/api.tsx

@@ -0,0 +1,266 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'form',
+        desc: '表单对象存储关键数据和校验方法',
+        type: 'React.MutableRefObject<RefObject>'
+    },
+    {
+        name: 'FormProps',
+        desc: '表单的默认属性',
+        type: 'FormHtmlProps'
+    },
+    {
+        name: 'type',
+        desc: '表单的主要类型 vertical 为竖布局，horizontal为横布局，默认为 horizontal.会被 configList的配置覆盖',
+        type: '\'vertical\' | \'horizontal\''
+    },
+    {
+        name: 'getCheckForm',
+        desc: '获取表单的校验方法，会传出表单的校验方法',
+        type: '(checkFrom: Function) => {}'
+    },
+    {
+        name: 'onChange',
+        desc: '输入框内容改变穿出',
+        type: '(name: string, value: any) => void'
+    },
+    {
+        name: 'getForcedRefresh',
+        desc: '强制刷新配置',
+        type: '(setConfigHook: (configList: Array<FormItemProps>, bData?: { [name: string]: any }) => void) => void'
+    },
+    {
+        name: 'configList',
+        desc: '表单项的配置',
+        type: 'Array<FormItemProps>'
+    },
+    {
+        name: 'backData',
+        desc: '回填数据',
+        type: ' { [name: string]: any }'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean'
+    },
+    {
+        name: 'disOnlySpace',
+        desc: '是否启用必填框，不允许输入纯空格',
+        type: 'boolean'
+    },
+    {
+        name: 'requiredElement',
+        desc: '必填显示渲染方式',
+        type: 'ReactElement | string'
+    },
+    {
+        name: 'disRequiredElement',
+        desc: '隐藏默认必填标记',
+        type: 'boolean'
+    }
+];
+
+export const apiDataRefObject: RowsData = [
+    {
+        name: 'check',
+        desc: '校验表单方法，校验成功返回表单的键值对',
+        type: 'Function'
+    },
+    {
+        name: 'items',
+        desc: '存储所有表单item最后的配置，方便提交时做总的校验',
+        type: '{ [name: string]: ItemTypeProps }'
+    },
+    {
+        name: 'values',
+        desc: '所有值',
+        type: '{ [name: string]: any }'
+    },
+    {
+        name: 'refreshForm',
+        desc: '强制刷新表单状态方法',
+        type: '(list: Array<FormItemProps> | \'\', bData?: { [name: string]: any }) => void'
+    },
+    {
+        name: 'refData',
+        desc: '对象数据集合',
+        type: 'RefDataProps'
+    },
+];
+
+export const apiDataRefDataProps: RowsData = [
+    {
+        name: 'allItems',
+        desc: '存储所有表单item最后的配置，方便提交时做总的校验',
+        type: '{ [name: string]: ItemTypeProps }'
+    },
+    {
+        name: 'itemsCheckStatus',
+        desc: '存储所有表单item校验的状态,用于动态更新后仍然能保持住报错信息',
+        type: '{ [name: string]: boolean | null }'
+    },
+    {
+        name: 'itemsCheckMessage',
+        desc: '存储所有表单item校验的报错信息',
+        type: '{ [name: string]: string }'
+    },
+    {
+        name: 'allValues',
+        desc: '表单保存的值集合',
+        type: '{ [name: string]: any }'
+    },
+    {
+        name: 'configList',
+        desc: '最新配置信息',
+        type: 'Array<FormItemProps>'
+    },
+]
+
+export const apiDataFormItemProps: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'type',
+        desc: '表单项形态，默认 horizontal',
+        type: '\'vertical\' | \'horizontal\'',
+        default: 'horizontal'
+    },
+    {
+        name: 'InputType',
+        desc: '输入框类型',
+        type: '\'checkGroup\' | \'select\' | \'radioGroup\' | \'textarea\' | \'default\' | \'switch\' | \'number\' | \'file\' | FC<ItemTypeProps>'
+    },
+    {
+        name: 'inputProps',
+        desc: '输入框其他属性配置',
+        type: 'inputProps',
+    },
+    {
+        name: 'labelWidth',
+        desc: '文字宽度， 只对 type === vertical，状态下生效',
+        type: 'number',
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+    },
+    {
+        name: 'change',
+        desc: '值改变传出',
+        type: '(value: any) => void',
+    },
+    {
+        name: 'hide',
+        desc: '不显示 该选项',
+        type: 'boolean',
+    },
+    {
+        name: 'tips',
+        desc: '提示。会有label上出现个图标提示',
+        type: 'string',
+    },
+    {
+        name: 'label',
+        desc: 'string | ((props: FormItemProps) => ReactNode)',
+        type: '文字描述',
+    },
+    {
+        name: 'hideLabel',
+        desc: '隐藏 label',
+        type: 'boolean',
+    },
+    {
+        name: 'hideError',
+        desc: '隐藏 error',
+        type: 'boolean',
+    },
+    {
+        name: 'name',
+        desc: 'name，一般对应后台属性，需要唯一性',
+        type: 'string',
+    },
+    {
+        name: 'rules',
+        desc: '校验规则',
+        type: 'ruleType',
+    },
+    {
+        name: 'setValue',
+        desc: '设置值的方法',
+        type: 'Function',
+    },
+    {
+        name: 'errorMessage',
+        desc: '报错信息',
+        type: 'string',
+    },
+    {
+        name: 'backData',
+        desc: '回填数据',
+        type: '{ [name: string]: any }',
+    },
+    {
+        name: 'disOnlySpace',
+        desc: '是否启用必填框，不允许输入纯空格',
+        type: 'boolean',
+    },
+    {
+        name: 'requiredElement',
+        desc: '必填显示渲染方式',
+        type: 'ReactElement | string',
+    },
+    {
+        name: 'disRequiredElement',
+        desc: '隐藏默认必填标记',
+        type: 'boolean',
+    }
+]
+
+export const apiDataFormItemTypeProps: RowsData = [
+    {
+        name: 'ItemType',
+        desc: '输入框类型',
+        type: '\'checkGroup\' | \'select\' | \'radioGroup\' | \'textarea\' | \'default\' | \'switch\' | \'file\' | \'number\' | FC<ItemTypeProps>'
+    },
+    {
+        name: 'error',
+        desc: '状态',
+        type: 'boolean'
+    },
+    {
+        name: 'setError',
+        desc: '设置错误提示',
+        type: 'Function'
+    },
+    {
+        name: 'placeholder',
+        desc: '输入框提示',
+        type: 'string'
+    },
+    {
+        name: 'inputProps',
+        desc: '输入框其他配置',
+        type: '{\n' +
+            '        [name: string]: any\n' +
+            '    }'
+    }
+]
+
+export default apiData;

package/docs/view/form/codeString.tsx

@@ -0,0 +1,203 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicForm = `
+import Form, {configListProps} from '@para-ui/core/Form';
+import Button from '@para-ui/core/Button';
+import TextField from '@para-ui/core/Form';
+
+const configList: configListProps = [
+    {
+        label: '普通输入框',
+        name: 'name',
+        rules: {
+            validate: {
+                required: true,
+                maxlength: 3,
+                minLength: 2,
+                /**
+                 * 正则
+                 */
+                pattern: /123/,
+            },
+            message: {
+                required: '这是必填的'
+            }
+        },
+    },
+    {
+        label: '单选组',
+        name: 'type',
+        InputType: 'radioGroup',
+        list: [
+            {
+                label: 'radio1',
+                name: 'r1'
+            },
+            {
+                label: 'radio2',
+                name: 'r2'
+            },
+        ],
+        rules: {
+            validate: {
+                required: true
+            },
+            message: {
+                required: '必选'
+            }
+        },
+    },
+    {
+        label: '复选组',
+        name: 'type2',
+        InputType: 'checkGroup',
+        list: [
+            {
+                label: 'checkGroup1',
+                name: 't1'
+            },
+            {
+                label: 'checkGroup2',
+                name: 't2'
+            },
+        ],
+    },
+    {
+        label: '下拉',
+        name: 'dir',
+        tips: '这个是提示',
+        InputType: 'select',
+        list: [
+            {
+                label: '选项1',
+                value: 'sel1'
+            },
+            {
+                label: '选项2',
+                value: 'sel2'
+            },
+            {
+                label: '选项3',
+                value: 'sel3'
+            }
+        ],
+    },
+    {
+        label: 'switch开关',
+        name: 'switch1',
+        InputType: 'switch',
+    },
+    {
+        label: '文件类型',
+        name: 'projectFile',
+        InputType: 'file',
+        buttonLabel: '选择文件1',
+        rules: {
+            validate: {
+                required: true
+            }
+        }
+    },
+    {
+        label: '点我（动态变动选项）',
+        name: 'switch2',
+        InputType: 'switch',
+    },
+    {
+        label: '普通输入框(动态加的)',
+        name: 'name3',
+        hide: true,
+        rules: {
+            validate: {
+                required: true,
+
+            },
+            message: {
+                required: '这是必填的'
+            }
+        },
+    },
+    {
+        label: '文本域',
+        name: 'desc',
+        InputType: 'textarea',
+        rules: {
+            validate: {
+                diy1: (item, val) => {
+                    console.log(123);
+                    return val !== '123' || '值不能为123';
+                },
+                diy2: (item, val) => {
+                    return val !== '123456';
+                }
+            },
+            message: {
+                diy2: '值不能为123456'
+            }
+        }
+    },
+    {
+        label: '自定义类型',
+        name: 'diy',
+        InputType: (props) => {
+            const {setValue, setError} = props
+            const [error, setTError] = React.useState<boolean>(false);
+            return (
+                <TextField
+                    error={error}
+                    onChange={(e: any) => {
+                        const val = e.target.value
+                        setValue && setValue('diy', 'value', val);
+                        if (val === '123') {
+                            setValue && setValue('diy', 'status', false);
+                            setError && setError('diy报错123');
+                            setTError(true);
+                        } else {
+                            setValue && setValue('diy', 'status', val);
+                            setError && setError(!val && '不能为空');
+                            setTError(!val);
+                        }
+                    }}
+                />
+            )
+        }
+    }
+]
+
+const [list, setConfigList] = React.useState([...configList]);
+/**
+ * 表单对象
+ */
+const formCom = React.useRef<{ [name: string]: any }>({});
+/**
+ * 校验表单
+ */
+const submitFuc = () => {
+    const formData = formCom.current.check();
+    console.log(formData, formCom);
+}
+
+<div className="para-form-demo-context">
+    <Form
+        type="horizontal"
+        form={formCom}
+        configList={list}
+        onChange={(name, val) => {
+            if (name === 'switch2') {
+                const tArr = [...configList];
+                tArr[7].hide = !val;
+                setConfigList([...tArr]);
+            }
+        }}
+    />
+    <Button
+        variant="outlined"
+        onClick={submitFuc}
+    >
+        校验表单
+    </Button>
+</div>
+`;

package/docs/view/form/index.tsx

@@ -0,0 +1,225 @@
+import React, { FunctionComponent } from 'react';
+import CodeBox from '../../components/codeBox';
+import Form, { configListProps } from 'src/Form';
+import Button from 'src/Button';
+import TextField from 'src/TextField';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import { basicForm } from './codeString';
+import apiData, { apiDataRefObject, apiDataRefDataProps, apiDataFormItemProps, apiDataFormItemTypeProps } from './api';
+
+import './index.scss';
+
+const configList: configListProps = [
+    {
+        label: '普通输入框',
+        name: 'name',
+        rules: {
+            validate: {
+                required: true,
+                maxlength: 3,
+                minLength: 2,
+                /**
+                 * 正则
+                 */
+                pattern: /123/,
+            },
+            message: {
+                required: '这是必填的'
+            }
+        },
+    },
+    {
+        label: '单选组',
+        name: 'type',
+        InputType: 'radioGroup',
+        defaultValue: 'r1',
+        list: [
+            {
+                label: 'radio1',
+                name: 'r1'
+            },
+            {
+                label: 'radio2',
+                name: 'r2'
+            },
+        ],
+        rules: {
+            validate: {
+                required: true
+            },
+            message: {
+                required: '必选'
+            }
+        },
+    },
+    {
+        label: '复选组',
+        name: 'type2',
+        InputType: 'checkGroup',
+        list: [
+            {
+                label: 'checkGroup1',
+                name: 't1'
+            },
+            {
+                label: 'checkGroup2',
+                name: 't2'
+            },
+        ],
+    },
+    {
+        label: '下拉',
+        name: 'dir',
+        tips: '这个是提示',
+        InputType: 'select',
+        list: [
+            {
+                label: '选项1',
+                value: 'sel1'
+            },
+            {
+                label: '选项2',
+                value: 'sel2'
+            },
+            {
+                label: '选项3',
+                value: 'sel3'
+            }
+        ],
+    },
+    {
+        label: 'switch开关',
+        name: 'switch1',
+        InputType: 'switch',
+    },
+    {
+        label: '文件类型',
+        name: 'projectFile',
+        InputType: 'file',
+        buttonLabel: '选择文件1',
+        rules: {
+            validate: {
+                required: true
+            }
+        }
+    },
+    {
+        label: '点我（动态变动选项）',
+        name: 'switch2',
+        InputType: 'switch',
+    },
+    {
+        label: '普通输入框(动态加的)',
+        name: 'name3',
+        hide: true,
+        rules: {
+            validate: {
+                required: true,
+
+            },
+            message: {
+                required: '这是必填的'
+            }
+        },
+    },
+    {
+        label: '文本域',
+        name: 'desc',
+        InputType: 'textarea',
+        defaultValue: 'defaultValue',
+        rules: {
+            validate: {
+                diy1: (item, val) => {
+                    console.log(123);
+                    return val !== '123' || '值不能为123';
+                },
+                diy2: (item, val) => {
+                    return val !== '123456';
+                }
+            },
+            message: {
+                diy2: '值不能为123456'
+            }
+        }
+    },
+    {
+        label: '自定义类型',
+        name: 'diy',
+        InputType: (props) => {
+            const { setValue, setError } = props
+            const [error, setTError] = React.useState<boolean>(false);
+            return (
+                <TextField
+                    error={error}
+                    onChange={(e: any) => {
+                        const val = e.target.value
+                        setValue && setValue('diy', 'value', val);
+                        if (val === '123') {
+                            setValue && setValue('diy', 'status', false);
+                            setError && setError('diy报错123');
+                            setTError(true);
+                        } else {
+                            setValue && setValue('diy', 'status', val);
+                            setError && setError(!val && '不能为空');
+                            setTError(!val);
+                        }
+                    }}
+                />
+            )
+        }
+    }
+]
+
+const ParaForm: FunctionComponent = () => {
+    const [list, setConfigList] = React.useState([...configList]);
+    /**
+     * 表单对象
+     */
+    const formCom = React.useRef<{ [name: string]: any }>({});
+    /**
+     * 校验表单
+     */
+    const submitFuc = () => {
+        const formData = formCom.current.check();
+        console.log(formData, formCom);
+    }
+    return (
+        <div className={'paraui-form-demo'}>
+            <Title name={'表单'}>代码演示</Title>
+            <CodeBox
+                code={basicForm}
+                title={'基本'}
+                description={'表单。'}
+            >
+                <div className="para-form-demo-context">
+                    <Form
+                        type="horizontal"
+                        form={formCom}
+                        configList={list}
+                        onChange={(name, val) => {
+                            if (name === 'switch2') {
+                                const tArr = [...configList];
+                                tArr[7].hide = !val;
+                                setConfigList([...tArr]);
+                            }
+                        }}
+                    />
+                    <Button
+                        variant="outlined"
+                        onClick={submitFuc}
+                    >
+                        校验表单
+                    </Button>
+                </div>
+            </CodeBox>
+            <APITable data={apiData} subTitle={'FormProps'} showApi={false} />
+            <APITable data={apiDataRefObject} subTitle={'RefObject'} showApi={false} />
+            <APITable data={apiDataRefDataProps} subTitle={'RefDataProps'} showApi={false} />
+            <APITable data={apiDataFormItemProps} subTitle={'FormItemProps'} showApi={false} />
+            <APITable data={apiDataFormItemTypeProps} subTitle={'FormItemTypeProps 继承 FormItemProps'} showApi={false} />
+        </div>
+    );
+};
+
+export default ParaForm;