@para-ui/core 2.1.32 → 2.1.35

package/docs/view/tree/index.tsx

@@ -0,0 +1,362 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Tree, {DataNode} from 'src/Tree';
+import Switch from 'src/Switch';
+import TextField from 'src/TextField';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicTree,
+    controlTree,
+    asyncLoadTree,
+    showLineTree,
+    radioTree,
+    remoteLoadTree,
+    localSearchTree,
+    showActionsTree
+} from './codeString';
+import apiData, {treeNodeApi} from './api';
+import ProjectIcon from "@para-ui/icons/Project";
+// import BlacklistAdd from "@para-ui/icons/BlacklistAdd";
+import './index.scss';
+
+//tree
+const ParaTree: FunctionComponent = () => {
+    const treeData = [
+        {
+            title: 'parent 1',
+            key: '0-0',
+            children: [
+                {
+                    title: 'parent 1-0',
+                    key: '0-0-0',
+                    disabled: true,
+                    children: [
+                        {
+                            title: 'leaf',
+                            key: '0-0-0-0',
+                            disableCheckbox: true,
+                        },
+                        {
+                            title: 'leaf',
+                            key: '0-0-0-1',
+                        },
+                    ],
+                },
+                {
+                    title: 'parent 1-1',
+                    key: '0-0-1',
+                    children: [{title: <span style={{color: '#3666d6'}}>custom node</span>, key: '0-0-1-0'}],
+                },
+            ],
+        },
+    ];
+
+    const treeDataControl = [
+        {
+            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 onSelect = (selectedKeys: React.Key[], info: any) => {
+        console.log('selected', selectedKeys, info);
+    };
+
+    const onCheck = (checkedKeys: React.Key[], info: any) => {
+        console.log('onCheck', checkedKeys, info);
+    };
+
+    const [expandedKeys, setExpandedKeys] = React.useState<React.Key[]>(['0-0-0', '0-0-1']);
+    const [checkedKeys, setCheckedKeys] = React.useState<React.Key[]>(['0-0-0']);
+    const [selectedKeys, setSelectedKeys] = React.useState<React.Key[]>([]);
+
+    const onExpandControl = (expandedKeysValue: React.Key[]) => {
+        console.log('onExpandControl', expandedKeysValue);
+        setExpandedKeys(expandedKeysValue);
+    };
+
+    const onCheckControl = (checkedKeysValue: React.Key[], info: any) => {
+        console.log('onCheckControl', checkedKeysValue, info);
+        setCheckedKeys(checkedKeysValue);
+    };
+
+    const onSelectControl = (selectedKeysValue: React.Key[], info: any) => {
+        console.log('onSelectControl', info);
+        setSelectedKeys(selectedKeysValue);
+    };
+
+    const initTreeData: DataNode[] = [
+        {title: 'Expand to load', key: '0'},
+        {title: 'Expand to load', key: '1'},
+        {title: 'Tree Node', key: '2', isLeaf: true},
+    ];
+
+    const [loadTreeData, setLoadTreeData] = React.useState(initTreeData);
+
+    const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] => {
+        return list.map(node => {
+            if (node.key === key) {
+                return {
+                    ...node,
+                    children,
+                };
+            }
+            if (node.children) {
+                return {
+                    ...node,
+                    children: updateTreeData(node.children, key, children),
+                };
+            }
+            return node;
+        });
+    };
+    const onLoadData = ({key, children}: any) => {
+        return new Promise<void>(resolve => {
+            if (children) {
+                resolve();
+                return;
+            }
+            setTimeout(() => {
+                // if (key === '0-0-0') {
+                //     setLoadTreeData((origin: DataNode[]) =>
+                //         updateTreeData(origin, key, []),
+                //     );
+                //     resolve();
+                //     return;
+                // }
+
+                setLoadTreeData((origin: DataNode[]) =>
+                    updateTreeData(origin, key, [
+                        {title: 'Child Node', key: `${key}-0`},
+                        {title: 'Child Node', key: `${key}-1`},
+                    ]),
+                );
+
+                resolve();
+            }, 1000);
+        });
+    };
+
+    const [showLine, setShowLine] = React.useState<boolean | { showLeafIcon: boolean }>(true);
+    const [showIcon, setShowIcon] = React.useState<boolean>(false);
+    const [showLeafIcon, setShowLeafIcon] = React.useState<boolean>(true);
+
+    const onSetLeafIcon = (checked: boolean) => {
+        setShowLeafIcon(checked);
+        setShowLine({showLeafIcon: checked});
+    };
+
+    const onSetShowLine = (checked: boolean) => {
+        setShowLine(checked ? {showLeafIcon} : false);
+    };
+
+    const treeDataSearch = [
+        {
+            title: '0-0',
+            key: '0-0',
+            children: [
+                {
+                    title: '0-0-0',
+                    key: '0-0-0',
+                    parentId: '0-0',
+                    children: [
+                        {title: '0-0-0-0', key: '0-0-0-0', parentId: '0-0-0'},
+                        {title: '0-0-0-1', key: '0-0-0-1', parentId: '0-0-0'},
+                        {title: '0-0-0-2', key: '0-0-0-2', parentId: '0-0-0'},
+                    ],
+                },
+                {
+                    title: '0-0-1',
+                    key: '0-0-1',
+                    children: [
+                        {title: '0-0-1-0', key: '0-0-1-0', parentId: '0-0-1'},
+                        {title: '0-0-1-1', key: '0-0-1-1', parentId: '0-0-1'},
+                        {title: '0-0-1-2', key: '0-0-1-2', parentId: '0-0-1'},
+                    ],
+                },
+                {
+                    title: '0-0-2',
+                    key: '0-0-2',
+                },
+            ],
+        },
+        {
+            title: '0-1',
+            key: '0-1',
+            children: [
+                {title: '0-1-0-0', key: '0-1-0-0', parentId: '0-1'},
+                {title: '0-1-0-1', key: '0-1-0-1', parentId: '0-1'},
+                {title: '0-1-0-2', key: '0-1-0-2', parentId: '0-1'},
+            ],
+        },
+        {
+            title: '0-2',
+            key: '0-2',
+        }
+    ];
+
+    const [value, setValue] = React.useState<string>('');
+    const [valueR, setValueR] = React.useState<string>('');
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+    };
+    const onChangeR = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValueR(e.target.value);
+    };
+
+    const handleActionsCallback = (nodeData: DataNode, type: 'add' | 'edit' | 'enable' | 'del' | string) => {
+        console.log('actionsCallback:::', type, nodeData);
+    };
+
+    return (
+        <div className={'paraui-tree-demo'}>
+            <Title name={'树形控件'}>代码演示</Title>
+            <CodeBox code={basicTree} title={'基本'} description={'最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。'}>
+                <Tree
+                    checkable
+                    defaultExpandedKeys={['0-0-0', '0-0-1']}
+                    defaultSelectedKeys={['0-0-0', '0-0-1']}
+                    defaultCheckedKeys={['0-0-0', '0-0-1']}
+                    onSelect={onSelect}
+                    onCheck={onCheck}
+                    treeData={treeData}
+                />
+            </CodeBox>
+            <CodeBox code={controlTree} title={'受控操作示例'} description={'受控操作示例。'}>
+                <Tree
+                    checkable
+                    onExpand={onExpandControl}
+                    expandedKeys={expandedKeys}
+                    onCheck={onCheckControl}
+                    checkedKeys={checkedKeys}
+                    onSelect={onSelectControl}
+                    selectedKeys={selectedKeys}
+                    treeData={treeDataControl}
+                />
+            </CodeBox>
+            <CodeBox code={asyncLoadTree} title={'异步数据加载（支持分页）'} description={`点击展开节点，动态加载数据。
+            添加 asyncLoad 属性可开启同样的逻辑，
+            开启后不要传递 loadData 属性，需把数据请求放在组件内部执行。异步加载时，pagination 属性控制是否分页，分页数据格式 {list,page,size,total}`}>
+                <Tree loadData={onLoadData} treeData={loadTreeData}/>
+            </CodeBox>
+            <CodeBox code={showLineTree} title={'连接线'}
+                     description={'节点之间带连接线的树，常用于文件目录结构。使用 showLine 开启，可以用 switcherIcon 修改图标。'}>
+                <div style={{marginBottom: 16}}>
+                    showLine: <Switch checked={!!showLine} onChange={onSetShowLine}/>
+                    <br/>
+                    <br/>
+                    showIcon: <Switch checked={showIcon} onChange={setShowIcon}/>
+                    <br/>
+                    <br/>
+                    showLeafIcon: <Switch checked={showLeafIcon} onChange={onSetLeafIcon}/>
+                </div>
+                <Tree
+                    showLine={showLine}
+                    showIcon={showIcon}
+                    treeData={treeDataControl}
+                    icon={<ProjectIcon/>}
+                />
+            </CodeBox>
+            <CodeBox code={radioTree} title={'单选'} description={'单选树。'}>
+                <Tree radioable treeData={treeDataControl}/>
+            </CodeBox>
+            <CodeBox code={remoteLoadTree} title={'远程加载数据'} description={'提供快捷简单的远程加载数据。'}>
+                <TextField
+                    value={valueR}
+                    onChange={onChangeR}
+                    placeholder="Search"
+                />
+                <Tree ctx={'demo'}
+                      url={'/list/all'}
+                      pagination={true}
+                      style={{height: '300px', overflow: 'auto'}}
+                      params={{page: 1, size: 10, searchValue: valueR}}
+                      replaceFields={{key: 'key', title: 'name'}}
+                      requestCallback={(data: any) => {
+                          if (valueR !== '') return [];
+                          return data;
+                      }}
+                />
+            </CodeBox>
+            <CodeBox code={localSearchTree} title={'本地搜索'} description={'可本地搜索的树。'}>
+                <TextField
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Search"
+                />
+                <Tree treeData={treeDataSearch}
+                      localFilter={true}
+                      localParams={{searchKey: 'title', searchValue: value}}
+                />
+            </CodeBox>
+            <CodeBox code={showActionsTree} title={'节点内置操作'} description={`showActions 可开启树节点内置操作按钮。`}>
+                <Tree treeData={treeDataControl}
+                      actionsCallback={handleActionsCallback}
+                    //启用全部内置按钮
+                      showActions={true}
+
+                    //传入false或不传，则不显示对应按钮
+                    //   showActions={{
+                    //       add: true,
+                    //       edit: true,
+                    //       // enable: true,
+                    //       del: false
+                    //   }}
+
+                    //自定义按钮
+                    //   showActions={{
+                    //       add: true,
+                    //       del: true,
+                    //       customizeActions: [
+                    //           {text: '自定义', icon: <ProjectIcon/>, action: 'test'},
+                    //       ]
+                    //   }}
+
+                    //自定义按钮text和icon
+                    //   showActions={{
+                    //       add: {text: 'new', icon: <BlacklistAdd/>},
+                    //       del: true
+                    //   }}
+
+                    //根据节点数据，判断是否显示按钮
+                    //   showActions={{
+                    //       add: (node: DataNode) => node.key !== '0-0',
+                    //       edit: true,
+                    //       del: true
+                    //   }}
+                />
+            </CodeBox>
+
+            <APITable data={apiData} subTitle={'Tree props'}/>
+            <APITable data={treeNodeApi} showApi={false} subTitle={'TreeNode props'}/>
+        </div>
+    );
+};
+
+export default ParaTree;

