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

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

@@ -0,0 +1,61 @@
+"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 = _default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _icon = _interopRequireDefault(require("../style/icon.less"));
+var _IconFont = _interopRequireDefault(require("../../../components/IconFont"));
+/**
+ * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
+ * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
+ * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
+ *   defaultValue="icon-example"
+ * />
+ * ```
+ *
+ * @param {Object} props 组件的props
+ * @param {string} props.field 用于识别选择的图标字段的标识符。
+ * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
+ *                                  接收一个对象参数，该对象包含`field`字段。
+ * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
+ *                                                     默认为'iconyingyongguanli'。
+ *
+ * @returns {React.Element} 渲染的React元素。
+ */
+function _default(_ref) {
+  var defaultValue = _ref.defaultValue,
+    next = _ref.next,
+    _onClick = _ref.onClick,
+    value = _ref.value;
+  var _useState = (0, _react.useState)(value || defaultValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    val = _useState2[0],
+    setVal = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    setVal(value);
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _icon.default['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return _onClick ? _onClick.apply(void 0, arguments) : next({
+        onSelect: setVal
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: val !== null && val !== void 0 ? val : 'iconyingyongguanli'
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: _icon.default['selecor']
+  }, "\u8BF7\u9009\u62E9 >"));
+}

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

@@ -0,0 +1,119 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ListEditor = require("../components/ListEditor");
+var _Icon = _interopRequireDefault(require("./Icon"));
+var _IconSelector = _interopRequireDefault(require("./IconSelector"));
+var _JSEditor = _interopRequireDefault(require("./JSEditor"));
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.iconConditionSelector';
+var IconConditionSelector = function IconConditionSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    defaultCode = _ref.defaultCode;
+  var _useState = (0, _react.useState)((0, _lodash.cloneDeep)(defaultValue)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (type, index, value) {
+    var _list = (0, _lodash.cloneDeep)(list);
+    switch (type) {
+      case 'icon':
+        _list[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _list[index]), {}, {
+          icon: value
+        });
+        break;
+      case 'code':
+        _list[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _list[index]), {}, {
+          condition: value
+        });
+        break;
+      case 'delete':
+        _list.splice(index, 1);
+        break;
+      default:
+        ;
+    }
+    setList(_list);
+    onChange(_list);
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.bindCondition',
+        label: '绑定条件'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
+      mustConfirm: true,
+      defaultCode: defaultCode,
+      onChange: function onChange(value) {
+        return handleChange('code', index, value);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "paper-clip",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.delete',
+        label: '删除'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "delete",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return handleChange('delete', index);
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '添加条件'
+    }),
+    handleAdd: function handleAdd() {
+      var _list = list.concat([{}]);
+      setList(_list);
+      onChange(_list);
+    }
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      sortable: false,
+      left: /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+        placement: "left",
+        content: /*#__PURE__*/_react.default.createElement(_IconSelector.default, {
+          value: item.icon,
+          onChange: function onChange(value) {
+            return handleChange('icon', index, value);
+          }
+        }),
+        trigger: "click"
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        value: item.icon
+      })),
+      right: renderItemRight(item, index)
+    });
+  })));
+};
+var _default = exports.default = IconConditionSelector;

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

@@ -0,0 +1,144 @@
+"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 = _default;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _ahooks = require("ahooks");
+var _iconSelector = _interopRequireDefault(require("../style/icon-selector.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _apiUrl = require("../../constants/api-url");
+var Search = _antd.Input.Search;
+
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
+ * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   onChange={(selectedIcon) => console.log(selectedIcon)}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接受的props
+ * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+ */
+function _default(_ref) {
+  var onChange = _ref.onChange,
+    onSelect = _ref.onSelect;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    iconData = _useState2[0],
+    setIconData = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var IconFont = _antd.Icon.createFromIconfontCN({
+    scriptUrl: _apiUrl.ICONLIST_JS
+  });
+  function getIconList() {
+    return _getIconList.apply(this, arguments);
+  }
+  function _getIconList() {
+    _getIconList = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", (0, _utils.request)(_apiUrl.ICONLIST_URL, {
+              method: 'get'
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _getIconList.apply(this, arguments);
+  }
+  (0, _react.useEffect)(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+        var data;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getIconList();
+            case 3:
+              data = _context.sent;
+              setIconData(data);
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.error('获取数据失败', _context.t0);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function fetchData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, []);
+  var handleSearch = (0, _react.useCallback)(function (e) {
+    setSearchTerm(e.target.value.toLowerCase());
+  }, []);
+  var filteredData = (0, _react.useMemo)(function () {
+    if (iconData && iconData.glyphs) {
+      return iconData.glyphs.filter(function (item) {
+        return item.name.toLowerCase().includes(searchTerm) || item.font_class.toLowerCase().includes(searchTerm);
+      });
+    }
+    return [];
+  }, [iconData, searchTerm]);
+  var handleClick = (0, _ahooks.useMemoizedFn)(function (icon) {
+    var _iconfont = "".concat(iconData.css_prefix_text).concat(icon.font_class);
+    onSelect === null || onSelect === void 0 || onSelect(_iconfont);
+    onChange(_iconfont);
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['lc-painter-panel-section-iconselector']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['components-search']
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.components.search',
+      label: '搜索组件'
+    }),
+    onChange: handleSearch
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _iconSelector.default['icon-warp']
+  }, filteredData && filteredData.length > 0 && filteredData.map(function (iconItem) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: iconItem.font_class,
+      className: _iconSelector.default['icon-box'],
+      onClick: function onClick() {
+        return handleClick(iconItem);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      placement: "top",
+      title: iconItem.name
+    }, /*#__PURE__*/_react.default.createElement(IconFont, {
+      className: _iconSelector.default['icon-item'],
+      type: "".concat(iconData.css_prefix_text).concat(iconItem.font_class)
+    })));
+  })));
+}

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

@@ -0,0 +1,193 @@
+"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 = _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) {
+  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)(),
+    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]);
+  var handleCheckboxChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    if (e.target.value === 'import') {
+      setState({
+        import: e.target.checked
+      });
+    } else if (e.target.value === 'export') {
+      setState({
+        export: e.target.checked
+      });
+    }
+  });
+  var handleInputChange = (0, _ahooks.useMemoizedFn)(function (field, e) {
+    var value = e.target.value.trim();
+    var _val = value === '' ? true : value;
+    console.log(_val);
+    if (field === 'import') {
+      setState({
+        import: _val
+      });
+    } else if (field === 'export') {
+      setState({
+        export: _val
+      });
+    }
+  });
+  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_, ".impType.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));
+  }))), /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: "\u5BFC\u51FA",
+    suppressPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+    size: "small",
+    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_, ".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,129 @@
+"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 _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;