hc-busin-components 1.0.0

package/dist/CombinTable/index.js

@@ -0,0 +1,225 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["columns", "search", "fieldNames", "placeholder", "border", "prefixIcon", "addonBefore", "addonAfter", "request", "values", "setValues", "setting", "refresh", "topNode", "defaultAfterChange", "defaultSelectKey"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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 { Button, Checkbox, Modal, Space, Table } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import CombineSearch from "../CombineSearch";
+import Icon from "../Icon";
+import RenderContent from "./components/RenderContent";
+var CombinTable = function CombinTable(props) {
+  var columns = props.columns,
+    _props$search = props.search,
+    search = _props$search === void 0 ? true : _props$search,
+    _props$fieldNames = props.fieldNames,
+    fieldNames = _props$fieldNames === void 0 ? {
+      label: 'title',
+      value: 'key'
+    } : _props$fieldNames,
+    placeholder = props.placeholder,
+    border = props.border,
+    prefixIcon = props.prefixIcon,
+    addonBefore = props.addonBefore,
+    addonAfter = props.addonAfter,
+    request = props.request,
+    values = props.values,
+    setValues = props.setValues,
+    _props$setting = props.setting,
+    setting = _props$setting === void 0 ? true : _props$setting,
+    _props$refresh = props.refresh,
+    refresh = _props$refresh === void 0 ? true : _props$refresh,
+    topNode = props.topNode,
+    defaultAfterChange = props.defaultAfterChange,
+    defaultSelectKey = props.defaultSelectKey,
+    tableProps = _objectWithoutProperties(props, _excluded);
+  var SearchProps = {
+    fieldNames: fieldNames,
+    placeholder: placeholder,
+    border: border,
+    prefixIcon: prefixIcon,
+    addonBefore: addonBefore,
+    addonAfter: addonAfter,
+    request: request,
+    values: values,
+    setValues: setValues,
+    defaultAfterChange: defaultAfterChange,
+    defaultSelectKey: defaultSelectKey,
+    options: columns ? columns : []
+  };
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectValues = _useState2[0],
+    setSelectValues = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkboxOptions = _useState4[0],
+    setCheckOptions = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkValues = _useState6[0],
+    setCheckValues = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectShowValues = _useState8[0],
+    setSelectShowValues = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showSetting = _useState10[0],
+    setShowSetting = _useState10[1];
+  //  筛选表头checkbox
+  var handleCheckChange = function handleCheckChange(e) {
+    setSelectValues(e);
+  };
+  var handleSelectColumns = function handleSelectColumns() {
+    setCheckValues(selectValues);
+    setSelectShowValues(selectValues);
+    setSelectValues([]);
+    setShowSetting(false);
+  };
+  var resetColumns = useMemo(function () {
+    var columsList = [];
+    var selecting = [];
+    var list = selectShowValues.length ? selectShowValues : [];
+    columns === null || columns === void 0 || columns.forEach(function (column) {
+      var resetColumns = _objectSpread(_objectSpread({}, column), {}, {
+        render: function render(col, record) {
+          if (column.dataIndex || column.render) {
+            if (column.render) {
+              return column.render(col, record, arguments.length <= 2 ? undefined : arguments[2]);
+            }
+            if (column.dataIndex && record[column.dataIndex]) {
+              return record[column.dataIndex];
+            }
+          }
+          return '-';
+        }
+      });
+      if (column.key) {
+        if (list.findIndex(function (i) {
+          return i === column.key;
+        }) === -1 && selectShowValues.length) {} else {
+          columsList.push(resetColumns);
+          selecting.push(column.key);
+        }
+      } else {
+        if (column.render) {
+          columsList.push(resetColumns);
+        }
+      }
+    });
+    setCheckValues(selecting);
+    if (!search) {
+      return columsList;
+    }
+    return columsList === null || columsList === void 0 ? void 0 : columsList.map(function (item) {
+      switch (item.componentType) {
+        case 'Select':
+        case 'StatusSelect':
+        case 'Checkbox':
+          return _objectSpread(_objectSpread({}, item), {}, {
+            title: /*#__PURE__*/React.createElement(Space, {
+              align: "center"
+            }, item.title, ' ', /*#__PURE__*/React.createElement(RenderContent, {
+              current: item,
+              fieldKey: item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value],
+              values: values,
+              setValues: setValues
+            }))
+          });
+        default:
+          return _objectSpread({}, item);
+      }
+    });
+  }, [search, columns, JSON.stringify(values), selectShowValues]);
+  var AfterBaseDom = useMemo(function () {
+    var doms = [];
+    if (setting) {
+      doms.push( /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          setShowSetting(true);
+        },
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "v35_Settings"
+        })
+      }));
+    }
+    if (refresh) {
+      doms.push( /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          if (request) {
+            request(values, '', '$refresh');
+          }
+        },
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          name: "v35_Refresh"
+        })
+      }));
+    }
+    return doms;
+  }, [setting, refresh, values, search, request]);
+
+  // 获取表头筛选项
+  useEffect(function () {
+    var checkOptions = [];
+    var selecting = [];
+    columns === null || columns === void 0 || columns.forEach(function (i) {
+      if (i.key) {
+        checkOptions.push({
+          label: i.title,
+          value: i.key,
+          disabled: i.headerDisabled ? true : false
+        });
+        selecting.push(i.key);
+      }
+    });
+    setCheckValues(selecting);
+    setCheckOptions(checkOptions);
+  }, [columns]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CombineSearch, _extends({}, SearchProps, {
+    values: values,
+    search: search,
+    setValues: setValues,
+    addonAfter: /*#__PURE__*/React.createElement(React.Fragment, null, SearchProps.addonAfter, AfterBaseDom)
+  })), topNode ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '8px'
+    }
+  }, topNode) : null, /*#__PURE__*/React.createElement(Table, _extends({
+    columns: resetColumns
+  }, tableProps, {
+    pagination: _objectSpread(_objectSpread({}, tableProps.pagination), {}, {
+      onChange: function onChange(page, size) {
+        if (tableProps !== null && tableProps !== void 0 && tableProps.pagination && tableProps !== null && tableProps !== void 0 && tableProps.pagination.onChange) {
+          tableProps === null || tableProps === void 0 || tableProps.pagination.onChange(page, size, values);
+        }
+      }
+    })
+  })), /*#__PURE__*/React.createElement(Modal, {
+    title: localStorage.getItem('i18nextLng') === 'en-US' || localStorage.getItem('language') === 'en-US' ? 'Table Header Setting' : '表头设置',
+    destroyOnClose: true,
+    open: showSetting,
+    onCancel: function onCancel() {
+      setShowSetting(false);
+    },
+    onOk: handleSelectColumns
+  }, /*#__PURE__*/React.createElement(Checkbox.Group, {
+    options: checkboxOptions,
+    onChange: handleCheckChange,
+    defaultValue: checkValues
+  })));
+};
+export default CombinTable;

