@pisell/materials 6.0.13 → 6.0.15

package/es/components/dataSourceComponents/fields/Upload/index.js

@@ -1,4 +1,38 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { withFormItem } from "../../dataSourceForm/utils";
 import UploadWithMode from "./WithMode";
-var Upload = withFormItem(UploadWithMode);
+import { checkFileCount } from "./utils";
+import { DEFAULT_MAX_COUNT } from "./constants";
+var Upload = withFormItem(UploadWithMode, {
+  otherFormItemProps: function otherFormItemProps(props, others) {
+    var rule = {};
+    if (props.multiple) {
+      rule = {
+        validator: function validator(_, value) {
+          var _checkFileCount = checkFileCount({
+              minCount: props.minCount || 0,
+              maxCount: props.maxCount || DEFAULT_MAX_COUNT,
+              valueLength: value.length,
+              multiple: !!props.multiple
+            }),
+            success = _checkFileCount.success,
+            message = _checkFileCount.message;
+          if (!success) {
+            return Promise.reject(new Error(message));
+          } else {
+            return Promise.resolve();
+          }
+        }
+      };
+    }
+    return {
+      rules: [].concat(_toConsumableArray((others === null || others === void 0 ? void 0 : others.rules) || []), [rule])
+    };
+  }
+});
 export default Upload;

package/es/components/dataSourceComponents/fields/Upload/type.d.ts

@@ -10,6 +10,7 @@ export interface UploadFile extends AntdUploadFile {
 }
 export interface UploadProps {
     renderMode?: string;
+    fieldKey: string;
     maxSize?: number;
     minCount?: number;
     maxCount?: number;

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -38,6 +38,7 @@ declare const formFieldMap: {
         optionSourceType?: "default" | "custom" | "api" | undefined;
         labelField: string;
         valueField: string;
+        extraParams?: Record<string, any> | undefined;
     } & {
         dataSource?: any;
     }) => import("react").JSX.Element;
@@ -57,8 +58,9 @@ declare const formFieldMap: {
     FormItemDateRangePicker: import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemUpload: import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+    FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<any> | (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -93,7 +95,8 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     optionSourceType?: "default" | "custom" | "api" | undefined;
     labelField: string;
     valueField: string;
+    extraParams?: Record<string, any> | undefined;
 } & {
     dataSource?: any;
-}) => import("react").JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+}) => import("react").JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent, formFieldMap };

package/es/components/dataSourceComponents/fields/index.js

@@ -9,6 +9,7 @@ import TimePicker from "./TimePicker";
 import DateRangePicker from "./DateRangePicker";
 import Upload from "./Upload";
 import Translation from "./Translation";
