@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-tree/util.tsx

@@ -0,0 +1,352 @@
+/**
+ * Legacy code. Should avoid to use if you are new to import these code.
+ */
+import { warning } from '../vc-util/warning'
+import TreeNode from './TreeNode'
+import type {
+  BasicDataNode,
+  DataEntity,
+  DataNode,
+  Direction,
+  DragNodeEvent,
+  FlattenNode,
+  Key,
+  NodeElement,
+} from './interface'
+import type { AllowDrop, TreeNodeProps, TreeProps } from './props'
+
+export function arrDel(list: Key[], value: Key) {
+  if (!list) return []
+  const clone = list.slice()
+  const index = clone.indexOf(value)
+  if (index >= 0) {
+    clone.splice(index, 1)
+  }
+  return clone
+}
+
+export function arrAdd(list: Key[], value: Key) {
+  const clone = (list || []).slice()
+  if (!clone.includes(value)) {
+    clone.push(value)
+  }
+  return clone
+}
+
+export function posToArr(pos: string) {
+  return pos.split('-')
+}
+
+export function getPosition(level: string | number, index: number) {
+  return `${level}-${index}`
+}
+
+export function isTreeNode(node: NodeElement) {
+  return node && node.type && (node.type as any).isTreeNode
+}
+
+export function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(
+  dragNodeKey: Key,
+  keyEntities: Record<Key, DataEntity<TreeDataType>>,
+): Key[] {
+  // not contains self
+  // self for left or right drag
+  const dragChildrenKeys = []
+
+  const entity = keyEntities[dragNodeKey]
+  function dig(list: DataEntity<TreeDataType>[] = []) {
+    list.forEach(({ key, children }) => {
+      dragChildrenKeys.push(key)
+      dig(children)
+    })
+  }
+
+  dig(entity.children)
+
+  return dragChildrenKeys
+}
+
+export function isLastChild<TreeDataType extends BasicDataNode = DataNode>(
+  treeNodeEntity: DataEntity<TreeDataType>,
+) {
+  if (treeNodeEntity.parent) {
+    const posArr = posToArr(treeNodeEntity.pos)
+    return Number(posArr[posArr.length - 1]) === treeNodeEntity.parent.children.length - 1
+  }
+  return false
+}
+
+export function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(
+  treeNodeEntity: DataEntity<TreeDataType>,
+) {
+  const posArr = posToArr(treeNodeEntity.pos)
+  return Number(posArr[posArr.length - 1]) === 0
+}
+
+// Only used when drag, not affect SSR.
+export function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(
+  event: MouseEvent,
+  dragNode: DragNodeEvent,
+  targetNode: DragNodeEvent,
+  indent: number,
+  startMousePosition: {
+    x: number
+    y: number
+  },
+  allowDrop: AllowDrop<TreeDataType>,
+  flattenedNodes: FlattenNode[],
+  keyEntities: Record<Key, DataEntity<TreeDataType>>,
+  expandKeysSet: Set<Key>,
+  direction: Direction,
+): {
+  dropPosition: -1 | 0 | 1
+  dropLevelOffset: number
+  dropTargetKey: Key
+  dropTargetPos: string
+  dropContainerKey: Key
+  dragOverNodeKey: Key
+  dropAllowed: boolean
+} {
+  const { clientX, clientY } = event
+  const { top, height } = (event.target as HTMLElement).getBoundingClientRect()
+  // optional chain for testing
+  const horizontalMouseOffset =
+    (direction === 'rtl' ? -1 : 1) * ((startMousePosition?.x || 0) - clientX)
+  const rawDropLevelOffset = (horizontalMouseOffset - 12) / indent
+
+  // find abstract drop node by horizontal offset
+  let abstractDropNodeEntity: DataEntity<TreeDataType> = keyEntities[targetNode.eventKey]
+
+  if (clientY < top + height / 2) {
+    // first half, set abstract drop node to previous node
+    const nodeIndex = flattenedNodes.findIndex(
+      (flattenedNode) => flattenedNode.key === abstractDropNodeEntity.key,
+    )
+    const prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1
+    const prevNodeKey = flattenedNodes[prevNodeIndex].key
+    abstractDropNodeEntity = keyEntities[prevNodeKey]
+  }
+
+  const initialAbstractDropNodeKey = abstractDropNodeEntity.key
+
+  const abstractDragOverEntity = abstractDropNodeEntity
+  const dragOverNodeKey = abstractDropNodeEntity.key
+
+  let dropPosition: -1 | 0 | 1 = 0
+  let dropLevelOffset = 0
+
+  // Only allow cross level drop when dragging on a non-expanded node
+  if (!expandKeysSet.has(initialAbstractDropNodeKey)) {
+    for (let i = 0; i < rawDropLevelOffset; i += 1) {
+      if (isLastChild(abstractDropNodeEntity)) {
+        abstractDropNodeEntity = abstractDropNodeEntity.parent
+        dropLevelOffset += 1
+      } else {
+        break
+      }
+    }
+  }
+  const abstractDragDataNode = dragNode.eventData
+  const abstractDropDataNode = abstractDropNodeEntity.node
+  let dropAllowed = true
+  if (
+    isFirstChild(abstractDropNodeEntity) &&
+    abstractDropNodeEntity.level === 0 &&
+    clientY < top + height / 2 &&
+    allowDrop({
+      dragNode: abstractDragDataNode,
+      dropNode: abstractDropDataNode,
+      dropPosition: -1,
+    }) &&
+    abstractDropNodeEntity.key === targetNode.eventKey
+  ) {
+    // first half of first node in first level
+    dropPosition = -1
+  } else if ((abstractDragOverEntity.children || []).length && expandKeysSet.has(dragOverNodeKey)) {
+    // drop on expanded node
+    // only allow drop inside
+    if (
+      allowDrop({
+        dragNode: abstractDragDataNode,
+        dropNode: abstractDropDataNode,
+        dropPosition: 0,
+      })
+    ) {
+      dropPosition = 0
+    } else {
+      dropAllowed = false
+    }
+  } else if (dropLevelOffset === 0) {
+    if (rawDropLevelOffset > -1.5) {
+      // | Node     | <- abstractDropNode
+      // | -^-===== | <- mousePosition
+      // 1. try drop after
+      // 2. do not allow drop
+      if (
+        allowDrop({
+          dragNode: abstractDragDataNode,
+          dropNode: abstractDropDataNode,
+          dropPosition: 1,
+        })
+      ) {
+        dropPosition = 1
+      } else {
+        dropAllowed = false
+      }
+    } else {
+      // | Node     | <- abstractDropNode
+      // | ---==^== | <- mousePosition
+      // whether it has children or doesn't has children
+      // always
+      // 1. try drop inside
+      // 2. try drop after
+      // 3. do not allow drop
+      if (
+        allowDrop({
+          dragNode: abstractDragDataNode,
+          dropNode: abstractDropDataNode,
+          dropPosition: 0,
+        })
+      ) {
+        dropPosition = 0
+      } else if (
+        allowDrop({
+          dragNode: abstractDragDataNode,
+          dropNode: abstractDropDataNode,
+          dropPosition: 1,
+        })
+      ) {
+        dropPosition = 1
+      } else {
+        dropAllowed = false
+      }
+    }
+  } else {
+    // | Node1 | <- abstractDropNode
+    //      |  Node2  |
+    // --^--|----=====| <- mousePosition
+    // 1. try insert after Node1
+    // 2. do not allow drop
+    if (
+      allowDrop({
+        dragNode: abstractDragDataNode,
+        dropNode: abstractDropDataNode,
+        dropPosition: 1,
+      })
+    ) {
+      dropPosition = 1
+    } else {
+      dropAllowed = false
+    }
+  }
+
+  return {
+    dropPosition,
+    dropLevelOffset,
+    dropTargetKey: abstractDropNodeEntity.key,
+    dropTargetPos: abstractDropNodeEntity.pos,
+    dragOverNodeKey,
+    dropContainerKey: dropPosition === 0 ? null : abstractDropNodeEntity.parent?.key || null,
+    dropAllowed,
+  }
+}
+
+/**
+ * Return selectedKeys according with multiple prop
+ * @param selectedKeys
+ * @param props
+ * @returns [string]
+ */
+export function calcSelectedKeys(selectedKeys: Key[], props: TreeProps) {
+  if (!selectedKeys) return undefined
+
+  const { multiple } = props
+  if (multiple) {
+    return selectedKeys.slice()
+  }
+
+  if (selectedKeys.length) {
+    return [selectedKeys[0]]
+  }
+  return selectedKeys
+}
+
+const internalProcessProps = (props: DataNode): Partial<TreeNodeProps> => props
+export function convertDataToTree(
+  treeData: DataNode[],
+  processor?: { processProps: (prop: DataNode) => any },
+): NodeElement[] {
+  if (!treeData) return []
+
+  const { processProps = internalProcessProps } = processor || {}
+  const list = Array.isArray(treeData) ? treeData : [treeData]
+  return list.map(({ children, ...props }): NodeElement => {
+    const childrenNodes = convertDataToTree(children, processor)
+    return (
+      <TreeNode key={props.key} {...processProps(props)}>
+        {childrenNodes}
+      </TreeNode>
+    )
+  })
+}
+
+/**
+ * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style
+ */
+export function parseCheckedKeys(keys: Key[] | { checked: Key[]; halfChecked: Key[] }) {
+  if (!keys) {
+    return null
+  }
+
+  // Convert keys to object format
+  let keyProps
+  if (Array.isArray(keys)) {
+    // [Legacy] Follow the api doc
+    keyProps = {
+      checkedKeys: keys,
+      halfCheckedKeys: undefined,
+    }
+  } else if (typeof keys === 'object') {
+    keyProps = {
+      checkedKeys: keys.checked || undefined,
+      halfCheckedKeys: keys.halfChecked || undefined,
+    }
+  } else {
+    warning(false, '`checkedKeys` is not an array or an object')
+    return null
+  }
+
+  return keyProps
+}
+
+/**
+ * If user use `autoExpandParent` we should get the list of parent node
+ * @param keyList
+ * @param keyEntities
+ */
+export function conductExpandParent(keyList: Key[], keyEntities: Record<Key, DataEntity>): Key[] {
+  const expandedKeys = new Set<Key>()
+
+  function conductUp(key: Key) {
+    if (expandedKeys.has(key)) return
+
+    const entity = keyEntities[key]
+    if (!entity) return
+
+    expandedKeys.add(key)
+
+    const { parent, node } = entity
+
+    if (node.disabled) return
+
+    if (parent) {
+      conductUp(parent.key)
+    }
+  }
+
+  ;(keyList || []).forEach((key) => {
+    conductUp(key)
+  })
+
+  return [...expandedKeys]
+}