package/docs/view/upload/api.tsx

@@ -0,0 +1,302 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description upload api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'accept',
+        desc: '接受上传的文件类型',
+        type: 'string'
+    },
+    {
+        name: 'action',
+        desc: '上传的地址',
+        type: 'string | (file) => Promise<string>'
+    },
+    {
+        name: 'beforeUpload',
+        desc: `上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
+        支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）`,
+        type: '(file, fileList) => boolean | Promise<File>'
+    },
+    {
+        name: 'customRequest',
+        desc: '通过覆盖默认的上传行为，可以自定义自己的上传实现',
+        type: 'function'
+    },
+    {
+        name: 'data',
+        desc: '上传所需额外参数或返回上传额外参数的方法',
+        type: 'object|(file) => object | Promise<object>'
+    },
+    {
+        name: 'defaultFileList',
+        desc: '默认已经上传的文件列表',
+        type: 'UploadFile[]'
+    },
+    {
+        name: 'directory',
+        desc: '支持上传文件夹',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'dragArea',
+        desc: '拖拽上传时，自定义拖拽区域元素',
+        type: `{
+            /** 图标 */
+            areaIcon?: ReactNode;
+            /** 文本 */
+            areaText?: ReactNode;
+            /** 描述 */
+            areaDesc?: ReactNode;
+        }`
+    },
+    {
+        name: 'fileList',
+        desc: '（受控）已经上传的文件列表',
+        type: 'UploadFile[]'
+    },
+    {
+        name: 'headers',
+        desc: '设置上传的请求头部',
+        type: 'object'
+    },
+    {
+        name: 'itemRender',
+        desc: '自定义上传列表项',
+        type: '(file: UploadFile, fileList?: Array<UploadFile>) => React.ReactNode'
+    },
+    {
+        name: 'maxCount',
+        desc: '限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件',
+        type: 'number'
+    },
+    {
+        name: 'method',
+        desc: '上传请求的 http method',
+        type: 'string',
+        default: 'post'
+    },
+    {
+        name: 'multiple',
+        desc: '是否支持多选文件',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'name',
+        desc: '发到后台的文件参数名',
+        type: 'string',
+        default: 'file'
+    },
+    {
+        name: 'openFileDialogOnClick',
+        desc: '点击打开文件对话框',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'showUploadList',
+        desc: '是否展示文件列表',
+        type: `boolean | {
+            /** 是否显示删除图标 */
+            showRemoveIcon?: boolean;
+            /** 删除图标 */
+            removeIcon?: React.ReactNode;
+        }`,
+        default: 'true'
+    },
+    {
+        name: 'showUploadError',
+        desc: '是否显示上传错误提示',
+        type: 'boolean | { uploadErrorMsg?: string; leaveDelay?: number }',
+        default: 'true'
+    },
+    {
+        name: 'stash',
+        desc: '开启暂存文件，beforeUpload 需返回 false 停止上传',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showLoading',
+        desc: '是否显示上传loading，uploading 是遗留写法',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'withCredentials',
+        desc: '上传请求时是否携带 cookie',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'defaultImage',
+        desc: '头像上传时默认图片，showUploadList 为 false 时有效',
+        type: `{imageUrl: string; imageName?: string;}`,
+        default: '{imageUrl: ""}'
+    },
+    {
+        name: 'onRemove',
+        desc: '点击移除文件时的回调',
+        type: 'function(file): boolean | Promise'
+    },
+    {
+        name: 'onStart',
+        desc: '上传开始时回调',
+        type: 'function(file)'
+    },
+    {
+        name: 'onSuccess',
+        desc: '上传成功时回调',
+        type: 'function(response, file)'
+    },
+    {
+        name: 'onError',
+        desc: '上传失败时回调',
+        type: 'function(error)'
+    },
+    {
+        name: 'onProgress',
+        desc: '上传进度回调',
+        type: 'function(event)'
+    },
+    {
+        name: 'onChange',
+        desc: '上传文件改变时回调',
+        type: 'function(files: UploadFile[])'
+    },
+    {
+        name: 'onDrop',
+        desc: '当文件被拖入上传区域时回调',
+        type: 'function(event: React.DragEvent)'
+    }
+];
+
+export const imgCropApi: RowsData = [
+    {
+        name: 'aspect',
+        desc: '纵横比，width / height',
+        type: 'number',
+        default: '1/1'
+    },
+    {
+        name: 'shape',
+        desc: '裁剪形状',
+        type: 'rect|round',
+        default: 'rect'
+    },
+    {
+        name: 'grid',
+        desc: '显示网格',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'quality',
+        desc: '图片质量，0-1',
+        type: 'number',
+        default: '0.4'
+    },
+    {
+        name: 'fillColor',
+        desc: '填充颜色',
+        type: 'string',
+        default: 'white'
+    },
+    {
+        name: 'zoom',
+        desc: '启用缩放图片',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'rotate',
+        desc: '启用旋转图片',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'minZoom',
+        desc: '最小缩放',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'maxZoom',
+        desc: '最大缩放',
+        type: 'number',
+        default: '3'
+    },
+    {
+        name: 'modalTitle',
+        desc: 'modal 标题',
+        type: 'ReactNode',
+        default: 'Edit image'
+    },
+    {
+        name: 'modalWidth',
+        desc: 'modal 宽度',
+        type: 'number|string',
+    },
+    {
+        name: 'modalOk',
+        desc: 'modal 确定按钮文字',
+        type: 'string',
+        default: '确定'
+    },
+    {
+        name: 'modalCancel',
+        desc: 'modal 取消按钮文字',
+        type: 'string',
+        default: '取消'
+    },
+    {
+        name: 'onModalOk',
+        desc: 'modal 点击确定回调',
+        type: '(file: void | boolean | string | Blob | File) => void'
+    },
+    {
+        name: 'onModalCancel',
+        desc: 'modal 点击取消回调',
+        type: '() => void',
+    },
+    {
+        name: 'beforeCrop',
+        desc: 'modal 打开之前调用，如果返回false，不打开modal',
+        type: '(file: File, fileList: File[]) => boolean | Promise<boolean>',
+    },
+    {
+        name: 'onUploadFail',
+        desc: '上传失败回调',
+        type: '(err: Error) => void',
+    },
+    {
+        name: 'cropperProps',
+        desc: 'react-easy-crop 属性',
+        type: 'object',
+    }
+];
+
+
+export default apiData;