+import IconSelect from "./IconSelect";
 
 // 表单字段组件映射 增加时需要同步更新 utils 中的 formFieldFilterFuncMap
 var formFieldMap = {
@@ -31,7 +32,8 @@ var formFieldMap = {
   'FormItemCheckbox.Group': Checkbox.Group,
   FormItemDateRangePicker: DateRangePicker,
   FormItemUpload: Upload,
-  FormItemTranslation: Translation
+  FormItemTranslation: Translation,
+  FormItemIconSelect: IconSelect
 };
 var getFieldComponent = function getFieldComponent(fieldComponent) {
   return formFieldMap[fieldComponent];

package/es/components/dataSourceComponents/hooks/useActions.js

@@ -116,13 +116,19 @@ var useActions = function useActions() {
             case 2:
               result = _context.sent;
               if (!['pisell2-api', 'mypisell-api'].includes(dataSourceKey)) {
-                _context.next = 5;
+                _context.next = 7;
+                break;
+              }
+              if (!('mypisell-api' === dataSourceKey && designMode === 'design')) {
+                _context.next = 6;
                 break;
               }
-              return _context.abrupt("return", result.data);
-            case 5:
               return _context.abrupt("return", result);
             case 6:
+              return _context.abrupt("return", result.data);
+            case 7:
+              return _context.abrupt("return", result);
+            case 8:
             case "end":
               return _context.stop();
           }
@@ -212,7 +218,7 @@ var useActions = function useActions() {
           return _context3.abrupt("return", {});
         case 5:
           getApi = genCustomApi(actions === null || actions === void 0 ? void 0 : actions.get);
-          return _context3.abrupt("return", getApi({}));
+          return _context3.abrupt("return", getApi(extraParams === null || extraParams === void 0 ? void 0 : extraParams.get));
         case 7:
           _context3.next = 9;
           return getNocobaseData({

package/es/components/dataSourceComponents/hooks/useValueMap.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isString } from '@pisell/utils';
+import { isNumber, isString } from '@pisell/utils';
 
 /**
  * 将 options 转换为 valueMap
@@ -12,7 +12,7 @@ var useValueMap = function useValueMap(options) {
     return (options === null || options === void 0 ? void 0 : options.reduce(function (acc, item) {
       var itemValue = item.value;
       var itemLabel = item.label;
-      if (isString(itemValue) && isString(itemLabel)) {
+      if ((isString(itemValue) || isNumber(itemValue)) && isString(itemLabel)) {
         acc[itemValue] = itemLabel;
       }
       return acc;

package/es/components/dataSourceComponents/provider/dataSource/DataSourceContext.d.ts

@@ -80,6 +80,13 @@ export declare type DataSourceContextProps = {
         create?: () => Promise<any>;
         destroy?: () => Promise<any>;
     };
+    requestOptions?: {
+        list?: any;
+        get?: any;
+        update?: any;
+        create?: any;
+        destroy?: any;
+    };
     overrideData?: {
         list?: any;
         get?: any;
@@ -106,6 +113,7 @@ export interface DataSourceContextType {
     update: Result<any, any>;
     create: Result<any, any>;
     __designMode?: string;
+    getCurrentRecord: () => any;
 }
 export declare const DataSourceContext: import("react").Context<DataSourceContextType>;
 export default DataSourceContext;

package/es/components/dataSourceComponents/provider/dataSource/DataSourceContext.js

@@ -5,7 +5,8 @@ var initialContext = {
   destroy: {},
   get: {},
   update: {},
-  create: {}
+  create: {},
+  getCurrentRecord: function getCurrentRecord() {}
 };
 export var DataSourceContext = /*#__PURE__*/createContext(initialContext);
 export default DataSourceContext;

package/es/components/dataSourceComponents/provider/dataSource/DataSourceProvider.js

@@ -5,12 +5,13 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { useMemo } from 'react';
-import { useRequest } from 'ahooks';
+import { useMemoizedFn, useRequest } from 'ahooks';
 import { isString, isBoolean } from '@pisell/utils';
 import DataSourceContext from "./DataSourceContext";
 import useActions from "../../hooks/useActions";
 import useVariables from "../../hooks/useVariables";
 import useSetRequest from "../../../../hooks/useSetRequest";
+import useDataSource from "../../hooks/useDataSource";
 
 /**
  * @title: DataSource Provider
@@ -24,10 +25,16 @@ var DataSourceProvider = function DataSourceProvider(props) {
     externalActions = props.actions,
     overrideData = props.overrideData,
     autoRun = props.autoRun,
+    requestOptions = props.requestOptions,
     __designMode = props.__designMode;
+  var _useDataSource = useDataSource(),
+    ctxGetCurrentRecord = _useDataSource.getCurrentRecord;
   useSetRequest();
   var _useVariables = useVariables(),
     parseVariable = _useVariables.parseVariable;
+  var getCurrentRecord = useMemoizedFn(function () {
+    return (parseVariable === null || parseVariable === void 0 ? void 0 : parseVariable(currentValue, {})) || ctxGetCurrentRecord();
+  });
   var dataSource = isString(propsDataSource) ? parseVariable === null || parseVariable === void 0 ? void 0 : parseVariable(propsDataSource) : propsDataSource;
 
   // 处理标准数据源
@@ -44,9 +51,9 @@ var DataSourceProvider = function DataSourceProvider(props) {
   var update = (externalActions === null || externalActions === void 0 ? void 0 : externalActions.update) || standardActions.update;
   var create = (externalActions === null || externalActions === void 0 ? void 0 : externalActions.create) || standardActions.create;
   var destroy = (externalActions === null || externalActions === void 0 ? void 0 : externalActions.destroy) || standardActions.destroy;
-  var listResult = useRequest(list, {
+  var listResult = useRequest(list, _objectSpread({
     manual: isBoolean(autoRun === null || autoRun === void 0 ? void 0 : autoRun.list) ? !(autoRun !== null && autoRun !== void 0 && autoRun.list) : true
-  });
+  }, requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.list));
   var getResult = useRequest(get, {
     manual: isBoolean(autoRun === null || autoRun === void 0 ? void 0 : autoRun.get) ? !(autoRun !== null && autoRun !== void 0 && autoRun.get) : true
   });
@@ -63,6 +70,7 @@ var DataSourceProvider = function DataSourceProvider(props) {
     return {
       __designMode: __designMode,
       dataSource: dataSource,
+      getCurrentRecord: getCurrentRecord,
       list: _objectSpread(_objectSpread({}, listResult), {}, {
         data: (overrideData === null || overrideData === void 0 ? void 0 : overrideData.list) || listResult.data
       }),

package/es/components/dataSourceComponents/provider/variables/VariablesProvider.js

@@ -40,6 +40,9 @@ var VariablesProvider = function VariablesProvider(props) {
   // 初始变量中包含 URL 参数
   var variablesRef = useRef(mergeWith(variables, {
     global: {
+      value: {
+        query: initialQuery
+      },
       query: initialQuery
     }
   }, defaultCustomizer));

package/es/components/date-picker/datePickerCpt.js

@@ -84,7 +84,8 @@ var DatePickerCpt = function DatePickerCpt(props) {
     setValue(value);
   }, [value]);
   useEffect(function () {
-    setValueStr((_value === null || _value === void 0 ? void 0 : _value.format(format || 'YYYY-MM-DD')) || '');
+    var _value$format;
+    setValueStr((_value === null || _value === void 0 ? void 0 : (_value$format = _value.format) === null || _value$format === void 0 ? void 0 : _value$format.call(_value, format || 'YYYY-MM-DD')) || '');
   }, [_value]);
   var customPresetItems = useMemo(function () {
     var preset = [{
@@ -218,6 +219,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
     });
   };
   var timeInputProps = useMemo(function () {
+    var _value$format2;
     var step = 1;
     var _format = '';
     if ((showTime === null || showTime === void 0 ? void 0 : showTime.format) === 'HH:mm') {
@@ -233,7 +235,7 @@ var DatePickerCpt = function DatePickerCpt(props) {
         var val = e.target.value;
         handleTimeChange(window.dayjs(val, _format));
       },
-      value: _value === null || _value === void 0 ? void 0 : _value.format(_format)
+      value: _value === null || _value === void 0 ? void 0 : (_value$format2 = _value.format) === null || _value$format2 === void 0 ? void 0 : _value$format2.call(_value, _format)
     };
   }, [showTime, _value]);
   if (!picker || picker === 'date') {

package/es/components/iconSelect/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+export interface IconSelectProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    defaultValue?: string;
+}
+declare const IconSelect: React.FC<IconSelectProps>;
+export default IconSelect;

package/es/components/iconSelect/index.js

@@ -0,0 +1,217 @@
+var _excluded = ["type", "icons"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState, useEffect } from 'react';
+import { Button, Input, Popover, Radio, Space } from 'antd';
+import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+import { useControllableValue } from 'ahooks';
+import { isUndefined } from '@pisell/utils';
+import { getText } from "../../locales";
+import { getIconList } from "./utils";
+import "./index.less";
+var IconGroupNameMap = {
+  outlined: getText('pisell-icon-select-outlined'),
+  filled: getText('pisell-icon-select-filled'),
+  'two-tone': getText('pisell-icon-select-two-tone'),
+  iconfont: getText('pisell-icon-select-iconfont')
+};
+var Icon = function Icon(props) {
+  var type = props.type,
+    _props$icons = props.icons,
+    icons = _props$icons === void 0 ? {} : _props$icons,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Comp = icons[type];
+  if (!Comp) return null;
+  return /*#__PURE__*/React.createElement(Comp, rest);
+};
+var IconContent = function IconContent(_ref) {
+  var selectedGroup = _ref.selectedGroup,
+    groups = _ref.groups,
+    setSelectedGroup = _ref.setSelectedGroup,
+    search = _ref.search,
+    setSearch = _ref.setSearch,
+    list = _ref.list,
+    handleChange = _ref.handleChange,
+    icons = _ref.icons;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-icon-select-popup"
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    className: "pisell-lowcode-icon-select-radio-group",
+    size: "middle",
+    value: selectedGroup,
+    onChange: function onChange(e) {
+      return setSelectedGroup(e.target.value);
+    }
+  }, groups.map(function (item) {
+    return /*#__PURE__*/React.createElement(Radio.Button, {
+      key: item.group,
+      value: item.group
+    }, IconGroupNameMap[item.group]);
+  })), /*#__PURE__*/React.createElement(Input, {
+    value: search,
+    size: "middle",
+    placeholder: getText('pisell-icon-select-search'),
+    allowClear: true,
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    onChange: function onChange(e) {
+      return setSearch(e.target.value);
+    },
+    style: {
+      width: '100%'
+    },
+    className: "pisell-lowcode-icon-select-search"
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: "pisell-lowcode-icon-select-content"
+  }, list.map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "pisell-lowcode-icon-select-item",
+      key: item.name,
+      onClick: function onClick() {
+        return handleChange(item.name);
+      },
+      title: item.name
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: item.name,
+      icons: icons
+    }));
+  })));
+};
+var IconSelect = function IconSelect(props) {
+  var disabled = props.disabled,
+    defaultValue = props.defaultValue;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    search = _useState4[0],
+    setSearch = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    icons = _useState6[0],
+    setIcons = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    groups = _useState8[0],
+    setGroups = _useState8[1];
+  var _useState9 = useState('outlined'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedGroup = _useState10[0],
+    setSelectedGroup = _useState10[1];
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    firstLoad = _useState12[0],
+    setFirstLoad = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    list = _useState14[0],
+    setList = _useState14[1];
+  var _useControllableValue = useControllableValue(props, {
+      defaultValue: defaultValue
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    onChange = _useControllableValue2[1];
+  if (firstLoad && defaultValue && isUndefined(value)) {
+    onChange(defaultValue);
+    setFirstLoad(false);
+  }
+  useEffect(function () {
+    var _groups$;
+    var iconList = getIconList();
+    var groups = [];
+    var icons = {};
+    iconList.forEach(function (item) {
+      var _ref2 = item,
+        group = _ref2.group,
+        name = _ref2.name,
+        icon = _ref2.icon;
+      if (groups.every(function (item) {
+        return item.group !== group;
+      })) {
+        groups.push({
+          group: group,
+          list: []
+        });
+      }
+      var target = groups.find(function (item) {
+        return item.group === group;
+      });
+      target.list.push(item);
+      icons[item.name] = item === null || item === void 0 ? void 0 : item.icon;
+    });
+    setIcons(icons);
+    setGroups(groups);
+    setSelectedGroup((_groups$ = groups[0]) === null || _groups$ === void 0 ? void 0 : _groups$.group);
+  }, []);
+  useEffect(function () {
+    var _currentGroup$list;
+    var currentGroup = groups.find(function (item) {
+      return item.group === selectedGroup;
+    });
+    setList(((_currentGroup$list = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.list) !== null && _currentGroup$list !== void 0 ? _currentGroup$list : []).filter(function (item) {
+      return search ? item.name.toLowerCase().indexOf(search.toLowerCase()) > -1 : true;
+    }));
+  }, [selectedGroup, search, groups]);
+  var handleChange = function handleChange(icon) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(icon);
+    hide();
+  };
+  var triggerNode = /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-icon-select-trigger"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: value,
+    icons: icons,
+    style: {
+      fontSize: 24
+    }
+  }));
+  var hide = function hide() {
+    setOpen(false);
+  };
+  var handleOpenChange = function handleOpenChange(newOpen) {
+    setOpen(newOpen);
+  };
+  return /*#__PURE__*/React.createElement(Space.Compact, {
+    block: true,
+    className: "pisell-lowcode-icon-select"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    content: /*#__PURE__*/React.createElement(IconContent, {
+      selectedGroup: selectedGroup,
+      groups: groups,
+      setSelectedGroup: setSelectedGroup,
+      search: search,
+      setSearch: setSearch,
+      list: list,
+      handleChange: handleChange,
+      icons: icons
+    }),
+    trigger: "click",
+    placement: "bottom",
+    open: open,
+    onOpenChange: handleOpenChange
+  }, value ? /*#__PURE__*/React.createElement(Button, {
+    size: "large",
+    disabled: disabled,
+    icon: triggerNode,
+    className: "pisell-lowcode-icon-select-button"
+  }) : /*#__PURE__*/React.createElement(Button, {
+    className: "pisell-lowcode-icon-select-button-text",
+    size: "large"
+  }, getText('pisell-icon-select-select'))), value && !disabled && /*#__PURE__*/React.createElement(Button, {
+    size: "large",
+    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+    className: "pisell-lowcode-icon-select-button",
+    onClick: function onClick() {
+      return onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }
+  }));
+};
+export default IconSelect;

