@para-ui/core 2.1.32 → 2.1.35

package/docs/view/cascader/index.tsx

@@ -0,0 +1,261 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Cascader from 'src/Cascader';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicCascader,
+    valueCascader,
+    customJoinCascader,
+    customExpandIconCascader,
+    disabledCascader,
+    triggerCascader,
+    downChangeCascader,
+    changeUpdateCascader,
+    customFieldCascader,
+    placeholderCascader,
+    loadCascader,
+    iconCascader
+} from './codeString';
+import apiData, {apiOptionData} from './api';
+import './index.scss';
+
+const data = [
+    {
+        'label': '福建',
+        'value': 'fj',
+        'children': [{
+            'label': '福州',
+            'value': 'fuzhou',
+            'children': [{
+                'label': '马尾',
+                'value': 'mawei',
+            }],
+        }, {
+            'label': '泉州',
+            'value': 'quanzhou',
+        }],
+    }, {
+        'label': '浙江',
+        'value': 'zj',
+        'children': [{
+            'label': '杭州',
+            'value': 'hangzhou',
+            'children': [{
+                'label': '余杭',
+                'value': 'yuhang',
+            }],
+        }],
+    }, {
+        'label': '北京',
+        'value': 'bj',
+        'children': [{
+            'label': '朝阳区',
+            'value': 'chaoyang',
+        }, {
+            'label': '海淀区',
+            'value': 'haidian',
+        }],
+    }
+];
+const addressOptions = [
+    {
+        label: '福建',
+        isLeaf: false,
+        value: 'fj',
+    },
+    {
+        label: '浙江',
+        isLeaf: false,
+        value: 'zj',
+    },
+];
+
+const ParaCascader: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-cascader-demo'}>
+            <Title name={'级联选择器'}>代码演示</Title>
+            <CodeBox
+                code={basicCascader}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <Cascader data={data} onChange={(val) => {
+                    console.log(val)
+                }} />
+            </CodeBox>
+            <CodeBox
+                code={valueCascader}
+                title={'带默认值'}
+                description={'带默认值。'}
+            >
+                <Cascader data={data}
+                    value={['fj', 'fuzhou', 'mawei']}
+                    onChange={(val, o) => {
+                        console.log(val)
+                        console.log(o)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={customJoinCascader}
+                title={'自定义分隔符:如 - '}
+                description={'自定义分隔符:如 - 。'}
+            >
+                <Cascader data={data}
+                    expandJoin=" - "
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={customExpandIconCascader}
+                title={'自定义箭头'}
+                description={'自定义箭头。'}
+            >
+                <Cascader data={data}
+                    expandIcon={<span>&gt;</span>}
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={disabledCascader}
+                title={'禁用状态'}
+                description={'禁用状态 。'}
+            >
+                <Cascader data={data} disabled />
+            </CodeBox>
+            <CodeBox
+                code={triggerCascader}
+                title={'触发选择：hover | click'}
+                description={'触发选择：hover | click。'}
+            >
+                <Cascader data={data}
+                    expandTrigger="hover"
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={downChangeCascader}
+                title={'级联是否触发'}
+                description={'级联是否触发 。'}
+            >
+                <Cascader data={data}
+                    onDropdownVisibleChange={(visible) => {
+                        console.log(visible)
+                        alert(visible ? '显示' : '隐藏')
+                    }}
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={changeUpdateCascader}
+                title={'每次选则触发修改'}
+                description={'每次选则触发修改 。'}
+            >
+                <Cascader data={data}
+                    changeOnSelect
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={customFieldCascader}
+                title={'自定义级联字段'}
+                description={'自定义级联字段 。'}
+            >
+                <Cascader data={data} onChange={(val) => {
+                    console.log(val)
+                }} />
+            </CodeBox>
+            <CodeBox
+                code={placeholderCascader}
+                title={'自定义placeholder'}
+                description={'自定义placeholder 。'}
+            >
+                <Cascader data={data} placeholder="来选我呀" onChange={(val) => {
+                    console.log(val)
+                }} />
+            </CodeBox>
+            <CodeBox
+                code={loadCascader}
+                title={'动态加载数据'}
+                description={'动态加载数据 。'}
+            >
+                <Cascader data={addressOptions}
+                    loadData={(selectedOptions) => {
+                        console.log(selectedOptions)
+                        const targetOption = selectedOptions[selectedOptions.length - 1];
+                        targetOption.loading = true;
+                        // 动态加载下级数据
+                        return new Promise((resolve) => {
+                            setTimeout(() => {
+                                targetOption.loading = false;
+                                targetOption.children = [
+                                    {
+                                        label: `${targetOption.label}动态加载1`,
+                                        value: 'dynamic1',
+                                        isLeaf: false
+
+                                    },
+                                    {
+                                        label: `${targetOption.label}动态加载2`,
+                                        value: 'dynamic2',
+                                    },
+                                ];
+                                resolve(targetOption);
+                            }, 1000);
+                        })
+                    }}
+
+                    onChange={(val) => {
+                        console.log(val)
+                    }} />
+            </CodeBox>
+            <CodeBox
+                code={iconCascader}
+                title={'自定义加载icon'}
+                description={'自定义加载icon 。'}
+            >
+                <Cascader data={addressOptions}
+                    loadData={(selectedOptions) => {
+                        console.log(selectedOptions)
+                        const targetOption = selectedOptions[selectedOptions.length - 1];
+                        targetOption.loading = true;
+                        // 动态加载下级数据
+                        return new Promise((resolve) => {
+                            setTimeout(() => {
+                                targetOption.loading = false;
+                                targetOption.children = [
+                                    {
+                                        label: `${targetOption.label}动态加载1`,
+                                        value: 'dynamic1',
+                                        isLeaf: false
+
+                                    },
+                                    {
+                                        label: `${targetOption.label}动态加载2`,
+                                        value: 'dynamic2',
+                                    },
+                                ];
+                                resolve(targetOption);
+                            }, 1000);
+                        })
+                    }}
+
+                    onChange={(val) => {
+                        console.log(val)
+                    }}
+                    loadingIcon="loading..."
+                />
+            </CodeBox>
+            <APITable data={apiData} subTitle={'CascaderProps'} />
+            <APITable data={apiOptionData} subTitle={'Option'} showApi={false} />
+        </div>
+    );
+};
+
+export default ParaCascader;

