@luck-design-biz/luckda 0.0.27 → 1.0.0-10-alpha

package/lib/lowcode/painter/panel-section/ComplexPop.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ListEditor = require("../components/ListEditor");
+var _Collapse = _interopRequireDefault(require("../components/Collapse"));
+var _SortBox = require("../components/SortBox");
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
+var _complexPop = require("../services/complexPop");
+var _excluded = ["field", "fieldName", "renderItemRight", "onChange", "sortable", "editable"];
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.complexPop';
+var DividerSpan = _styledComponents.default.span.withConfig({
+  displayName: "DividerSpan",
+  componentId: "luckda-6530__sc-lmsle1-0"
+})(["font-size:12px;color:var(--luck-text-color);"]);
+var FieldKey = _styledComponents.default.div.withConfig({
+  displayName: "FieldKey",
+  componentId: "luckda-6530__sc-lmsle1-1"
+})(["width:200px;margin-left:4px;display:inline-block;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;overflow:hidden;"]);
+var ListItem = function ListItem(_ref) {
+  var field = _ref.field,
+    fieldName = _ref.fieldName,
+    renderItemRight = _ref.renderItemRight,
+    _onChange = _ref.onChange,
+    sortable = _ref.sortable,
+    editable = _ref.editable,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, (0, _extends2.default)({
+    key: field,
+    left: /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: field
+    }, editable ? /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      value: fieldName,
+      size: "small",
+      style: {
+        width: '200px'
+      },
+      onChange: function onChange(e) {
+        return _onChange(field, e.target.value);
+      }
+    }) : /*#__PURE__*/_react.default.createElement(FieldKey, null, " ", fieldName, " ")),
+    right: renderItemRight({
+      field: field,
+      title: fieldName
+    }),
+    item: field,
+    sortable: sortable
+  }, props));
+};
+var ComplexPop = function ComplexPop(_ref2) {
+  var nodeId = _ref2.nodeId,
+    settings = _ref2.settings,
+    defaultValue = _ref2.defaultValue,
+    onChange = _ref2.onChange;
+  var _useState = (0, _react.useState)(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.show),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var _useState3 = (0, _react.useState)((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.fields) || []),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    fields = _useState4[0],
+    setFields = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    allFields = _useState6[0],
+    setAllFields = _useState6[1];
+  var _useCreation = (0, _ahooks.useCreation)(function () {
+      var _nodeId$split = nodeId.split('.'),
+        _nodeId$split2 = (0, _slicedToArray2.default)(_nodeId$split, 3),
+        _ = _nodeId$split2[0],
+        blockid = _nodeId$split2[1],
+        fieldid = _nodeId$split2[2];
+      var blocksObj = (0, _lodash.keyBy)(settings === null || settings === void 0 ? void 0 : settings.blocks, 'id');
+      if (blocksObj[blockid]) {
+        var _fieldObj$fieldid;
+        var fieldObj = (0, _lodash.keyBy)(blocksObj[blockid].fields, 'field');
+        return ((_fieldObj$fieldid = fieldObj[fieldid]) === null || _fieldObj$fieldid === void 0 ? void 0 : _fieldObj$fieldid.complexConfig) || {};
+      }
+      return {};
+    }, [nodeId, settings === null || settings === void 0 ? void 0 : settings.blocks]),
+    isTree = _useCreation.isTree,
+    datasetKey = _useCreation.datasetKey,
+    dataModelKey = _useCreation.dataModelKey;
+  (0, _react.useEffect)(function () {
+    if (!isTree && show && datasetKey && dataModelKey && !allFields) {
+      (0, _complexPop.getFields)({
+        datasetCode: datasetKey,
+        dataModelKey: dataModelKey
+      }).then(function (res) {
+        var code = res.code,
+          data = res.data;
+        if (code === 1) {
+          var _data = (0, _lodash.reduce)(data, function (result, item) {
+            result[item.field] = item.field_name;
+            return result;
+          }, {});
+          setAllFields(_data);
+        }
+      });
+    }
+  }, [isTree, show, datasetKey, dataModelKey, allFields]);
+  (0, _react.useLayoutEffect)(function () {
+    onChange({
+      show: show,
+      fields: fields
+    });
+  }, [show, fields]);
+  var renderItemDeleteRight = (0, _ahooks.useMemoizedFn)(function (data) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "delete",
+      style: {
+        margin: '0 4px',
+        cursor: 'pointer',
+        color: 'var(--luck-color-danger)'
+      },
+      onClick: function onClick() {
+        var _fields = (0, _lodash.cloneDeep)(fields);
+        (0, _lodash.remove)(_fields, function (item) {
+          return item.field === data.field;
+        });
+        setFields(_fields);
+      }
+    });
+  });
+  var renderItemAddRight = (0, _ahooks.useMemoizedFn)(function (data) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "plus-circle",
+      style: {
+        margin: '0 4px',
+        cursor: 'pointer',
+        color: 'var(--ant-primary-color)'
+      },
+      onClick: function onClick() {
+        return setFields(fields.concat(data));
+      }
+    });
+  });
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
+    setFields(fields.map(function (item) {
+      return item.field === field ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        title: value
+      }) : item;
+    }));
+  });
+  var handleSortFields = (0, _ahooks.useMemoizedFn)(function (sortItems) {
+    var oldItems = (0, _lodash.cloneDeep)(fields);
+    var newItems = oldItems.sort(function (a, b) {
+      var indexA = sortItems.indexOf(a.field);
+      var indexB = sortItems.indexOf(b.field);
+      return indexA - indexB;
+    });
+    setFields(newItems);
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    field: "showPop",
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".assisted"),
+      label: "辅助选择"
+    })
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small",
+    defaultChecked: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.show,
+    onChange: function onChange(val) {
+      setShow(val);
+      if (!val) setFields([]);
+    }
+  })), !isTree && show && /*#__PURE__*/_react.default.createElement(_Collapse.default, {
+    label: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".assistedGrid"),
+      label: '辅助弹窗显示字段'
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 'auto',
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: !allFields
+  }, /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    orientation: "left",
+    style: {
+      marginTop: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(DividerSpan, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".assistedGridFields"),
+    label: '展示区'
+  }))), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: fields.map(function (f) {
+      return f.field;
+    }),
+    onChange: handleSortFields
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: true
+  }, fields.map(function (_ref3) {
+    var field = _ref3.field,
+      title = _ref3.title;
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: field,
+      id: field
+    }, /*#__PURE__*/_react.default.createElement(ListItem, {
+      field: field,
+      fieldName: title,
+      renderItemRight: renderItemDeleteRight,
+      sortable: true,
+      editable: true,
+      onChange: handleChange
+    }));
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    orientation: "left",
+    style: {
+      marginTop: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(DividerSpan, null, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".gridFields"),
+    label: '可选区'
+  }))), /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: true
+  }, (0, _lodash.map)((0, _lodash.omit)(allFields, fields.map(function (f) {
+    return f.field;
+  })), function (fieldName, field) {
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      key: field,
+      field: field,
+      fieldName: fieldName,
+      renderItemRight: renderItemAddRight,
+      sortable: false
+    });
+  }))))));
+};
+var _default = exports.default = ComplexPop;

