conditional-selection 1.0.0 → 1.0.2

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

@@ -1,83 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,91 +0,0 @@
-.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

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

package/packages/ConditionalSelection/types.ts

@@ -1,53 +0,0 @@
-import type { ReactNode } from 'react';
-
-export enum EConditionalSelectionFramework {
-  /** 内容组 */
-  GROUP = 'group',
-  /** 内容 */
-  INDIVIDUAL = 'individual',
-}
-
-export enum EConditionalSelectionLink {
-  AND = 'and',
-  OR = 'or',
-}
-
-export type TConditionalSelection<T = any> = {
-  _id: string;
-  /** 结构标识 */
-  framework: EConditionalSelectionFramework;
-  /** 内容关系 */
-  link?: EConditionalSelectionLink;
-  group?: TConditionalSelection<T>[];
-  individual?: Record<string, any>;
-  level: number;
-}
-
-export type TConditionalSelectionDisabledProps = {
-  addItem?: boolean;
-  delItem?: boolean;
-  linkChange?: boolean;
-};
-
-export type TConditionalSelectionProps = {
-  /** 数据内容 */
-  conditionalRules?: TConditionalSelection | null;
-  /** deep 层级限制，需大于0，默认1 */
-  maxLevel?: number;
-  /** 最外层子项数量限制，需大于1，默认不限 */
-  zeroLevelMaxLength?: number;
-  /** 是否禁用新增、删除、关系变更 */
-  disabled?: boolean | TConditionalSelectionDisabledProps;
-  /** 数据变更回调 */
-  onChange?: (value: TConditionalSelection | undefined) => void;
-  /** 渲染条件行内容的插槽，参数为当前 INDIVIDUAL 节点和变更 handler */
-  renderConditionRules?: (
-    conditionRulesData: TConditionalSelection,
-    change: (data: Record<string, any>) => void
-  ) => ReactNode;
-  /** 渲染创建条件按钮插槽（createCondition） */
-  renderCreateCondition?: (params: {
-    createRules: (ruleData: TConditionalSelection) => void;
-    rulesData: TConditionalSelection;
-  }) => ReactNode;
-};

package/packages/index.ts

@@ -1 +0,0 @@
-export * from './ConditionalSelection'

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
-    "jsxImportSource": "react",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["packages/**/*"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "allowImportingTsExtensions": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "emitDeclarationOnly": true,
-    "types": ["node"],
-    "composite": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,39 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc'
-import path from 'node:path'
-import dts from 'vite-plugin-dts'
-export default defineConfig(({ command }) => {
-    const isDev = command === 'serve'
-    return {
-        plugins: [react(), dts({
-            outDir: 'dist/types',
-            insertTypesEntry: true, //这是dts插件的配置，用于生成类型文件
-            include: ['packages/**/*.ts', 'packages/**/*.tsx'],
-            rollupTypes: true
-        })],
-        root: isDev ? path.resolve(__dirname, 'example') : undefined,
-        server: {
-            port: 3000,
-            open: true,
-        },
-        build: {
-            outDir: path.resolve(__dirname, 'dist'),
-            lib: {
-                entry: path.resolve(__dirname, 'packages/index.ts'),
-                name: 'ui',
-                formats: ['es', 'umd', 'cjs', 'iife'],
-                fileName: (format) => `ui.${format}.js`,
-            },
-            emptyOutDir: false,
-            rollupOptions: {
-                external: ['react', 'react-dom'],
-                output: {
-                    globals: {
-                        react: 'React',
-                        'react-dom': 'ReactDOM',
-                    },
-                },
-            },
-        },
-    }
-});