@para-ui/core 2.1.32 → 2.1.35

package/docs/view/table/codeString.tsx

@@ -0,0 +1,737 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const operate: HeadDataProps = {
+    label: '操作栏',
+    render: (row: any) => {
+        return '操作栏内容'
+    }
+}
+
+const headData: 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
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        operate={operate}
+    />
+</div>
+`;
+
+export const fixedTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const operate: HeadDataProps = {
+    label: '操作栏',
+    render: (row: any) => {
+        return '操作栏内容'
+    }
+}
+
+const headData: 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'
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        operate={operate}
+    />
+</div>
+`;
+
+export const customTable = `
+import Table from '@para-ui/core/Table';
+import Tag from '@para-ui/core/Tag';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const headData: 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 formatter = (row: any, item: any, value: any, index: any) => {
+    if (item.name === 'age') {
+        return <Tag>{value}</Tag>
+    }
+    return value;
+}
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        //formatter={formatter}
+    />
+</div>
+`;
+
+export const selectTableCheck = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = useState<any[]>([]);
+const [checkValue, setCheckValue] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const headData: 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 changeCheck = (a: any, b: any) => {
+    console.log('多选', a, b);
+    setCheckValue(a);
+}
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        check={true}
+        checkDefaultValue={checkValue}
+        setCheck={changeCheck}
+        disabledArr={['1key']}
+        checkRememberPage={true}
+    />
+</div>
+`;
+
+export const selectTableRadio = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = useState<any[]>([]);
+const [radioValue, setRadioValue] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const headData: 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 changeRadio = (a: any, b: any) => {
+    console.log('单选', a, b);
+    setRadioValue(a);
+}
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        radio={true}
+        radioDefaultValue={radioValue}
+        setRadio={changeRadio}
+        disabledArr={['1key']}
+        checkRememberPage={true}
+    />
+</div>
+`;
+
+export const expandableTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+const [dataSource, setDataSource] = 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号'
+        }
+        arr.push(obj);
+    }
+    setDataSource(arr);
+}, [])
+
+const headData: 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 expandable = (row: any) => {
+    return (
+        <div>{row.key}---嵌套内容</div>
+    )
+}
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        data={dataSource}
+        headData={headData}
+        expandable={expandable}
+    />
+</div>
+`;
+
+export const reqTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+
+const headData: 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
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list'}
+        headData={headData}
+    />
+</div>
+`;
+
+export const filterSortTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+
+const headData: 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
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list'}
+        headData={headData}
+        sortTable={true}
+        filter={true}
+    />
+</div>
+`;
+
+export const loadMoreTable = `
+import Table from '@para-ui/core/Table';
+import {HeadDataProps} from '@para-ui/core/Table/interface';
+
+const headData: 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
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list'}
+        headData={headData}
+        loadMore={true}
+    />
+</div>
+`;
+
+export const reqAllTable = `
+import Table from '@para-ui/core/Table';
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list/all'}
+        sortTable={true}
+        filter={true}
+    />
+</div>
+`;
+
+export const nullTable = `
+import Table,{HeadDataProps} from '@para-ui/core/Table';
+
+const headData: 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
+    }
+];
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list/null'}
+        headData={headData}
+    />
+</div>
+`;
+
+export const operateTable = `
+import Table,{HeadDataProps} from '@para-ui/core/Table';
+const [loadingMapping, setLoadingMapping] = useState<any>({});
+
+const headData: 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 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: '清理清理'
+        }
+    ]
+}
+
+<div style={{width: '100%', height: '600px'}}>
+    <Table
+        ctx={'demo'}
+        url={'/list'}
+        headData={headData}
+        operate={{
+            label: '操作',
+            operateBtnRender: (row: any) => {
+                return {
+                    list: handBtnList(row),
+                    loadingMapping: loadingMapping[row.key]
+                };
+            }
+        }}
+    />
+</div>
+`