@para-ui/core 2.1.32 → 2.1.35

package/docs/view/tree/api.tsx

@@ -0,0 +1,413 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description tree api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'allowDrop',
+        desc: '是否允许拖拽时放置在该节点',
+        type: '({ dropNode, dropPosition }) => boolean'
+    },
+    {
+        name: 'autoExpandParent',
+        desc: '是否自动展开父节点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'blockNode',
+        desc: '是否节点占据一行',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'checkable',
+        desc: '节点前添加 Checkbox 复选框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'checkedKeys',
+        desc: `受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。
+        当设置 checkable 和 checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联`,
+        type: 'string[] | {checked: string[], halfChecked: string[]}',
+        default: '[]'
+    },
+    {
+        name: 'checkStrictly',
+        desc: 'checkable 状态下节点选择完全受控（父子节点选中状态不再关联）',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'defaultCheckedKeys',
+        desc: '默认选中复选框的树节点',
+        type: 'string[]',
+        default: '[]'
+    },
+    {
+        name: 'defaultExpandAll',
+        desc: '默认展开所有树节点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'defaultExpandedKeys',
+        desc: '默认展开指定的树节点',
+        type: 'string[]',
+        default: '[]'
+    },
+    {
+        name: 'defaultExpandParent',
+        desc: '默认展开父节点',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'defaultSelectedKeys',
+        desc: '默认选中的树节点',
+        type: 'string[]',
+        default: '[]'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用树',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'draggable',
+        desc: '置节点可拖拽，(暂未实现)',
+        type: `boolean | ((node: DataNode) => boolean) | { icon?: React.ReactNode | false, nodeDraggable?: (node: DataNode) => boolean }`,
+        default: 'false'
+    },
+    {
+        name: 'expandedKeys',
+        desc: '（受控）展开指定的树节点',
+        type: 'string[]',
+        default: '[]'
+    },
+    {
+        name: 'filterTreeNode',
+        desc: '按需筛选树节点（高亮），返回 true',
+        type: 'function(node)'
+    },
+    {
+        name: 'height',
+        desc: '设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动',
+        type: 'number'
+    },
+    {
+        name: 'icon',
+        desc: '自定义树节点图标',
+        type: 'ReactNode | (props) => ReactNode'
+    },
+    {
+        name: 'loadData',
+        desc: '异步加载数据',
+        type: 'function(node)'
+    },
+    {
+        name: 'loadedKeys',
+        desc: '（受控）已经加载的节点，需要配合 loadData 使用',
+        type: 'string[]'
+    },
+    {
+        name: 'multiple',
+        desc: '支持点选多个节点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'selectable',
+        desc: '是否可选中',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'selectedKeys',
+        desc: '（受控）设置选中的树节点',
+        type: 'string[]'
+    },
+    {
+        name: 'showIcon',
+        desc: '是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showLine',
+        desc: '是否显示连接线',
+        type: 'boolean | {showLeafIcon: boolean}',
+        default: 'false'
+    },
+    {
+        name: 'switcherIcon',
+        desc: '自定义树节点的展开/折叠图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'titleRender',
+        desc: '自定义渲染节点',
+        type: '(nodeData) => ReactNode'
+    },
+    {
+        name: 'treeData',
+        desc: 'treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）',
+        type: 'array<{key, title, children, [disabled, selectable]}>'
+    },
+    // {
+    //     name: 'treeLoadedKeys',
+    //     desc: '（受控）已经加载的节点，需要配合 loadData 使用',
+    //     type: 'string[]'
+    // },
+    {
+        name: 'virtual',
+        desc: '设置 false 时关闭虚拟滚动',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'showActions',
+        desc: '是否显示节点内置的操作按钮',
+        type: ` boolean | {
+            add?: ActionItem; //新增
+            edit?: ActionItem; //编辑
+            enable?: ActionItem; //启用
+            del?: ActionItem; //删除
+            customizeActions?: { action: string; text: string; icon: ReactNode; show?: HasAction; }[];
+        };`,
+        default: 'false'
+    },
+    {
+        name: 'actionsCallback',
+        desc: '节点内置操作按钮的回调，showActions 开启时有效',
+        type: '(nodeData: DataNode, type: ActionType, evt?: React.MouseEvent) => void'
+    },
+    {
+        name: 'url',
+        desc: '请求url',
+        type: 'string'
+    },
+    {
+        name: 'ctx',
+        desc: '请求上下文',
+        type: 'string'
+    },
+    {
+        name: 'method',
+        desc: '请求方法',
+        type: 'GET | POST | Get | Post | get | post',
+        default: 'GET'
+    },
+    {
+        name: 'params',
+        desc: '请求参数',
+        type: 'Object | null'
+    },
+    {
+        name: 'requestCallback',
+        desc: '请求成功后的回调',
+        type: '(treeData: any) => any'
+    },
+    {
+        name: 'paramsCallback',
+        desc: '请求之前参数的回调',
+        type: '(params: { [name: string]: any }) => any'
+    },
+    {
+        name: 'refresh',
+        desc: '刷新组件',
+        type: 'number'
+    },
+    {
+        name: 'replaceFields',
+        desc: '自定义节点 title、key、children parentId loadKey 的字段',
+        type: `{
+            /** 标题 */
+            title?: string;
+            /**子节点 */
+            children?: string;
+            /** 节点key */
+            key?: string;
+            /** 父节点id */
+            parentId?: string;
+            /** 懒加载时key */
+            loadKey?: string;
+        }`,
+        default: `{key: 'key', parentId: 'parentId', children: 'children', title: 'title', loadKey: 'key'}`
+    },
+    {
+        name: 'radioable',
+        desc: '节点前添加 Radio 单选框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showRadio',
+        desc: '是否显示 radio 单选框，radioable 为 true 时有效',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'asyncLoad',
+        desc: '是否异步加载数据，开启后不要传递 loadData 属性，需把数据请求放在组件内部执行',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'pagination',
+        desc: '是否开启数据分页，asyncLoad 为 true 时，pagination 属性控制是否分页，分页数据格式 {list,page,size,total}',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'pageSize',
+        desc: '分页参数， pagination 为 true 时有效',
+        type: '{ page?: number, size?: number }',
+        default: '{page: 1, size: 10}'
+    },
+    {
+        name: 'localFilter',
+        desc: '是否开启本地数据过滤',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'localParams',
+        desc: '本地数据过滤参数，localFilter 为 true 时有效',
+        type: `{searchKey: string; searchValue: string;}`
+    },
+    {
+        name: 'onFilter',
+        desc: '本地数据过滤回调，localFilter 为 true 时有效',
+        type: '(data: DataNode[]) => DataNode[]'
+    },
+    {
+        name: 'loadMoreNode',
+        desc: '自定义加载更多节点，asyncLoad 为 true 且 pagination 为 true 时有效',
+        type: 'ReactNode'
+    },
+    {
+        name: 'onCheck',
+        desc: '点击复选框触发',
+        type: 'boolean',
+        default: 'function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys})'
+    },
+    {
+        name: 'onDragEnd',
+        desc: 'dragend 触发时调用',
+        type: 'function({event, node})'
+    },
+    {
+        name: 'onDragEnter',
+        desc: 'dragenter 触发时调用',
+        type: 'function({event, node, expandedKeys})'
+    },
+    {
+        name: 'onDragLeave',
+        desc: 'dragleave 触发时调用',
+        type: 'function({event, node})'
+    },
+    {
+        name: 'onDragOver',
+        desc: 'dragover 触发时调用',
+        type: 'function({event, node})'
+    },
+    {
+        name: 'onDragStart',
+        desc: '开始拖拽时调用',
+        type: 'function({event, node})'
+    },
+    {
+        name: 'onDrop',
+        desc: 'drop 触发时调用',
+        type: 'function({event, node, dragNode, dragNodesKeys})'
+    },
+    {
+        name: 'onExpand',
+        desc: '展开/收起节点时触发',
+        type: 'function(expandedKeys, {expanded: bool, node})'
+    },
+    {
+        name: 'onLoad',
+        desc: '节点加载完毕时触发',
+        type: 'function(loadedKeys, {event, node})'
+    },
+    {
+        name: 'onRightClick',
+        desc: '响应右键点击',
+        type: 'function({event, node})'
+    },
+    {
+        name: 'onSelect',
+        desc: '点击树节点触发',
+        type: 'function(selectedKeys, e:{selected: bool, selectedNodes, node, event})'
+    },
+    {
+        name: 'onMounted',
+        desc: '非空渲染完成时回调',
+        type: '() => void'
+    }
+];
+
+export const treeNodeApi: RowsData = [
+    {
+        name: 'checkable',
+        desc: '当树为 checkable 时，设置独立节点是否展示 Checkbox',
+        type: 'boolean'
+    },
+    {
+        name: 'disableCheckbox',
+        desc: '禁掉 checkbox',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabled',
+        desc: '禁掉响应',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'icon',
+        desc: '自定义图标。可接收组件，props 为当前节点 props',
+        type: 'ReactNode | (props) => ReactNode'
+    },
+    {
+        name: 'isLeaf',
+        desc: '设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点',
+        type: 'boolean'
+    },
+    {
+        name: 'key',
+        desc: '被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复',
+        type: 'string'
+    },
+    {
+        name: 'selectable',
+        desc: '设置节点是否可被选中',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'title',
+        desc: '标题',
+        type: 'ReactNode'
+    }
+
+];
+export default apiData;