conditional-selection 1.0.0

package/packages/ConditionalSelection/components/conditional-content.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import ConditionalChoose from './conditional-choose';
+import ConditionalHandle from './conditional-handle';
+import {
+  EConditionalSelectionLink,
+  type TConditionalSelection,
+  type TConditionalSelectionDisabledProps,
+} from '../types';
+import { isGroup } from '../composables/useConditionalHandle';
+interface IConditionalContentProps {
+  levelData: TConditionalSelection;
+  level: number;
+  disabledConfig: Required<TConditionalSelectionDisabledProps>;
+  onUpdateNode: (nodeId: string, patch: Partial<TConditionalSelection>) => void;
+  onCreateRules: (ruleData: TConditionalSelection) => void;
+  onCreateChildRules: (ruleData: TConditionalSelection) => void;
+  onDelRules: (ruleData: TConditionalSelection, index: number) => void;
+  /** 渲染单行条件内容 */
+  renderConditionItem?: (rulesLevelItem: TConditionalSelection) => React.ReactNode;
+}
+
+/**
+ * 获取是否是"最后一个条件"位置，用于控制同级新增按钮
+ */
+function getLastCondition(index: number, group: TConditionalSelection[]): boolean {
+  const lastIndex = group.length - 1;
+  const tempInfo = group[lastIndex];
+  let flag = index === lastIndex;
+  if (!flag && tempInfo && isGroup(tempInfo)) {
+    flag = index === group.length - 2;
+  }
+  return flag;
+}
+
+/**
+ * 条件内容组件（递归渲染嵌套规则树）
+ * 对应 Vue 版 relation-content.vue
+ */
+const ConditionalContent: React.FC<IConditionalContentProps> = ({
+  levelData,
+  level,
+  disabledConfig,
+  onUpdateNode,
+  onCreateRules,
+  onCreateChildRules,
+  onDelRules,
+  renderConditionItem,
+}) => {
+  const group = levelData.group as TConditionalSelection[];
+
+  function handleLinkChange(value: EConditionalSelectionLink) {
+    onUpdateNode(levelData._id, { link: value });
+  }
+
+  return (
+    <div className="relative-box">
+      {/* 且/或 切换 */}
+      <ConditionalChoose
+        value={levelData.link ?? EConditionalSelectionLink.AND}
+        disabled={disabledConfig.linkChange}
+        onChange={handleLinkChange}
+      />
+
+      <div className="conditional-list-box right-box">
+        {group.map((item, index) => {
+          if (isGroup(item)) {
+            const childRules = item.group as TConditionalSelection[];
+            return (
+              <div key={item._id} className="conditional-list">
+                <div className="relative-box">
+                  <ConditionalChoose
+                    value={item.link ?? EConditionalSelectionLink.AND}
+                    disabled={disabledConfig.linkChange}
+                    onChange={val => onUpdateNode(item._id, { link: val })}
+                  />
+                  {childRules.map((child, childIndex) => {
+                    if (isGroup(child) && (child.group as TConditionalSelection[]).length > 0) {
+                      return (
+                        <div key={child._id} className="conditional-item right-box">
+                          <ConditionalContent
+                            levelData={child}
+                            level={level}
+                            disabledConfig={disabledConfig}
+                            onUpdateNode={onUpdateNode}
+                            onCreateRules={onCreateRules}
+                            onCreateChildRules={onCreateChildRules}
+                            onDelRules={onDelRules}
+                            renderConditionItem={renderConditionItem}
+                          />
+                        </div>
+                      );
+                    }
+                    return (
+                      <div key={child._id} className="conditional-item right-box">
+                        {renderConditionItem?.(child)}
+                        <ConditionalHandle
+                          level={level}
+                          disabledConfig={disabledConfig}
+                          currentItemInfo={child}
+                          isLast={getLastCondition(childIndex, childRules)}
+                          onCreate={() => onCreateRules(item)}
+                          onCreateChildRules={() => onCreateChildRules(child)}
+                          onDel={() => onDelRules(item, childIndex)}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return (
+            <div key={item._id} className="conditional-list">
+              <div className="conditional-item">
+                {renderConditionItem?.(item)}
+                <ConditionalHandle
+                  level={level}
+                  disabledConfig={disabledConfig}
+                  currentItemInfo={item}
+                  isLast={getLastCondition(index, group)}
+                  onCreate={() => onCreateRules(levelData)}
+                  onCreateChildRules={() => onCreateChildRules(item)}
+                  onDel={() => onDelRules(levelData, index)}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ConditionalContent;

package/packages/ConditionalSelection/components/conditional-handle.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import type {
+  TConditionalSelection,
+  TConditionalSelectionDisabledProps,
+} from '../types';
+
+interface IConditionalHandleProps {
+  level: number;
+  currentItemInfo: TConditionalSelection;
+  isLast: boolean;
+  disabledConfig: Required<TConditionalSelectionDisabledProps>;
+  onCreate: () => void;
+  onCreateChildRules: () => void;
+  onDel: () => void;
+}
+
+function isEmptyValue(val: unknown): boolean {
+  if (val === null || val === undefined || val === '') return true;
+  if (Array.isArray(val)) return val.length === 0;
+  if (val !== null && typeof val === 'object') return Object.keys(val as object).length === 0;
+  return false;
+}
+
+function allHave(individual?: Record<string, any>): boolean {
+  return (
+    !!individual &&
+    Object.keys(individual).length > 0 &&
+    Object.keys(individual).every((key: string) => !isEmptyValue(individual[key]))
+  );
+}
+
+/**
+ * 规则操作按钮组（同级/子集/删除）
+ */
+const ConditionalHandle: React.FC<IConditionalHandleProps> = ({
+  level,
+  currentItemInfo,
+  isLast,
+  disabledConfig,
+  onCreate,
+  onCreateChildRules,
+  onDel,
+}) => {
+  /** 是否显示同级新增按钮：当前节点 level >= 1 且是最后一个 */
+  const showCreate = useMemo(() => currentItemInfo.level >= 1 && isLast, [currentItemInfo.level, isLast]);
+
+  /** 是否显示子集新增按钮：全局 level > 1 且当前节点 level 未达到上限 */
+  const showCreateChild = useMemo(() => level > 1 && currentItemInfo.level < level, [level, currentItemInfo.level]);
+
+  /** 整体新增按钮是否显示：level > 1 && 当前条件已填写完整 && 未禁用新增 */
+  const createShow = useMemo(
+    () => !!(level > 1 && allHave(currentItemInfo.individual) && !disabledConfig.addItem),
+    [level, currentItemInfo.individual, disabledConfig.addItem],
+  );
+
+  return (
+    <div className="conditional-handle">
+      {createShow && (
+        <>
+          {showCreate && (
+            <span className="create-handle" onClick={onCreate}>
+              <span style={{ color: '#c85000', marginRight: 4 }}>＋</span>
+              同级
+            </span>
+          )}
+          {showCreateChild && (
+            <span className="create-handle" onClick={onCreateChildRules}>
+              <span style={{ color: '#c85000', marginRight: 4 }}>＋</span>
+              子级
+            </span>
+          )}
+        </>
+      )}
+      {!disabledConfig.delItem && (
+        <span className="del-handle" onClick={onDel}>
+          －
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default ConditionalHandle;

package/packages/ConditionalSelection/composables/useConditionalHandle.ts

@@ -0,0 +1,234 @@
+import { useMemo, useCallback } from 'react';
+import { useImmer } from 'use-immer';
+import { cloneDeep } from 'lodash-es';
+import {
+  EConditionalSelectionLink,
+  EConditionalSelectionFramework,
+  type TConditionalSelection,
+  type TConditionalSelectionProps,
+  type TConditionalSelectionDisabledProps,
+} from '../types';
+
+function isObject(val: unknown): val is Record<string, any> {
+  return val !== null && typeof val === 'object' && !Array.isArray(val);
+}
+
+function isEmptyValue(val: unknown): boolean {
+  if (val === null || val === undefined || val === '') return true;
+  if (Array.isArray(val)) return val.length === 0;
+  if (isObject(val)) return Object.keys(val).length === 0;
+  return false;
+}
+
+export function getTempRules(level = 0): TConditionalSelection {
+  return cloneDeep({
+    _id: crypto.randomUUID(),
+    framework: EConditionalSelectionFramework.INDIVIDUAL,
+    // INDIVIDUAL 节点只保留 individual，不初始化 group
+    individual: {},
+    level,
+  }) as TConditionalSelection;
+}
+
+export function isGroup(ruleData: TConditionalSelection): boolean {
+  return ruleData.framework === EConditionalSelectionFramework.GROUP;
+}
+
+function allHave(individual?: Record<string, any>): boolean {
+  return (
+    !!individual &&
+    Object.keys(individual).length > 0 &&
+    Object.keys(individual).every((key: string) => !isEmptyValue(individual[key]))
+  );
+}
+
+function checkData(data: TConditionalSelection): boolean {
+  if (isGroup(data) && Array.isArray(data.group)) {
+    // GROUP 节点：递归检查 group 数组中的每个子项
+    return data.group.some(item => checkData(item));
+  }
+  // INDIVIDUAL 节点：检查 individual 是否填写完整
+  return !allHave(data.individual);
+}
+
+function subtractLevel(rulesData: TConditionalSelection): void {
+  // 只有 GROUP 节点才有 group 数组
+  if (isGroup(rulesData) && Array.isArray(rulesData.group) && rulesData.group.length > 1) {
+    rulesData.group.forEach(item => subtractLevel(item));
+  }
+  rulesData.level = rulesData.level - 1 < 0 ? 0 : rulesData.level - 1;
+}
+
+/** 在树中按 _id 深度优先查找节点 */
+export function findNode(root: TConditionalSelection, id: string): TConditionalSelection | null {
+  if (root._id === id) return root;
+  if (Array.isArray(root.group)) {
+    for (const child of root.group) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+export interface IUseConditionalHandleReturn {
+  rulesData: TConditionalSelection;
+  setRulesData: (data: TConditionalSelection) => void;
+  updateRulesData: (updater: (draft: TConditionalSelection) => void) => void;
+  level: number;
+  disabledConfig: Required<TConditionalSelectionDisabledProps>;
+  createRules: (ruleData: TConditionalSelection) => void;
+  createChildRules: (ruleData: TConditionalSelection) => void;
+  delRules: (ruleData: TConditionalSelection, index: number) => void;
+  getConditionalSelectionData: (validate?: boolean) => Promise<TConditionalSelection>;
+  isGroup: (ruleData: TConditionalSelection) => boolean;
+  getTempRules: (level?: number) => TConditionalSelection;
+}
+
+export function useConditionalHandle(props: TConditionalSelectionProps): IUseConditionalHandleReturn {
+  const [rulesData, updateRulesData] = useImmer<TConditionalSelection>(() => getTempRules());
+
+  // 对外保持 setRulesData 接口不变（直接替换整棵树）
+  const setRulesData = useCallback((data: TConditionalSelection) => {
+    updateRulesData(() => data);
+  }, [updateRulesData]);
+
+  // level 计算
+  const level = useMemo(() => {
+    const v = Math.abs(Number(props.maxLevel ?? 1)) || 1;
+    if (Number(props.maxLevel ?? 1) < 1) {
+      console.warn('[TConditionalSelection] Invalid props.maxLevel: maxLevel must be greater than 0.');
+    }
+    return v;
+  }, [props.maxLevel]);
+
+  // disabledConfig 计算
+  const disabledConfig = useMemo<Required<TConditionalSelectionDisabledProps>>(() => {
+    const isObj = isObject(props.disabled);
+    return {
+      addItem: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.addItem : props.disabled),
+      delItem: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.delItem : props.disabled),
+      linkChange: !!(isObj ? (props.disabled as TConditionalSelectionDisabledProps)?.linkChange : props.disabled),
+    };
+  }, [props.disabled]);
+
+  // 创建同级规则：向当前 GROUP 节点的 group 数组追加一个新 INDIVIDUAL 节点
+  const createRules = useCallback(
+    (ruleData: TConditionalSelection) => {
+      if (!isGroup(ruleData)) return;
+      const maxLen = Math.abs(Number(props.zeroLevelMaxLength));
+      if (maxLen) {
+        if (Number(props.zeroLevelMaxLength) < 2) {
+          console.warn(
+            '[TConditionalSelection] Invalid props.zeroLevelMaxLength: zeroLevelMaxLength must be greater than 1.',
+          );
+        }
+        if (ruleData.level === 0 && (ruleData.group as TConditionalSelection[]).length === maxLen) {
+          console.warn(`最外层子项最多添加${maxLen}个条件`);
+          return;
+        }
+      }
+      updateRulesData(draft => {
+        const target = findNode(draft, ruleData._id);
+        if (target && Array.isArray(target.group)) {
+          target.group.push(getTempRules(target.level + 1));
+        }
+      });
+    },
+    [props.zeroLevelMaxLength, updateRulesData],
+  );
+
+  // 创建子级规则：将当前 INDIVIDUAL 节点升级为 GROUP 节点
+  const createChildRules = useCallback(
+    (ruleData: TConditionalSelection) => {
+      updateRulesData(draft => {
+        const target = findNode(draft, ruleData._id);
+        if (!target) return;
+
+        if (target.framework === EConditionalSelectionFramework.INDIVIDUAL) {
+          const firstChild: TConditionalSelection = {
+            _id: crypto.randomUUID(),
+            framework: EConditionalSelectionFramework.INDIVIDUAL,
+            individual: cloneDeep(target.individual ?? {}),
+            level: target.level + 1,
+          };
+          const secondChild = getTempRules(target.level + 1);
+          target.framework = EConditionalSelectionFramework.GROUP;
+          target.link = EConditionalSelectionLink.AND;
+          target._id = crypto.randomUUID();
+          target.group = [firstChild, secondChild];
+          delete target.individual;
+        } else {
+          // 已是 GROUP，追加子项
+          if (Array.isArray(target.group)) {
+            target.group.push(getTempRules(target.level + 1));
+          }
+        }
+      });
+    },
+    [updateRulesData],
+  );
+
+  // 删除规则
+  const delRules = useCallback((ruleData: TConditionalSelection, index: number) => {
+    updateRulesData(draft => {
+      const target = findNode(draft, ruleData._id);
+      if (!target || !Array.isArray(target.group)) return;
+
+      target.group.splice(index, 1);
+
+      if (target.framework === EConditionalSelectionFramework.GROUP && target.group.length === 1) {
+        const onlyChild = target.group[0];
+        if (
+          onlyChild.framework === EConditionalSelectionFramework.GROUP &&
+          Array.isArray(onlyChild.group) &&
+          onlyChild.group.length > 1
+        ) {
+          // 唯一子项是 GROUP，提升到当前节点
+          target.framework = EConditionalSelectionFramework.GROUP;
+          target.link = onlyChild.link;
+          target._id = onlyChild._id;
+          target.group = onlyChild.group;
+          delete target.individual;
+        } else {
+          // 唯一子项是 INDIVIDUAL，降级
+          target.framework = EConditionalSelectionFramework.INDIVIDUAL;
+          target._id = onlyChild._id;
+          target.individual = cloneDeep(onlyChild.individual ?? {});
+          delete target.link;
+          delete target.group;
+        }
+        subtractLevel(onlyChild);
+      }
+    });
+  }, [updateRulesData]);
+
+  // 获取并校验数据
+  const getConditionalSelectionData = useCallback(
+    (validate = true): Promise<TConditionalSelection> => {
+      return new Promise((resolve, reject) => {
+        if (validate && checkData(rulesData)) {
+          console.error('请填写完整');
+          reject('含有未填写完整的项');
+          return;
+        }
+        resolve(cloneDeep(rulesData));
+      });
+    },
+    [rulesData],
+  );
+
+  return {
+    rulesData,
+    setRulesData,
+    level,
+    disabledConfig,
+    createRules,
+    createChildRules,
+    delRules,
+    getConditionalSelectionData,
+    isGroup,
+    getTempRules,
+    updateRulesData,
+  };
+}

package/packages/ConditionalSelection/conditional-selection.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
+import { cloneDeep } from 'lodash-es';
+import ConditionalContent from './components/conditional-content';
+import { useConditionalHandle, getTempRules, isGroup, findNode } from './composables/useConditionalHandle';
+import { type TConditionalSelectionProps } from './types';
+import './index.less';
+
+export type { TConditionalSelectionProps };
+
+const ConditionalSelection = forwardRef<
+  { getConditionalSelectionData: (validate?: boolean) => Promise<any> },
+  TConditionalSelectionProps
+>((props, ref) => {
+  const { conditionalRules, onChange, renderConditionRules, renderCreateCondition } = props;
+
+  const { rulesData, setRulesData, level, disabledConfig, createRules, createChildRules, delRules, getConditionalSelectionData, updateRulesData } =
+    useConditionalHandle(props);
+
+  // 暴露 getConditionalSelectionData 给父组件
+  useImperativeHandle(ref, () => ({ getConditionalSelectionData }), [getConditionalSelectionData]);
+
+  // 监听 rulesData 变化并抛出 onChange
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    onChange?.(rulesData);
+  }, [rulesData]);
+
+  //初始化
+  useEffect(() => {
+    if (conditionalRules && Object.keys(conditionalRules).length !== 0) {
+      setRulesData(cloneDeep(conditionalRules));
+    } else {
+      setRulesData(getTempRules());
+    }
+  }, []);
+
+  // 递归/slot相关 handler 用 useCallback 包裹，依赖项只放 updateRulesData/findNode/renderConditionRules
+  const handleUpdateNode = useCallback((nodeId: string, patch: Partial<any>) => {
+    updateRulesData(draft => {
+      const target = findNode(draft, nodeId);
+      if (!target) return;
+      Object.assign(target, patch);
+    });
+  }, [updateRulesData]);
+
+  const handleRenderConditionItem = useCallback(
+    (item: any) => renderConditionRules?.(item, (val: Record<string, any>) => {
+      updateRulesData(draft => {
+        const target = findNode(draft, item._id);
+        if (!target) return;
+        target.individual = val;
+      });
+    }),
+    [renderConditionRules, updateRulesData]
+  );
+
+  const handleRenderConditionRules = useCallback(
+    (rulesData: any, change: (val: Record<string, any>) => void) =>
+      renderConditionRules?.(rulesData, change),
+    [renderConditionRules]
+  );
+
+  return (
+    <div className="conditional-selection">
+      {/* 新增条件按钮区域 */}
+      {!disabledConfig.addItem &&
+        (renderCreateCondition ? (
+          renderCreateCondition({ createRules: createChildRules, rulesData })
+        ) : (
+          <span className="create-box" onClick={() => createChildRules(rulesData)}>
+            <span style={{ color: '#00c8be', marginRight: 4 }}>➕</span>
+            添加条件
+          </span>
+        ))}
+
+      {/* 规则内容区域 */}
+      <div className="conditional-content">
+        {isGroup(rulesData) && (rulesData.group as any[]).length > 0 ? (
+          <ConditionalContent
+            levelData={rulesData}
+            level={level}
+            disabledConfig={disabledConfig}
+            onUpdateNode={handleUpdateNode}
+            onCreateRules={createRules}
+            onCreateChildRules={createChildRules}
+            onDelRules={delRules}
+            renderConditionItem={handleRenderConditionItem}
+          />
+        ) : (
+          handleRenderConditionRules(rulesData, (val: Record<string, any>) => {
+            updateRulesData(draft => {
+              const target = findNode(draft, rulesData._id);
+              if (!target) return;
+              target.individual = val;
+            });
+          })
+        )}
+      </div>
+    </div>
+  );
+});
+
+ConditionalSelection.displayName = 'ConditionalSelection';
+
+export default ConditionalSelection;

package/packages/ConditionalSelection/index.less

@@ -0,0 +1,91 @@
+.conditional-selection {
+    width: 100%;
+
+    .create-box {
+        display: inline-block;
+        margin-bottom: 8px;
+        cursor: pointer;
+    }
+
+    .conditional-content {
+        width: 100%;
+    }
+}
+
+.relative-box {
+    position: relative;
+    width: 100%;
+
+    .conditional-list-box {
+        flex: 1;
+    }
+
+    .conditional-item {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+    }
+
+    .conditional-list:first-child {
+        margin-top: -8px;
+    }
+
+    .right-box {
+        margin-left: 32px;
+    }
+}
+
+.link-line {
+    position: absolute;
+    z-index: 999;
+    height: 100%;
+    margin: 0 4px;
+
+    .link-label {
+        position: absolute;
+        top: 50%;
+        width: 22px;
+        color: #c85000;
+        text-align: center;
+        cursor: pointer;
+        user-select: none;
+        background-color: #f9e5e5;
+        border-radius: 4px;
+        transform: translateY(-50%);
+    }
+}
+
+.link-line::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    width: 2px;
+    content: '';
+    background-color: #c85000;
+    opacity: 0.2;
+}
+
+.conditional-handle {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .create-handle {
+        display: inline-block;
+        width: 50px;
+        cursor: pointer;
+        font-size: 14px;
+    }
+
+    .del-handle {
+        display: inline-block;
+        font-size: 14px;
+        width: 24px;
+        cursor: pointer;
+    }
+
+    .del-handle:hover {
+        color: red;
+    }
+}

package/packages/ConditionalSelection/index.ts

@@ -0,0 +1,5 @@
+import ConditionalSelection from './conditional-selection';
+export * from './types';
+export {
+    ConditionalSelection
+}