@c2-markdown-ui/react 0.4.4 → 0.4.5

package/src/widgets/TreeSelect.tsx

@@ -0,0 +1,649 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface TreeSelectProps {
+  choices: string[];
+  /** 嵌套对象树数据源（与扁平路径 choices 兼容共存，优先于 choices） */
+  data?: TreeNode[];
+  /** 远端数据源 URL */
+  url?: string;
+  /** 懒加载模式（url 存在时生效）：首次只拉根级，点击父级后逐级请求子级 */
+  lazy?: boolean;
+  /** 多选模式（antd multiple，默认单选）：开启后显示复选框，返回 value[] */
+  multiple?: boolean;
+  /** 父子节点选中不关联（antd checkStrictly） */
+  checkStrictly?: boolean;
+  /** 选中值回显策略：all / parent / child（antd showCheckedStrategy） */
+  showCheckedStrategy?: string;
+  /** 触发器最多显示的标签数（antd maxTagCount） */
+  maxTagCount?: number;
+  /** 树连接线（antd treeLine） */
+  treeLine?: boolean;
+  label?: string;
+  default?: string | string[];
+  placeholder?: string;
+  hint?: string;
+  required?: boolean;
+  message?: string;
+  error?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否可搜索：开启后下拉面板内置搜索框（antd showSearch，默认关闭） */
+  searchable?: boolean;
+  onchange: (value: string | string[]) => void;
+}
+
+export interface TreeNode {
+  value?: string | number;
+  key?: string | number;
+  label?: string | number;
+  children?: TreeNode[];
+  loaded?: boolean;
+  [extra: string]: any;
+}
+
+interface Node {
+  value: string;
+  label: string;
+  children: Node[];
+  isLeaf: boolean;
+  loaded?: boolean;
+}
+
+function parseSeg(seg: string): { value: string; label: string } {
+  const idx = seg.indexOf(':');
+  if (idx > 0) {
+    const v = seg.slice(0, idx).trim();
+    const l = seg.slice(idx + 1).trim();
+    if (v && l) return { value: v, label: l };
+  }
+  return { value: seg.trim(), label: seg.trim() };
+}
+
+function nodesToTree(nodes: TreeNode[] | undefined, isLazy = false): Node[] {
+  if (!Array.isArray(nodes)) return [];
+  return nodes.map(n => {
+    const v = n.value ?? n.key;
+    const children = n.children;
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    const wasLoaded = n.loaded === true;
+    return {
+      value: String(v ?? ''),
+      label: String(n.label ?? v ?? ''),
+      children: hasChildren ? nodesToTree(children, isLazy) : [],
+      isLeaf: isLazy ? !hasChildren && wasLoaded : !hasChildren,
+      loaded: hasChildren || wasLoaded,
+    };
+  });
+}
+
+function normalizeRemoteTree(json: any): TreeNode[] {
+  let list = json;
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : Array.isArray(json?.tree) ? json.tree
+      : Array.isArray(json?.treeData) ? json.treeData
+      : [];
+  }
+  const map = (arr: any[]): TreeNode[] =>
+    (arr || [])
+      .map((it: any): TreeNode | null => {
+        if (!it || typeof it !== 'object') return null;
+        const value = it.value ?? it.key;
+        if (value === undefined || value === null || value === '') return null;
+        const node: TreeNode = { value: String(value) };
+        const label = it.label ?? it.name ?? it.text;
+        if (label !== undefined && label !== null) node.label = String(label);
+        if (Array.isArray(it.children) && it.children.length > 0) {
+          node.children = map(it.children);
+        }
+        return node;
+      })
+      .filter((n: TreeNode | null): n is TreeNode => n !== null);
+  return map(list);
+}
+
+export const TreeSelect: React.FC<TreeSelectProps> = ({
+  choices,
+  data,
+  url = '',
+  lazy = false,
+  multiple = false,
+  checkStrictly = false,
+  showCheckedStrategy = 'all',
+  maxTagCount,
+  treeLine = false,
+  label = '',
+  default: initial,
+  placeholder = '',
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  disabled = false,
+  searchable = false,
+  onchange
+}) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [remoteData, setRemoteData] = useState<TreeNode[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingPath, setLoadingPath] = useState('');
+
+  /** 默认值语义（对齐 antd TreeSelect defaultValue）：
+   *  逗号分隔多值；每个值支持 / 分隔路径（zj/hz）或节点 value（hz），
+   *  路径写法按段逐级查找（段先按 value 匹配、再按 label 匹配），定位到路径末端节点；
+   *  单段 value 在当前层级找不到时，从整棵树深度查找（antd 语义：value 全树唯一）。
+   *  返回选中节点 value 数组 + 路径祖先 value 数组（用于初始展开） */
+  const resolveInitial = (treeNodes: Node[]): { values: string[]; ancestors: string[] } => {
+    if (!initial) return { values: [], ancestors: [] };
+    const paths = Array.isArray(initial)
+      ? initial.map(String)
+      : initial.split(',').map(s => s.trim()).filter(Boolean);
+    const values: string[] = [];
+    const ancestors: string[] = [];
+    /** 从整棵树深度查找节点，返回从根到命中节点的 value 链 */
+    const deepFind = (nodes: Node[], seg: string, chain: string[]): string[] | null => {
+      for (const n of nodes) {
+        if (n.value === seg || n.label === seg) return [...chain, n.value];
+        const sub = deepFind(n.children, seg, [...chain, n.value]);
+        if (sub) return sub;
+      }
+      return null;
+    };
+    for (const path of paths) {
+      const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+      let level = treeNodes;
+      let node: Node | undefined;
+      const chain: string[] = [];
+      for (const seg of segs) {
+        const found = level.find(n => n.value === seg) ?? level.find(n => n.label === seg);
+        if (!found) { node = undefined; break; }
+        chain.push(found.value);
+        node = found;
+        level = found.children;
+      }
+      if (node) {
+        values.push(node.value);
+        ancestors.push(...chain.slice(0, -1));
+      } else if (segs.length === 1) {
+        // 单段 value 逐级未命中（根级找不到）：从整棵树深度查找（antd defaultValue 语义）
+        const deep = deepFind(treeNodes, segs[0], []);
+        if (deep) {
+          values.push(deep[deep.length - 1]);
+          ancestors.push(...deep.slice(0, -1));
+        }
+      }
+    }
+    return {
+      values: [...new Set(values)],
+      ancestors: [...new Set(ancestors)]
+    };
+  };
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const tree = useMemo(() => {
+    if (remoteData) return nodesToTree(remoteData, lazy);
+    if (Array.isArray(data) && data.length > 0) return nodesToTree(data, lazy);
+    const root: Node[] = [];
+    for (const path of choices) {
+      if (!path) continue;
+      const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+      if (segs.length === 0) continue;
+      let level = root;
+      for (let i = 0; i < segs.length; i++) {
+        const { value, label: lbl } = parseSeg(segs[i]);
+        let node = level.find(n => n.value === value);
+        if (!node) {
+          node = { value, label: lbl, children: [], isLeaf: i === segs.length - 1 };
+          level.push(node);
+        }
+        level = node.children;
+      }
+    }
+    return root;
+  }, [choices, data, remoteData, lazy]);
+
+  // 用户是否交互过（勾选/清空）：交互后不再跟随 default 变化，避免覆盖用户选择
+  const touchedRef = useRef(false);
+  // 挂载/数据源就绪/default 变化时回填默认值（展开祖先采用合并而非重置，避免懒加载
+  // 填充子级引起 tree 引用变化时，把用户已展开的节点折叠掉 —— 对齐 vue 版行为）
+  const initialKey = Array.isArray(initial) ? initial.join(',') : (initial ?? '');
+  useEffect(() => {
+    if (touchedRef.current) return;
+    const { values, ancestors } = resolveInitial(tree);
+    setSelected(values);
+    setExpanded(prev => {
+      const next = new Set(prev);
+      ancestors.forEach(a => next.add(a));
+      return next;
+    });
+  }, [initialKey, tree]);
+
+  // 懒加载
+  function fillChildren(nodes: TreeNode[], path: string[], children: TreeNode[]): TreeNode[] {
+    return nodes.map(n => {
+      const v = String(n.value ?? n.key ?? '');
+      if (v !== path[0]) return n;
+      if (path.length === 1) return { ...n, children, loaded: true };
+      return { ...n, children: fillChildren(n.children || [], path.slice(1), children) };
+    });
+  }
+
+  async function loadChildren(node: Node, path: string[]) {
+    if (!url || node.loaded) return;
+    setLoadingPath(path.join('/'));
+    try {
+      const sep = url.includes('?') ? '&' : '?';
+      const res = await fetch(`${url}${sep}parent=${encodeURIComponent(node.value)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json: any = await res.json();
+      const list = normalizeRemoteTree(json);
+      setRemoteData(prev => prev ? fillChildren(prev, path, list) : null);
+    } catch { /* 静默 */ }
+    finally { setLoadingPath(''); }
+  }
+
+  // 远端拉取
+  useEffect(() => {
+    if (!url) { setRemoteData(null); return; }
+    setLoading(true);
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json: any = await res.json();
+        if (cancelled) return;
+        const list = normalizeRemoteTree(json);
+        if (list.length === 0) throw new Error('响应中没有可用选项');
+        setRemoteData(list);
+      } catch { /* 静默回落 */ }
+      finally { if (!cancelled) setLoading(false); }
+    })();
+    return () => { cancelled = true; };
+  }, [url]);
+
+  // 外部点击关闭
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as globalThis.Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  // 打开时聚焦搜索框
+  useEffect(() => {
+    if (open && searchable && searchRef.current) {
+      setQuery('');
+      searchRef.current.focus();
+    }
+  }, [open, searchable]);
+
+  // 展开/折叠
+  function toggleExpand(value: string) {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      return next;
+    });
+  }
+
+  function expandAll() {
+    const collect = (nodes: Node[], ancestors: string[] = []) => {
+      const result = new Set<string>();
+      const walk = (ns: Node[]) => {
+        for (const n of ns) {
+          if (n.isLeaf) continue;
+          // 懒加载模式：未加载子级的节点不预置展开（首次点击时展开并逐级拉取）
+          if (lazy && url && !n.loaded) continue;
+          result.add(n.value);
+          walk(n.children);
+        }
+      };
+      walk(nodes);
+      return result;
+    };
+    setExpanded(collect(tree));
+  }
+
+  function collapseAll() {
+    setExpanded(new Set());
+  }
+
+  // 选择逻辑
+  function getAllValues(node: Node): string[] {
+    const vals = [node.value];
+    for (const c of node.children) vals.push(...getAllValues(c));
+    return vals;
+  }
+
+  function findNode(value: string, nodes: Node[] = tree): Node | undefined {
+    for (const n of nodes) {
+      if (n.value === value) return n;
+      const found = findNode(value, n.children);
+      if (found) return found;
+    }
+  }
+
+  /** 节点是否被全选：checkStrictly 下仅看自身；关联模式下所有后代都被选中 */
+  function isNodeChecked(node: Node): boolean {
+    if (checkStrictly || !multiple) return selected.includes(node.value);
+    if (node.children.length === 0) return selected.includes(node.value);
+    return node.children.every(c => isNodeChecked(c));
+  }
+
+  function isNodeIndeterminate(node: Node): boolean {
+    if (checkStrictly || node.children.length === 0) return false;
+    const childStates = node.children.map(c => isNodeChecked(c) || isNodeIndeterminate(c));
+    return childStates.some(Boolean) && !childStates.every(Boolean);
+  }
+
+  /** 按回显策略（antd showCheckedStrategy）过滤选中值：
+   *  all 全部 / parent 仅返回最顶层的全选父级 / child 仅返回叶子 */
+  function applyStrategy(values: string[]): string[] {
+    if (!multiple || checkStrictly || showCheckedStrategy === 'all') return values;
+    const set = new Set(values);
+    if (showCheckedStrategy === 'child') {
+      return values.filter(v => {
+        const n = findNode(v);
+        return !n || n.children.length === 0;
+      });
+    }
+    // parent：级联模式下勾满的父级回显为父级本身，其全部后代不单独显示；
+    // 未勾满的父级不显示，只显示其下被选中的叶子/子父级。
+    // 注意"父级全选"不能只看 set.has(父级value) —— 级联勾子节点时 selected 里
+    // 只有叶子值，父级 value 不在其中，需按"所有后代均被选中"判定
+    const result: string[] = [];
+    const fullyChecked = (n: Node): boolean =>
+      n.children.length === 0 ? set.has(n.value) : n.children.every(fullyChecked);
+    const walk = (nodes: Node[]) => {
+      for (const n of nodes) {
+        if (n.children.length > 0 && fullyChecked(n)) {
+          // 全选父级：回显自身，跳过后代
+          result.push(n.value);
+        } else {
+          walk(n.children);
+          if (n.children.length === 0 && set.has(n.value)) result.push(n.value);
+        }
+      }
+    };
+    walk(tree);
+    // selected 中可能存在树外的值（如懒加载未加载的分支），原样保留
+    const known = new Set<string>();
+    const collect = (nodes: Node[]) => {
+      for (const n of nodes) { known.add(n.value); collect(n.children); }
+    };
+    collect(tree);
+    for (const v of values) if (!known.has(v)) result.push(v);
+    return result;
+  }
+
+  function toggleNode(node: Node) {
+    touchedRef.current = true;
+    if (multiple) {
+      if (checkStrictly) {
+        // 父子不关联：只切换单节点
+        const next = selected.includes(node.value)
+          ? selected.filter(v => v !== node.value)
+          : [...selected, node.value];
+        setSelected(next);
+        onchange(next);
+        return;
+      }
+      const allVals = getAllValues(node);
+      const allSelected = allVals.every(v => selected.includes(v));
+      let next: string[];
+      if (allSelected) {
+        next = selected.filter(v => !allVals.includes(v));
+      } else {
+        const newSelected = new Set(selected);
+        allVals.forEach(v => newSelected.add(v));
+        next = Array.from(newSelected);
+      }
+      setSelected(next);
+      onchange(applyStrategy(next));
+    } else {
+      setSelected([node.value]);
+      onchange(node.value);
+      setOpen(false);
+    }
+  }
+
+  // 展示文案
+  function getLabel(value: string): string {
+    function find(nodes: Node[], v: string): string | undefined {
+      for (const n of nodes) {
+        if (n.value === v) return n.label;
+        const found = find(n.children, v);
+        if (found) return found;
+      }
+    }
+    return find(tree, value) ?? value;
+  }
+
+  // 触发器最多显示的标签数（antd maxTagCount），不传则不限制
+  const limit = typeof maxTagCount === 'number' && maxTagCount >= 0 ? maxTagCount : Infinity;
+
+  // 策略过滤后的全部选中项（label 列表），悬浮提示展示用
+  const allTags = useMemo(() => {
+    if (!multiple || selected.length === 0) return [] as string[];
+    return applyStrategy(selected).map(v => getLabel(v));
+  }, [selected, tree, multiple, checkStrictly, showCheckedStrategy]);
+
+  const display = useMemo(() => {
+    if (selected.length === 0) return '';
+    if (!multiple) return getLabel(selected[0]);
+    const parts = allTags.slice(0, limit);
+    if (allTags.length > limit) parts.push(`+${allTags.length - limit}`);
+    return parts.join(', ');
+  }, [allTags, limit, multiple]);
+
+  // 过滤树
+  const filteredTree = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return null;
+    function prune(node: Node): Node | null {
+      if (node.label.toLowerCase().includes(q)) return node;
+      const filteredChildren = node.children.map(c => prune(c)).filter((c): c is Node => c !== null);
+      if (filteredChildren.length > 0) return { ...node, children: filteredChildren };
+      return null;
+    }
+    const pruned = tree.map(n => prune(n)).filter((n): n is Node => n !== null);
+    // 无匹配时返回空数组（而非 null）：null 表示"未搜索"会回退到全树，
+    // 空数组才能让 visibleNodes 为空、渲染 ts-empty"无匹配结果"
+    return pruned;
+  }, [tree, query]);
+
+  // 搜索时自动展开匹配路径的祖先
+  useEffect(() => {
+    if (query.trim() && filteredTree !== null && filteredTree.length > 0) {
+      const collect = (nodes: Node[]) => {
+        const result = new Set<string>();
+        const walk = (ns: Node[]) => {
+          for (const n of ns) {
+            result.add(n.value);
+            if (n.children.length > 0) walk(n.children);
+          }
+        };
+        walk(nodes);
+        return result;
+      };
+      setExpanded(collect(filteredTree));
+    }
+  }, [query, filteredTree]);
+
+  // 收集可见节点（扁平列表）
+  interface VisibleNode { node: Node; depth: number; isExpand: boolean; isLoadingNode: boolean; }
+  const visibleNodes = useMemo((): VisibleNode[] => {
+    const result: VisibleNode[] = [];
+    const treeToUse = filteredTree !== null ? filteredTree : tree;
+    const walk = (nodes: Node[], depth: number) => {
+      for (const n of nodes) {
+        result.push({ node: n, depth, isExpand: expanded.has(n.value), isLoadingNode: loadingPath === n.value });
+        if (!n.isLeaf && expanded.has(n.value)) walk(n.children, depth + 1);
+      }
+    };
+    walk(treeToUse, 0);
+    return result;
+  }, [tree, filteredTree, expanded, loadingPath]);
+
+  // 从根到节点的完整 value 路径（fillChildren 定位挂载点用）
+  function nodePathOf(target: string, nodes: Node[] = tree): string[] | null {
+    for (const n of nodes) {
+      if (n.value === target) return [n.value];
+      if (n.children.length > 0) {
+        const sub = nodePathOf(target, n.children);
+        if (sub) return [n.value, ...sub];
+      }
+    }
+    return null;
+  }
+
+  function handleNodeClick(node: Node) {
+    if (disabled) return;
+    if (!node.isLeaf) {
+      toggleExpand(node.value);
+      if (lazy && url && !node.loaded) {
+        const path = nodePathOf(node.value) ?? [node.value];
+        void loadChildren(node, path);
+      }
+    } else {
+      toggleNode(node);
+    }
+  }
+
+  function handleCheck(node: Node, e: React.MouseEvent) {
+    e.stopPropagation();
+    toggleNode(node);
+  }
+
+  function handleNodeSelect(node: Node, e: React.MouseEvent) {
+    e.stopPropagation();
+    toggleNode(node);
+  }
+
+  const shownError = error || '';
+  const showClear = !disabled && selected.length > 0;
+
+  return (
+    <div className="selector widget-tree-select" ref={rootRef}>
+      {(label || hint || required) && (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      )}
+      <div className="widget-field-content">
+        <button
+          type="button"
+          className={`ts-trigger${shownError ? ' widget-input-error' : ''}`}
+          onClick={() => { if (!disabled) setOpen(prev => !prev); }}
+          aria-expanded={open}
+          disabled={disabled}
+          data-full={allTags.join(', ')}
+        >
+          {loading ? (
+            <span className="ts-placeholder">加载中…</span>
+          ) : selected.length > 0 ? (
+            <span className="ts-value">{display}</span>
+          ) : (
+            <span className="ts-placeholder ts-placeholder-empty">{placeholder || '请选择'}</span>
+          )}
+          {showClear ? (
+            <span className="ts-clear" role="button" tabIndex={-1} aria-label="清空"
+              onClick={(e) => { e.stopPropagation(); touchedRef.current = true; setSelected([]); onchange(multiple ? [] : ''); }}>×</span>
+          ) : !disabled && (
+            <span className={`ts-arrow${open ? ' ts-arrow-open' : ''}`} aria-hidden="true">▾</span>
+          )}
+        </button>
+        {shownError && <div className="widget-error-text" role="alert">{shownError}</div>}
+
+        {open && (
+          <div className="ts-panel">
+            {searchable && (
+              <div className="ts-search">
+                <input
+                  ref={searchRef}
+                  type="text"
+                  className="ts-search-input"
+                  value={query}
+                  placeholder="搜索节点…"
+                  onChange={e => setQuery(e.target.value)}
+                />
+              </div>
+            )}
+            <div className="ts-toolbar">
+              <button type="button" className="ts-tool-btn" onClick={expandAll}>展开全部</button>
+              <button type="button" className="ts-tool-btn" onClick={collapseAll}>折叠全部</button>
+            </div>
+            <div className="ts-tree" role="tree">
+              {visibleNodes.length === 0 ? (
+                <div className="ts-empty">{loading ? '加载中…' : query.trim() ? '无匹配结果' : '暂无数据'}</div>
+              ) : (
+                visibleNodes.map(({ node, depth, isExpand, isLoadingNode }) => {
+                  const checked = multiple ? isNodeChecked(node) : selected.includes(node.value);
+                  const indeterminate = multiple && isNodeIndeterminate(node);
+                  return (
+                    <div
+                      key={node.value}
+                      className={`ts-node${!multiple && selected.includes(node.value) ? ' ts-node-selected' : ''}${treeLine ? ' ts-tree-line' : ''}`}
+                      style={{ paddingLeft: `${depth * 20 + 8}px` }}
+                      role="treeitem"
+                      aria-expanded={!node.isLeaf ? isExpand : undefined}
+                    >
+                      {!node.isLeaf ? (
+                        <button
+                          type="button"
+                          className="ts-expand-btn"
+                          onClick={() => handleNodeClick(node)}
+                          aria-label={isExpand ? '折叠' : '展开'}
+                        >
+                          {isLoadingNode ? (
+                            <span className="ts-loading-icon"></span>
+                          ) : (
+                            <span className={`ts-expand-arrow${isExpand ? ' ts-expanded' : ''}`}>▶</span>
+                          )}
+                        </button>
+                      ) : (
+                        <span className="ts-leaf-spacer"></span>
+                      )}
+
+                      {multiple && (
+                        <button
+                          type="button"
+                          className={`ts-checkbox${checked ? ' ts-checked' : ''}${indeterminate ? ' ts-indeterminate' : ''}`}
+                          onClick={e => handleCheck(node, e)}
+                          aria-label={checked ? '取消选择' : '选择'}
+                        >
+                          {checked && <span className="ts-check-icon">✓</span>}
+                          {indeterminate && !checked && <span className="ts-check-icon">−</span>}
+                        </button>
+                      )}
+
+                      <button
+                        type="button"
+                        className={`ts-label${!multiple && selected.includes(node.value) ? ' ts-label-selected' : ''}`}
+                        onClick={e => handleNodeSelect(node, e)}
+                      >
+                        {node.label}
+                      </button>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};