@para-ui/core 2.1.35 → 2.1.36

package/docs/view/tree/index.tsx

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

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