@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

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

@@ -1,16 +1,19 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _lodash = require("lodash");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
 var _impexp = _interopRequireDefault(require("../style/impexp.less"));
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
 var ImpExp = function ImpExp(_ref) {
@@ -20,6 +23,14 @@ var ImpExp = function ImpExp(_ref) {
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     state = _useSetState2[0],
     setState = _useSetState2[1];
+  var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
+    module = _useRemoteSource.module,
+    impTypeList = _useRemoteSource.impTypeList,
+    expTypeList = _useRemoteSource.expTypeList;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    exportDisabled = _useState2[0],
+    setExportDisabled = _useState2[1];
   (0, _ahooks.useUpdateEffect)(function () {
     onChange(state);
   }, [state]);
@@ -48,51 +59,135 @@ var ImpExp = function ImpExp(_ref) {
       });
     }
   });
-  return /*#__PURE__*/_react.default.createElement(_antd.Row, {
-    gutter: [0, 8],
-    className: _impexp.default['lc-painter-panel-section-impexp']
-  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
-    value: "import",
-    checked: !!state.import,
-    onChange: handleCheckboxChange
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.painter.import',
-    label: '导入'
-  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 18
-  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+  var handleSwitchChangeExport = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var _value = field;
+    setState({
+      exportType: _value,
+      export: true
+    });
+  });
+  var handleSwitchChangeImport = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var _value = field;
+    setState({
+      importType: _value,
+      import: true
+    });
+  });
+  var handleRadioChangeExport = (0, _ahooks.useMemoizedFn)(function (value, _ref2) {
+    var key = _ref2.key;
+    var _value = value;
+    setState({
+      export: _value
+    });
+    setExportDisabled(false);
+  });
+  var handleSelectChangeExport = (0, _ahooks.useMemoizedFn)(function (value, _ref3) {
+    var key = _ref3.key;
+    var _value = value;
+    setState({
+      export: _value
+    });
+  });
+  var handleSelectChangeImport = (0, _ahooks.useMemoizedFn)(function (value, _ref4) {
+    var key = _ref4.key;
+    var _value = value;
+    setState({
+      import: _value
+    });
+  });
+  var handleTypeChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    var _value = e.target.value;
+    setState({
+      importType: "".concat(_value) === '2',
+      import: true
+    });
+  });
+  var handleTypeChangeExport = (0, _ahooks.useMemoizedFn)(function (e) {
+    var _value = e.target.value;
+    setState({
+      export: "".concat(_value) === '2' ? '' : true
+    });
+    setExportDisabled("".concat(_value) === '2');
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: "\u5BFC\u5165",
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small",
+    defaultChecked: !!state.import,
+    onChange: handleSelectChangeImport
+  })), state.import && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
+    onChange: handleTypeChange,
+    defaultValue: !state.importType ? '1' : '2'
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "1"
+  }, "\u6A21\u7248ID"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), state.import && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, !state.importType ? /*#__PURE__*/_react.default.createElement(_antd.Input, {
     size: "small",
     value: (0, _lodash.isString)(state.import) ? state.import : '',
     onChange: function onChange(e) {
       return handleInputChange('import', e);
     },
+    placeholder: "\u8BF7\u8F93\u5165\u6A21\u7248ID"
+  }) : /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: (0, _lodash.isString)(state.import) ? state.import : undefined,
+    onChange: handleSelectChangeImport,
     placeholder: (0, _utils.formatMessage)({
-      id: "".concat(_I18N_PREFIX_, ".impUrl.placeholder"),
-      label: '请输入模版ID或自定义接口'
+      id: "".concat(_I18N_PREFIX_, ".impType.placeholder"),
+      label: '请选择自定义行为'
     })
-  })), /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 6
-  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
-    value: "export",
-    checked: state.export,
-    onChange: handleCheckboxChange
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.painter.export',
-    label: '导出'
-  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
-    span: 18
-  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+  }, impTypeList.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: "\u5BFC\u51FA",
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
     size: "small",
-    value: (0, _lodash.isString)(state.export) ? state.export : '',
-    onChange: function onChange(e) {
-      return handleInputChange('export', e);
+    defaultChecked: !!((0, _lodash.isString)(state.export) ? true : state.export),
+    onChange: handleRadioChangeExport
+  })), (state.export || (0, _lodash.isString)(state.export)) && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
+    onChange: handleTypeChangeExport,
+    defaultValue: !(0, _lodash.isString)(state.export) ? '1' : '2'
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "1"
+  }, "\u9ED8\u8BA4"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), (!!exportDisabled || (0, _lodash.isString)(state.export)) && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    style: {
+      width: '100%'
     },
+    value: (0, _lodash.isString)(state.export) && state.export ? state.export : undefined,
+    onChange: handleSelectChangeExport,
     placeholder: (0, _utils.formatMessage)({
-      id: "".concat(_I18N_PREFIX_, ".expUrl.placeholder"),
-      label: '请输入自定义接口'
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
     })
-  })));
+  }, expTypeList === null || expTypeList === void 0 ? void 0 : expTypeList.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))));
 };
 var _default = exports.default = ImpExp;

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

