@nokecy/qc-ui 1.0.65 → 1.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/RuleBuilder/LogicSelector.d.ts +23 -0
- package/dist/cjs/RuleBuilder/LogicSelector.js +54 -0
- package/dist/cjs/RuleBuilder/RuleBuilderContainer.d.ts +20 -0
- package/dist/cjs/RuleBuilder/RuleBuilderContainer.js +209 -0
- package/dist/cjs/RuleBuilder/RuleCard.d.ts +20 -0
- package/dist/cjs/RuleBuilder/RuleCard.js +196 -0
- package/dist/cjs/RuleBuilder/RuleGroupEditor.d.ts +25 -0
- package/dist/cjs/RuleBuilder/RuleGroupEditor.js +191 -0
- package/dist/cjs/RuleBuilder/constants/operators.d.ts +47 -0
- package/dist/cjs/RuleBuilder/constants/operators.js +172 -0
- package/dist/cjs/RuleBuilder/context/RuleBuilderContext.d.ts +72 -0
- package/dist/cjs/RuleBuilder/context/RuleBuilderContext.js +286 -0
- package/dist/cjs/RuleBuilder/index.d.ts +25 -0
- package/dist/cjs/RuleBuilder/index.js +308 -0
- package/dist/cjs/RuleBuilder/inputs/BetweenValueInput.d.ts +23 -0
- package/dist/cjs/RuleBuilder/inputs/BetweenValueInput.js +80 -0
- package/dist/cjs/RuleBuilder/inputs/MultiValueInput.d.ts +21 -0
- package/dist/cjs/RuleBuilder/inputs/MultiValueInput.js +128 -0
- package/dist/cjs/RuleBuilder/inputs/SingleValueInput.d.ts +25 -0
- package/dist/cjs/RuleBuilder/inputs/SingleValueInput.js +81 -0
- package/dist/cjs/RuleBuilder/inputs/ValueInput.d.ts +29 -0
- package/dist/cjs/RuleBuilder/inputs/ValueInput.js +80 -0
- package/dist/cjs/RuleBuilder/selectors/FieldSelector.d.ts +22 -0
- package/dist/cjs/RuleBuilder/selectors/FieldSelector.js +45 -0
- package/dist/cjs/RuleBuilder/selectors/OperatorSelector.d.ts +22 -0
- package/dist/cjs/RuleBuilder/selectors/OperatorSelector.js +51 -0
- package/dist/cjs/RuleBuilder/styles/index.module.less +443 -0
- package/dist/cjs/RuleBuilder/styles/index.module.less.d.ts +43 -0
- package/dist/cjs/RuleBuilder/types/index.d.ts +232 -0
- package/dist/cjs/RuleBuilder/types/index.js +83 -0
- package/dist/cjs/RuleBuilder/utils/pathHelpers.d.ts +65 -0
- package/dist/cjs/RuleBuilder/utils/pathHelpers.js +241 -0
- package/dist/cjs/RuleBuilder/utils/ruleHelpers.d.ts +47 -0
- package/dist/cjs/RuleBuilder/utils/ruleHelpers.js +154 -0
- package/dist/cjs/RuleBuilder/utils/validation.d.ts +25 -0
- package/dist/cjs/RuleBuilder/utils/validation.js +241 -0
- package/dist/cjs/components/RegexEditor/core/RegexEditor.d.ts +34 -0
- package/dist/cjs/components/RegexEditor/core/RegexEditor.js +223 -0
- package/dist/cjs/components/RegexEditor/core/RegexEditor.less +119 -0
- package/dist/cjs/components/RegexEditor/core/extensions/errorMarker.d.ts +49 -0
- package/dist/cjs/components/RegexEditor/core/extensions/errorMarker.js +158 -0
- package/dist/cjs/components/RegexEditor/core/types.d.ts +79 -0
- package/dist/cjs/components/RegexEditor/core/types.js +5 -0
- package/dist/cjs/components/RegexEditor/hooks/index.d.ts +9 -0
- package/dist/cjs/components/RegexEditor/hooks/index.js +19 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexTester.d.ts +95 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexTester.js +234 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexValidation.d.ts +71 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexValidation.js +215 -0
- package/dist/cjs/components/RegexEditor/hooks/useTemplateManager.d.ts +64 -0
- package/dist/cjs/components/RegexEditor/hooks/useTemplateManager.js +438 -0
- package/dist/cjs/components/RegexEditor/index.d.ts +16 -0
- package/dist/cjs/components/RegexEditor/index.js +232 -0
- package/dist/cjs/components/RegexEditor/templates/TemplateSelector.d.ts +36 -0
- package/dist/cjs/components/RegexEditor/templates/TemplateSelector.js +322 -0
- package/dist/cjs/components/RegexEditor/templates/builtinTemplates.d.ts +36 -0
- package/dist/cjs/components/RegexEditor/templates/builtinTemplates.js +340 -0
- package/dist/cjs/components/RegexEditor/templates/index.d.ts +10 -0
- package/dist/cjs/components/RegexEditor/templates/index.js +184 -0
- package/dist/cjs/components/RegexEditor/templates/storage.d.ts +74 -0
- package/dist/cjs/components/RegexEditor/templates/storage.js +337 -0
- package/dist/cjs/components/RegexEditor/templates/templateManager.d.ts +67 -0
- package/dist/cjs/components/RegexEditor/templates/templateManager.js +277 -0
- package/dist/cjs/components/RegexEditor/templates/types.d.ts +111 -0
- package/dist/cjs/components/RegexEditor/templates/types.js +94 -0
- package/dist/cjs/components/RegexEditor/testing/types.d.ts +55 -0
- package/dist/cjs/components/RegexEditor/testing/types.js +5 -0
- package/dist/cjs/components/RegexEditor/validation/complexity.d.ts +22 -0
- package/dist/cjs/components/RegexEditor/validation/complexity.js +196 -0
- package/dist/cjs/components/RegexEditor/validation/parser.d.ts +53 -0
- package/dist/cjs/components/RegexEditor/validation/parser.js +129 -0
- package/dist/cjs/components/RegexEditor/validation/types.d.ts +146 -0
- package/dist/cjs/components/RegexEditor/validation/types.js +5 -0
- package/dist/cjs/components/RegexEditor/validation/validator.d.ts +60 -0
- package/dist/cjs/components/RegexEditor/validation/validator.js +218 -0
- package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.d.ts +20 -0
- package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.js +98 -0
- package/dist/cjs/components/RegexEditor/visualizer/MatchItem.d.ts +25 -0
- package/dist/cjs/components/RegexEditor/visualizer/MatchItem.js +201 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexRailroadDiagram.d.ts +32 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexRailroadDiagram.js +192 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexTester.d.ts +22 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexTester.js +255 -0
- package/dist/cjs/components/RegexEditor/visualizer/astToRailroad.d.ts +19 -0
- package/dist/cjs/components/RegexEditor/visualizer/astToRailroad.js +155 -0
- package/dist/cjs/components/RegexEditor/visualizer/index.d.ts +12 -0
- package/dist/cjs/components/RegexEditor/visualizer/index.js +76 -0
- package/dist/cjs/components/RegexEditor/visualizer/types.d.ts +131 -0
- package/dist/cjs/components/RegexEditor/visualizer/types.js +5 -0
- package/dist/cjs/components/RegexEditor/visualizer/utils.d.ts +106 -0
- package/dist/cjs/components/RegexEditor/visualizer/utils.js +268 -0
- package/dist/cjs/index.d.ts +5 -1
- package/dist/cjs/index.js +62 -0
- package/dist/cjs/standardFormDialog/StandardFormDialog.js +26 -5
- package/dist/cjs/standardFormDialog/useStandardFormSchema.d.ts +1 -1
- package/dist/cjs/standardFormDialog/withStandardForm.d.ts +2 -2
- package/dist/cjs/types/railroad-diagrams.d.ts +59 -0
- package/dist/cjs/types/regexp-tree.d.ts +175 -0
- package/dist/esm/RuleBuilder/LogicSelector.d.ts +23 -0
- package/dist/esm/RuleBuilder/LogicSelector.js +47 -0
- package/dist/esm/RuleBuilder/RuleBuilderContainer.d.ts +20 -0
- package/dist/esm/RuleBuilder/RuleBuilderContainer.js +203 -0
- package/dist/esm/RuleBuilder/RuleCard.d.ts +20 -0
- package/dist/esm/RuleBuilder/RuleCard.js +191 -0
- package/dist/esm/RuleBuilder/RuleGroupEditor.d.ts +25 -0
- package/dist/esm/RuleBuilder/RuleGroupEditor.js +184 -0
- package/dist/esm/RuleBuilder/constants/operators.d.ts +47 -0
- package/dist/esm/RuleBuilder/constants/operators.js +169 -0
- package/dist/esm/RuleBuilder/context/RuleBuilderContext.d.ts +72 -0
- package/dist/esm/RuleBuilder/context/RuleBuilderContext.js +271 -0
- package/dist/esm/RuleBuilder/index.d.ts +25 -0
- package/dist/esm/RuleBuilder/index.js +42 -0
- package/dist/esm/RuleBuilder/inputs/BetweenValueInput.d.ts +23 -0
- package/dist/esm/RuleBuilder/inputs/BetweenValueInput.js +73 -0
- package/dist/esm/RuleBuilder/inputs/MultiValueInput.d.ts +21 -0
- package/dist/esm/RuleBuilder/inputs/MultiValueInput.js +121 -0
- package/dist/esm/RuleBuilder/inputs/SingleValueInput.d.ts +25 -0
- package/dist/esm/RuleBuilder/inputs/SingleValueInput.js +74 -0
- package/dist/esm/RuleBuilder/inputs/ValueInput.d.ts +29 -0
- package/dist/esm/RuleBuilder/inputs/ValueInput.js +73 -0
- package/dist/esm/RuleBuilder/selectors/FieldSelector.d.ts +22 -0
- package/dist/esm/RuleBuilder/selectors/FieldSelector.js +38 -0
- package/dist/esm/RuleBuilder/selectors/OperatorSelector.d.ts +22 -0
- package/dist/esm/RuleBuilder/selectors/OperatorSelector.js +44 -0
- package/dist/esm/RuleBuilder/styles/index.module.less +443 -0
- package/dist/esm/RuleBuilder/styles/index.module.less.d.ts +43 -0
- package/dist/esm/RuleBuilder/types/index.d.ts +232 -0
- package/dist/esm/RuleBuilder/types/index.js +91 -0
- package/dist/esm/RuleBuilder/utils/pathHelpers.d.ts +65 -0
- package/dist/esm/RuleBuilder/utils/pathHelpers.js +228 -0
- package/dist/esm/RuleBuilder/utils/ruleHelpers.d.ts +47 -0
- package/dist/esm/RuleBuilder/utils/ruleHelpers.js +145 -0
- package/dist/esm/RuleBuilder/utils/validation.d.ts +25 -0
- package/dist/esm/RuleBuilder/utils/validation.js +236 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.d.ts +34 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.js +214 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.less +119 -0
- package/dist/esm/components/RegexEditor/core/extensions/errorMarker.d.ts +49 -0
- package/dist/esm/components/RegexEditor/core/extensions/errorMarker.js +154 -0
- package/dist/esm/components/RegexEditor/core/types.d.ts +79 -0
- package/dist/esm/components/RegexEditor/core/types.js +1 -0
- package/dist/esm/components/RegexEditor/hooks/index.d.ts +9 -0
- package/dist/esm/components/RegexEditor/hooks/index.js +8 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexTester.d.ts +95 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexTester.js +230 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexValidation.d.ts +71 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexValidation.js +211 -0
- package/dist/esm/components/RegexEditor/hooks/useTemplateManager.d.ts +64 -0
- package/dist/esm/components/RegexEditor/hooks/useTemplateManager.js +430 -0
- package/dist/esm/components/RegexEditor/index.d.ts +16 -0
- package/dist/esm/components/RegexEditor/index.js +27 -0
- package/dist/esm/components/RegexEditor/templates/TemplateSelector.d.ts +36 -0
- package/dist/esm/components/RegexEditor/templates/TemplateSelector.js +316 -0
- package/dist/esm/components/RegexEditor/templates/builtinTemplates.d.ts +36 -0
- package/dist/esm/components/RegexEditor/templates/builtinTemplates.js +335 -0
- package/dist/esm/components/RegexEditor/templates/index.d.ts +10 -0
- package/dist/esm/components/RegexEditor/templates/index.js +19 -0
- package/dist/esm/components/RegexEditor/templates/storage.d.ts +74 -0
- package/dist/esm/components/RegexEditor/templates/storage.js +335 -0
- package/dist/esm/components/RegexEditor/templates/templateManager.d.ts +67 -0
- package/dist/esm/components/RegexEditor/templates/templateManager.js +274 -0
- package/dist/esm/components/RegexEditor/templates/types.d.ts +111 -0
- package/dist/esm/components/RegexEditor/templates/types.js +90 -0
- package/dist/esm/components/RegexEditor/testing/types.d.ts +55 -0
- package/dist/esm/components/RegexEditor/testing/types.js +1 -0
- package/dist/esm/components/RegexEditor/validation/complexity.d.ts +22 -0
- package/dist/esm/components/RegexEditor/validation/complexity.js +190 -0
- package/dist/esm/components/RegexEditor/validation/parser.d.ts +53 -0
- package/dist/esm/components/RegexEditor/validation/parser.js +123 -0
- package/dist/esm/components/RegexEditor/validation/types.d.ts +145 -0
- package/dist/esm/components/RegexEditor/validation/types.js +1 -0
- package/dist/esm/components/RegexEditor/validation/validator.d.ts +60 -0
- package/dist/esm/components/RegexEditor/validation/validator.js +213 -0
- package/dist/esm/components/RegexEditor/visualizer/FlagsSelector.d.ts +20 -0
- package/dist/esm/components/RegexEditor/visualizer/FlagsSelector.js +93 -0
- package/dist/esm/components/RegexEditor/visualizer/MatchItem.d.ts +25 -0
- package/dist/esm/components/RegexEditor/visualizer/MatchItem.js +194 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexRailroadDiagram.d.ts +32 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexRailroadDiagram.js +186 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexTester.d.ts +22 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexTester.js +248 -0
- package/dist/esm/components/RegexEditor/visualizer/astToRailroad.d.ts +18 -0
- package/dist/esm/components/RegexEditor/visualizer/astToRailroad.js +150 -0
- package/dist/esm/components/RegexEditor/visualizer/index.d.ts +12 -0
- package/dist/esm/components/RegexEditor/visualizer/index.js +17 -0
- package/dist/esm/components/RegexEditor/visualizer/types.d.ts +131 -0
- package/dist/esm/components/RegexEditor/visualizer/types.js +1 -0
- package/dist/esm/components/RegexEditor/visualizer/utils.d.ts +106 -0
- package/dist/esm/components/RegexEditor/visualizer/utils.js +256 -0
- package/dist/esm/index.d.ts +5 -1
- package/dist/esm/index.js +6 -2
- package/dist/esm/standardFormDialog/StandardFormDialog.js +26 -5
- package/dist/esm/types/railroad-diagrams.d.ts +59 -0
- package/dist/esm/types/regexp-tree.d.ts +175 -0
- package/dist/umd/qc-ui.min.css +1 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +23 -7
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 规则构建器状态管理 Context
|
|
3
|
+
* 使用 React Context + useReducer 模式实现全局状态管理
|
|
4
|
+
*/
|
|
5
|
+
import React, { type ReactNode } from 'react';
|
|
6
|
+
import type { RuleBuilderState, RuleBuilderAction, RuleGroupDto, FieldDefinition, ValidationResult } from '../types';
|
|
7
|
+
/**
|
|
8
|
+
* Context 类型定义
|
|
9
|
+
*/
|
|
10
|
+
interface RuleBuilderContextValue {
|
|
11
|
+
/** 当前状态 */
|
|
12
|
+
state: RuleBuilderState;
|
|
13
|
+
/** Dispatch 方法 */
|
|
14
|
+
dispatch: React.Dispatch<RuleBuilderAction>;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Provider Props
|
|
18
|
+
*/
|
|
19
|
+
interface RuleBuilderProviderProps {
|
|
20
|
+
/** 子组件 */
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
/** 初始规则组 */
|
|
23
|
+
initialRule?: RuleGroupDto;
|
|
24
|
+
/** 字段定义列表 */
|
|
25
|
+
fields: FieldDefinition[];
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* RuleBuilder Provider 组件
|
|
29
|
+
*/
|
|
30
|
+
export declare function RuleBuilderProvider({ children, initialRule, fields, }: RuleBuilderProviderProps): JSX.Element;
|
|
31
|
+
/**
|
|
32
|
+
* 使用 RuleBuilder Context 的 Hook
|
|
33
|
+
* @throws {Error} 如果在 Provider 外部使用
|
|
34
|
+
*/
|
|
35
|
+
export declare function useRuleBuilderContext(): RuleBuilderContextValue;
|
|
36
|
+
/**
|
|
37
|
+
* 便捷 Hook: 获取当前规则组
|
|
38
|
+
*/
|
|
39
|
+
export declare function useRuleGroup(): RuleGroupDto;
|
|
40
|
+
/**
|
|
41
|
+
* 便捷 Hook: 获取字段列表
|
|
42
|
+
*/
|
|
43
|
+
export declare function useFields(): FieldDefinition[];
|
|
44
|
+
/**
|
|
45
|
+
* 便捷 Hook: 获取加载状态
|
|
46
|
+
*/
|
|
47
|
+
export declare function useLoading(): boolean;
|
|
48
|
+
/**
|
|
49
|
+
* 便捷 Hook: 获取验证结果
|
|
50
|
+
*/
|
|
51
|
+
export declare function useValidation(): ValidationResult;
|
|
52
|
+
/**
|
|
53
|
+
* 便捷 Hook: 获取修改状态
|
|
54
|
+
*/
|
|
55
|
+
export declare function useIsDirty(): boolean;
|
|
56
|
+
/**
|
|
57
|
+
* 便捷 Hook: 获取 state
|
|
58
|
+
*/
|
|
59
|
+
export declare function useRuleBuilderState(): RuleBuilderState;
|
|
60
|
+
/**
|
|
61
|
+
* 便捷 Hook: 获取 dispatch
|
|
62
|
+
*/
|
|
63
|
+
export declare function useRuleBuilderDispatch(): React.Dispatch<RuleBuilderAction>;
|
|
64
|
+
/**
|
|
65
|
+
* 便捷 Hook: 获取字段列表(别名,与 useFields 相同)
|
|
66
|
+
*/
|
|
67
|
+
export declare function useRuleBuilderFields(): FieldDefinition[];
|
|
68
|
+
/**
|
|
69
|
+
* 便捷 Hook: 获取验证结果(别名,与 useValidation 相同)
|
|
70
|
+
*/
|
|
71
|
+
export declare function useRuleBuilderValidation(): ValidationResult;
|
|
72
|
+
export {};
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
12
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
+
/**
|
|
14
|
+
* 规则构建器状态管理 Context
|
|
15
|
+
* 使用 React Context + useReducer 模式实现全局状态管理
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import React, { createContext, useContext, useReducer, useMemo } from 'react';
|
|
19
|
+
import { updateRuleAtPath, deleteRuleAtPath, addRuleAtPath, updateRuleGroupAtPath, deleteRuleGroupAtPath, addRuleGroupAtPath } from "../utils/pathHelpers";
|
|
20
|
+
import { createEmptyRuleGroup } from "../utils/ruleHelpers";
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* 初始验证结果
|
|
24
|
+
*/
|
|
25
|
+
var INITIAL_VALIDATION = {
|
|
26
|
+
isValid: true,
|
|
27
|
+
errors: [],
|
|
28
|
+
warnings: []
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* 创建初始状态
|
|
33
|
+
*/
|
|
34
|
+
function createInitialState(initialRule) {
|
|
35
|
+
var fields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
36
|
+
return {
|
|
37
|
+
ruleGroup: initialRule || createEmptyRuleGroup(0),
|
|
38
|
+
// And 逻辑组
|
|
39
|
+
fields: fields,
|
|
40
|
+
loading: false,
|
|
41
|
+
validationResult: INITIAL_VALIDATION,
|
|
42
|
+
isDirty: false
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Reducer 函数
|
|
48
|
+
*/
|
|
49
|
+
function ruleBuilderReducer(state, action) {
|
|
50
|
+
switch (action.type) {
|
|
51
|
+
case 'SET_RULE_GROUP':
|
|
52
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
53
|
+
ruleGroup: action.payload,
|
|
54
|
+
isDirty: false
|
|
55
|
+
});
|
|
56
|
+
case 'SET_FIELDS':
|
|
57
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
58
|
+
fields: action.payload
|
|
59
|
+
});
|
|
60
|
+
case 'SET_LOADING':
|
|
61
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
62
|
+
loading: action.payload
|
|
63
|
+
});
|
|
64
|
+
case 'UPDATE_RULE':
|
|
65
|
+
{
|
|
66
|
+
var _action$payload = action.payload,
|
|
67
|
+
path = _action$payload.path,
|
|
68
|
+
rule = _action$payload.rule;
|
|
69
|
+
var newRuleGroup = updateRuleAtPath(state.ruleGroup, path, rule);
|
|
70
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
71
|
+
ruleGroup: newRuleGroup,
|
|
72
|
+
isDirty: true
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
case 'DELETE_RULE':
|
|
76
|
+
{
|
|
77
|
+
var _path = action.payload.path;
|
|
78
|
+
var _newRuleGroup = deleteRuleAtPath(state.ruleGroup, _path);
|
|
79
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
80
|
+
ruleGroup: _newRuleGroup,
|
|
81
|
+
isDirty: true
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
case 'ADD_RULE':
|
|
85
|
+
{
|
|
86
|
+
var _action$payload2 = action.payload,
|
|
87
|
+
_path2 = _action$payload2.path,
|
|
88
|
+
_rule = _action$payload2.rule;
|
|
89
|
+
var _newRuleGroup2 = addRuleAtPath(state.ruleGroup, _path2, _rule);
|
|
90
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
91
|
+
ruleGroup: _newRuleGroup2,
|
|
92
|
+
isDirty: true
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
case 'UPDATE_RULE_GROUP':
|
|
96
|
+
{
|
|
97
|
+
var _action$payload3 = action.payload,
|
|
98
|
+
_path3 = _action$payload3.path,
|
|
99
|
+
group = _action$payload3.group;
|
|
100
|
+
var _newRuleGroup3 = updateRuleGroupAtPath(state.ruleGroup, _path3, group);
|
|
101
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
102
|
+
ruleGroup: _newRuleGroup3,
|
|
103
|
+
isDirty: true
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
case 'DELETE_RULE_GROUP':
|
|
107
|
+
{
|
|
108
|
+
var _path4 = action.payload.path;
|
|
109
|
+
var _newRuleGroup4 = deleteRuleGroupAtPath(state.ruleGroup, _path4);
|
|
110
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
111
|
+
ruleGroup: _newRuleGroup4,
|
|
112
|
+
isDirty: true
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
case 'ADD_RULE_GROUP':
|
|
116
|
+
{
|
|
117
|
+
var _action$payload4 = action.payload,
|
|
118
|
+
_path5 = _action$payload4.path,
|
|
119
|
+
_group = _action$payload4.group;
|
|
120
|
+
var _newRuleGroup5 = addRuleGroupAtPath(state.ruleGroup, _path5, _group);
|
|
121
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
122
|
+
ruleGroup: _newRuleGroup5,
|
|
123
|
+
isDirty: true
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
case 'SET_VALIDATION_RESULT':
|
|
127
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
128
|
+
validationResult: action.payload
|
|
129
|
+
});
|
|
130
|
+
case 'RESET':
|
|
131
|
+
{
|
|
132
|
+
return createInitialState(undefined, state.fields);
|
|
133
|
+
}
|
|
134
|
+
default:
|
|
135
|
+
return state;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Context 类型定义
|
|
141
|
+
*/
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Context 对象
|
|
145
|
+
*/
|
|
146
|
+
var RuleBuilderContext = /*#__PURE__*/createContext(undefined);
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Provider Props
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* RuleBuilder Provider 组件
|
|
154
|
+
*/
|
|
155
|
+
export function RuleBuilderProvider(_ref) {
|
|
156
|
+
var children = _ref.children,
|
|
157
|
+
initialRule = _ref.initialRule,
|
|
158
|
+
fields = _ref.fields;
|
|
159
|
+
var _useReducer = useReducer(ruleBuilderReducer, createInitialState(initialRule, fields)),
|
|
160
|
+
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
161
|
+
state = _useReducer2[0],
|
|
162
|
+
dispatch = _useReducer2[1];
|
|
163
|
+
|
|
164
|
+
// 监听fields变化,同步更新到state
|
|
165
|
+
React.useEffect(function () {
|
|
166
|
+
dispatch({
|
|
167
|
+
type: 'SET_FIELDS',
|
|
168
|
+
payload: fields
|
|
169
|
+
});
|
|
170
|
+
}, [fields]);
|
|
171
|
+
|
|
172
|
+
// 使用 useMemo 避免不必要的重渲染
|
|
173
|
+
var contextValue = useMemo(function () {
|
|
174
|
+
return {
|
|
175
|
+
state: state,
|
|
176
|
+
dispatch: dispatch
|
|
177
|
+
};
|
|
178
|
+
}, [state]);
|
|
179
|
+
return /*#__PURE__*/React.createElement(RuleBuilderContext.Provider, {
|
|
180
|
+
value: contextValue
|
|
181
|
+
}, children);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/**
|
|
185
|
+
* 使用 RuleBuilder Context 的 Hook
|
|
186
|
+
* @throws {Error} 如果在 Provider 外部使用
|
|
187
|
+
*/
|
|
188
|
+
export function useRuleBuilderContext() {
|
|
189
|
+
var context = useContext(RuleBuilderContext);
|
|
190
|
+
if (context === undefined) {
|
|
191
|
+
throw new Error('useRuleBuilderContext 必须在 RuleBuilderProvider 内部使用');
|
|
192
|
+
}
|
|
193
|
+
return context;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* 便捷 Hook: 获取当前规则组
|
|
198
|
+
*/
|
|
199
|
+
export function useRuleGroup() {
|
|
200
|
+
var _useRuleBuilderContex = useRuleBuilderContext(),
|
|
201
|
+
state = _useRuleBuilderContex.state;
|
|
202
|
+
return state.ruleGroup;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* 便捷 Hook: 获取字段列表
|
|
207
|
+
*/
|
|
208
|
+
export function useFields() {
|
|
209
|
+
var _useRuleBuilderContex2 = useRuleBuilderContext(),
|
|
210
|
+
state = _useRuleBuilderContex2.state;
|
|
211
|
+
return state.fields;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* 便捷 Hook: 获取加载状态
|
|
216
|
+
*/
|
|
217
|
+
export function useLoading() {
|
|
218
|
+
var _useRuleBuilderContex3 = useRuleBuilderContext(),
|
|
219
|
+
state = _useRuleBuilderContex3.state;
|
|
220
|
+
return state.loading;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* 便捷 Hook: 获取验证结果
|
|
225
|
+
*/
|
|
226
|
+
export function useValidation() {
|
|
227
|
+
var _useRuleBuilderContex4 = useRuleBuilderContext(),
|
|
228
|
+
state = _useRuleBuilderContex4.state;
|
|
229
|
+
return state.validationResult;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* 便捷 Hook: 获取修改状态
|
|
234
|
+
*/
|
|
235
|
+
export function useIsDirty() {
|
|
236
|
+
var _useRuleBuilderContex5 = useRuleBuilderContext(),
|
|
237
|
+
state = _useRuleBuilderContex5.state;
|
|
238
|
+
return state.isDirty;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* 便捷 Hook: 获取 state
|
|
243
|
+
*/
|
|
244
|
+
export function useRuleBuilderState() {
|
|
245
|
+
var _useRuleBuilderContex6 = useRuleBuilderContext(),
|
|
246
|
+
state = _useRuleBuilderContex6.state;
|
|
247
|
+
return state;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* 便捷 Hook: 获取 dispatch
|
|
252
|
+
*/
|
|
253
|
+
export function useRuleBuilderDispatch() {
|
|
254
|
+
var _useRuleBuilderContex7 = useRuleBuilderContext(),
|
|
255
|
+
dispatch = _useRuleBuilderContex7.dispatch;
|
|
256
|
+
return dispatch;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* 便捷 Hook: 获取字段列表(别名,与 useFields 相同)
|
|
261
|
+
*/
|
|
262
|
+
export function useRuleBuilderFields() {
|
|
263
|
+
return useFields();
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* 便捷 Hook: 获取验证结果(别名,与 useValidation 相同)
|
|
268
|
+
*/
|
|
269
|
+
export function useRuleBuilderValidation() {
|
|
270
|
+
return useValidation();
|
|
271
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RuleBuilder 规则构建器组件
|
|
3
|
+
*
|
|
4
|
+
* 主导出文件 - 导出所有公共 API
|
|
5
|
+
*
|
|
6
|
+
* @module RuleBuilder
|
|
7
|
+
*/
|
|
8
|
+
export { RuleBuilderContainer as RuleBuilder } from './RuleBuilderContainer';
|
|
9
|
+
export { RuleBuilderContainer } from './RuleBuilderContainer';
|
|
10
|
+
export { RuleGroupEditor } from './RuleGroupEditor';
|
|
11
|
+
export { RuleCard } from './RuleCard';
|
|
12
|
+
export { LogicSelector } from './LogicSelector';
|
|
13
|
+
export { FieldSelector } from './selectors/FieldSelector';
|
|
14
|
+
export { OperatorSelector } from './selectors/OperatorSelector';
|
|
15
|
+
export { ValueInput } from './inputs/ValueInput';
|
|
16
|
+
export { SingleValueInput } from './inputs/SingleValueInput';
|
|
17
|
+
export { BetweenValueInput } from './inputs/BetweenValueInput';
|
|
18
|
+
export { MultiValueInput } from './inputs/MultiValueInput';
|
|
19
|
+
export { RuleBuilderProvider, useRuleBuilderContext, useRuleBuilderState, useRuleBuilderDispatch, useRuleBuilderFields, useRuleBuilderValidation, useRuleGroup, useFields, useLoading, useValidation, useIsDirty, } from './context/RuleBuilderContext';
|
|
20
|
+
export { createEmptyRule, createEmptyRuleGroup, generateRuleDescription, cloneRuleGroup, isRuleGroupEmpty, countRules, getMaxDepth, } from './utils/ruleHelpers';
|
|
21
|
+
export { getRuleGroupByPath, getRuleByPath, updateRuleAtPath, deleteRuleAtPath, addRuleAtPath, updateRuleGroupAtPath, deleteRuleGroupAtPath, addRuleGroupAtPath, } from './utils/pathHelpers';
|
|
22
|
+
export { validateRuleGroup, validateRule, isRuleGroupValid, } from './utils/validation';
|
|
23
|
+
export { OPERATOR_INFO_MAP, getOperatorInfo, operatorRequiresValue, operatorRequiresValue2, operatorRequiresMultiValue, getOperatorsByDataType, MAX_NESTING_LEVEL, } from './constants/operators';
|
|
24
|
+
export type { MatchOperator, MatchLogic, FieldDataType, RuleDto, RuleGroupDto, FieldDefinition, ValidationResult, ValidationError, RuleBuilderProps, RuleBuilderConfig, RulePath, RuleBuilderState, RuleBuilderAction, OperatorInfo, } from './types';
|
|
25
|
+
export { RuleBuilderContainer as default } from './RuleBuilderContainer';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RuleBuilder 规则构建器组件
|
|
3
|
+
*
|
|
4
|
+
* 主导出文件 - 导出所有公共 API
|
|
5
|
+
*
|
|
6
|
+
* @module RuleBuilder
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
// ============ 主组件 ============
|
|
10
|
+
export { RuleBuilderContainer as RuleBuilder } from "./RuleBuilderContainer";
|
|
11
|
+
export { RuleBuilderContainer } from "./RuleBuilderContainer";
|
|
12
|
+
|
|
13
|
+
// ============ 子组件 ============
|
|
14
|
+
export { RuleGroupEditor } from "./RuleGroupEditor";
|
|
15
|
+
export { RuleCard } from "./RuleCard";
|
|
16
|
+
export { LogicSelector } from "./LogicSelector";
|
|
17
|
+
|
|
18
|
+
// ============ 选择器组件 ============
|
|
19
|
+
export { FieldSelector } from "./selectors/FieldSelector";
|
|
20
|
+
export { OperatorSelector } from "./selectors/OperatorSelector";
|
|
21
|
+
|
|
22
|
+
// ============ 值输入组件 ============
|
|
23
|
+
export { ValueInput } from "./inputs/ValueInput";
|
|
24
|
+
export { SingleValueInput } from "./inputs/SingleValueInput";
|
|
25
|
+
export { BetweenValueInput } from "./inputs/BetweenValueInput";
|
|
26
|
+
export { MultiValueInput } from "./inputs/MultiValueInput";
|
|
27
|
+
|
|
28
|
+
// ============ Context & Hooks ============
|
|
29
|
+
export { RuleBuilderProvider, useRuleBuilderContext, useRuleBuilderState, useRuleBuilderDispatch, useRuleBuilderFields, useRuleBuilderValidation, useRuleGroup, useFields, useLoading, useValidation, useIsDirty } from "./context/RuleBuilderContext";
|
|
30
|
+
|
|
31
|
+
// ============ 工具函数 ============
|
|
32
|
+
export { createEmptyRule, createEmptyRuleGroup, generateRuleDescription, cloneRuleGroup, isRuleGroupEmpty, countRules, getMaxDepth } from "./utils/ruleHelpers";
|
|
33
|
+
export { getRuleGroupByPath, getRuleByPath, updateRuleAtPath, deleteRuleAtPath, addRuleAtPath, updateRuleGroupAtPath, deleteRuleGroupAtPath, addRuleGroupAtPath } from "./utils/pathHelpers";
|
|
34
|
+
export { validateRuleGroup, validateRule, isRuleGroupValid } from "./utils/validation";
|
|
35
|
+
|
|
36
|
+
// ============ 常量 ============
|
|
37
|
+
export { OPERATOR_INFO_MAP, getOperatorInfo, operatorRequiresValue, operatorRequiresValue2, operatorRequiresMultiValue, getOperatorsByDataType, MAX_NESTING_LEVEL } from "./constants/operators";
|
|
38
|
+
|
|
39
|
+
// ============ 类型定义 ============
|
|
40
|
+
|
|
41
|
+
// ============ 默认导出 ============
|
|
42
|
+
export { RuleBuilderContainer as default } from "./RuleBuilderContainer";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 区间值输入组件
|
|
3
|
+
*
|
|
4
|
+
* 用于 Between 操作符,渲染两个输入框(最小值和最大值)
|
|
5
|
+
* 支持数值和日期类型
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
export interface BetweenValueInputProps {
|
|
9
|
+
/** 最小值 */
|
|
10
|
+
value: any;
|
|
11
|
+
/** 最大值 */
|
|
12
|
+
value2: any;
|
|
13
|
+
/** 值变更回调 */
|
|
14
|
+
onChange: (value: any, value2: any) => void;
|
|
15
|
+
/** 字段数据类型 */
|
|
16
|
+
dataType: 'number' | 'date';
|
|
17
|
+
/** 是否禁用 */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** 尺寸 */
|
|
20
|
+
size?: 'small' | 'middle' | 'large';
|
|
21
|
+
}
|
|
22
|
+
export declare const BetweenValueInput: React.FC<BetweenValueInputProps>;
|
|
23
|
+
export default BetweenValueInput;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 区间值输入组件
|
|
3
|
+
*
|
|
4
|
+
* 用于 Between 操作符,渲染两个输入框(最小值和最大值)
|
|
5
|
+
* 支持数值和日期类型
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { InputNumber, DatePicker, Space } from 'antd';
|
|
10
|
+
import dayjs from 'dayjs';
|
|
11
|
+
export var BetweenValueInput = function BetweenValueInput(_ref) {
|
|
12
|
+
var value = _ref.value,
|
|
13
|
+
value2 = _ref.value2,
|
|
14
|
+
_onChange = _ref.onChange,
|
|
15
|
+
dataType = _ref.dataType,
|
|
16
|
+
_ref$disabled = _ref.disabled,
|
|
17
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
18
|
+
_ref$size = _ref.size,
|
|
19
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size;
|
|
20
|
+
// 根据数据类型渲染不同的输入组件
|
|
21
|
+
if (dataType === 'number') {
|
|
22
|
+
return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(InputNumber, {
|
|
23
|
+
value: value,
|
|
24
|
+
onChange: function onChange(val) {
|
|
25
|
+
return _onChange(val, value2);
|
|
26
|
+
},
|
|
27
|
+
disabled: disabled,
|
|
28
|
+
size: size,
|
|
29
|
+
placeholder: "\u6700\u5C0F\u503C",
|
|
30
|
+
style: {
|
|
31
|
+
width: 120
|
|
32
|
+
}
|
|
33
|
+
}), /*#__PURE__*/React.createElement("span", null, "~"), /*#__PURE__*/React.createElement(InputNumber, {
|
|
34
|
+
value: value2,
|
|
35
|
+
onChange: function onChange(val) {
|
|
36
|
+
return _onChange(value, val);
|
|
37
|
+
},
|
|
38
|
+
disabled: disabled,
|
|
39
|
+
size: size,
|
|
40
|
+
placeholder: "\u6700\u5927\u503C",
|
|
41
|
+
style: {
|
|
42
|
+
width: 120
|
|
43
|
+
}
|
|
44
|
+
}));
|
|
45
|
+
}
|
|
46
|
+
if (dataType === 'date') {
|
|
47
|
+
return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(DatePicker, {
|
|
48
|
+
value: value ? dayjs(value) : null,
|
|
49
|
+
onChange: function onChange(date) {
|
|
50
|
+
return _onChange(date === null || date === void 0 ? void 0 : date.format('YYYY-MM-DD'), value2);
|
|
51
|
+
},
|
|
52
|
+
disabled: disabled,
|
|
53
|
+
size: size,
|
|
54
|
+
placeholder: "\u5F00\u59CB\u65E5\u671F",
|
|
55
|
+
style: {
|
|
56
|
+
width: 140
|
|
57
|
+
}
|
|
58
|
+
}), /*#__PURE__*/React.createElement("span", null, "~"), /*#__PURE__*/React.createElement(DatePicker, {
|
|
59
|
+
value: value2 ? dayjs(value2) : null,
|
|
60
|
+
onChange: function onChange(date) {
|
|
61
|
+
return _onChange(value, date === null || date === void 0 ? void 0 : date.format('YYYY-MM-DD'));
|
|
62
|
+
},
|
|
63
|
+
disabled: disabled,
|
|
64
|
+
size: size,
|
|
65
|
+
placeholder: "\u7ED3\u675F\u65E5\u671F",
|
|
66
|
+
style: {
|
|
67
|
+
width: 140
|
|
68
|
+
}
|
|
69
|
+
}));
|
|
70
|
+
}
|
|
71
|
+
return null;
|
|
72
|
+
};
|
|
73
|
+
export default BetweenValueInput;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 多值输入组件
|
|
3
|
+
*
|
|
4
|
+
* 用于 In/NotIn 操作符,支持添加和删除多个值
|
|
5
|
+
* 支持字符串和数值类型
|
|
6
|
+
*/
|
|
7
|
+
import React from 'react';
|
|
8
|
+
export interface MultiValueInputProps {
|
|
9
|
+
/** 值数组 */
|
|
10
|
+
values: any[];
|
|
11
|
+
/** 值变更回调 */
|
|
12
|
+
onChange: (values: any[]) => void;
|
|
13
|
+
/** 字段数据类型 */
|
|
14
|
+
dataType: 'string' | 'number';
|
|
15
|
+
/** 是否禁用 */
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/** 尺寸 */
|
|
18
|
+
size?: 'small' | 'middle' | 'large';
|
|
19
|
+
}
|
|
20
|
+
export declare const MultiValueInput: React.FC<MultiValueInputProps>;
|
|
21
|
+
export default MultiValueInput;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
4
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
/**
|
|
12
|
+
* 多值输入组件
|
|
13
|
+
*
|
|
14
|
+
* 用于 In/NotIn 操作符,支持添加和删除多个值
|
|
15
|
+
* 支持字符串和数值类型
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import React, { useState } from 'react';
|
|
19
|
+
import { Input, InputNumber, Button, Space, Tag } from 'antd';
|
|
20
|
+
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
|
|
21
|
+
export var MultiValueInput = function MultiValueInput(_ref) {
|
|
22
|
+
var _ref$values = _ref.values,
|
|
23
|
+
values = _ref$values === void 0 ? [] : _ref$values,
|
|
24
|
+
onChange = _ref.onChange,
|
|
25
|
+
dataType = _ref.dataType,
|
|
26
|
+
_ref$disabled = _ref.disabled,
|
|
27
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
28
|
+
_ref$size = _ref.size,
|
|
29
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size;
|
|
30
|
+
var _useState = useState(''),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
inputValue = _useState2[0],
|
|
33
|
+
setInputValue = _useState2[1];
|
|
34
|
+
var _useState3 = useState(false),
|
|
35
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
36
|
+
isAdding = _useState4[0],
|
|
37
|
+
setIsAdding = _useState4[1];
|
|
38
|
+
|
|
39
|
+
// 添加值
|
|
40
|
+
var handleAdd = function handleAdd() {
|
|
41
|
+
if (inputValue !== '' && inputValue !== null && inputValue !== undefined) {
|
|
42
|
+
var newValues = [].concat(_toConsumableArray(values), [inputValue]);
|
|
43
|
+
onChange(newValues);
|
|
44
|
+
setInputValue('');
|
|
45
|
+
setIsAdding(false);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
// 删除值
|
|
50
|
+
var handleRemove = function handleRemove(index) {
|
|
51
|
+
var newValues = values.filter(function (_, i) {
|
|
52
|
+
return i !== index;
|
|
53
|
+
});
|
|
54
|
+
onChange(newValues);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// 渲染输入框
|
|
58
|
+
var renderInput = function renderInput() {
|
|
59
|
+
if (dataType === 'number') {
|
|
60
|
+
return /*#__PURE__*/React.createElement(InputNumber, {
|
|
61
|
+
value: inputValue,
|
|
62
|
+
onChange: setInputValue,
|
|
63
|
+
disabled: disabled,
|
|
64
|
+
size: size,
|
|
65
|
+
placeholder: "\u8BF7\u8F93\u5165\u6570\u503C",
|
|
66
|
+
style: {
|
|
67
|
+
width: 150
|
|
68
|
+
},
|
|
69
|
+
onPressEnter: handleAdd
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return /*#__PURE__*/React.createElement(Input, {
|
|
73
|
+
value: inputValue,
|
|
74
|
+
onChange: function onChange(e) {
|
|
75
|
+
return setInputValue(e.target.value);
|
|
76
|
+
},
|
|
77
|
+
disabled: disabled,
|
|
78
|
+
size: size,
|
|
79
|
+
placeholder: "\u8BF7\u8F93\u5165\u503C",
|
|
80
|
+
style: {
|
|
81
|
+
width: 150
|
|
82
|
+
},
|
|
83
|
+
onPressEnter: handleAdd
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
return /*#__PURE__*/React.createElement(Space, {
|
|
87
|
+
direction: "vertical",
|
|
88
|
+
style: {
|
|
89
|
+
width: '100%'
|
|
90
|
+
}
|
|
91
|
+
}, /*#__PURE__*/React.createElement(Space, {
|
|
92
|
+
wrap: true
|
|
93
|
+
}, values.map(function (val, index) {
|
|
94
|
+
return /*#__PURE__*/React.createElement(Tag, {
|
|
95
|
+
key: index,
|
|
96
|
+
closable: !disabled,
|
|
97
|
+
onClose: function onClose() {
|
|
98
|
+
return handleRemove(index);
|
|
99
|
+
},
|
|
100
|
+
closeIcon: /*#__PURE__*/React.createElement(CloseOutlined, null)
|
|
101
|
+
}, String(val));
|
|
102
|
+
})), isAdding ? /*#__PURE__*/React.createElement(Space, null, renderInput(), /*#__PURE__*/React.createElement(Button, {
|
|
103
|
+
type: "primary",
|
|
104
|
+
size: "small",
|
|
105
|
+
onClick: handleAdd
|
|
106
|
+
}, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
|
|
107
|
+
size: "small",
|
|
108
|
+
onClick: function onClick() {
|
|
109
|
+
return setIsAdding(false);
|
|
110
|
+
}
|
|
111
|
+
}, "\u53D6\u6D88")) : /*#__PURE__*/React.createElement(Button, {
|
|
112
|
+
type: "dashed",
|
|
113
|
+
size: "small",
|
|
114
|
+
icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
|
|
115
|
+
onClick: function onClick() {
|
|
116
|
+
return setIsAdding(true);
|
|
117
|
+
},
|
|
118
|
+
disabled: disabled
|
|
119
|
+
}, "\u6DFB\u52A0\u503C"));
|
|
120
|
+
};
|
|
121
|
+
export default MultiValueInput;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 单值输入组件
|
|
3
|
+
*
|
|
4
|
+
* 根据字段数据类型渲染对应的输入控件:
|
|
5
|
+
* - string: Input
|
|
6
|
+
* - number: InputNumber
|
|
7
|
+
* - date: DatePicker
|
|
8
|
+
* - boolean: Switch
|
|
9
|
+
*/
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import type { FieldDataType } from '../types';
|
|
12
|
+
export interface SingleValueInputProps {
|
|
13
|
+
/** 当前值 */
|
|
14
|
+
value: any;
|
|
15
|
+
/** 值变更回调 */
|
|
16
|
+
onChange: (value: any) => void;
|
|
17
|
+
/** 字段数据类型 */
|
|
18
|
+
dataType: FieldDataType;
|
|
19
|
+
/** 是否禁用 */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** 尺寸 */
|
|
22
|
+
size?: 'small' | 'middle' | 'large';
|
|
23
|
+
}
|
|
24
|
+
export declare const SingleValueInput: React.FC<SingleValueInputProps>;
|
|
25
|
+
export default SingleValueInput;
|