package/dist/CombinTable/styles/index.d.ts

@@ -0,0 +1,3 @@
+export declare const useFilterStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+}>;

package/dist/CombinTable/styles/index.js

@@ -0,0 +1,11 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from "antd-style";
+export var useFilterStyles = createStyles(function (_ref) {
+  var prefixCls = _ref.prefixCls,
+    token = _ref.token,
+    css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* transform: translateY(); */\n  "])))
+  };
+});

package/dist/CombinTable/types/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { GetProp, GetProps, Table, TablePaginationConfig } from 'antd';
+import ComBineSearchProps, { CombineOptionsType } from "../../CombineSearch/types";
+type TableProps = GetProps<typeof Table>;
+type column = GetProp<typeof Table, 'columns'>[number];
+type pagination = false | Omit<TablePaginationConfig, 'onChange'>;
+export type ColumnProps = column & CombineOptionsType;
+interface AntTableProps extends Omit<TableProps, 'columns' | 'pagination'> {
+    columns?: ColumnProps[];
+    pagination?: pagination & {
+        onChange?: (page: number, size: number, values: Record<string, any>) => void;
+    };
+    setting?: boolean;
+    refresh?: boolean;
+    topNode?: React.ReactNode;
+}
+type Search = {
+    search?: boolean;
+};
+type CombinTableProps = AntTableProps & Omit<ComBineSearchProps, 'options'> & Search;
+export { CombinTableProps };

package/dist/CombinTable/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/CombineSearch/components/Content.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CombineOptionsType } from '../types';
+declare const CombineContent: (props: {
+    current: CombineOptionsType | undefined;
+    onChangeState: (cb?: () => void) => void;
+    combineValues: Record<string, any>;
+    setCombineValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    fieldNames: {
+        label: string;
+        value: string;
+    };
+}) => React.JSX.Element | null;
+export default CombineContent;

package/dist/CombineSearch/components/Content.js