package/src/vc-tree/utils/conductUtil.ts

@@ -0,0 +1,241 @@
+import { note } from '../../vc-util/warning'
+import type { BasicDataNode, DataEntity, DataNode, GetCheckDisabled, Key } from '../interface'
+
+interface ConductReturnType {
+  checkedKeys: Key[]
+  halfCheckedKeys: Key[]
+}
+
+function removeFromCheckedKeys(halfCheckedKeys: Set<Key>, checkedKeys: Set<Key>) {
+  const filteredKeys = new Set<Key>()
+  halfCheckedKeys.forEach((key) => {
+    if (!checkedKeys.has(key)) {
+      filteredKeys.add(key)
+    }
+  })
+  return filteredKeys
+}
+
+export function isCheckDisabled<TreeDataType>(node: TreeDataType) {
+  const { disabled, disableCheckbox, checkable } = (node || {}) as DataNode
+  return !!(disabled || disableCheckbox) || checkable === false
+}
+
+// Fill miss keys
+function fillConductCheck<TreeDataType extends BasicDataNode = DataNode>(
+  keys: Set<Key>,
+  levelEntities: Map<number, Set<DataEntity<TreeDataType>>>,
+  maxLevel: number,
+  syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>,
+): ConductReturnType {
+  const checkedKeys = new Set<Key>(keys)
+  const halfCheckedKeys = new Set<Key>()
+
+  // Add checked keys top to bottom
+  for (let level = 0; level <= maxLevel; level += 1) {
+    const entities = levelEntities.get(level) || new Set()
+    entities.forEach((entity) => {
+      const { key, node, children = [] } = entity
+
+      if (checkedKeys.has(key) && !syntheticGetCheckDisabled(node)) {
+        children
+          .filter((childEntity) => !syntheticGetCheckDisabled(childEntity.node))
+          .forEach((childEntity) => {
+            checkedKeys.add(childEntity.key)
+          })
+      }
+    })
+  }
+
+  // Add checked keys from bottom to top
+  const visitedKeys = new Set<Key>()
+  for (let level = maxLevel; level >= 0; level -= 1) {
+    const entities = levelEntities.get(level) || new Set()
+    entities.forEach((entity) => {
+      const { parent, node } = entity
+
+      // Skip if no need to check
+      if (syntheticGetCheckDisabled(node) || !entity.parent || visitedKeys.has(entity.parent.key)) {
+        return
+      }
+
+      // Skip if parent is disabled
+      if (syntheticGetCheckDisabled(entity.parent.node)) {
+        visitedKeys.add(parent.key)
+        return
+      }
+
+      let allChecked = true
+      let partialChecked = false
+
+      ;(parent.children || [])
+        .filter((childEntity) => !syntheticGetCheckDisabled(childEntity.node))
+        .forEach(({ key }) => {
+          const checked = checkedKeys.has(key)
+          if (allChecked && !checked) {
+            allChecked = false
+          }
+          if (!partialChecked && (checked || halfCheckedKeys.has(key))) {
+            partialChecked = true
+          }
+        })
+
+      if (allChecked) {
+        checkedKeys.add(parent.key)
+      }
+      if (partialChecked) {
+        halfCheckedKeys.add(parent.key)
+      }
+
+      visitedKeys.add(parent.key)
+    })
+  }
+
+  return {
+    checkedKeys: Array.from(checkedKeys),
+    halfCheckedKeys: Array.from(removeFromCheckedKeys(halfCheckedKeys, checkedKeys)),
+  }
+}
+
+// Remove useless key
+function cleanConductCheck<TreeDataType extends BasicDataNode = DataNode>(
+  keys: Set<Key>,
+  halfKeys: Key[],
+  levelEntities: Map<number, Set<DataEntity<TreeDataType>>>,
+  maxLevel: number,
+  syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>,
+): ConductReturnType {
+  const checkedKeys = new Set<Key>(keys)
+  let halfCheckedKeys = new Set<Key>(halfKeys)
+
+  // Remove checked keys from top to bottom
+  for (let level = 0; level <= maxLevel; level += 1) {
+    const entities = levelEntities.get(level) || new Set()
+    entities.forEach((entity) => {
+      const { key, node, children = [] } = entity
+
+      if (!checkedKeys.has(key) && !halfCheckedKeys.has(key) && !syntheticGetCheckDisabled(node)) {
+        children
+          .filter((childEntity) => !syntheticGetCheckDisabled(childEntity.node))
+          .forEach((childEntity) => {
+            checkedKeys.delete(childEntity.key)
+          })
+      }
+    })
+  }
+
+  // Remove checked keys form bottom to top
+  halfCheckedKeys = new Set<Key>()
+  const visitedKeys = new Set<Key>()
+  for (let level = maxLevel; level >= 0; level -= 1) {
+    const entities = levelEntities.get(level) || new Set()
+
+    entities.forEach((entity) => {
+      const { parent, node } = entity
+
+      // Skip if no need to check
+      if (syntheticGetCheckDisabled(node) || !entity.parent || visitedKeys.has(entity.parent.key)) {
+        return
+      }
+
+      // Skip if parent is disabled
+      if (syntheticGetCheckDisabled(entity.parent.node)) {
+        visitedKeys.add(parent.key)
+        return
+      }
+
+      let allChecked = true
+      let partialChecked = false
+
+      ;(parent.children || [])
+        .filter((childEntity) => !syntheticGetCheckDisabled(childEntity.node))
+        .forEach(({ key }) => {
+          const checked = checkedKeys.has(key)
+          if (allChecked && !checked) {
+            allChecked = false
+          }
+          if (!partialChecked && (checked || halfCheckedKeys.has(key))) {
+            partialChecked = true
+          }
+        })
+
+      if (!allChecked) {
+        checkedKeys.delete(parent.key)
+      }
+      if (partialChecked) {
+        halfCheckedKeys.add(parent.key)
+      }
+
+      visitedKeys.add(parent.key)
+    })
+  }
+
+  return {
+    checkedKeys: Array.from(checkedKeys),
+    halfCheckedKeys: Array.from(removeFromCheckedKeys(halfCheckedKeys, checkedKeys)),
+  }
+}
+
+/**
+ * Conduct with keys.
+ * @param keyList current key list
+ * @param keyEntities key - dataEntity map
+ * @param mode `fill` to fill missing key, `clean` to remove useless key
+ */
+export function conductCheck<TreeDataType extends BasicDataNode = DataNode>(
+  keyList: Key[],
+  checked: true | { checked: false; halfCheckedKeys: Key[] },
+  keyEntities: Record<Key, DataEntity<TreeDataType>>,
+  maxLevel: number,
+  levelEntities: Map<number, Set<DataEntity<TreeDataType>>>,
+  getCheckDisabled?: GetCheckDisabled<TreeDataType>,
+): ConductReturnType {
+  const warningMissKeys: Key[] = []
+
+  let syntheticGetCheckDisabled: GetCheckDisabled<TreeDataType>
+  if (getCheckDisabled) {
+    syntheticGetCheckDisabled = getCheckDisabled
+  } else {
+    syntheticGetCheckDisabled = isCheckDisabled
+  }
+
+  // We only handle exist keys
+  const keys = new Set<Key>(
+    keyList.filter((key) => {
+      const hasEntity = !!keyEntities[key]
+      if (!hasEntity) {
+        warningMissKeys.push(key)
+      }
+
+      return hasEntity
+    }),
+  )
+
+  note(
+    !warningMissKeys.length,
+    `Tree missing follow keys: ${warningMissKeys
+      .slice(0, 100)
+      .map((key) => `'${key}'`)
+      .join(', ')}`,
+  )
+
+  let result: ConductReturnType
+  if (checked === true) {
+    result = fillConductCheck<TreeDataType>(
+      keys,
+      levelEntities,
+      maxLevel,
+      syntheticGetCheckDisabled,
+    )
+  } else {
+    result = cleanConductCheck(
+      keys,
+      checked.halfCheckedKeys,
+      levelEntities,
+      maxLevel,
+      syntheticGetCheckDisabled,
+    )
+  }
+
+  return result
+}