package/docs/view/checkbox/api.tsx

@@ -0,0 +1,148 @@
+/**
+ * @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: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'size',
+        desc: '尺寸',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'defaultChecked',
+        desc: '默认值  有值不受控组件 初始化第一次',
+        type: 'boolean'
+    },
+    {
+        name: 'checked',
+        desc: '默认值 有值受控组件',
+        type: 'boolean'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'indeterminate',
+        desc: '半选',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'inputProps',
+        desc: 'input身上的所有属性',
+        type: 'object'
+    },
+    {
+        name: 'onChange',
+        desc: '改变事件',
+        type: '(e: any, checked: boolean) => void'
+    }
+];
+
+export const apiDataGroup: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'size',
+        desc: '尺寸',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'row',
+        desc: '布局方式 横向/竖向',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'error',
+        desc: '是否显示错误',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误提示',
+        type: 'ReactNode',
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'any',
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'any',
+    },
+    {
+        name: 'id',
+        desc: '选中选值的key,默认name',
+        type: 'string',
+        default: 'name'
+    },
+    {
+        name: 'list',
+        desc: '选项数据',
+        type: 'CheckboxProps[]',
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: any, item?: ListProps) => void',
+    }
+]
+
+export default apiData;

package/docs/view/checkbox/codeString.tsx

@@ -0,0 +1,215 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicCheckbox = `
+import Checkbox from '@para-ui/core/Checkbox';
+
+<Checkbox
+    label="默认"
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+/>
+<br />
+<br />
+<Checkbox
+    label="默认"
+    disabled={true}
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+    disabled={true}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+    disabled={true}
+/>
+<br />
+<br />
+<Checkbox
+    label="默认"
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<br />
+<br />
+<Checkbox
+    label="默认"
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<br />
+<br />
+<Checkbox
+    label="默认"
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<br />
+<br />
+<Checkbox
+    label="默认"
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<Checkbox
+    label="选中"
+    checked={true}
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<Checkbox
+    label="半选"
+    indeterminate={true}
+    disabled={true}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+<br/>
+<br/>
+<Checkbox
+    label="默认默认默认默认默认"
+    style={{width: '100px'}}
+/>
+<Checkbox
+    label="默认"
+/>
+`;
+
+export const basicCheckboxGroup = `
+import CheckboxGroup, {ListProps} from '@para-ui/core/CheckboxGroup';
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+
+const [value, setValue] = useState<any>('1');
+const [size, setSize] = useState<any>('large');
+
+const list: ListProps[] = [
+    {
+        label: '选项1',
+        name: '1'
+    },
+    {
+        label: '选项2',
+        name: '2'
+    },
+    {
+        label: '选项3',
+        name: '3'
+    }
+];
+
+const clickBtnSize = (item: any) => {
+    setSize(item.value)
+}
+
+const onChange = (val: any) => {
+    setValue(val);
+}
+
+<div style={{marginBottom: '20px'}}>
+    <ButtonGroup
+        mode={'text'}
+        onClick={clickBtnSize}
+        data={[
+            {
+                text: '小(small)',
+                value: 'small'
+            },
+            {
+                text: '中(medium)',
+                value: 'medium'
+            },
+            {
+                text: '大(large)',
+                value: 'large'
+            },
+        ]}
+    />
+</div>
+<CheckboxGroup
+    label={'复选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+/>
+<CheckboxGroup
+    required={true}
+    label={'复选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+/>
+<CheckboxGroup
+    label={'复选框组'}
+    error={true}
+    helperText={'请选择'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+/>
+<CheckboxGroup
+    label={'复选框组'}
+    row={false}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+/>
+<CheckboxGroup
+    label={'复选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+    labelTooltip={{tooltip: '帮组提示'}}
+/>
+<CheckboxGroup
+    label={'复选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    size={size}
+    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
+/>
+`;