From 61eba8ea3c49e60f61ff0a97d449f2bc98a91554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Thu, 2 Jan 2025 05:28:18 +0800 Subject: [PATCH] chore: code optimization --- src/Tree.tsx | 165 +++++++++++++++++++------------------------- src/contextTypes.ts | 10 ++- src/util.tsx | 2 +- 3 files changed, 77 insertions(+), 100 deletions(-) diff --git a/src/Tree.tsx b/src/Tree.tsx index 7f42fe3f..d5d99e28 100644 --- a/src/Tree.tsx +++ b/src/Tree.tsx @@ -230,10 +230,9 @@ interface TreeState { fieldNames: FieldNames; } -class Tree extends React.Component< - TreeProps, - TreeState -> { +class Tree< + TreeDataType extends DataNode | BasicDataNode = DataNode | BasicDataNode, +> extends React.Component, TreeState> { static defaultProps = { prefixCls: 'rc-tree', showLine: false, @@ -419,7 +418,7 @@ class Tree extends Rea // ================ flattenNodes ================= if (treeData || newState.expandedKeys) { - const flattenNodes: FlattenNode[] = flattenTreeData( + const flattenNodes = flattenTreeData( treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames, @@ -438,7 +437,7 @@ class Tree extends Rea // ================= checkedKeys ================= if (props.checkable) { - let checkedKeyEntity; + let checkedKeyEntity: { checkedKeys?: Key[]; halfCheckedKeys?: Key[] }; if (needSync('checkedKeys')) { checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {}; @@ -545,7 +544,7 @@ class Tree extends Rea if ( // don't allow drop inside its children - dragChildrenKeys.indexOf(dropTargetKey) !== -1 || + dragChildrenKeys.includes(dropTargetKey) || // don't allow drop when drop is not allowed caculated by calcDropPosition !dropAllowed ) { @@ -582,7 +581,7 @@ class Tree extends Rea } onExpand?.(newExpandedKeys, { - node: convertNodePropsToEventData(node.props), + node: convertNodePropsToEventData(node.props), expanded: true, nativeEvent: event.nativeEvent, }); @@ -608,7 +607,7 @@ class Tree extends Rea onDragEnter?.({ event, - node: convertNodePropsToEventData(node.props), + node: convertNodePropsToEventData(node.props), expandedKeys, }); }; @@ -627,10 +626,10 @@ class Tree extends Rea dropLevelOffset, dropTargetKey, dropContainerKey, - dropAllowed, dropTargetPos, + dropAllowed, dragOverNodeKey, - } = calcDropPosition( + } = calcDropPosition( event, dragNode, node, @@ -643,7 +642,7 @@ class Tree extends Rea direction, ); - if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) { + if (dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) { // don't allow drop inside its children // don't allow drop when drop is not allowed calculated by calcDropPosition return; @@ -687,7 +686,7 @@ class Tree extends Rea }); } - onDragOver?.({ event, node: convertNodePropsToEventData(node.props) }); + onDragOver?.({ event, node: convertNodePropsToEventData(node.props) }); }; onNodeDragLeave: NodeDragEventHandler = (event, node) => { @@ -729,7 +728,11 @@ class Tree extends Rea window.removeEventListener('dragend', this.onWindowDragEnd); }; - onNodeDrop = (event: React.DragEvent, node, outsideTree: boolean = false) => { + onNodeDrop = ( + event: React.DragEvent, + _: NodeInstance, + outsideTree: boolean = false, + ) => { const { dragChildrenKeys, dropPosition, dropTargetKey, dropTargetPos, dropAllowed } = this.state; @@ -749,7 +752,7 @@ class Tree extends Rea active: this.getActiveItem()?.key === dropTargetKey, data: getEntity(this.state.keyEntities, dropTargetKey).node, }; - const dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1; + const dropToChild = dragChildrenKeys.includes(dropTargetKey); warning( !dropToChild, @@ -760,7 +763,7 @@ class Tree extends Rea const dropResult = { event, - node: convertNodePropsToEventData(abstractDropNodeProps), + node: convertNodePropsToEventData(abstractDropNodeProps), dragNode: this.dragNode ? convertNodePropsToEventData(this.dragNode.props) : null, dragNodesKeys: [this.dragNode.props.eventKey].concat(dragChildrenKeys), dropToGap: dropPosition !== 0, @@ -866,7 +869,7 @@ class Tree extends Rea return entity.node; }) - .filter(node => node); + .filter(Boolean); this.setUncontrolledState({ selectedKeys }); @@ -893,7 +896,8 @@ class Tree extends Rea const { key } = treeNode; // Prepare trigger arguments - let checkedObj; + let checkedObj: { checked: Key[]; halfChecked: Key[] } | React.Key[]; + const eventObj: Partial> = { event: 'check', node: treeNode, @@ -908,7 +912,7 @@ class Tree extends Rea eventObj.checkedNodes = checkedKeys .map(checkedKey => getEntity(keyEntities, checkedKey)) - .filter(entity => entity) + .filter(Boolean) .map(entity => entity.node); this.setUncontrolledState({ checkedKeys }); @@ -948,15 +952,7 @@ class Tree extends Rea eventObj.checkedNodesPositions.push({ node, pos }); }); - this.setUncontrolledState( - { - checkedKeys, - }, - false, - { - halfCheckedKeys, - }, - ); + this.setUncontrolledState({ checkedKeys }, false, { halfCheckedKeys }); } onCheck?.(checkedObj, eventObj as CheckInfo); @@ -977,7 +973,7 @@ class Tree extends Rea this.setState(({ loadedKeys = [], loadingKeys = [] }): any => { const { loadData, onLoad } = this.props; - if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) { + if (!loadData || loadedKeys.includes(key) || loadingKeys.includes(key)) { return null; } @@ -1102,19 +1098,8 @@ class Tree extends Rea /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */ setExpandedKeys = (expandedKeys: Key[]) => { const { treeData, fieldNames } = this.state; - - const flattenNodes: FlattenNode[] = flattenTreeData( - treeData, - expandedKeys, - fieldNames, - ); - this.setUncontrolledState( - { - expandedKeys, - flattenNodes, - }, - true, - ); + const flattenNodes = flattenTreeData(treeData, expandedKeys, fieldNames); + this.setUncontrolledState({ expandedKeys, flattenNodes }, true); }; onNodeExpand = (e: React.MouseEvent, treeNode: EventDataNode) => { @@ -1130,19 +1115,15 @@ class Tree extends Rea } // Update selected keys - const index = expandedKeys.indexOf(key); + const certain = expandedKeys.includes(key); const targetExpanded = !expanded; warning( - (expanded && index !== -1) || (!expanded && index === -1), + (expanded && certain) || (!expanded && !certain), 'Expand state not sync with index check', ); - if (targetExpanded) { - expandedKeys = arrAdd(expandedKeys, key); - } else { - expandedKeys = arrDel(expandedKeys, key); - } + expandedKeys = targetExpanded ? arrAdd(expandedKeys, key) : arrDel(expandedKeys, key); this.setExpandedKeys(expandedKeys); @@ -1400,6 +1381,7 @@ class Tree extends Rea rootClassName, rootStyle, } = this.props; + const domProps: React.HTMLAttributes = pickAttrs(this.props, { aria: true, data: true, @@ -1419,51 +1401,48 @@ class Tree extends Rea } } + const contextValue = { + prefixCls, + selectable, + showIcon, + icon, + switcherIcon, + draggable: draggableConfig, + draggingNodeKey, + checkable, + checkStrictly, + disabled, + keyEntities, + dropLevelOffset, + dropContainerKey, + dropTargetKey, + dropPosition, + dragOverNodeKey, + indent, + direction, + dropIndicatorRender, + loadData, + filterTreeNode, + titleRender, + onNodeClick: this.onNodeClick, + onNodeDoubleClick: this.onNodeDoubleClick, + onNodeExpand: this.onNodeExpand, + onNodeSelect: this.onNodeSelect, + onNodeCheck: this.onNodeCheck, + onNodeLoad: this.onNodeLoad, + onNodeMouseEnter: this.onNodeMouseEnter, + onNodeMouseLeave: this.onNodeMouseLeave, + onNodeContextMenu: this.onNodeContextMenu, + onNodeDragStart: this.onNodeDragStart, + onNodeDragEnter: this.onNodeDragEnter, + onNodeDragOver: this.onNodeDragOver, + onNodeDragLeave: this.onNodeDragLeave, + onNodeDragEnd: this.onNodeDragEnd, + onNodeDrop: this.onNodeDrop, + }; + return ( - +
dropIndicatorRender: (props: { dropPosition: -1 | 0 | 1; dropLevelOffset: number; - indent; - prefixCls; + indent: number; + prefixCls: string; direction: Direction; }) => React.ReactNode; dragOverNodeKey: Key | null; @@ -92,9 +92,7 @@ export interface TreeContextProps onNodeDrop: NodeDragEventHandler; } -export const TreeContext: React.Context | null> = React.createContext(null); +export const TreeContext = React.createContext>(null); /** Internal usage, safe to remove. Do not use in prod */ -export const UnstableContext = React.createContext<{ - nodeDisabled?: (node: DataNode) => boolean; -}>({}); +export const UnstableContext = React.createContext<{ nodeDisabled?: (n: DataNode) => boolean }>({}); diff --git a/src/util.tsx b/src/util.tsx index c689d028..f9135acc 100644 --- a/src/util.tsx +++ b/src/util.tsx @@ -309,7 +309,7 @@ export function parseCheckedKeys(keys: Key[] | { checked: Key[]; halfChecked: Ke } // Convert keys to object format - let keyProps; + let keyProps: { checkedKeys?: Key[]; halfCheckedKeys?: Key[] }; if (Array.isArray(keys)) { // [Legacy] Follow the api doc keyProps = {