@@ -0,0 +1,249 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Badge, Button, Checkbox, DatePicker, Divider, Input, Select, Space } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+var CombineContent = function CombineContent(props) {
+  var current = props.current,
+    onChangeState = props.onChangeState,
+    setCombineValues = props.setCombineValues,
+    combineValues = props.combineValues,
+    fieldNames = props.fieldNames;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    checkboxValues = _useState2[0],
+    setCheckBoxValues = _useState2[1];
+  if (!current) {
+    return null;
+  }
+  var componentProps = current.componentProps,
+    componentType = current.componentType;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var handleChangeValue = function handleChangeValue(e) {
+    switch (componentType) {
+      case 'Checkbox':
+      case 'StatusSelect':
+      case 'Select':
+        onChangeState(function () {
+          setCombineValues(function (values) {
+            return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, current[fieldNames.value], e.length ? e : undefined))));
+          });
+        });
+        break;
+      case 'RangePick':
+        onChangeState(function () {
+          setCombineValues(function (values) {
+            return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, current[fieldNames.value], e.length ? e : undefined))));
+          });
+        });
+        break;
+      case 'DatePick':
+        onChangeState(function () {
+          setCombineValues(function (values) {
+            return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, current[fieldNames.value], e ? e : undefined))));
+          });
+        });
+        break;
+      default:
+        onChangeState(function () {
+          setCombineValues(function (values) {
+            var _e$target;
+            return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, current[fieldNames.value], ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || undefined))));
+          });
+        });
+        break;
+    }
+  };
+  useEffect(function () {
+    if (componentType === 'Checkbox' && combineValues[current[fieldNames.value]]) {
+      setCheckBoxValues(combineValues[current[fieldNames.value]]);
+    }
+    return function () {
+      setCheckBoxValues([]);
+    };
+  }, []);
+  var MemoComponent = useMemo(function () {
+    switch (componentType) {
+      case 'DatePick':
+        return /*#__PURE__*/React.createElement(DatePicker, _extends({}, componentProps, {
+          onChange: function onChange(date, dateString) {
+            handleChangeValue(dateString ? dateString : '');
+            if (componentProps !== null && componentProps !== void 0 && componentProps.onChange) {
+              componentProps === null || componentProps === void 0 || componentProps.onChange(date, dateString);
+            }
+          },
+          variant: "borderless",
+          defaultOpen: true
+        }));
+      case 'RangePick':
+        return /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({}, componentProps, {
+          onChange: function onChange(dates, dateStrings) {
+            handleChangeValue(dates ? dateStrings : []);
+            if (componentProps !== null && componentProps !== void 0 && componentProps.onChange) {
+              componentProps === null || componentProps === void 0 || componentProps.onChange(dates, dateStrings);
+            }
+          },
+          variant: "borderless",
+          defaultOpen: true
+        }));
+      case 'Checkbox':
+        {
+          var _componentProps$field, _componentProps$field2;
+          var CheckboxlabelKey = (componentProps === null || componentProps === void 0 || (_componentProps$field = componentProps.fieldNames) === null || _componentProps$field === void 0 ? void 0 : _componentProps$field.label) || 'label';
+          var CheckboxvalueKey = (componentProps === null || componentProps === void 0 || (_componentProps$field2 = componentProps.fieldNames) === null || _componentProps$field2 === void 0 ? void 0 : _componentProps$field2.value) || 'value';
+          return /*#__PURE__*/React.createElement(Select, _extends({
+            mode: "multiple",
+            style: {
+              width: '100%',
+              padding: 0
+            }
+          }, componentProps, {
+            value: checkboxValues,
+            onChange: function onChange(values) {
+              setCheckBoxValues(values);
+            },
+            dropdownRender: function dropdownRender(menu) {
+              return /*#__PURE__*/React.createElement(React.Fragment, null, menu, /*#__PURE__*/React.createElement(Divider, {
+                style: {
+                  margin: '8px 0'
+                }
+              }), /*#__PURE__*/React.createElement("div", {
+                style: {
+                  display: 'flex',
+                  justifyContent: 'end',
+                  alignItems: 'center',
+                  gap: '6px'
+                }
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  borderRadius: '4px'
+                },
+                type: "primary",
+                onClick: function onClick() {
+                  handleChangeValue(checkboxValues);
+                },
+                size: "small"
+              }, "\u786E\u8BA4"), /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  borderRadius: '4px'
+                },
+                onClick: function onClick() {
+                  setCheckBoxValues([]);
+                },
+                size: "small"
+              }, "\u91CD\u7F6E")));
+            },
+            defaultOpen: true,
+            menuItemSelectedIcon: null,
+            optionRender: function optionRender(option) {
+              return /*#__PURE__*/React.createElement(Space, {
+                align: "center"
+              }, /*#__PURE__*/React.createElement(Checkbox, {
+                key: JSON.stringify(option),
+                checked: checkboxValues.includes(option.data[CheckboxvalueKey]),
+                value: option.data[CheckboxvalueKey]
+              }), option.data[CheckboxlabelKey]);
+            },
+            popupMatchSelectWidth: 320,
+            suffixIcon: false,
+            variant: "borderless"
+          }));
+        }
+      case 'StatusSelect':
+        {
+          var _componentProps$field3, _componentProps$field4, _componentProps$optio;
+          var labelKey = (componentProps === null || componentProps === void 0 || (_componentProps$field3 = componentProps.fieldNames) === null || _componentProps$field3 === void 0 ? void 0 : _componentProps$field3.label) || 'label';
+          var valueKey = (componentProps === null || componentProps === void 0 || (_componentProps$field4 = componentProps.fieldNames) === null || _componentProps$field4 === void 0 ? void 0 : _componentProps$field4.value) || 'value';
+          return /*#__PURE__*/React.createElement(Select, _extends({
+            style: {
+              width: '100%',
+              padding: 0
+            }
+          }, componentProps, {
+            defaultOpen: true,
+            onSelect: function onSelect() {
+              for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
+                arg[_key] = arguments[_key];
+              }
+              handleChangeValue.apply(void 0, arg);
+              if (componentProps !== null && componentProps !== void 0 && componentProps.onSelect) {
+                componentProps === null || componentProps === void 0 || componentProps.onSelect.apply(componentProps, arg);
+              }
+            },
+            options: componentProps === null || componentProps === void 0 || (_componentProps$optio = componentProps.options) === null || _componentProps$optio === void 0 ? void 0 : _componentProps$optio.map(function (item) {
+              return _defineProperty(_defineProperty({}, labelKey, /*#__PURE__*/React.createElement(Badge, {
+                color: item.color,
+                text: item[labelKey]
+              })), valueKey, item[valueKey]);
+            }),
+            defaultValue: combineValues[current[fieldNames.value]],
+            popupMatchSelectWidth: 320,
+            suffixIcon: false,
+            variant: "borderless"
+          }));
+        }
+      case 'Select':
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          style: {
+            width: '100%',
+            padding: 0
+          }
+        }, componentProps, {
+          defaultOpen: true,
+          onSelect: function onSelect() {
+            for (var _len2 = arguments.length, arg = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              arg[_key2] = arguments[_key2];
+            }
+            handleChangeValue.apply(void 0, arg);
+            if (componentProps !== null && componentProps !== void 0 && componentProps.onSelect) {
+              componentProps === null || componentProps === void 0 || componentProps.onSelect.apply(componentProps, arg);
+            }
+          },
+          defaultValue: combineValues[current[fieldNames.value]],
+          popupMatchSelectWidth: 320,
+          suffixIcon: false,
+          variant: "borderless"
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(Input, _extends({}, componentProps, {
+          variant: "borderless",
+          allowClear: false,
+          defaultValue: combineValues[current[fieldNames.value]],
+          onKeyDown: function onKeyDown() {
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = arguments[_key3];
+            }
+            //@ts-ignore
+            if (args[0].code === 'Backspace' && !args[0].target.value) {
+              //@ts-ignore
+              handleChangeValue('');
+            }
+            if (componentProps !== null && componentProps !== void 0 && componentProps.onKeyDown) {
+              //@ts-ignore
+              componentProps === null || componentProps === void 0 || componentProps.onKeyDown.apply(componentProps, args);
+            }
+          },
+          onPressEnter: function onPressEnter(e) {
+            if (e.nativeEvent.isComposing) {
+              return;
+            }
+            // @ts-ignore
+            handleChangeValue(e);
+          },
+          autoFocus: true
+        }));
+    }
+  }, [current, combineValues, fieldNames, checkboxValues]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, MemoComponent);
+};
+export default CombineContent;

