@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

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

@@ -0,0 +1,159 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { useMemoizedFn, useRequest } from 'ahooks';
+import styled from 'styled-components';
+import { Select, Button, Tooltip } from 'luck-design/antd';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+import { fetchAddDataset } from "../../constants/api-url";
+import { getLDMetaAttr } from "../../engine/tools/helper";
+var Div = styled.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 = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = useState(defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentDataset = _useState4[0],
+    setCurrentDataset = _useState4[1];
+  var _useRemoteSource = useRemoteSource(),
+    dataset = _useRemoteSource.dataset,
+    fetchAllDatasetLoading = _useRemoteSource.fetchAllDatasetLoading,
+    refreshModlueData = _useRemoteSource.refreshModlueData,
+    refreshDataset = _useRemoteSource.refreshDataset;
+  var _useRequest = useRequest(fetchAddDataset, {
+      manual: true
+    }),
+    loading = _useRequest.loading,
+    runAsync = _useRequest.runAsync;
+  useEffect(function () {
+    setOptions(isTree ? dataset.filter(function (_ref2) {
+      var tree = _ref2.tree;
+      return tree === 1;
+    }) : dataset);
+  }, [dataset, isTree]);
+  var handleChange = useMemoizedFn( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, _ref3) {
+      var key, _getLDMetaAttr, _getLDMetaAttr2, moduleId, dataModelKey, _yield$runAsync, code, res, _ds;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            key = _ref3.key;
+            _getLDMetaAttr = getLDMetaAttr(['moduleId', 'dataModelKey']), _getLDMetaAttr2 = _slicedToArray(_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];
+                  }
+                  return _objectSpread({
+                    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.createElement(Div, null, /*#__PURE__*/React.createElement(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.createElement(Select.Option, {
+      key: opt.uid,
+      value: opt.code
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: opt.name
+    }, opt.name));
+  })), /*#__PURE__*/React.createElement(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.createElement(Button, {
+    size: size,
+    icon: "cloud-sync",
+    loading: fetchAllDatasetLoading,
+    style: {
+      marginLeft: 4
+    },
+    onClick: refreshDataset
+  }));
+};
+export default DataSetSelector;

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

