@luck-design-biz/luckda 0.0.24-3 → 0.0.25-10

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

@@ -0,0 +1,164 @@
+"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 _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 _extra = JSON.parse(f.extra || '{}');
+                  var restProps = {};
+                  if (['table', 'tableForm'].includes(component)) {
+                    var alignMapping = {
+                      0: 'left',
+                      1: 'center',
+                      2: 'right'
+                    };
+                    restProps.align = alignMapping[_extra.scell_alignment];
+                    restProps.headerAlign = alignMapping[_extra.sheading_alignment];
+                  }
+                  return {
+                    uid: f.uid,
+                    field: f.field
+                  };
+                }));
+              });
+              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/FieldsSetting.js

@@ -0,0 +1,385 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _luckDesign = require("luck-design");
+var _antd = require("luck-design/antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
+var _SortBox = require("../components/SortBox");
+var _ListEditor = require("../components/ListEditor");
+var _fieldSetting = _interopRequireDefault(require("../components/field-setting"));
+var _BatchSetting = _interopRequireDefault(require("../components/field-setting/BatchSetting"));
+var _apiUrl = require("../../constants/api-url");
+var _helper = require("../../engine/tools/helper");
+var _fieldsSetting = _interopRequireDefault(require("../style/fields-setting.less"));
+var _excluded = ["fieldAliasName"];
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
+var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'col', 'row', 'note', 'placeholder', 'aliasName'];
+var Header = _styledComponents.default.div.withConfig({
+  displayName: "Header",
+  componentId: "luckda-6530__sc-gcwvp1-0"
+})(["width:100%;display:flex;align-items:center;font-size:12px;font-weight:bold;"]);
+var FieldKey = (0, _styledComponents.default)(_luckDesign.Ellipsis).withConfig({
+  displayName: "FieldKey",
+  componentId: "luckda-6530__sc-gcwvp1-1"
+})(["width:80px;margin-left:4px;"]);
+var FieldsSetting = function FieldsSetting(_ref) {
+  var component = _ref.component,
+    datasetUid = _ref.datasetUid,
+    nodeId = _ref.nodeId,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var ctx = (0, _ContextProvider.useContext)();
+  var _useReducer = (0, _react.useReducer)(_helper.listReducer, []),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    fields = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fieldId = _useState2[0],
+    setFieldId = _useState2[1];
+  var _useMap = (0, _ahooks.useMap)([]),
+    _useMap2 = (0, _slicedToArray2.default)(_useMap, 2),
+    checkedFields = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    get = _useMap2$.get,
+    setAll = _useMap2$.setAll,
+    remove = _useMap2$.remove,
+    reset = _useMap2$.reset;
+  var _useState3 = (0, _react.useState)(void 0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    drawerType = _useState4[0],
+    setDrawerType = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    checkAll = _useState6[0],
+    setCheckAll = _useState6[1];
+  var fieldData = (0, _ahooks.useCreation)(function () {
+    return fields.find(function (_ref2) {
+      var uid = _ref2.uid;
+      return uid === fieldId;
+    });
+  }, [fieldId, fields]);
+  (0, _ahooks.useUpdateEffect)(function () {
+    if (checkedFields.size === fields.length) {
+      setCheckAll(true);
+    } else if (checkedFields.size === 0) {
+      setCheckAll(false);
+    }
+  }, [checkedFields, fields]);
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchFieldsByDataset, {
+      defaultParams: [{
+        datasetUid: datasetUid,
+        moduleUid: (0, _helper.getLDMetaAttr)('moduleId')
+      }],
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          list = _ref3.list,
+          detail = _ref3.detail;
+        if (code === 1) {
+          var _fields = (0, _lodash.unionBy)((0, _lodash.reduce)(defaultValue, function (ret, _val) {
+            if (list.includes(_val.uid) || _val._type === 'divider') {
+              ret.push(_val);
+            }
+            return ret;
+          }, []), list.map(function (id) {
+            var _fieldData = detail[id];
+            var extra = JSON.parse(_fieldData.extra || '{}');
+            var restProps = {};
+            if (['table', 'tableForm'].includes(component)) {
+              var alignMapping = {
+                0: 'left',
+                1: 'center',
+                2: 'right'
+              };
+              restProps.align = alignMapping[extra.scell_alignment];
+              restProps.headerAlign = alignMapping[extra.sheading_alignment];
+            }
+            return (0, _objectSpread2.default)({
+              uid: id,
+              field: detail[id].field
+            }, restProps);
+          }), 'uid');
+          if (!(0, _lodash.isEqual)(_fields, defaultValue)) {
+            onChange(_fields);
+          }
+          dispatch({
+            type: 'init',
+            payload: _fields.map(function (_field) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, detail[_field.uid]), _field);
+            })
+          });
+        }
+      }
+    }),
+    loading = _useRequest.loading;
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (newFields) {
+    onChange(newFields.map(function (_fieldData) {
+      return _fieldData._type === 'divider' ? _fieldData : (0, _lodash.pick)(_fieldData, _PICK_KEYS_);
+    }));
+  });
+  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchUpdateFieldAttrs, {
+      manual: true
+    }),
+    runUpdateFieldAttrs = _useRequest2.runAsync;
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (field, value) {
+      var _getLDMetaAttr = (0, _helper.getLDMetaAttr)(['moduleId', 'dataModelKey']),
+        _getLDMetaAttr2 = (0, _slicedToArray2.default)(_getLDMetaAttr, 2),
+        moduleId = _getLDMetaAttr2[0],
+        dataModelKey = _getLDMetaAttr2[1];
+      runUpdateFieldAttrs({
+        dataModelKey: dataModelKey,
+        datasetBusinessUids: [field.uid],
+        fieldAliasName: value,
+        moduleDatasetUid: datasetUid,
+        moduleUid: moduleId,
+        scope: 'FIELD_ALIAS_NAME',
+        uid: field.uid
+      }).then(function () {
+        if (component === 'table') {
+          var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
+          var col = gridApi.columnApi.getColumn(field.field);
+          col.colDef.headerName = value;
+          gridApi.api.refreshHeader();
+        } else if (['form', 'tableForm'].includes(component)) {
+          handleChange((0, _lodash.reduce)(fields, function (ret, _ref4) {
+            var fieldAliasName = _ref4.fieldAliasName,
+              _field = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+            if (fieldAliasName) {
+              ret.push((0, _objectSpread2.default)({
+                aliasName: fieldAliasName
+              }, _field));
+            }
+            return ret;
+          }, []));
+        }
+      });
+    }, {
+      wait: 500
+    }),
+    run = _useDebounceFn.run;
+  var handleSortChange = (0, _ahooks.useMemoizedFn)(function (sortItems, fromIndex, toIndex) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems,
+      callback: function callback(newFields) {
+        if (component === 'table') {
+          var gridApi = ctx.componentMap.get(nodeId).api.self.ref.current.gridApi;
+          gridApi.columnApi.moveColumnByIndex(fromIndex, toIndex);
+        }
+        handleChange(newFields);
+      }
+    });
+  });
+  var handleAliasChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field.uid,
+        data: {
+          fieldAliasName: value
+        }
+      }
+    });
+    run(field, value);
+  });
+  var handleFieldCheckChange = (0, _ahooks.useMemoizedFn)(function (e) {
+    var _e$target = e.target,
+      checked = _e$target.checked,
+      data = _e$target.data;
+    if (checked) {
+      set(data.uid, data);
+    } else {
+      remove(data.uid, data);
+    }
+  });
+  var handleFieldCheckAll = (0, _ahooks.useMemoizedFn)(function (e) {
+    if (e.target.checked) {
+      setAll(fields.map(function (_field) {
+        return [_field.uid, _field];
+      }));
+    } else {
+      reset();
+    }
+  });
+  var handleBatchSetting = (0, _ahooks.useMemoizedFn)(function () {
+    setDrawerType('batch');
+  });
+  var handleAddFormDivider = (0, _ahooks.useMemoizedFn)(function (index) {
+    var groupId = "group_".concat((0, _utils.suid)());
+    dispatch({
+      type: 'insert',
+      payload: {
+        index: index,
+        data: {
+          uid: groupId,
+          id: groupId,
+          field: 'divider',
+          fieldAliasName: 'Group',
+          _type: 'divider'
+        }
+      },
+      callback: handleChange
+    });
+  });
+  var renderItemRight = (0, _ahooks.useMemoizedFn)(function (field) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: field.uid,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      value: field.fieldAliasName,
+      size: "small",
+      style: {
+        flex: 1
+      },
+      onChange: function onChange(e) {
+        return handleAliasChange(field, e.target.value);
+      }
+    }), field._type !== 'divider' && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      type: "edit",
+      style: {
+        margin: '0 4px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        setFieldId(field.uid);
+        setDrawerType('single');
+      }
+    })));
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: loading
+  }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    style: {
+      marginLeft: 20
+    },
+    disabled: drawerType === 'batch',
+    checked: checkAll,
+    indeterminate: checkedFields.size > 0 && checkedFields.size !== fields.length,
+    onChange: handleFieldCheckAll
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 80,
+      paddingLeft: 4
+    }
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".field"),
+    label: '数据字段'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      paddingLeft: 20
+    }
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".title"),
+    label: '标题'
+  }))), /*#__PURE__*/_react.default.createElement(_SortBox.SortBox, {
+    datas: fields.map(function (_ref5) {
+      var uid = _ref5.uid;
+      return uid;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: checkedFields.size === 0,
+    addText: (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    addIcon: "unordered-list",
+    handleAdd: handleBatchSetting,
+    addBtnProps: {
+      disabled: drawerType === 'batch'
+    }
+  }, fields.map(function (field, index) {
+    return /*#__PURE__*/_react.default.createElement(_SortBox.SortItem, {
+      key: field.uid,
+      id: field.uid
+    }, /*#__PURE__*/_react.default.createElement(_ListEditor.ListEditorItem, {
+      left: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field._type !== 'divider' ? /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+        disabled: drawerType === 'batch',
+        data: field,
+        checked: !!get(field.uid),
+        onChange: handleFieldCheckChange
+      }) : null, /*#__PURE__*/_react.default.createElement(FieldKey, {
+        tooltip: true,
+        lines: 1,
+        style: field._type === 'divider' ? {
+          paddingLeft: 16
+        } : null
+      }, field.field)),
+      right: renderItemRight(field),
+      item: field,
+      dispatch: dispatch,
+      onAddLine: component === 'form' ? function () {
+        return handleAddFormDivider(index);
+      } : false
+    }));
+  })))), !!drawerType ? /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
+    visible: true,
+    width: 280,
+    mask: false,
+    onClose: function onClose() {
+      return setDrawerType(void 0);
+    },
+    title: drawerType === 'single' ? fieldData.fieldAliasName : (0, _utils.formatMessage)({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    className: _fieldsSetting.default['lc-painter-panel-field-setting-drawer'],
+    style: {
+      position: 'absolute',
+      transform: 'none',
+      right: 320,
+      zIndex: 1001
+    }
+  }, drawerType === 'single' ? /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
+    key: fieldId,
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldData: fieldData,
+    dataModelKey: (0, _helper.getLDMetaAttr)('dataModelKey'),
+    moduleId: (0, _helper.getLDMetaAttr)('moduleId'),
+    datasetId: datasetUid,
+    component: component,
+    onAliasChange: handleAliasChange,
+    onChange: handleChange
+  }) : null, drawerType === 'batch' ? /*#__PURE__*/_react.default.createElement(_BatchSetting.default, {
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldsData: checkedFields,
+    dataModelKey: (0, _helper.getLDMetaAttr)('dataModelKey'),
+    moduleId: (0, _helper.getLDMetaAttr)('moduleId'),
+    datasetId: datasetUid,
+    component: component,
+    onChange: handleChange
+  }) : null) : null);
+};
+var _default = exports.default = FieldsSetting;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var I18nInput = function I18nInput(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size;
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(onChange, {
+      wait: 400
+    }),
+    run = _useDebounceFn.run;
+  return /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    defaultValue: defaultValue,
+    onChange: function onChange(e) {
+      return run(e.target.value);
+    },
+    size: size
+  });
+};
+var _default = exports.default = I18nInput;

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

@@ -0,0 +1,56 @@
+"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;
+  var _useState = (0, _react.useState)(defaultValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    val = _useState2[0],
+    setVal = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _icon.default['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return 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 >"));
+}