package/lib/lowcode/painter/panel-section/ComponentSelector.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var ComponentSelector = function ComponentSelector(_ref) {
+  var nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    filter = _ref.filter;
+  var ctx = (0, _ContextProvider.useContext)();
+  return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    allowClear: true,
+    defaultValue: defaultValue,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    }
+  }, (0, _lodash.reduce)(ctx.componentList, function (ret, _ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      compId = _ref3[0],
+      comp = _ref3[1];
+    if (compId !== nodeId && (!filter || filter.find(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        val = _ref5[1];
+      return (0, _lodash.get)(comp, key) === val;
+    }))) {
+      ret.push( /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+        value: compId
+      }, comp.meta.name || compId));
+    }
+    return ret;
+  }, []));
+};
+var _default = exports.default = ComponentSelector;

package/lib/lowcode/painter/panel-section/DataSetSelector.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("luck-design/antd");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var _apiUrl = require("../../constants/api-url");
+var _helper = require("../../engine/tools/helper");
+var Div = _styledComponents.default.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-onj9tc-0"
+})(["display:flex;align-items:center;"]);
+var DataSetSelector = function DataSetSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$fieldsKey = _ref.fieldsKey,
+    fieldsKey = _ref$fieldsKey === void 0 ? 'fields' : _ref$fieldsKey,
+    component = _ref.component,
+    size = _ref.size,
+    isTree = _ref.isTree,
+    next = _ref.next;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultValue),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    currentDataset = _useState4[0],
+    setCurrentDataset = _useState4[1];
+  var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
+    dataset = _useRemoteSource.dataset,
+    fetchAllDatasetLoading = _useRemoteSource.fetchAllDatasetLoading,
+    refreshModlueData = _useRemoteSource.refreshModlueData,
+    refreshDataset = _useRemoteSource.refreshDataset;
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchAddDataset, {
+      manual: true
+    }),
+    loading = _useRequest.loading,
+    runAsync = _useRequest.runAsync;
+  (0, _react.useEffect)(function () {
+    setOptions(isTree ? dataset.filter(function (_ref2) {
+      var tree = _ref2.tree;
+      return tree === 1;
+    }) : dataset);
+  }, [dataset, isTree]);
+  var handleChange = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value, _ref3) {
+      var key, _getLDMetaAttr, _getLDMetaAttr2, moduleId, dataModelKey, _yield$runAsync, code, res, _ds;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            key = _ref3.key;
+            _getLDMetaAttr = (0, _helper.getLDMetaAttr)(['moduleId', 'dataModelKey']), _getLDMetaAttr2 = (0, _slicedToArray2.default)(_getLDMetaAttr, 2), moduleId = _getLDMetaAttr2[0], dataModelKey = _getLDMetaAttr2[1];
+            _context.next = 4;
+            return runAsync({
+              uid: moduleId,
+              dataModelKey: dataModelKey,
+              addList: [{
+                code: value,
+                datasetUid: key
+              }]
+            });
+          case 4:
+            _yield$runAsync = _context.sent;
+            code = _yield$runAsync.code;
+            if (!(code === 1)) {
+              _context.next = 11;
+              break;
+            }
+            _context.next = 9;
+            return refreshModlueData();
+          case 9:
+            res = _context.sent;
+            if (res.code === 1) {
+              _ds = {
+                code: value,
+                uid: key
+              };
+              onChange(_ds, function (exe) {
+                var dsFields = res.data.dataSets[value];
+                exe(fieldsKey, dsFields.map(function (f) {
+                  var restProps = {
+                    fieldAliasName: f.fieldAliasName || f.fieldName
+                  };
+                  if (['table', 'tableForm'].includes(component)) {
+                    var _extra = JSON.parse(f.extra || '{}');
+                    var alignMapping = {
+                      0: 'left',
+                      1: 'center',
+                      2: 'right'
+                    };
+                    restProps.align = alignMapping[_extra.scell_alignment];
+                    restProps.headerAlign = alignMapping[_extra.sheading_alignment];
+                  }
+                  if (f.property === "complex") {
+                    var _extra2 = JSON.parse(f.extra || '{}');
+                    restProps.complexConfig = {
+                      isTree: _extra2.opt_show_tree,
+                      datasetKey: _extra2.opt_dataset,
+                      dataModelKey: _extra2.opt_data_model
+                    };
+                  }
+                  return (0, _objectSpread2.default)({
+                    uid: f.uid,
+                    field: f.field
+                  }, restProps);
+                }));
+              });
+              setCurrentDataset(_ds);
+            }
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }());
+  return /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    defaultValue: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code,
+    size: size,
+    onChange: handleChange,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    style: {
+      width: 145
+    },
+    loading: loading
+  }, options.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.uid,
+      value: opt.code
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: opt.name
+    }, opt.name));
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: size,
+    icon: "setting",
+    style: {
+      marginLeft: 4
+    },
+    disabled: !currentDataset,
+    onClick: function onClick() {
+      return next({
+        datasetUid: currentDataset.uid,
+        datasetCode: currentDataset.code,
+        valueKey: fieldsKey,
+        component: component
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: size,
+    icon: "cloud-sync",
+    loading: fetchAllDatasetLoading,
+    style: {
+      marginLeft: 4
+    },
+    onClick: refreshDataset
+  }));
+};
+var _default = exports.default = DataSetSelector;

