condition-editor
Version:
270 lines • 14.2 kB
JavaScript
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 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 { useConditionEditor } from "../../hooks/use-condition-editor";
import { DeleteIcon, PlusIcon } from "../../icons";
import { deepCopy } from "../../shared/deep-copy";
import { getPrefixClass } from "../../shared/get-prefix-class";
import { isFunction } from "../../shared/is-function";
import { Button, Input, Popover, Select } from 'antd';
import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { LevelType } from "../type";
import "./index.less";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var BaseComponent = function BaseComponent(props) {
var _editorContext$disabl;
var prefixClass = getPrefixClass('condition-item');
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
/** 通用的来操作子节点的工具类 */
var actionRef = useRef();
var editorContext = useConditionEditor();
var disabled = (_editorContext$disabl = editorContext === null || editorContext === void 0 ? void 0 : editorContext.disabled) !== null && _editorContext$disabl !== void 0 ? _editorContext$disabl : false;
var levelText = (editorContext === null || editorContext === void 0 ? void 0 : editorContext.levelText) || [];
var value = props.value,
_onChange = props.onChange,
propsActionRef = props.actionRef;
var onDataChange = function onDataChange(data) {
var nodeValue = deepCopy(value);
nodeValue.data = data;
return _onChange(nodeValue);
};
var renderCondField = function renderCondField() {
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondField)) {
return editorContext.renderCondField({
node: value,
data: deepCopy(value.data),
disabled: disabled
}, onDataChange, editorContext.getContainer);
}
return /*#__PURE__*/_jsx("div", {
children: "-"
});
};
var operator = useMemo(function () {
var _editorContext$operat;
return (_editorContext$operat = editorContext === null || editorContext === void 0 ? void 0 : editorContext.operators) !== null && _editorContext$operat !== void 0 ? _editorContext$operat : [];
}, [editorContext === null || editorContext === void 0 ? void 0 : editorContext.operators]);
var renderCondOperator = function renderCondOperator() {
var _value$data;
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondOperator)) {
return editorContext.renderCondOperator({
node: value,
data: deepCopy(value.data),
disabled: disabled
}, onDataChange, editorContext.getContainer);
}
return /*#__PURE__*/_jsx(Select, {
getPopupContainer: editorContext === null || editorContext === void 0 ? void 0 : editorContext.getContainer,
placeholder: "\u8BF7\u9009\u62E9",
dropdownMatchSelectWidth: false,
value: (_value$data = value.data) === null || _value$data === void 0 ? void 0 : _value$data.operator,
onChange: function onChange(val) {
var data = deepCopy(value.data);
_onChange(_objectSpread(_objectSpread({}, data), {}, {
operator: val
}));
},
style: {
minWidth: '80px',
width: '100%',
maxWidth: '100%'
},
options: operator
});
};
var renderCondValue = function renderCondValue() {
var _value$data2;
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondValue)) {
return editorContext.renderCondValue({
node: value,
data: deepCopy(value.data),
disabled: disabled
}, onDataChange, editorContext.getContainer);
}
return /*#__PURE__*/_jsx(Input, {
style: {
width: '120px'
},
placeholder: "\u8BF7\u8F93\u5165",
value: (_value$data2 = value.data) === null || _value$data2 === void 0 ? void 0 : _value$data2.value,
onChange: function onChange(e) {
var _e$target, _value$data3;
var newValue = e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value;
return onDataChange(_objectSpread(_objectSpread({}, (_value$data3 = value.data) !== null && _value$data3 !== void 0 ? _value$data3 : {}), {}, {
value: newValue
}));
}
});
};
var renderCondPrefix = function renderCondPrefix() {
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondPrefix)) {
return editorContext.renderCondPrefix({
node: value,
data: deepCopy(value.data),
disabled: disabled
}, onDataChange, editorContext.getContainer);
}
return null;
};
var renderCondExtra = function renderCondExtra() {
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondExtra)) {
return editorContext.renderCondExtra({
node: value,
data: deepCopy(value.data),
disabled: disabled
}, onDataChange, editorContext.getContainer);
}
return null;
};
useEffect(function () {
if (isFunction(propsActionRef) && actionRef.current) {
propsActionRef(actionRef.current);
}
}, [propsActionRef]);
var actions = {
add: function add(type, defaultData) {
var _props$onAdd;
props === null || props === void 0 || (_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 || _props$onAdd.call(props, value.key, type, defaultData);
},
delete: function _delete() {
var _props$onDelete;
props === null || props === void 0 || (_props$onDelete = props.onDelete) === null || _props$onDelete === void 0 || _props$onDelete.call(props, value.key);
}
};
actionRef.current = actions;
if (propsActionRef) {
// @ts-ignore
propsActionRef.current = actionRef.current;
}
var renderCondActions = function renderCondActions() {
if (disabled) {
return null;
}
var deleteAction = /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-action ").concat(prefixClass, "-action-delete"),
onClick: function onClick(e) {
var _e$stopPropagation;
e === null || e === void 0 || (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 || _e$stopPropagation.call(e);
actions.delete();
},
children: /*#__PURE__*/_jsx(DeleteIcon, {})
}, "delete");
var beforeAddButton = /*#__PURE__*/_jsx(Button, {
type: "link",
block: true,
onClick: function onClick(e) {
var _e$stopPropagation2;
e === null || e === void 0 || (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 || _e$stopPropagation2.call(e);
setOpen(false);
actions.add(LevelType.Before);
},
children: levelText[0] || '在上方插入条件'
}, LevelType.Before);
var afterAddButton = /*#__PURE__*/_jsx(Button, {
type: "link",
block: true,
onClick: function onClick(e) {
var _e$stopPropagation3;
e === null || e === void 0 || (_e$stopPropagation3 = e.stopPropagation) === null || _e$stopPropagation3 === void 0 || _e$stopPropagation3.call(e);
setOpen(false);
actions.add(LevelType.After);
},
children: levelText[1] || '在下方插入条件'
}, LevelType.After);
var childAddButton = /*#__PURE__*/_jsx(Button, {
type: "link",
block: true,
onClick: function onClick(e) {
var _e$stopPropagation4;
e === null || e === void 0 || (_e$stopPropagation4 = e.stopPropagation) === null || _e$stopPropagation4 === void 0 || _e$stopPropagation4.call(e);
setOpen(false);
actions.add(LevelType.Child);
},
children: levelText[2] || '插入子级条件'
}, LevelType.Child);
var beforeParentAddButton = props.depth > 1 && /*#__PURE__*/_jsx(Button, {
type: "link",
block: true,
onClick: function onClick(e) {
var _e$stopPropagation5;
e === null || e === void 0 || (_e$stopPropagation5 = e.stopPropagation) === null || _e$stopPropagation5 === void 0 || _e$stopPropagation5.call(e);
setOpen(false);
actions.add(LevelType.BeforeParent);
},
children: levelText[3] || '在父级上方插入条件'
}, LevelType.BeforeParent);
var afterParentAddButton = props.depth > 1 && /*#__PURE__*/_jsx(Button, {
type: "link",
block: true,
onClick: function onClick(e) {
var _e$stopPropagation6;
e === null || e === void 0 || (_e$stopPropagation6 = e.stopPropagation) === null || _e$stopPropagation6 === void 0 || _e$stopPropagation6.call(e);
setOpen(false);
actions.add(LevelType.AfterParent);
},
children: levelText[4] || '在父级下方插入条件'
}, LevelType.AfterParent);
var additionMemus = [beforeAddButton, afterAddButton, childAddButton, beforeParentAddButton, afterParentAddButton].filter(function (item) {
return !!item;
});
var additionAction = /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-action ").concat(prefixClass, "-action-addition"),
children: /*#__PURE__*/_jsx(Popover, {
placement: "right",
overlayClassName: "".concat(prefixClass, "-action-menu"),
open: open,
onOpenChange: setOpen,
content: /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-action-menu-container"),
children: additionMemus
}),
trigger: "hover",
getPopupContainer: editorContext.getContainer,
children: /*#__PURE__*/_jsx(PlusIcon, {})
})
}, "addition");
var defaultDom = [deleteAction, additionAction];
if (isFunction(editorContext === null || editorContext === void 0 ? void 0 : editorContext.renderCondActions)) {
var doms = editorContext.renderCondActions(defaultDom, {
node: value,
data: deepCopy(value.data),
actionClassName: "".concat(prefixClass, "-action")
}, actions);
return /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-cond-actions"),
children: doms
});
}
return /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-cond-actions"),
children: defaultDom
});
};
return /*#__PURE__*/_jsxs("div", {
className: prefixClass,
children: [renderCondPrefix(), /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-cond-field"),
children: renderCondField()
}), /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-cond-operator"),
children: renderCondOperator()
}), /*#__PURE__*/_jsx("div", {
className: "".concat(prefixClass, "-cond-value"),
children: renderCondValue()
}), renderCondExtra(), renderCondActions()]
});
};
export var ConditionItem = /*#__PURE__*/memo(BaseComponent);