@bedelightful/delightful-flow 0.0.12

package/LICENSE

@@ -0,0 +1,9 @@
+Copyright 2026 BE DELIGHTFUL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+

package/README.md

@@ -0,0 +1,164 @@
+# Delightful Flow Foundation Package
+
+<div align="center">
+  <img src="https://img.shields.io/badge/Status-Developing-blue" alt="Status: In Development">
+  <img src="https://img.shields.io/badge/Framework-React-61dafb" alt="Framework: React">
+  <img src="https://img.shields.io/badge/License-MIT-green" alt="License: MIT">
+</div>
+
+## 📖 Project Overview
+
+Delightful Flow Foundation Package is an out-of-the-box flow library extracted from Delightful Flow. It is built on ReactFlow, providing powerful flowchart design and management capabilities. The project bundles the core flow package, JSON Schema editor, expression components, and shared UI components to accelerate visual flow application development.
+
+## ✨ Core Features
+
+- 🔄 Flowchart design and management based on ReactFlow
+- 🎯 High-performance node and edge handling (batching and debounce optimizations)
+- 🧩 Extensible node type system
+- 🔍 JSON Schema form editing capabilities
+- 🌐 Multilingual support
+- 🎨 Polished and customizable UI components
+
+## 📦 Installation
+
+```bash
+# Install dependency
+npm install @delightful/delightful-flow
+```
+
+## 📚 Usage Guide
+
+There is currently no single quick-start guide. To use the components, refer to these resources:
+
+- Check the `index.md` file in each component directory for detailed instructions
+- Review the sample projects in the `examples` directory for real-world scenarios
+- Each component includes example code for development reference
+
+For example, to learn how to use `DelightfulFlow`:
+1. Open `src/DelightfulFlow/index.md`
+2. Review the sample projects in `examples/DelightfulFlow`
+
+## 📚 API Docs
+
+### Main Components
+
+- `DelightfulFlow`: Flow designer core component
+- `DelightfulJsonSchemaEditor`: Schema-driven form generator
+- `DelightfulExpressionWidget`: Expression builder and editor
+- `DelightfulConditionEdit`: Condition editing component
+
+### Core Hooks
+
+- `useBaseFlow`: Core flow logic hook that manages nodes and edges
+- `useNodeBatchProcessing`: Batch processing hook for high-volume node rendering performance
+
+### Detailed Docs and Examples
+
+- Each component ships with detailed usage docs in its `index.md`
+- `DelightfulFlow` includes rich real-world examples in the `examples` directory
+- Samples demonstrate the flow designer across scenarios like node customization and form configuration
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start the documentation demo for development
+npm start
+
+# Build the library
+npm run build
+```
+
+## 🤝 Contribution Guide
+
+Contributions and issues are welcome! Please fork the repo first, then open a Pull Request.
+
+## 📄 License
+
+MIT
+
+---
+
+# Delightful Flow Foundation Package
+
+<div align="center">
+  <img src="https://img.shields.io/badge/Status-Development-blue" alt="Status: Development">
+  <img src="https://img.shields.io/badge/Framework-React-61dafb" alt="Framework: React">
+  <img src="https://img.shields.io/badge/License-MIT-green" alt="License: MIT">
+</div>
+
+## 📖 Project Introduction
+
+Delightful Flow Foundation Package is an out-of-the-box flow foundation library extracted from Delightful Flow, encapsulated based on ReactFlow, providing powerful flow chart design and management capabilities. This project integrates flow foundation components, JSON Schema editor, expression components, and internal common UI components to help quickly build visual flow applications.
+
+## ✨ Core Features
+
+- 🔄 Flow chart design and management based on ReactFlow
+- 🎯 High-performance node and edge handling (batch processing and debounce optimization)
+- 🧩 Extensible node type system
+- 🔍 JSON Schema form editing capabilities
+- 🌐 Multilingual support
+- 🎨 Beautiful and customizable UI components
+
+## 📦 Installation
+
+```bash
+# Install dependencies
+npm install @delightful/delightful-flow
+```
+
+## 📚 Usage Guide
+
+Currently, there is no unified quick start guide. To use the components, please refer to the following resources:
+
+- Check the `index.md` file in each component directory for detailed instructions on that component
+- Refer to the sample projects in the `examples` directory to understand actual application scenarios
+- Each component has corresponding sample code that can serve as a development reference
+
+For example, to learn how to use the `DelightfulFlow` component, you can:
+1. Check the `src/DelightfulFlow/index.md` file
+2. Refer to the sample projects in the `examples/DelightfulFlow` directory
+
+## 📚 API Documentation
+
+### Main Components
+
+- `DelightfulFlow`: Flow designer main component
+- `DelightfulJsonSchemaEditor`: Form generator based on Schema
+- `DelightfulExpressionWidget`: Expression building and editing component
+- `DelightfulConditionEdit`: Condition editing component
+
+### Core Hooks
+
+- `useBaseFlow`: Core flow logic hook, managing node and connection states
+- `useNodeBatchProcessing`: Node batch processing hook, improving rendering performance for a large number of nodes
+
+### Detailed Documentation and Examples
+
+- Each component comes with detailed usage documentation. Please refer to the `index.md` file in the component directory for specific usage
+- The `DelightfulFlow` component provides rich actual development cases. Check the sample projects in the `examples` directory
+- The sample projects demonstrate the practical application of the flow designer in different scenarios, including node customization, form configuration, etc.
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start the documentation demo for development
+npm start
+
+# Build library code
+npm run build
+```
+
+## 🤝 Contribution Guide
+
+Contributions of code or issues are welcome! Please fork this repository first, then submit a Pull Request.
+
+## 📄 License
+
+MIT
+

