@para-ui/core 2.1.32 → 2.1.35

package/docs/view/table/index.tsx

@@ -0,0 +1,549 @@
+import React, {FunctionComponent, useEffect, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import Table from 'src/Table';
+import Tag from 'src/Tag';
+import {HeadDataProps} from 'src/Table/interface';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import Delete from "@para-ui/icons/Delete";
+import EditOutline from "@para-ui/icons/EditOutline";
+import BlacklistAudit from "@para-ui/icons/BlacklistAudit";
+import {OperateBtnListProps} from 'src/OperateBtn';
+import {
+    basicTable,
+    customTable,
+    selectTableCheck,
+    selectTableRadio,
+    expandableTable,
+    reqTable,
+    filterSortTable,
+    loadMoreTable,
+    reqAllTable,
+    nullTable,
+    fixedTable,
+    operateTable
+} from './codeString';
+import apiData, {apiHeadData} from './api';
+import './index.scss';
+
+const ParaTable: FunctionComponent = () => {
+    const [dataSource, setDataSource] = useState<any[]>([]);
+    const [radioValue, setRadioValue] = useState<any>();
+    const [checkValue, setCheckValue] = useState<any>([]);
+    const [loadingMapping, setLoadingMapping] = useState<any>({});
+
+    useEffect(() => {
+        const arr: any[] = [];
+        for (let i = 0; i < 500; i += 1) {
+            const obj: any = {
+                key: i + 'key',
+                name: '张三',
+                age: '18',
+                sex: '男',
+                address: `上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号
+                上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666
+                号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666
+                号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号
+                上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上
+                海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666
+                号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号上海市浦东新区川沙新镇666号`
+            }
+            arr.push(obj);
+        }
+        setDataSource(arr);
+    }, [])
+
+    const operate: HeadDataProps = {
+        label: '操作栏',
+        render: (row: any) => {
+            return <div style={{overflow: 'hidden'}}>操作栏内容</div>
+        }
+    }
+
+    const headDataFiexd: HeadDataProps[] = [
+        {
+            name: 'key',
+            label: 'key',
+            selected: true,
+            width: '100px',
+            fixed: 'left'
+        },
+        {
+            name: 'name',
+            label: '姓名',
+            selected: true,
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            selected: true,
+        },
+        {
+            name: 'sex',
+            label: '性别',
+            selected: true
+        },
+        {
+            name: 'address',
+            label: '地址地址地址地址地址地址地址地址地址地址地址地址',
+            selected: true,
+            width: '200px',
+            fixed: 'right'
+        }
+    ];
+
+    const headData: HeadDataProps[] = [
+        {
+            name: 'key',
+            label: 'key',
+            align: 'left',
+            //selected: true,
+        },
+        {
+            name: 'name',
+            label: '姓名',
+            selected: true,
+            //width: '400px'
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            selected: true,
+            //width: '400px'
+        },
+        {
+            name: 'sex',
+            label: '性别',
+            selected: true
+        },
+        {
+            name: 'address',
+            label: '地址地址地址地址地址地址地址地址地址地址地址地址',
+            selected: true
+        }
+    ];
+
+    const headData1: HeadDataProps[] = [
+        {
+            name: 'key',
+            label: 'key',
+            align: 'left',
+            selected: true,
+        },
+        {
+            name: 'name',
+            label: '姓名',
+            selected: true,
+            render: (item: any) => {
+                return (
+                    <Tag>{item.name}</Tag>
+                )
+            }
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            selected: true,
+        },
+        {
+            name: 'sex',
+            label: '性别',
+            selected: true
+        },
+        {
+            name: 'address',
+            label: '地址地址地址地址地址地址地址地址地址地址地址地址',
+            selected: true
+        }
+    ];
+
+    const headData3: HeadDataProps[] = [
+        {
+            name: 'key',
+            label: 'key',
+            align: 'left',
+            selected: true,
+        },
+        {
+            name: 'name',
+            label: '姓名',
+            selected: true,
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            selected: true,
+        },
+        {
+            name: 'sex',
+            label: '性别',
+            selected: true
+        },
+        {
+            name: 'address',
+            label: '地址地址地址地址地址地址地址地址地址地址地址地址',
+            selected: true
+        }
+    ];
+
+    const headData4: HeadDataProps[] = [
+        {
+            name: 'key',
+            label: 'key',
+            align: 'left',
+            selected: true,
+            sort: false
+        },
+        {
+            name: 'name',
+            label: '姓名',
+            selected: true
+        },
+        {
+            name: 'age',
+            label: '年龄',
+            selected: true,
+            filter: true,
+            enums: [
+                {
+                    displayName: '18',
+                    value: 18
+                },
+                {
+                    displayName: '20',
+                    value: 20
+                }
+            ]
+        },
+        {
+            name: 'sex',
+            label: '性别',
+            selected: true,
+            filter: true,
+            filterRadioL: true,
+            enums: [
+                {
+                    displayName: '男',
+                    value: 1
+                },
+                {
+                    displayName: '女',
+                    value: 0
+                }
+            ]
+        },
+        {
+            name: 'address',
+            label: '地址地址地址地址地址地址地址地址地址地址地址地址',
+            selected: true
+        }
+    ];
+
+    // 格式化内容
+    const formatter = (row: any, item: any, value: any, index: any) => {
+        if (item.name === 'age') {
+            return <Tag>{value}</Tag>
+        }
+        return value;
+    }
+
+    const changeCheck = (a: any, b: any) => {
+        console.log('多选', a, b);
+        setCheckValue(a);
+    }
+
+    const changeRadio = (a: any, b: any) => {
+        console.log('单选', a, b);
+        setRadioValue(a);
+    }
+
+    const expandable = (row: any) => {
+        return (
+            <div>{row.key}---嵌套内容</div>
+        )
+    }
+
+    const handBtnList = (row: any): OperateBtnListProps[] => {
+        return [
+            {
+                label: '编辑',
+                icon: <EditOutline />,
+                onClick: async (item: OperateBtnListProps) => {
+                    console.log(row, item)
+                    const reslut: boolean = await new Promise((resolve, reject) => {
+                        setTimeout(() => {
+                            resolve(false);
+                        }, 2000)
+                    })
+                    return reslut;
+                }
+            },
+            {
+                key: 'view',
+                label: '查看',
+                icon: <BlacklistAudit />,
+                onClick: (item: OperateBtnListProps) => {
+                    console.log(row, item)
+                    const loadingJson = loadingMapping[row.key] || {};
+                    loadingJson.view = true;
+                    loadingMapping[row.key] = loadingJson;
+                    setLoadingMapping({...loadingMapping});
+                    setTimeout(() => {
+                        loadingJson.view = false;
+                        loadingMapping[row.key] = loadingJson;
+                        setLoadingMapping({...loadingMapping});
+                    }, 1000)
+                }
+            },
+            {
+                label: '删除',
+                icon: <Delete />,
+                danger: true
+            },
+            {
+                label: '清理'
+            },
+            {
+                label: '清理清理'
+            }
+        ]
+    }
+
+    return (
+        <div className={'paraui-table-demo'}>
+            <Title name={'表格'}>代码演示</Title>
+            <CodeBox
+                code={basicTable}
+                title={'基本'}
+                description={<div>
+                    <p>1. 会根据俄外容器的高,自动算出最合适的条数。autoSize=false 可关闭自动算出最适合条数功能,默认是true。</p>
+                    <p>2. 要想显示出那列,必须在这个 headData 每一项中增加 selected: true, 否则当前列不会显示。或者增加 showColumns=false ,则会全部显示所有的列。 </p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headData}
+                        operate={operate}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={operateTable}
+                title={'操作列'}
+                description={<div>
+                    <p>1. operateBtnRender 按钮配置。存在这个参数,操作列宽度将会设置168px</p>
+                    <p>2. 如果operate里面存在render参数, operateBtnRender失效</p>
+                    <p>3. 具体其他用法,可以参考表格操作按钮(OperateBtn)这个组件</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list'}
+                        headData={headData4}
+                        operate={{
+                            label: '操作',
+                            operateBtnRender: (row: any) => {
+                                return {
+                                    list: handBtnList(row),
+                                    loadingMapping: loadingMapping[row.key]
+                                };
+                            }
+                        }}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={customTable}
+                title={'自定义内容'}
+                description={'可以通过formatter属性,或者headData里面的render来自定义。formatter的优先级大于headData里面的render方法。'}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headData1}
+                        //formatter={formatter}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={fixedTable}
+                title={'固定列'}
+                description={<div>
+                    <p>1. 表格默认固定操作栏, 复选框, 单选框, 嵌套按钮。</p>
+                    <p>2. fixed必须要有width属性,且width必须是px单位的。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headDataFiexd}
+                        operate={operate}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={selectTableCheck}
+                title={'可选择多选'}
+                description={<div>
+                    <p>1. disabledArr=[] 来设置禁用选择项。</p>
+                    <p>2. 多选可以通过 checkRememberPage=true 记住前面选中的数据,默认是不记录的。</p>
+                    <p>3. 可以通过 disabledArrStatus 属性来更改禁用时复选框的状态是 选中/不选中/不显示。注意这边的选中不选中与checkDefaultValue无关</p>
+                    <p>4. 必须搭配 checkDefaultValue 属性来使用,否则改变不了状态</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headData}
+                        check={true}
+                        checkDefaultValue={checkValue}
+                        setCheck={changeCheck}
+                        //radio={true}
+                        //expandable={()=><div>asd</div>}
+                        disabledArr={['1key']}
+                        checkRememberPage={true}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={selectTableRadio}
+                title={'可选择单选'}
+                description={<div>
+                    <p>1. disabledArr=[] 来设置禁用选择项。</p>
+                    <p>2. 多选可以通过 checkRememberPage=true 记住前面选中的数据,默认是不记录的。</p>
+                    <p>3. 可以通过 disabledArrStatus 属性来更改禁用时单选框的状态是 选中/不选中/不显示。注意这边的选中不选中与radioDefaultValue无关</p>
+                    <p>4. 必须搭配 radioDefaultValue 属性来使用,否则改变不了状态</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headData}
+                        radio={true}
+                        radioDefaultValue={radioValue}
+                        setRadio={changeRadio}
+                        disabledArr={['1key']}
+                        checkRememberPage={true}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={expandableTable}
+                title={'嵌套'}
+                description={<div>
+                    <p>1. expandValue=[] 来设置默认展开项。</p>
+                    <p>2. expandMultiple=true 展开多个。</p>
+                    <p>3. disabledExpand=[] 禁用展开项。</p>
+                    <p>4. defaultExpandAllRows=true 默认展开所有行。</p>
+                    <p>5. onExpand 展开事件。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        data={dataSource}
+                        headData={headData}
+                        expandable={expandable}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={reqTable}
+                title={'远程数据'}
+                description={<div>
+                    <p>1. pagination 控制表格的分页, 分页数据 {JSON.stringify({
+                        data: {
+                            list: [],
+                            page: 1,
+                            size: 10,
+                            total: 500
+                        }
+                    })}。</p>
+                    <p>2. requestCallback 请求回调参数 requestCallback(data, cb) cb(data) 需要回调数据回来。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list'}
+                        headData={headData3}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={filterSortTable}
+                title={'过滤与筛选'}
+                description={<div>
+                    <p>1. paramsCallback 处理请求参数。</p>
+                    <p>2. sortTableRadio=true 单个排序。</p>
+                    <p>3. headData里面可以设置filterRadio=true 过滤单选。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list'}
+                        headData={headData4}
+                        sortTable={true}
+                        filter={true}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={loadMoreTable}
+                title={'加载更多'}
+                description={<div>
+                    <p>1. loadMoreRender 加载更多自定义。</p>
+                    <p>2. onClickMore 点击加载更多, 可以配合本地数据自己来做加载更多效果。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list'}
+                        headData={headData3}
+                        loadMore={true}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={reqAllTable}
+                title={'远程集合(所有配置走接口)'}
+                description={<div>
+                    <p>1. 通过接口 columns 字段来渲染。</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list/all'}
+                        sortTable={true}
+                        filter={true}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={nullTable}
+                title={'空状态'}
+                description={<div>
+                    <p>1. 又请求的空状态,默认展示了刷新按钮</p>
+                    <p>2. 本地数据的空状态,默认没有刷新按钮</p>
+                    <p>3. 可以通过emptyProps属性来改变空状态组件形态,具体可以参考空状态组件用法</p>
+                </div>}
+            >
+                <div style={{width: '100%', height: '600px'}}>
+                    <Table
+                        ctx={'demo'}
+                        url={'/list/null'}
+                        headData={headData3}
+                    />
+                </div>
+            </CodeBox>
+            <APITable data={apiHeadData} subTitle={'HeadDataProps'} />
+            <APITable data={apiData} subTitle={'TableProps'} showApi={false} />
+        </div>
+    );
+};
+
+export default ParaTable;

package/docs/view/tabs/api.tsx

@@ -0,0 +1,106 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description tabs api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'data',
+        desc: '标签数据源',
+        type: `Array<TabProps>, 
+            interface TabProps {
+            /** 标签*/
+            label?: ReactNode;
+            /** 选中value*/
+            value?: any;
+            /** 禁用*/
+            disabled?: boolean;
+            /** cls*/
+            className?: string;
+            /** 可关闭标签*/
+            closable?: boolean;
+            /** 鼠标悬浮显示关闭图标 */
+            interactive?: boolean;
+        }`
+    },
+    {
+        name: 'value',
+        desc: '当前选中的标签页',
+        type: 'any'
+    },
+    {
+        name: 'mode',
+        desc: '标签模式',
+        type: 'line | card | track',
+        default: 'line'
+    },
+    {
+        name: 'editable',
+        desc: '可关闭的标签',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showToolTip',
+        desc: '是否显示文字提示',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'centered',
+        desc: '标签居中展示',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'variant',
+        desc: '标签的行为',
+        type: 'standard | scrollable',
+        default: 'default'
+    },
+    {
+        name: 'showAdd',
+        desc: '显示新增按钮',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showPopConfirm',
+        desc: '显示 popconfirm，editable 为true 有效',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'popConfirmProps',
+        desc: 'popConfirm 属性',
+        type: 'PopConfirmProps'
+    },
+    {
+        name: 'onChange',
+        desc: '切换标签页的回调',
+        type: '(value: any, tabData?: TabProps, event?: React.ChangeEvent) => void'
+    },
+    {
+        name: 'onEdit',
+        desc: `关闭标签页的回调`,
+        type: '(tabData: TabProps, event?: React.MouseEvent) => void'
+    },
+    {
+        name: 'onAdd',
+        desc: `新增按钮回调，showAdd 为 true 时有效`,
+        type: '(event?: React.MouseEvent) => void'
+    }
+];
+export default apiData;