package/es/components/iconSelect/index.less

@@ -0,0 +1,54 @@
+.pisell-lowcode-icon-select-trigger {
+  font-size: 20px;
+  .anticon {
+    font-size: 20px;
+  }
+}
+
+.pisell-lowcode-icon-select-button {
+  // width: 44px;
+  // height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pisell-lowcode-icon-select-button-text {
+  border-radius: 9px;
+}
+
+.pisell-lowcode-icon-select-popup {
+  width: 350px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .pisell-lowcode-icon-select-radio-group {
+    width: 100%;
+    display: flex;
+    & > * {
+      flex: 1;
+      padding: 0;
+      text-align: center;
+    }
+  }
+  .pisell-lowcode-icon-select-content {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 280px;
+    .pisell-lowcode-icon-select-item {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 24px;
+      cursor: pointer;
+      display: inline-block;
+      transition: background-color 0.2s;
+      text-align: center;
+      border-radius: 4px;
+      &:hover {
+        background-color: #f1f2f3;
+      }
+    }
+  }
+}

package/es/components/iconSelect/utils.d.ts

@@ -0,0 +1,14 @@
+export declare type IconGroup = 'outlined' | 'filled' | 'two-tone' | 'iconfont';
+export declare function get(obj: any, path: string, defaultValue?: any): any;
+export declare function getAntdIconList(): ({
+    name: any;
+    group: "filled" | "outlined" | "two-tone";
+    icon: any;
+} | null)[];
+interface IconItem {
+    name: string;
+    group: IconGroup;
+    icon: any;
+}
+export declare function getIconList(): IconItem[];
+export {};