package/lib/lowcode/painter/panel-section/FieldState.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
+var _FullScreenEditor = _interopRequireDefault(require("../components/code-editor/FullScreenEditor"));
+var _JSEditor = _interopRequireDefault(require("../components/code-editor/JSEditor"));
+var _OPTIONS_ = [{
+  label: '普通',
+  value: 'normal'
+}, {
+  label: '禁用',
+  value: 'disabled'
+}, {
+  label: '只读',
+  value: 'readonly'
+}, {
+  label: '隐藏',
+  value: 'hidden'
+}];
+var _DEFAULT_FUNC_ = 'function isTrue() {\n return true; \n}';
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-xdk08r-0"
+})(["width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px;"]);
+var FieldState = function FieldState(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var editorRef = (0, _react.useRef)();
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (key, val) {
+    var retVal = defaultValue || {};
+    retVal[key] = val;
+    onChange(retVal);
+  });
+  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    style: {
+      width: '90%'
+    },
+    options: _OPTIONS_,
+    defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || 'normal',
+    onChange: function onChange(val) {
+      return handleChange('value', val);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_PopConfirm.default, {
+    placement: "left",
+    title: /*#__PURE__*/_react.default.createElement(_FullScreenEditor.default, {
+      ref: editorRef,
+      EditorComponent: _JSEditor.default,
+      width: "600px",
+      height: "400px"
+    }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) || _DEFAULT_FUNC_),
+    showBtn: true,
+    onConfirm: function onConfirm() {
+      var val = editorRef.current.editor.getValue();
+      editorRef.current.editor.setValue(val);
+      handleChange('code', val);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "code"
+  })));
+};
+var _default = exports.default = FieldState;