@para-ui/core 2.1.35 → 2.1.36

package/docs/view/table/index.tsx

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

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