conditional-selection 1.0.6 → 1.0.8

package/README.md

@@ -3,18 +3,6 @@
 ## 简介
 本项目为一个支持条件树编辑的 React 组件库，支持递归嵌套、条件分组、动态增删、禁用控制等功能，适用于复杂表单、规则配置等场景。
 
-## 安装依赖
-
-```bash
-npm install
-```
-
-## 启动示例项目
-
-```bash
-npm run dev
-```
-
 ## 主要功能
 - 条件树递归编辑
 - 条件分组（AND/OR）切换
@@ -28,18 +16,103 @@ npm run dev
 ### 基本用法
 
 ```tsx
+import React, { useMemo, useRef, useState } from 'react';
 import { ConditionalSelection } from '../packages/ConditionalSelection';
 import type { TConditionalSelection } from '../packages/ConditionalSelection/types';
-
-<ConditionalSelection
-  conditionalRules={rules}
-  maxDeep={3}
-  disabled={false}
-  onChange={setRules}
-  renderConditionRules={(item, change) => (
-    <FlexSelect item={item} onChange={val => change(val)} />
-  )}
-/>
+import '../packages/ConditionalSelection/index.less';
+
+const fieldOptions = [
+  { label: '测试字段1', value: 1 },
+  { label: '测试字段2', value: 2 },
+];
+const functionOptions = [
+  { label: '等于', value: 1 },
+  { label: '不等于', value: 2 },
+];
+const valueOptions = [
+  { label: '测试值1', value: 1 },
+  { label: '测试值2', value: 2 },
+];
+
+const FlexSelect: React.FC<{ item: TConditionalSelection; onChange: (val: Record<string, any>) => void }> = ({ item, onChange }) => {
+  // field / function / value 存放在节点的 individual 里
+  const data = useMemo(() => item.individual ?? {}, [item.individual]);
+
+  const handleFieldChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const val = e.target.value ? Number(e.target.value) : undefined;
+    onChange({ field: val, function: '', value: undefined });
+  };
+
+  const handleFunctionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const val = e.target.value ? Number(e.target.value) : undefined;
+    onChange({ ...data, function: val, value: undefined });
+  };
+
+  const handleValueChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const val = e.target.value ? Number(e.target.value) : undefined;
+    onChange({ ...data, value: val });
+  };
+
+  return (
+    <div style={{ display: 'flex', width: '100%' }}>
+      <select style={{ width: '33%', marginRight: 16 }} value={data.field ?? ''} onChange={handleFieldChange}>
+        <option value="">请选择字段</option>
+        {fieldOptions.map(opt => (
+          <option key={opt.value} value={opt.value}>{opt.label}</option>
+        ))}
+      </select>
+      {data.field && (
+        <select style={{ width: '33%', marginRight: 16 }} value={data.function ?? ''} onChange={handleFunctionChange}>
+          <option value="">请选择函数</option>
+          {functionOptions.map(opt => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      )}
+      {data.function && (
+        <select style={{ width: '33%', marginRight: 16 }} value={data.value ?? ''} onChange={handleValueChange}>
+          <option value="">请选择值</option>
+          {valueOptions.map(opt => (
+            <option key={opt.value} value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
+
+export default function App() {
+  const refConditionalSelection = useRef<any>(null);
+  const [rules, setRules] = useState<TConditionalSelection | undefined>();
+  const [maxDeep, setMaxLevel] = useState(3);
+  const [disabled, setDisabled] = useState(false);
+  const [disabledConfig, setDisabledConfig] = useState({
+    addItem: false,
+    delItem: false,
+    linkChange: false,
+  });
+
+  const getResult = async () => {
+    const data = await refConditionalSelection.current.getConditionalSelectionData()
+    console.log('当前数据：', data);
+  }
+
+  return (
+      <ConditionalSelection
+        ref={refConditionalSelection}
+        conditionalRules={rules}
+        maxDeep={maxDeep}
+        disabled={disabled || disabledConfig}
+        onChange={setRules}
+        renderConditionRules={(item, change) => (
+          <FlexSelect
+            item={item}
+            onChange={val => change(val)}
+          />
+        )}
+      />
+  );
+}
 ```
 
 ### 参数说明

package/package.json

@@ -11,7 +11,7 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "name": "conditional-selection",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "",
   "main": "dist/ui.cjs.js",
   "module": "dist/ui.es.js",
@@ -29,13 +29,6 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "esbuild": "^0.25.12",
-    "picocolors": "^1.1.1",
-    "picomatch": "^4.0.3",
-    "postcss": "^8.5.6",
-    "rollup": "^4.59.0",
-    "source-map-js": "^1.2.1",
-    "tinyglobby": "^0.2.15",
     "use-immer": "^0.11.0"
   },
   "scripts": {