CreateCascaderSegment.tsx

/**
 * @license
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
 */

import type { CascaderPanelData, CascaderSearchField, PanelRenderContext, Segment, SegmentState } from '../types'

import { ref } from 'vue'

import { isNil, isString, toString } from 'lodash-es'

import { type VKey, convertArray, traverseTree } from '@idux/cdk/utils'
import { type TreeCheckStateResolver, useTreeCheckStateResolver } from '@idux/components/utils'

import CascaderPanel from '../panel/CascaderPanel'
import { getSelectableCommonParams } from '../utils'

const defaultSeparator = '|'
const defaultPathSeparator = '/'
const defaultCascaderStrategy = 'parent'
const defaultFullPath = false

export function createCascaderSegment(
  prefixCls: string,
  config: CascaderSearchField['fieldConfig'],
): Segment<VKey | (VKey | VKey[])[] | undefined> {
  const {
    dataSource,
    cascaderStrategy,
    expandIcon,
    customExpandIcon,
    expandTrigger,
    fullPath,
    pathSeparator,
    separator,
    searchable,
    searchFn,
    multiple,
    virtual,
    onExpand,
    onSearch,
    onLoaded,
  } = config

  const nodeKeyMap = new Map<VKey, CascaderPanelData>()
  const parentKeyMap = new Map<VKey, VKey>()
  const nodeLabelMap = new Map<string | number, CascaderPanelData[]>()
  const depthMap = new Map<VKey, number>()

  const mergedCascaderStrategy = cascaderStrategy ?? defaultCascaderStrategy
  traverseTree(dataSource, 'children', (item, parents) => {
    nodeKeyMap.set(item.key, item)
    nodeLabelMap.set(toString(item.label).trim(), [...(nodeLabelMap.get(item.label) ?? []), item])
    parents[0] && parentKeyMap.set(item.key, parents[0].key)
    depthMap.set(item.key, parents.length)
  })
  const checkedKeysResolver = useTreeCheckStateResolver(
    ref({
      data: dataSource,
      dataMap: nodeKeyMap,
      parentKeyMap,
      depthMap,
    }),
    ref('children'),
    ref((item: CascaderPanelData) => item.key),
    ref(mergedCascaderStrategy),
  )

  const panelRenderer = (context: PanelRenderContext<VKey | (VKey | VKey[])[] | undefined>) => {
    const { ok, cancel, slots, renderLocation } = context
    const { panelValue, searchInput, handleChange } = getSelectableCommonParams<VKey | VKey[]>(
      context,
      !!multiple,
      renderLocation === 'individual' ? separator ?? defaultSeparator : undefined,
      !multiple || renderLocation === 'quick-select-panel',
    )
    const cascaderPanelSlots = {
      expandIcon: isString(customExpandIcon) ? slots[customExpandIcon] : customExpandIcon,
    }

    return (
      <CascaderPanel
        v-slots={cascaderPanelSlots}
        value={panelValue}
        searchValue={searchable && searchInput ? searchInput : undefined}
        dataSource={dataSource}
        expandIcon={expandIcon}
        expandTrigger={expandTrigger}
        fullPath={fullPath ?? defaultFullPath}
        strategy={mergedCascaderStrategy}
        separator={pathSeparator}
        showFooter={renderLocation === 'individual'}
        multiple={multiple}
        virtual={virtual}
        searchFn={searchFn}
        onExpand={onExpand}
        onSearch={onSearch}
        onLoaded={onLoaded}
        onChange={handleChange}
        onConfirm={ok}
        onCancel={cancel}
      />
    )
  }

  return {
    name: 'cascader',
    inputClassName: [`${prefixCls}-cascader-segment-input`],
    containerClassName: [`${prefixCls}-cascader-segment-container`],
    parse: input => parseInput(input, config, nodeLabelMap, checkedKeysResolver, parentKeyMap),
    format: (value, states) => formatValue(value, states, config, nodeKeyMap),
    panelRenderer,
  }
}

function parseInput(
  input: string,
  config: CascaderSearchField['fieldConfig'],
  nodeLabelMap: Map<string | number, CascaderPanelData[]>,
  checkedKeysResolver: TreeCheckStateResolver<CascaderPanelData, 'children'>,
  parentKeyMap: Map<VKey, VKey>,
): VKey | (VKey | VKey[])[] | undefined {
  const { fullPath, separator, multiple, pathSeparator } = config
  const trimedInput = input.trim()

  const keys = getKeyByLabels(
    nodeLabelMap,
    trimedInput.split(separator ?? defaultSeparator),
    checkedKeysResolver,
    parentKeyMap,
    fullPath ?? defaultFullPath ? pathSeparator ?? defaultPathSeparator : undefined,
  )

  return multiple ? (keys.length > 0 ? keys : undefined) : keys[0]
}

function formatValue(
  value: VKey | (VKey | VKey[])[] | undefined,
  states: SegmentState[] | undefined,
  config: CascaderSearchField['fieldConfig'],
  nodeKeyMap: Map<VKey, CascaderPanelData>,
): string {
  const { fullPath, multiple, separator, pathSeparator, searchable } = config
  if (isNil(value)) {
    return ''
  }

  const _separator = separator ?? defaultSeparator
  const labels = getLabelByKeys(
    nodeKeyMap,
    (multiple ? value : [value]) as VKey[] | VKey[][],
    fullPath ?? defaultFullPath ? pathSeparator ?? defaultPathSeparator : undefined,
  )

  if (searchable) {
    const inputParts = states ? states[states.length - 1]?.input?.split(_separator) ?? [] : []
    const lastInputPart = inputParts[inputParts.length - 1]?.trim() as string | undefined

    if (lastInputPart && !labels.includes(lastInputPart)) {
      return [...labels, lastInputPart].join(` ${_separator} `)
    }
  }

  return labels.join(` ${_separator} `)
}

function getLabelByKeys(
  nodeKeyMap: Map<VKey, CascaderPanelData>,
  keys: VKey[] | VKey[][],
  pathSeparator: string | undefined,
): string[] {
  if (keys.length <= 0) {
    return []
  }

  return keys
    .map(_keys =>
      convertArray(_keys)
        .map(key => nodeKeyMap.get(key)?.label)
        .join(pathSeparator),
    )
    .filter(Boolean) as string[]
}

function getKeyByLabels(
  nodeLabelMap: Map<string | number, CascaderPanelData[]>,
  labels: string[],
  checkedKeysResolver: TreeCheckStateResolver<CascaderPanelData, 'children'>,
  parentKeyMap: Map<VKey, VKey>,
  pathSeparator: string | undefined,
): (VKey | VKey[])[] {
  if (labels.length <= 0) {
    return []
  }

  const trimedLabels = labels.map(label => label.trim())

  const keys = trimedLabels
    .map(label => {
      if (!pathSeparator) {
        return nodeLabelMap.get(label)?.[0].key
      }

      const separatedLabels = label.split(pathSeparator)
      return separatedLabels.length > 0 && nodeLabelMap.get(separatedLabels.pop()!)?.[0].key
    })
    .filter(Boolean) as VKey[]

  const checkedKeys = checkedKeysResolver.appendKeys([], keys)

  if (!pathSeparator) {
    return checkedKeys
  }

  const getKeys = (key: VKey) => {
    const keys = [key]
    let currentKey = key

    while (parentKeyMap.has(currentKey)) {
      keys.unshift((currentKey = parentKeyMap.get(currentKey)!))
    }

    return keys
  }

  return checkedKeys.map(key => getKeys(key))
}