package/dist/DelightfulConditionEdit/Children/RelationGroup.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { CacheDictionary, ChangeRef, OptionsProps } from "..";
+import { Expression } from "../types/expression";
+interface RelationGroupProps {
+    pos: string;
+    changeRef: React.MutableRefObject<ChangeRef>;
+    conditionData: Expression.Condition;
+    options: OptionsProps;
+    cacheDictionary: CacheDictionary;
+    readonly: boolean;
+}
+export declare function RelationGroup({ pos, changeRef, conditionData, options, cacheDictionary, readonly, }: RelationGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DelightfulConditionEdit/Children/RelationGroup.js

@@ -0,0 +1,117 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable react/react-in-jsx-scope */
+import { PlusCircleFilled } from "@ant-design/icons";
+import classname from "clsx";
+import i18next from "i18next";
+import _ from "lodash";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { RELATION_LOGICS_MAP, posSeparator } from "../constants";
+import { RelationGroupStyle } from "../style";
+import { RelationItem } from "./RelationItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getNewPos = function getNewPos(pos, i) {
+  return pos ? "".concat(pos).concat(posSeparator).concat(i) : String(i);
+};
+export function RelationGroup(_ref) {
+  var _ref$pos = _ref.pos,
+    pos = _ref$pos === void 0 ? "" : _ref$pos,
+    changeRef = _ref.changeRef,
+    conditionData = _ref.conditionData,
+    options = _ref.options,
+    cacheDictionary = _ref.cacheDictionary,
+    readonly = _ref.readonly;
+  var _useState = useState(conditionData.ops),
+    _useState2 = _slicedToArray(_useState, 2),
+    ops = _useState2[0],
+    setOps = _useState2[1];
+
+  // Sync local state when conditionData.ops changes
+  useEffect(function () {
+    setOps(conditionData.ops);
+  }, [conditionData.ops]);
+  var isShowRelationSign = useMemo(function () {
+    var _conditionDataCopy$ch, _conditionDataCopy$ch2;
+    var conditionDataCopy = conditionData;
+    if (pos === "" && (conditionDataCopy === null || conditionDataCopy === void 0 || (_conditionDataCopy$ch = conditionDataCopy.children) === null || _conditionDataCopy$ch === void 0 ? void 0 : _conditionDataCopy$ch.length) === 1 && !(conditionDataCopy !== null && conditionDataCopy !== void 0 && (_conditionDataCopy$ch2 = conditionDataCopy.children[0]) !== null && _conditionDataCopy$ch2 !== void 0 && _conditionDataCopy$ch2.ops)) {
+      // Top level
+      return false;
+    }
+    return true;
+  }, [conditionData, pos]);
+  var switchOpsSign = useCallback(function () {
+    if (_.isEmpty(changeRef) || _.isEmpty(changeRef.current)) return;
+    // Update local state first for snappier UI feedback
+    setOps(ops === RELATION_LOGICS_MAP.AND ? RELATION_LOGICS_MAP.OR : RELATION_LOGICS_MAP.AND);
+    // Then update the actual data
+    changeRef.current.switchConditionItemLogic(pos);
+  }, [changeRef, pos, ops]);
+  var handleAddConditionItem = useCallback(function () {
+    if (_.isEmpty(changeRef) || _.isEmpty(changeRef.current)) return;
+    changeRef.current.addConditionItem(pos);
+  }, [changeRef, pos]);
+  var memoGroupList = useMemo(function () {
+    return (conditionData === null || conditionData === void 0 ? void 0 : conditionData.children) && conditionData.children.map(function (item, i) {
+      var newPos = getNewPos(pos, i);
+      // console.log("newPos", newPos, pos, i, options.maxGroupDepth)
+      if (item.children) {
+        return /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/_jsx(RelationGroup, {
+            pos: newPos,
+            changeRef: changeRef,
+            conditionData: item,
+            options: options,
+            cacheDictionary: cacheDictionary,
+            readonly: readonly
+          }, _.uniqueId("relation_group_"))
+        });
+      }
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(RelationItem, {
+          pos: newPos,
+          changeRef: changeRef,
+          conditionData: item,
+          options: options,
+          cacheDictionary: cacheDictionary,
+          readonly: readonly
+        }, _.uniqueId("relation_item_"))
+      });
+    });
+  }, [conditionData, pos, readonly, cacheDictionary, changeRef, options]);
+  return /*#__PURE__*/_jsxs(RelationGroupStyle, {
+    isShowRelationSign: isShowRelationSign,
+    operands: ops,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "relation-group",
+      style: {
+        display: isShowRelationSign ? "block" : "none"
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "relation-sign",
+        onClick: switchOpsSign,
+        children: ops === RELATION_LOGICS_MAP.AND ? i18next.t("common.and", {
+          ns: "delightfulFlow"
+        }) : i18next.t("common.or", {
+          ns: "delightfulFlow"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "add",
+        children: /*#__PURE__*/_jsx(PlusCircleFilled, {
+          className: "icon",
+          onClick: handleAddConditionItem
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: classname("conditions", {
+        "only-root": conditionData.children.length === 1
+      }),
+      children: memoGroupList
+    })]
+  });
+}

package/dist/DelightfulConditionEdit/Children/RelationItem.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { CacheDictionary, ChangeRef, OptionsProps } from "..";
+import { Expression } from "../types/expression";
+interface RelationItemProps {
+    pos: string;
+    changeRef: React.MutableRefObject<ChangeRef>;
+    conditionData: Expression.CompareNode | Expression.OperationNode;
+    options: OptionsProps;
+    cacheDictionary: CacheDictionary;
+    readonly: boolean;
+}
+export declare function RelationItem({ pos, conditionData, changeRef, options, cacheDictionary, readonly, }: RelationItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DelightfulConditionEdit/Children/RelationItem.js

@@ -0,0 +1,247 @@
+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); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+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."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+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; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { getDataSourceMap, getExpressionFirstItem } from "../../DelightfulExpressionWidget/helpers";
+import { FormItemType } from "../../DelightfulExpressionWidget/types";
+import { getDefaultBooleanConstantSource } from "../../DelightfulJsonSchemaEditor/components/schema-json/schema-item/constants";
+import DelightfulSelect from "../../common/BaseUI/Select";
+import { DelightfulExpressionWidget } from "../..";
+import { IconCircleMinus, IconCirclePlus } from "@tabler/icons-react";
+import classname from "clsx";
+import i18next from "i18next";
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CONDITION_OPTIONS, RELATION_COMP_TYPE, SpecialConditionValues } from "../constants";
+import { useGlobal } from "../context/Global/useGlobal";
+import { RelationItemStyle } from "../style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function RelationItem(_ref) {
+  var pos = _ref.pos,
+    conditionData = _ref.conditionData,
+    changeRef = _ref.changeRef,
+    options = _ref.options,
+    cacheDictionary = _ref.cacheDictionary,
+    readonly = _ref.readonly;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var maxGroupDepth = options.maxGroupDepth,
+    openConvertButton = options.openConvertButton,
+    termWidth = options.termWidth,
+    expressionSource = options.expressionSource;
+  var _useGlobal = useGlobal(),
+    leftDisabledPos = _useGlobal.leftDisabledPos,
+    disabledOperationPos = _useGlobal.disabledOperationPos,
+    showTitlePosList = _useGlobal.showTitlePosList;
+
+  // eslint-disable-next-line prefer-const
+  var _useState = useState(conditionData),
+    _useState2 = _slicedToArray(_useState, 2),
+    cur = _useState2[0],
+    setCur = _useState2[1];
+  var handleAddConditionGroup = useCallback(function () {
+    changeRef.current.addConditionGroup(pos);
+  }, [changeRef, pos]);
+  var handleRemoveConditionItem = useCallback(function () {
+    changeRef.current.removeConditionItem(pos);
+  }, [changeRef, pos]);
+  var handleConvertConditionItem = useCallback(function () {
+    changeRef.current.convertConditionItem(pos);
+  }, [changeRef, pos]);
+
+  // const handleBlur = useCallback(() => {
+  // 	if (!_.isEqual(cur, conditionData)) changeRef.current.updateConditionData(pos, cur, true)
+  // }, [changeRef, conditionData, cur, pos])
+
+  var handleChange = function handleChange(value, key) {
+    cur = _objectSpread(_objectSpread({}, cur), {}, _defineProperty({}, key, value));
+    setCur(_objectSpread(_objectSpread({}, cur), {}, _defineProperty({}, key, value)));
+    changeRef.current.updateConditionData(pos, cur, false);
+  };
+
+  /** For compare mode, display only the first value */
+  var conditionValue = useMemo(function () {
+    var _ref2 = cur,
+      condition = _ref2.condition;
+    return condition || "equals";
+  }, [cur]);
+  var computedRightStyle = useMemo(function () {
+    if (SpecialConditionValues.includes(conditionValue)) {
+      return {
+        display: "none"
+      };
+    }
+    return {
+      display: "block"
+    };
+  }, [conditionValue]);
+
+  // Whether to show titles
+  var showTitle = useMemo(function () {
+    return showTitlePosList.includes(pos);
+  }, [showTitlePosList, pos]);
+  var _useMemo = useMemo(function () {
+      var expressionValue = getExpressionFirstItem(cur.left_operands);
+      var dataSourceMap = getDataSourceMap(expressionSource || []);
+      var leftSelectedOption = dataSourceMap === null || dataSourceMap === void 0 ? void 0 : dataSourceMap[expressionValue === null || expressionValue === void 0 ? void 0 : expressionValue.value];
+      if ((leftSelectedOption === null || leftSelectedOption === void 0 ? void 0 : leftSelectedOption.type) !== FormItemType.Boolean) return {
+        expressionSourceWithDefaultOptions: expressionSource,
+        rightOperandsOnlyExpression: false
+      };
+      var booleanConstants = getDefaultBooleanConstantSource();
+      return {
+        expressionSourceWithDefaultOptions: [].concat(_toConsumableArray(booleanConstants), _toConsumableArray(expressionSource || [])),
+        rightOperandsOnlyExpression: (leftSelectedOption === null || leftSelectedOption === void 0 ? void 0 : leftSelectedOption.type) === FormItemType.Boolean
+      };
+    }, [expressionSource, cur]),
+    expressionSourceWithDefaultOptions = _useMemo.expressionSourceWithDefaultOptions,
+    rightOperandsOnlyExpression = _useMemo.rightOperandsOnlyExpression;
+  return /*#__PURE__*/_jsx(RelationItemStyle, {
+    className: "relation-item",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "condition_vertical_fields",
+      children: [cur.type === RELATION_COMP_TYPE.COMPARE && /*#__PURE__*/_jsxs("div", {
+        className: classname("condition_vertical_row"),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "condition_vertical_col left",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "condition_fields-item",
+            children: [showTitle && /*#__PURE__*/_jsx("div", {
+              className: "title",
+              children: i18next.t("common.referenceVariables", {
+                ns: "delightfulFlow"
+              })
+            }), /*#__PURE__*/_jsx(DelightfulExpressionWidget, {
+              onChange: function onChange(value) {
+                handleChange(value, "left_operands");
+              },
+              value: cur.left_operands,
+              dataSource: expressionSource,
+              allowExpression: true,
+              allowModifyField: true,
+              disabled: leftDisabledPos.includes(pos),
+              onlyExpression: true,
+              referencePlaceholder: i18next.t("common.expressionPlaceholder", {
+                ns: "delightfulFlow"
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "condition_vertical_col compare",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "condition_fields-item",
+            children: [showTitle && /*#__PURE__*/_jsx("div", {
+              className: "title",
+              children: i18next.t("common.selectConditions", {
+                ns: "delightfulFlow"
+              })
+            }), /*#__PURE__*/_jsx(DelightfulSelect, {
+              style: {
+                width: "100%"
+              },
+              onChange: function onChange(value) {
+                return handleChange(value, "condition");
+              },
+              options: CONDITION_OPTIONS,
+              value: conditionValue
+            })]
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "condition_vertical_col right",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "condition_fields-item",
+            style: computedRightStyle,
+            children: [showTitle && /*#__PURE__*/_jsx("div", {
+              className: "title",
+              children: i18next.t("common.compareValue", {
+                ns: "delightfulFlow"
+              })
+            }), /*#__PURE__*/_jsx(DelightfulExpressionWidget, {
+              onChange: function onChange(value) {
+                handleChange(value, "right_operands");
+              },
+              value: cur.right_operands,
+              dataSource: expressionSourceWithDefaultOptions,
+              allowExpression: true,
+              allowModifyField: true,
+              onlyExpression: rightOperandsOnlyExpression
+            })]
+          })
+        })]
+      }), cur.type === RELATION_COMP_TYPE.OPERATION && /*#__PURE__*/_jsx("div", {
+        className: "condition_vertical_row",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "condition_vertical_col",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "condition_fields-item",
+            children: /*#__PURE__*/_jsx(DelightfulExpressionWidget, {
+              value: cur.operands,
+              dataSource: expressionSource,
+              onChange: function onChange(value) {
+                return handleChange(value, "operands");
+              },
+              allowExpression: true,
+              allowModifyField: true
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "right-condition_operations",
+        children: [showTitle && /*#__PURE__*/_jsx("div", {
+          className: "title",
+          children: i18next.t("common.operation", {
+            ns: "delightfulFlow"
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "condition_vertical_panel",
+          children: [pos.split("-").length < maxGroupDepth && /*#__PURE__*/_jsx("span", {
+            className: "add-icon",
+            onClick: handleAddConditionGroup,
+            children: /*#__PURE__*/_jsx(IconCirclePlus, {
+              stroke: 1,
+              size: 20,
+              color: "#315CEC"
+            })
+          }), openConvertButton && null
+          // <Button
+          // 	type="light"
+          // 	theme="primary"
+          // 	onClick={handleConvertConditionItem}
+          // 	style={{
+          // 		visibility: disabledOperationPos.includes(pos)
+          // 			? "hidden"
+          // 			: "visible",
+          // 	}}
+          // >
+          // 	Switch
+          // </Button>
+          , /*#__PURE__*/_jsx("span", {
+            className: "delete-icon",
+            onClick: handleRemoveConditionItem,
+            style: {
+              visibility: disabledOperationPos.includes(pos) ? "hidden" : "visible"
+            },
+            children: /*#__PURE__*/_jsx(IconCircleMinus, {
+              stroke: 1,
+              size: 20,
+              color: "#1C1D2399"
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}

package/dist/DelightfulConditionEdit/constants.d.ts

@@ -0,0 +1,20 @@
+import { Expression } from "./types/expression";
+export declare const ConditionKey = "condition";
+export declare const RightOperandsKey = "right_operands";
+export declare const posSeparator = "-";
+export declare const enum RELATION_LOGICS_MAP {
+    AND = "AND",
+    OR = "OR"
+}
+export declare const enum RELATION_COMP_TYPE {
+    COMPARE = "compare",
+    OPERATION = "operation"
+}
+export declare const SpecialConditionValues: string[];
+export declare const CONDITION_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+export declare const DEFAULT_CONDITION_FIELD: Expression.CompareNode;
+export declare const DEFAULT_CONVERT_FIELD: Expression.OperationNode;
+export declare const DEFAULT_CONDITION_DATA: Expression.LogicNode;