package/src/vc-tree/utils/diffUtil.ts

@@ -0,0 +1,45 @@
+import type { FlattenNode, Key } from '../interface'
+
+export function findExpandedKeys(prev: Key[] = [], next: Key[] = []) {
+  const prevLen = prev.length
+  const nextLen = next.length
+
+  if (Math.abs(prevLen - nextLen) !== 1) {
+    return { add: false, key: null }
+  }
+
+  function find(shorter: Key[], longer: Key[]) {
+    const cache: Map<Key, boolean> = new Map()
+    shorter.forEach((key) => {
+      cache.set(key, true)
+    })
+
+    const keys = longer.filter((key) => !cache.has(key))
+
+    return keys.length === 1 ? keys[0] : null
+  }
+
+  if (prevLen < nextLen) {
+    return {
+      add: true,
+      key: find(prev, next),
+    }
+  }
+
+  return {
+    add: false,
+    key: find(next, prev),
+  }
+}
+
+export function getExpandRange(shorter: FlattenNode[], longer: FlattenNode[], key: Key) {
+  const shorterStartIndex = shorter.findIndex((item) => item.key === key)
+  const shorterEndNode = shorter[shorterStartIndex + 1]
+  const longerStartIndex = longer.findIndex((item) => item.key === key)
+
+  if (shorterEndNode) {
+    const longerEndIndex = longer.findIndex((item) => item.key === shorterEndNode.key)
+    return longer.slice(longerStartIndex + 1, longerEndIndex)
+  }
+  return longer.slice(longerStartIndex + 1)
+}