package/dist/CombineSearch/components/Tags.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CombineOptionsType } from '../types';
+declare const CombineTags: ({ combineValues, setCombineValues, options, fieldNames, setCurrent, }: {
+    options: CombineOptionsType[];
+    combineValues: Record<string, any>;
+    setCombineValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    current: string;
+    setCurrent: React.Dispatch<React.SetStateAction<string>>;
+    fieldNames: {
+        label: string;
+        value: string;
+    };
+}) => React.JSX.Element;
+export default CombineTags;

package/dist/CombineSearch/components/Tags.js

@@ -0,0 +1,115 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/* eslint-disable no-case-declarations */
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { Divider, Space, Tag } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import Icon from "../../Icon";
+import { useTagsStyles } from "../style";
+var CombineTags = function CombineTags(_ref) {
+  var combineValues = _ref.combineValues,
+    setCombineValues = _ref.setCombineValues,
+    options = _ref.options,
+    fieldNames = _ref.fieldNames,
+    setCurrent = _ref.setCurrent;
+  var _useTagsStyles = useTagsStyles(),
+    styles = _useTagsStyles.styles;
+  var getFindOption = useCallback(function (value, componentProps) {
+    var _componentProps$optio;
+    var findOption = componentProps === null || componentProps === void 0 || (_componentProps$optio = componentProps.options) === null || _componentProps$optio === void 0 ? void 0 : _componentProps$optio.find(function (option) {
+      var _componentProps$field;
+      if (componentProps.fieldNames && componentProps !== null && componentProps !== void 0 && (_componentProps$field = componentProps.fieldNames) !== null && _componentProps$field !== void 0 && _componentProps$field.label) {
+        return option[componentProps.fieldNames.value].toString() === value.toString();
+      }
+      return option.value.toString() === value.toString();
+    });
+    return findOption;
+  }, []);
+  var getValues = useCallback(function (value, key, option) {
+    var _option$componentProp, _getFindOption, _componentProps$field2;
+    switch (option.componentType) {
+      case 'StatusSelect':
+      case 'Select':
+        var labelKey = ((_option$componentProp = option.componentProps) === null || _option$componentProp === void 0 || (_option$componentProp = _option$componentProp.fieldNames) === null || _option$componentProp === void 0 ? void 0 : _option$componentProp.label) || 'label';
+        return (_getFindOption = getFindOption(value, option.componentProps)) === null || _getFindOption === void 0 ? void 0 : _getFindOption[labelKey];
+      case 'Checkbox':
+        var componentProps = option.componentProps;
+        var CheckboxLabelKey = (componentProps === null || componentProps === void 0 || (_componentProps$field2 = componentProps.fieldNames) === null || _componentProps$field2 === void 0 ? void 0 : _componentProps$field2.label) || 'label';
+        var values = value.map(function (i) {
+          var _getFindOption2;
+          return (_getFindOption2 = getFindOption(i, componentProps)) === null || _getFindOption2 === void 0 ? void 0 : _getFindOption2[CheckboxLabelKey];
+        }).join(' ｜ ');
+        return values;
+      case 'DatePick':
+        return value;
+      case 'RangePick':
+        return value.join(' - ');
+      default:
+        return value;
+    }
+  }, []);
+  var TagsMemo = useMemo(function () {
+    var keys = Object.keys(combineValues).map(function (key) {
+      var findOption = options.find(function (i) {
+        return i[fieldNames.value] === key;
+      });
+      if (findOption) {
+        return /*#__PURE__*/React.createElement(Tag, {
+          onClick: function onClick() {
+            setCurrent(key);
+          },
+          className: styles.currentTag,
+          key: key,
+          closeIcon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),
+          onClose: function onClose() {
+            setCombineValues(function (values) {
+              return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, key, undefined))));
+            });
+            if (findOption[fieldNames.value] === key) {
+              setCurrent('');
+            }
+          },
+          closable: true
+        }, /*#__PURE__*/React.createElement(Space, {
+          size: 0
+        }, /*#__PURE__*/React.createElement("span", {
+          className: styles.label
+        }, findOption[fieldNames.label], "\uFF1A"), /*#__PURE__*/React.createElement("span", {
+          className: styles.value
+        }, getValues(combineValues[key], key, findOption))));
+      }
+      return null;
+    });
+    return keys;
+  }, [JSON.stringify(options), JSON.stringify(combineValues), fieldNames]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '8px',
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginBottom: '8px'
+    }
+  }, TagsMemo, Object.keys(combineValues).length ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '50px'
+    }
+  }, /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "v35_TrashCan",
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: function onClick() {
+      setCombineValues({});
+      setCurrent('');
+    }
+  })) : null);
+};
+export default CombineTags;