@@ -0,0 +1,62 @@
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Segmented, Icon } from 'luck-design/antd';
+import styled from 'styled-components';
+import PopConfirm from "../components/PopConfirm";
+import FullScreenEditor from "../components/code-editor/FullScreenEditor";
+import JSEditor from "../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 = styled.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 = useRef();
+  var handleChange = useMemoizedFn(function (key, val) {
+    var retVal = defaultValue || {};
+    retVal[key] = val;
+    onChange(retVal);
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(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.createElement(PopConfirm, {
+    placement: "left",
+    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
+      ref: editorRef,
+      EditorComponent: JSEditor,
+      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.createElement(Icon, {
+    type: "code"
+  })));
+};
+export default FieldState;

package/es/lowcode/painter/panel-section/FieldsSetting.js

@@ -0,0 +1,346 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useReducer, useState } from 'react';
+import { useMemoizedFn, useRequest, useCreation, useMap, useUpdateEffect } from 'ahooks';
+import { Ellipsis } from 'luck-design';
+import { Spin, Input, Tooltip, Icon, Checkbox, Drawer } from 'luck-design/antd';
+import styled from 'styled-components';
+import { reduce, unionBy, isEqual, pick } from 'lodash';
+import { formatMessage, suid } from '@luck-design-biz/base/utils';
+import { useContext } from "../../engine/provider/ContextProvider";
+import { SortBox, SortItem } from "../components/SortBox";
+import { ListEditor, ListEditorItem } from "../components/ListEditor";
+import FieldSetting from "../components/field-setting";
+import BatchSetting from "../components/field-setting/BatchSetting";
+import { fetchFieldsByDataset } from "../../constants/api-url";
+import { listReducer, getLDMetaAttr } from "../../engine/tools/helper";
+import styles from "../style/fields-setting.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.fieldsSetting';
+var _PICK_KEYS_ = ['id', 'uid', 'field', 'width', 'align', 'headerAlign', 'pinned', 'tip', 'col', 'row', 'note', 'placeholder', 'fieldAliasName'];
+var Header = styled.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 = styled(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 = useContext();
+  var _useReducer = useReducer(listReducer, []),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    fields = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldId = _useState2[0],
+    setFieldId = _useState2[1];
+  var _useMap = useMap([]),
+    _useMap2 = _slicedToArray(_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 = useState(void 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    drawerType = _useState4[0],
+    setDrawerType = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkAll = _useState6[0],
+    setCheckAll = _useState6[1];
+  var fieldData = useCreation(function () {
+    return fields.find(function (_ref2) {
+      var uid = _ref2.uid;
+      return uid === fieldId;
+    });
+  }, [fieldId, fields]);
+  useUpdateEffect(function () {
+    if (checkedFields.size === fields.length) {
+      setCheckAll(true);
+    } else if (checkedFields.size === 0) {
+      setCheckAll(false);
+    }
+  }, [checkedFields, fields]);
+  var _useRequest = useRequest(fetchFieldsByDataset, {
+      defaultParams: [{
+        datasetUid: datasetUid,
+        moduleUid: getLDMetaAttr('moduleId')
+      }],
+      onSuccess: function onSuccess(_ref3) {
+        var code = _ref3.code,
+          list = _ref3.list,
+          detail = _ref3.detail;
+        if (code === 1) {
+          var _fields = unionBy(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 restProps = {
+              fieldAliasName: _fieldData.fieldAliasName
+            };
+            if (['table', 'tableForm'].includes(component)) {
+              var extra = JSON.parse(_fieldData.extra || '{}');
+              var alignMapping = {
+                0: 'left',
+                1: 'center',
+                2: 'right'
+              };
+              restProps.align = alignMapping[extra.scell_alignment];
+              restProps.headerAlign = alignMapping[extra.sheading_alignment];
+            }
+            return _objectSpread({
+              uid: id,
+              field: detail[id].field
+            }, restProps);
+          }), 'uid');
+          if (!isEqual(_fields, defaultValue)) {
+            onChange(_fields);
+          }
+          dispatch({
+            type: 'init',
+            payload: _fields.map(function (_field) {
+              return _objectSpread(_objectSpread({}, detail[_field.uid]), _field);
+            })
+          });
+        }
+      }
+    }),
+    loading = _useRequest.loading;
+  var handleChange = useMemoizedFn(function (newFields) {
+    onChange(newFields.map(function (_fieldData) {
+      return _fieldData._type === 'divider' ? _fieldData : pick(_fieldData, _PICK_KEYS_);
+    }));
+  });
+  var handleSortChange = 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 = useMemoizedFn(function (field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field.uid,
+        data: {
+          fieldAliasName: value
+        }
+      },
+      callback: function callback(newFields) {
+        if (component === 'table') {
+          setTimeout(function () {
+            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();
+          });
+        }
+        handleChange(newFields);
+      }
+    });
+  });
+  var handleFieldCheckChange = 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 = useMemoizedFn(function (e) {
+    if (e.target.checked) {
+      setAll(fields.map(function (_field) {
+        return [_field.uid, _field];
+      }));
+    } else {
+      reset();
+    }
+  });
+  var handleBatchSetting = useMemoizedFn(function () {
+    setDrawerType('batch');
+  });
+  var handleAddFormDivider = useMemoizedFn(function (index) {
+    var groupId = "group_".concat(suid());
+    dispatch({
+      type: 'insert',
+      payload: {
+        index: index,
+        data: {
+          uid: groupId,
+          id: groupId,
+          field: 'divider',
+          fieldName: 'Group',
+          _type: 'divider'
+        }
+      },
+      callback: handleChange
+    });
+  });
+  var renderItemRight = useMemoizedFn(function (field) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: field.uid,
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      value: field.fieldAliasName,
+      size: "small",
+      style: {
+        flex: 1
+      },
+      onChange: function onChange(e) {
+        return handleAliasChange(field, e.target.value);
+      }
+    }), field._type !== 'divider' && /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "edit",
+      style: {
+        margin: '0 4px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        setFieldId(field.uid);
+        setDrawerType('single');
+      }
+    })));
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading
+  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Checkbox, {
+    style: {
+      marginLeft: 20
+    },
+    disabled: drawerType === 'batch',
+    checked: checkAll,
+    indeterminate: checkedFields.size > 0 && checkedFields.size !== fields.length,
+    onChange: handleFieldCheckAll
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 80,
+      paddingLeft: 4
+    }
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".field"),
+    label: '数据字段'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      paddingLeft: 20
+    }
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".title"),
+    label: '标题'
+  }))), /*#__PURE__*/React.createElement(SortBox, {
+    datas: fields.map(function (_ref4) {
+      var uid = _ref4.uid;
+      return uid;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: checkedFields.size === 0,
+    addText: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    addIcon: "unordered-list",
+    handleAdd: handleBatchSetting,
+    addBtnProps: {
+      disabled: drawerType === 'batch'
+    }
+  }, fields.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(SortItem, {
+      key: field.uid,
+      id: field.uid
+    }, /*#__PURE__*/React.createElement(ListEditorItem, {
+      left: /*#__PURE__*/React.createElement(React.Fragment, null, field._type !== 'divider' ? /*#__PURE__*/React.createElement(Checkbox, {
+        disabled: drawerType === 'batch',
+        data: field,
+        checked: !!get(field.uid),
+        onChange: handleFieldCheckChange
+      }) : null, /*#__PURE__*/React.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.createElement(Drawer, {
+    visible: true,
+    width: 280,
+    mask: false,
+    onClose: function onClose() {
+      return setDrawerType(void 0);
+    },
+    title: drawerType === 'single' ? fieldData.fieldAliasName : formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".batch"),
+      label: '批量设置'
+    }),
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    className: styles['lc-painter-panel-field-setting-drawer'],
+    style: {
+      position: 'absolute',
+      transform: 'none',
+      right: 320
+    }
+  }, drawerType === 'single' ? /*#__PURE__*/React.createElement(FieldSetting, {
+    key: fieldId,
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldData: fieldData,
+    dataModelKey: getLDMetaAttr('dataModelKey'),
+    moduleId: getLDMetaAttr('moduleId'),
+    datasetId: datasetUid,
+    component: component,
+    onAliasChange: handleAliasChange,
+    onChange: handleChange
+  }) : null, drawerType === 'batch' ? /*#__PURE__*/React.createElement(BatchSetting, {
+    dispatch: dispatch,
+    nodeId: nodeId,
+    fieldsData: checkedFields,
+    dataModelKey: getLDMetaAttr('dataModelKey'),
+    moduleId: getLDMetaAttr('moduleId'),
+    datasetId: datasetUid,
+    component: component,
+    onChange: handleChange
+  }) : null) : null);
+};
+export default FieldsSetting;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useDebounceFn } from 'ahooks';
+import { Input } from 'luck-design/antd';
+var I18nInput = function I18nInput(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size,
+    wrapped = _ref.wrapped;
+  var _useDebounceFn = useDebounceFn(onChange, {
+      wait: 400
+    }),
+    run = _useDebounceFn.run;
+  return wrapped === 'textarea' ? /*#__PURE__*/React.createElement(Input.TextArea, {
+    rows: 4,
+    defaultValue: defaultValue,
+    onChange: function onChange(e) {
+      var _e$target$value;
+      return run((_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.trim());
+    },
+    size: size,
+    autoSize: false,
+    style: {
+      resize: 'none'
+    }
+  }) : /*#__PURE__*/React.createElement(Input, {
+    defaultValue: defaultValue,
+    onChange: function onChange(e) {
+      var _e$target$value2;
+      return run((_e$target$value2 = e.target.value) === null || _e$target$value2 === void 0 ? void 0 : _e$target$value2.trim());
+    },
+    size: size
+  });
+};
+export default I18nInput;

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

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../style/icon.less";
+import IconFont from "../../../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元素。
+ */
+export default function (_ref) {
+  var defaultValue = _ref.defaultValue,
+    next = _ref.next;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    val = _useState2[0],
+    setVal = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-icon'],
+    onClick: function onClick() {
+      return next({
+        onSelect: setVal
+      });
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: val !== null && val !== void 0 ? val : 'iconyingyongguanli'
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles['selecor']
+  }, "\u8BF7\u9009\u62E9 >"));
+}