@para-ui/core 2.1.35 → 2.1.36

package/docs/view/comboSelect/index.tsx

@@ -1,402 +0,0 @@
-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

@@ -1,61 +0,0 @@
-/**
- * @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

@@ -1,64 +0,0 @@
-/**
- * @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

@@ -1,84 +0,0 @@
-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;