@@ -0,0 +1,130 @@
+"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 _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
+var _lodash = require("lodash");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var _impexp = _interopRequireDefault(require("../style/impexp.less"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useSetState = (0, _ahooks.useSetState)(defaultValue || {}),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
+    impTypeList = _useRemoteSource.impTypeList,
+    expTypeList = _useRemoteSource.expTypeList;
+  (0, _ahooks.useUpdateEffect)(function () {
+    onChange(state);
+  }, [state]);
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var _value = e.target.value.trim();
+    setState({
+      customParam: _value
+    });
+  });
+  var handleSelectChange = (0, _ahooks.useMemoizedFn)(function (value, e) {
+    var _value = value;
+    setState({
+      customParam: _value
+    });
+  });
+  var handleSegmentChange = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var _value = field;
+    setState({
+      type: _value,
+      customType: false,
+      customParam: undefined
+    });
+  });
+  var handleSwitchChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    var _value = e.target.value;
+    setState({
+      customType: _value === '2',
+      customParam: undefined
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: "\u7C7B\u578B",
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Segmented, {
+    options: [{
+      value: 'import',
+      label: '导入'
+    }, {
+      value: 'export',
+      label: '导出'
+    }],
+    onChange: handleSegmentChange,
+    defaultValue: state.type,
+    block: true
+  })), state.type === 'import' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, {
+    onChange: handleSwitchChange,
+    defaultValue: !state.customType ? '1' : '2'
+  }, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "1"
+  }, "\u6A21\u7248ID"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), state.type === 'import' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, !state.customType ? /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "small",
+    value: (0, _lodash.isString)(state.customParam) ? state.customParam : '',
+    onChange: function onChange(e) {
+      return handleInputChange(state.type, e);
+    },
+    placeholder: "\u8BF7\u8F93\u5165\u6A21\u7248ID"
+  }) : /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: (0, _lodash.isString)(state.customParam) ? state.customParam : undefined,
+    onChange: handleSelectChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, impTypeList.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))), state.type === 'export' && /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: (0, _lodash.isString)(state.customParam) ? state.customParam : undefined,
+    onChange: handleSelectChange,
+    placeholder: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, expTypeList === null || expTypeList === void 0 ? void 0 : expTypeList.map(function (opt) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))));
+};
+var _default = exports.default = ImpExp;

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

@@ -16,27 +16,27 @@ var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
 var _RATIOS_ = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
 var _DEFAULTRATIO_ = '12:3:9';
 
-/**
- * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
- * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
- * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
- * ，
- * 允许父组件获取当前选中的布局比例。
- *
- * @component
- * @example
- * ```jsxsdsdsdsdsdsdsd
- * <LayoutRatio
- *   value="6:6"
- *   onChange={(option) => console.log(option)}
- * />
- * ```
- *
- * @param {Object} props
- * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
- * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
- *
- * @returns {React.Element} 渲染的React元素。
+/**
+ * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
+ * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
+ * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
+ * ，
+ * 允许父组件获取当前选中的布局比例。
+ *
+ * @component
+ * @example
+ * ```jsxsdsdsdsdsdsdsd
+ * <LayoutRatio
+ *   value="6:6"
+ *   onChange={(option) => console.log(option)}
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
+ * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
 var LayoutRatio = function LayoutRatio(_ref) {
   var defaultValue = _ref.defaultValue,

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

@@ -0,0 +1,120 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _antd = require("luck-design/antd");
+var _pageLayoutDisplay = _interopRequireDefault(require("../style/page-layout-display.less"));
+var _TYPES_ = ['lr', 'tb', 'lmr', 'ltb'];
+var PageLayoutDisplay = function PageLayoutDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(defaultValue || 'lr'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeType = _useState2[0],
+    setActiveType = _useState2[1];
+  var handleTypeChange = (0, _ahooks.useMemoizedFn)(function (value) {
+    setActiveType(value);
+    onChange(value);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _pageLayoutDisplay.default['lc-painter-panel-section-pagelayoutdisplay']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _pageLayoutDisplay.default['display-type-box']
+  }, _TYPES_.map(function (_type) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      key: _type,
+      title: _type
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_pageLayoutDisplay.default['display-type-item'], (0, _defineProperty2.default)({}, _pageLayoutDisplay.default.active, activeType === _type)),
+      style: {
+        flexDirection: 'row'
+      },
+      onClick: function onClick() {
+        return handleTypeChange(_type);
+      }
+    }, _type === 'lr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })), _type === 'tb' && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })), _type === 'lmr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '50%',
+        borderRight: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }))), _type === 'ltb' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: _pageLayoutDisplay.default['item-block']
+    })))));
+  })));
+};
+var _default = exports.default = PageLayoutDisplay;

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

@@ -15,7 +15,7 @@ var Div = _styledComponents.default.div.withConfig({
 })(["display:flex;align-items:center;"]);
 var SerialsSelector = function SerialsSelector(_ref) {
   var defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     size = _ref.size;
   var _useRemoteSource = (0, _ContextProvider.useRemoteSource)(),
     serials = _useRemoteSource.serials,
@@ -25,7 +25,9 @@ var SerialsSelector = function SerialsSelector(_ref) {
     defaultValue: defaultValue,
     size: size,
     allowClear: true,
-    onChange: onChange,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
     getPopupContainer: function getPopupContainer() {
       return document.getElementById('lc-design-workspace');
     },