@para-ui/core 2.1.32 → 2.1.35

package/docs/view/comboSelect/index.tsx

@@ -0,0 +1,402 @@
+import React, {FunctionComponent, useRef} from 'react';
+import CodeBox from '../../components/codeBox';
+import ComboSelect from 'src/ComboSelect';
+import {TableProps, TreeProps, SelectedOptions} from 'src/ComboSelect/interface';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    tableCombo,
+    treeCombo,
+    listCombo,
+    defaultValueCombo,
+    maxCountCombo,
+    comboWithSearch,
+    comboWithError,
+    disablePopupCombo,
+    remoteLoadCombo,
+    radioTableCombo,
+    radioTreeCombo,
+    radiosListCombo,
+    emptyCombo,
+    customOptionLabel
+} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//comboSelect
+const ParaComboSelect: FunctionComponent = () => {
+    const [value, setValue] = React.useState<SelectedOptions>([]);
+    const [treeValue, setTreeValue] = React.useState<SelectedOptions>([]);
+    const [listValue, setListValue] = React.useState<SelectedOptions>([]);
+    const loadParams = useRef<any>();
+
+    const onChange = (opts: any) => {
+        console.log('onChange:::', opts);
+        setValue(opts);
+    };
+
+    const onTreeChange = (opts: any) => {
+        console.log('onTreeChange:::', opts);
+        setTreeValue(opts);
+    };
+
+    const onListChange = (opts: any) => {
+        console.log('onListChange:::', opts);
+        setListValue(opts);
+    };
+
+    const getTableData = () => {
+        const data = [];
+        for (let i = 0; i < 10; i++) {
+            if (i === 0)
+                data.push({
+                    title: `para-ui-${i}弹出一个下拉菜单给用户选择操作，用于代替原生的选择给用户选择操作，用于代替原生的选择给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时`,
+                    address: '上海',
+                    key: i + ''
+                });
+            else
+                data.push({title: `para-ui-${i}`, address: '上海', key: i + ''});
+        }
+        return data;
+    };
+
+    const treeData = [
+        {
+            title: '0-0',
+            key: '0-0',
+            children: [
+                {
+                    title: '0-0-0',
+                    key: '0-0-0',
+                    children: [
+                        {title: '0-0-0-0', key: '0-0-0-0'},
+                        {title: '0-0-0-1', key: '0-0-0-1'},
+                        {title: '0-0-0-2', key: '0-0-0-2'},
+                    ],
+                }
+            ]
+        },
+        {
+            title: '0-1',
+            key: '0-1',
+            children: [
+                {title: '0-1-0-0', key: '0-1-0-0'},
+                {title: '0-1-0-1', key: '0-1-0-1'},
+                {title: '0-1-0-2', key: '0-1-0-2'},
+            ],
+        },
+        {
+            title: '0-2',
+            key: '0-2',
+        }
+    ];
+
+    const listData = [
+        {
+            title: '0-0',
+            key: '0-0',
+        },
+        {
+            title: '0-1',
+            key: '0-1'
+        },
+        {
+            title: '0-2',
+            key: '0-2',
+        },
+        {
+            title: '0-3',
+            key: '0-3',
+        },
+        {
+            title: '0-4',
+            key: '0-4',
+        },
+        {
+            title: '0-5',
+            key: '0-5',
+        },
+        {
+            title: '0-6',
+            key: '0-6',
+        }
+    ];
+
+    const defaultValue: SelectedOptions = [
+        {
+            key: '0-0',
+            label: '0-0'
+        },
+        {
+            key: '0-1',
+            label: '0-1'
+        },
+        {
+            key: '0-2',
+            label: '0-2'
+        }
+    ];
+
+    const tableProps: TableProps = {
+        headData: [
+            {
+                name: 'title',
+                label: '名称',
+                selected: true
+            },
+            {
+                name: 'address',
+                label: '地址',
+                selected: true
+            }
+        ],
+        data: getTableData()
+    };
+
+    // const [treeDateTest, setTreeData] = React.useState<any[]>(treeData);
+    const treeProps: TreeProps = {
+        treeData,
+        checkStrictly: true
+    };
+
+    const onSearch = (searchKey: string) => {
+        console.log('onSearch:::', searchKey);
+    };
+
+    return (
+        <div className={'paraui-comboSelect-demo paraui-form'}>
+            <Title name={'组合选择器'}>代码演示</Title>
+            <CodeBox code={tableCombo} title={'表格用法'} description={'数据以表格形式展示。'}>
+                <ComboSelect
+                    mode={'table'}
+                    TableProps={{
+                        headData: [
+                            {
+                                name: 'name',
+                                label: '名称',
+                                selected: true
+                            },
+                            {
+                                name: 'sex',
+                                label: '性别',
+                                selected: true,
+                                filter: true,
+                                enums: [
+                                    {
+                                        displayName: '男',
+                                        value: 1
+                                    },
+                                    {
+                                        displayName: '女',
+                                        value: 0
+                                    }
+                                ]
+                            },
+                            {
+                                name: 'address',
+                                label: '地址',
+                                selected: true
+                            }
+                        ],
+                        sortTable: true,
+                        filter: true,
+                    }}
+                    allowClear={true}
+                    value={value}
+                    onChange={onChange}
+                    ctx={'demo'}
+                    url={'/list/all'}
+                    showSearch={true}
+                    replaceFields={{key: 'key', title: 'name'}}
+                    paramsCallback={(params: any) => {
+                        params.keyword = params.searchKey ?? '';
+                        delete params.searchKey;
+                        return params;
+                    }}
+                />
+            </CodeBox>
+            <CodeBox code={treeCombo} title={'树用法'} description={'数据以树形式展示。（严格模式）checkStrictly 设置为 true'}>
+                <ComboSelect
+                    mode={'tree'}
+                    allowClear={true}
+                    TreeProps={treeProps}
+                    value={treeValue}
+                    onChange={onTreeChange}
+                />
+            </CodeBox>
+            <CodeBox code={listCombo} title={'列表用法'} description={'数据以列表形式展示。'}>
+                <ComboSelect
+                    mode={'list'}
+                    allowClear={true}
+                    TreeProps={{
+                        treeData: listData
+                    }}
+                    value={listValue}
+                    onChange={onListChange}
+                />
+            </CodeBox>
+            <CodeBox code={radioTableCombo} title={'单选表格用法'} description={'单选表格用法。添加 checkable 属性可设置单选'}>
+                <ComboSelect
+                    mode={'table'}
+                    checkable={false}
+                    allowClear={true}
+                    TableProps={tableProps}
+                    value={value}
+                    onChange={onChange}
+                />
+            </CodeBox>
+            <CodeBox code={radioTreeCombo} title={'单选树用法'}
+                     description={'单选树用法。添加 checkable 属性可设置单选，toggleSelectedOnSingle 可设置切换选中值。'}>
+                <ComboSelect
+                    mode={'tree'}
+                    checkable={false}
+                    toggleSelectedOnSingle={true}
+                    allowClear={true}
+                    TreeProps={treeProps}
+                    value={treeValue}
+                    onChange={onTreeChange}
+                />
+            </CodeBox>
+            <CodeBox code={radiosListCombo} title={'单选列表用法'} description={'单选列表用法。添加 checkable 属性可设置单选。'}>
+                <ComboSelect
+                    mode={'list'}
+                    checkable={false}
+                    allowClear={true}
+                    TreeProps={{
+                        treeData: listData
+                    }}
+                    value={listValue}
+                    onChange={onListChange}
+                />
+            </CodeBox>
+            <CodeBox code={defaultValueCombo} title={'默认选中项'} description={'使用 defaultValue 设置默认选中项。'}>
+                <ComboSelect
+                    mode={'tree'}
+                    TreeProps={{
+                        treeData,
+                        checkStrictly: true
+                    }}
+                    value={defaultValue}
+                />
+            </CodeBox>
+
+            <CodeBox code={maxCountCombo} title={'最大显示数'} description={'使用 maxCount 限制最大显示数。'}>
+                <ComboSelect
+                    mode={'list'}
+                    TreeProps={{
+                        treeData: listData
+                    }}
+                    maxCount={3}
+                />
+            </CodeBox>
+
+            <CodeBox code={comboWithSearch} title={'搜索'} description={'带有搜索的选择器。'}>
+                <ComboSelect
+                    mode={'table'}
+                    TableProps={tableProps}
+                    allowClear={true}
+                    showSearch={true}
+                    onSearch={onSearch}
+                />
+            </CodeBox>
+            <CodeBox code={comboWithError} title={'错误提示、帮助提示'} description={'带有错误提示和帮助提示。'}>
+                <ComboSelect
+                    mode={'tree'}
+                    TreeProps={{
+                        treeData,
+                        checkStrictly: true
+                    }}
+                    error={true}
+                    helperText={'请选择'}
+                    label={'必填'}
+                    required={true}
+                    labelTooltip={{tooltip: '帮助提示'}}
+                />
+                <br/>
+                <ComboSelect
+                    mode={'tree'}
+                    TreeProps={{
+                        treeData,
+                        checkStrictly: true
+                    }}
+                    label={'选填'}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                />
+            </CodeBox>
+            <CodeBox code={disablePopupCombo} title={'非弹框模式'} description={'非弹框模式，添加 disablePopup 即内容直接平铺展示。'}>
+                <ComboSelect
+                    mode={'table'}
+                    TableProps={tableProps}
+                    allowClear={true}
+                    disablePopup={true}
+                    showSearch={true}
+                />
+            </CodeBox>
+            <CodeBox code={emptyCombo} title={'数据为空'} description={'数据为空时状态。'}>
+                <ComboSelect
+                    mode={'list'}
+                    TreeProps={{treeData: []}}
+                />
+            </CodeBox>
+            <CodeBox code={remoteLoadCombo} title={'远程加载数据'} description={'提供快捷简单的远程加载数据。'}>
+                <ComboSelect
+                    mode={'list'}
+                    ctx={'demo'}
+                    url={'/list/all'}
+                    showSearch={true}
+                    replaceFields={{key: 'key', title: 'name'}}
+                    TreeProps={{
+                        pagination: true,
+                        requestCallback: (data: any) => {
+                            if (loadParams.current) return [];
+                            return data;
+                        }
+                    }}
+                    paramsCallback={(params: any) => {
+                        if (params?.searchKey !== undefined && params?.searchKey !== '') {
+                            loadParams.current = params;
+                        } else {
+                            loadParams.current = null;
+                        }
+                        return params;
+                    }}
+                />
+            </CodeBox>
+
+            <CodeBox code={customOptionLabel} title={'自定义列表和选中项label'} description={'可以自定义列表和选中项label。'}>
+                <ComboSelect
+                    mode={'list'}
+                    ctx={'demo'}
+                    url={'/list/all'}
+                    showSearch={true}
+                    replaceFields={{key: 'key', title: 'name'}}
+                    getOptionLabel={(nodeData: any) => {
+                        return `${nodeData.key}: ${nodeData.title}`;
+                    }}
+                    optionRender={(nodeData: any) => {
+                        return `${nodeData.key}: ${nodeData.title}`;
+                    }}
+                    TreeProps={{
+                        pagination: true,
+                        requestCallback: (data: any) => {
+                            if (loadParams.current) return [];
+                            return data;
+                        }
+                    }}
+                    paramsCallback={(params: any) => {
+                        if (params?.searchKey !== undefined && params?.searchKey !== '') {
+                            loadParams.current = params;
+                        } else {
+                            loadParams.current = null;
+                        }
+                        return params;
+                    }}
+                />
+            </CodeBox>
+
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaComboSelect;

package/docs/view/container/api.tsx

@@ -0,0 +1,61 @@
+/**
+ * @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: 'type',
+        desc: '类型',
+        type: 'tlrb | ltrb | trb | tlr',
+        default: 'tlr'
+    },
+    {
+        name: 'top',
+        desc: '顶部容器',
+        type: 'JSX.Element'
+    },
+    {
+        name: 'topStyle',
+        desc: '顶部容器样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'left',
+        desc: '左侧容器',
+        type: 'JSX.Element'
+    },
+    {
+        name: 'leftStyle',
+        desc: '左侧容器样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'right',
+        desc: '右侧容器',
+        type: 'JSX.Element'
+    },
+    {
+        name: 'rightStyle',
+        desc: '右侧容器样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'bottom',
+        desc: '底部容器',
+        type: 'JSX.Element'
+    },
+    {
+        name: 'bottomStyle',
+        desc: '底部容器样式',
+        type: 'React.CSSProperties'
+    },
+];
+export default apiData;

package/docs/view/container/codeString.tsx

@@ -0,0 +1,64 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const ltrbContainer = `
+import Container from '@para-ui/core/Container';
+
+<Container
+    type={'ltrb'}
+    top={<div>top</div>}
+    left={<div>left</div>}
+    right={<div>right</div>}
+    bottom={<div>bottom</div>}
+    topStyle={{backgroundColor: '#1E80FF'}}
+    leftStyle={{width: '100px', backgroundColor: 'red'}}
+    rightStyle={{height: '100px', backgroundColor: '#86909C'}}
+    bottomStyle={{backgroundColor: '#FFA150'}}
+/>
+`;
+
+export const tlrbContainer = `
+import Container from '@para-ui/core/Container';
+
+<Container
+    type={'tlrb'}
+    top={<div>top</div>}
+    left={<div>left</div>}
+    right={<div>right</div>}
+    bottom={<div>bottom</div>}
+    topStyle={{backgroundColor: '#1E80FF'}}
+    leftStyle={{width: '100px', backgroundColor: 'red'}}
+    rightStyle={{backgroundColor: '#86909C'}}
+    bottomStyle={{backgroundColor: '#FFA150'}}
+/>
+`;
+
+export const tlrContainer = `
+import Container from '@para-ui/core/Container';
+
+<Container
+    type={'tlr'}
+    top={<div>top</div>}
+    left={<div>left</div>}
+    right={<div>right</div>}
+    topStyle={{backgroundColor: '#1E80FF'}}
+    leftStyle={{width: '100px', backgroundColor: 'red'}}
+    rightStyle={{backgroundColor: '#86909C'}}
+/>
+`;
+
+export const trbContainer = `
+import Container from '@para-ui/core/Container';
+
+<Container
+    type={'trb'}
+    top={<div>top</div>}
+    right={<div>right</div>}
+    bottom={<div>bottom</div>}
+    topStyle={{backgroundColor: '#1E80FF'}}
+    rightStyle={{backgroundColor: '#86909C'}}
+    bottomStyle={{backgroundColor: '#FFA150'}}
+/>
+`;

package/docs/view/container/index.tsx

@@ -0,0 +1,84 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Container from 'src/Container';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {ltrbContainer, tlrbContainer, tlrContainer, trbContainer} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaContainer: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-container-demo'}>
+            <Title name={'容器'}>代码演示</Title>
+            <CodeBox
+                code={ltrbContainer}
+                title={'ltrb'}
+                description={'左 上中下。'}
+            >
+                <Container
+                    type={'ltrb'}
+                    top={<div>top</div>}
+                    left={<div>left</div>}
+                    right={<div>right</div>}
+                    bottom={<div>bottom</div>}
+                    topStyle={{backgroundColor: '#1E80FF'}}
+                    leftStyle={{width: '100px', backgroundColor: 'red'}}
+                    rightStyle={{height: '100px', backgroundColor: '#86909C'}}
+                    bottomStyle={{backgroundColor: '#FFA150'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={tlrbContainer}
+                title={'tlrb'}
+                description={'上 左右 下。'}
+            >
+                <Container
+                    type={'tlrb'}
+                    top={<div>top</div>}
+                    left={<div>left</div>}
+                    right={<div>right</div>}
+                    bottom={<div>bottom</div>}
+                    topStyle={{backgroundColor: '#1E80FF'}}
+                    leftStyle={{width: '100px', backgroundColor: 'red'}}
+                    rightStyle={{backgroundColor: '#86909C'}}
+                    bottomStyle={{backgroundColor: '#FFA150'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={tlrContainer}
+                title={'tlr'}
+                description={'上 左右。'}
+            >
+                <Container
+                    type={'tlr'}
+                    top={<div>top</div>}
+                    left={<div>left</div>}
+                    right={<div>right</div>}
+                    topStyle={{backgroundColor: '#1E80FF'}}
+                    leftStyle={{width: '100px', backgroundColor: 'red'}}
+                    rightStyle={{backgroundColor: '#86909C'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={trbContainer}
+                title={'trb'}
+                description={'上 中 下。'}
+            >
+                <Container
+                    type={'trb'}
+                    top={<div>top</div>}
+                    right={<div>right</div>}
+                    bottom={<div>bottom</div>}
+                    topStyle={{backgroundColor: '#1E80FF'}}
+                    rightStyle={{backgroundColor: '#86909C'}}
+                    bottomStyle={{backgroundColor: '#FFA150'}}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaContainer;