@pisell/materials 1.0.215 → 1.0.217

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

@@ -18,7 +18,7 @@ export interface Props<T> {
         attributes: DraggableAttributes;
     }) => React.ReactElement<HTMLElement>;
 }
-export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): JSX.Element;
+export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): React.JSX.Element;
 export interface SortableItemProps<T> {
     id: number;
     index: number;

package/es/components/DragSortList/index.js

@@ -36,10 +36,10 @@ export default function Sortable(_ref) {
         active = _ref2.active;
       if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
         var activeIndex = list === null || list === void 0 ? void 0 : list.findIndex(function (i) {
-          return i.id === active.id;
+          return getRowKey(i) === active.id;
         });
         var overIndex = list === null || list === void 0 ? void 0 : list.findIndex(function (i) {
-          return i.id === (over === null || over === void 0 ? void 0 : over.id);
+          return getRowKey(i) === (over === null || over === void 0 ? void 0 : over.id);
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(arrayMove(list, activeIndex, overIndex));
       }

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

@@ -10,6 +10,7 @@ export interface MultipleContainersSortListProps<T> {
     renderContainer?: DefaultRenderContainerProps["renderContainer"];
     rowKey: IdType | ((val: T) => IdType);
     children: SortableItemProps<T>["children"];
+    quickFilterMaxLength: number;
 }
 export declare const TRASH_ID = "void";
 interface DefaultRenderContainerProps {
@@ -21,5 +22,5 @@ interface DefaultRenderContainerProps {
     }) => React.ReactElement;
     children: any;
 }
-declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => React.JSX.Element;
 export default MultipleContainersSortList;

package/es/components/MultipleContainersSortList/index.js

@@ -21,7 +21,6 @@ import React, { useCallback, useEffect, useState } from "react";
 import { SortableItem } from "../DragSortList";
 import "./index.less";
 export var TRASH_ID = "void";
-var maxLength = 3;
 var DefaultRenderContainer = function DefaultRenderContainer(props) {
   var id = props.id,
     children = props.children,
@@ -48,7 +47,8 @@ var MultipleContainersSortList = function MultipleContainersSortList(props) {
     onChange = props.onChange,
     renderContainer = props.renderContainer,
     _props$rowKey = props.rowKey,
-    rowKey = _props$rowKey === void 0 ? "id" : _props$rowKey;
+    rowKey = _props$rowKey === void 0 ? "id" : _props$rowKey,
+    quickFilterMaxLength = props.quickFilterMaxLength;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     containers = _useState2[0],
@@ -105,9 +105,9 @@ var MultipleContainersSortList = function MultipleContainersSortList(props) {
       var newList = _objectSpread(_objectSpread({}, list), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, activeContainer, list[activeContainer].filter(function (item) {
         return getRowKey(item) !== active.id;
       })), _defineProperty(_objectSpread2, overContainer, [].concat(_toConsumableArray(list[overContainer].slice(0, newIndex)), [list[activeContainer][activeIndex]], _toConsumableArray(list[overContainer].slice(newIndex, list[overContainer].length)))), _objectSpread2));
-      if (overContainer === "quickFilter" && newList[overContainer].length > maxLength) {
+      if (overContainer === "quickFilter" && newList[overContainer].length > quickFilterMaxLength) {
         var _objectSpread3;
-        newList = _objectSpread(_objectSpread({}, newList), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, overContainer, newList[overContainer].slice(0, maxLength)), _defineProperty(_objectSpread3, activeContainer, [].concat(_toConsumableArray(newList[overContainer].slice(maxLength)), _toConsumableArray(newList[activeContainer]))), _objectSpread3));
+        newList = _objectSpread(_objectSpread({}, newList), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, overContainer, newList[overContainer].slice(0, quickFilterMaxLength)), _defineProperty(_objectSpread3, activeContainer, [].concat(_toConsumableArray(newList[overContainer].slice(quickFilterMaxLength)), _toConsumableArray(newList[activeContainer]))), _objectSpread3));
       }
       onChange === null || onChange === void 0 ? void 0 : onChange(newList);
     }
@@ -142,6 +142,7 @@ var MultipleContainersSortList = function MultipleContainersSortList(props) {
   }, containers.map(function (container) {
     return /*#__PURE__*/React.createElement(DefaultRenderContainer, {
       id: container,
+      key: container,
       renderContainer: renderContainer
     }, /*#__PURE__*/React.createElement(SortableContext, {
       key: container,

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

@@ -5,10 +5,10 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "prev" | "next" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };
-declare const Pagination: (props: PaginationProps) => JSX.Element | null;
+declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
 export default Pagination;
-export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;

package/es/components/Pagination/index.js

@@ -16,6 +16,7 @@ import { Pagination as OriginPagination } from "antd";
 import classNames from "classnames";
 import { useResponsive } from "../../hooks";
 import "./index.less";
+import { getText } from "../../locales";
 
 /**
  * @title: 自定义渲染
@@ -32,14 +33,14 @@ var itemRender = function itemRender(_, type, originalElement) {
       className: "paginator-page-btn-left-icon"
     }), /*#__PURE__*/React.createElement("span", {
       className: "paginator-page-btn-text"
-    }, "Previous"));
+    }, getText("table-pagination-previous")));
   }
   if (type === "next") {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("paginator-page-btn", "right")
     }, /*#__PURE__*/React.createElement("span", {
       className: "paginator-page-btn-text"
-    }, "Next"), /*#__PURE__*/React.createElement(ArrowRight, {
+    }, getText("table-pagination-next")), /*#__PURE__*/React.createElement(ArrowRight, {
       className: "paginator-page-btn-right-icon"
     }));
   }
@@ -130,13 +131,7 @@ var MiniPagination = function MiniPagination(props) {
     className: "materials-grid-paginator-center"
   }, /*#__PURE__*/React.createElement("span", {
     className: "materials-grid-paginator-center-text"
-  }, "Page"), /*#__PURE__*/React.createElement("span", {
-    className: "materials-grid-paginator-center-value"
-  }, current), /*#__PURE__*/React.createElement("span", {
-    className: "materials-grid-paginator-center-text"
-  }, "of"), /*#__PURE__*/React.createElement("span", {
-    className: "materials-grid-paginator-center-value"
-  }, MAX)), /*#__PURE__*/React.createElement("div", {
+  }, getText("table-pagination-total")(current, MAX))), /*#__PURE__*/React.createElement("div", {
     className: "pisell-lowcode-pagination-next",
     onClick: function onClick() {
       if (current >= MAX) {
@@ -157,11 +152,11 @@ export var FormPagination = function FormPagination(_ref) {
     page = _ref.page,
     pageSize = _ref.pageSize,
     other = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(1),
+  var _useState = useState(page || 1),
     _useState2 = _slicedToArray(_useState, 2),
     _p = _useState2[0],
     _setP = _useState2[1];
-  var _useState3 = useState(10),
+  var _useState3 = useState(pageSize || 10),
     _useState4 = _slicedToArray(_useState3, 2),
     _ps = _useState4[0],
     _setPs = _useState4[1];
@@ -172,11 +167,11 @@ export var FormPagination = function FormPagination(_ref) {
     });
   };
   useEffect(function () {
-    var _page = (value === null || value === void 0 ? void 0 : value.page) || 1;
-    var _size = (value === null || value === void 0 ? void 0 : value.size) || 10;
+    var _page = (value === null || value === void 0 ? void 0 : value.page) || page || 1;
+    var _size = (value === null || value === void 0 ? void 0 : value.size) || pageSize || 10;
     _setP(_page);
     _setPs(_size);
-  }, [value]);
+  }, [value, page, pageSize]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, _extends({}, other, {
     pageSize: _ps,
     current: _p,

package/es/components/Pagination/index.less

@@ -8,7 +8,7 @@
   background-color: #fff;
   border-radius: 0 0 8px 8px;
   border: 1px solid #f0f0f0;
-  border-top: none;
+  //border-top: none;
   padding: 0 20px;
   margin: 0 !important;
 

package/es/components/auto-complete/index.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-declare const AutoComplete: import("react").ForwardRefExoticComponent<Omit<import("antd").AutoCompleteProps<unknown, import("antd/es/select").DefaultOptionType | import("antd/es/select").BaseOptionType> & {
-    children?: import("react").ReactNode;
-} & {
-    ref?: import("react").Ref<import("antd").RefSelectProps> | undefined;
-}, "ref"> & import("react").RefAttributes<any>>;
+declare const AutoComplete: (props: any) => import("react").JSX.Element;
 export default AutoComplete;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Calendar: (props: any) => JSX.Element;
+declare const Calendar: (props: any) => import("react").JSX.Element;
 export default Calendar;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("antd").CheckboxProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<any>>;
+declare const Checkbox: (props: any) => import("react").JSX.Element;
 export default Checkbox;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.less";
+declare const ClassicLayout: (props: any) => React.JSX.Element;
+export default ClassicLayout;

package/es/components/classicLayout/index.js

@@ -0,0 +1,29 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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(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 from "react";
+import classNames from "classnames";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var ClassicLayout = function ClassicLayout(props) {
+  var _classNames2;
+  var header = props.header,
+    content = props.content,
+    footer = props.footer,
+    style = props.style,
+    fixedHeader = props.fixedHeader,
+    fixedFooter = props.fixedFooter,
+    footerClassName = props.footerClassName,
+    footerStyle = props.footerStyle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "claseic-layout"),
+    style: style
+  }, /*#__PURE__*/React.createElement("header", {
+    className: classNames(_defineProperty({}, "".concat(prefix, "claseic-layout-fixed-header"), fixedHeader))
+  }, header), content, /*#__PURE__*/React.createElement("footer", {
+    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "claseic-layout-fixed-footer"), fixedFooter), _defineProperty(_classNames2, footerClassName, footerClassName), _classNames2)),
+    style: footerStyle
+  }, footer));
+};
+export default ClassicLayout;

package/es/components/classicLayout/index.less

@@ -0,0 +1,22 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-claseic-layout {
+    position: relative;
+    overflow: auto;
+    height: 100%;
+    width: 100%;
+  }
+  &-claseic-layout-fixed-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+  }
+  &-claseic-layout-fixed-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface ComponentProps {
+    children: React.ReactNode;
+}
+/**
+ * 低代码组件壳子 目前不做任何处理直接返回 如需容器包裹自行处理
+ * @param props
+ * @constructor
+ */
+declare const Component: (props: ComponentProps) => React.ReactNode;
+export default Component;

package/es/components/component/index.js

@@ -0,0 +1,10 @@
+/**
+ * 低代码组件壳子 目前不做任何处理直接返回 如需容器包裹自行处理
+ * @param props
+ * @constructor
+ */
+var Component = function Component(props) {
+  var children = props.children;
+  return children;
+};
+export default Component;

package/es/components/config-provider/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { ConfigProviderProps as OriginalConfigProviderProps } from "antd/es/config-provider";
 import "dayjs/locale/zh-cn";
 export interface ConfigProviderProps extends OriginalConfigProviderProps {
     [key: string]: any;
 }
-declare const ConfigProvider: (props: ConfigProviderProps) => JSX.Element;
+declare const ConfigProvider: (props: ConfigProviderProps) => React.JSX.Element;
 export default ConfigProvider;

package/es/components/date-picker/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const DatePicker: (props: any) => JSX.Element;
+declare const DatePicker: (props: any) => import("react").JSX.Element;
 export default DatePicker;

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

@@ -4,5 +4,5 @@ export interface DivProps {
     style?: React.CSSProperties;
     others?: any;
 }
-declare const Div: (props: DivProps) => JSX.Element;
+declare const Div: (props: DivProps) => React.JSX.Element;
 export default Div;

package/es/components/div/index.js

@@ -1,13 +1,17 @@
+var _excluded = ["children", "style", "others"];
 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 _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 from "react";
 var Div = function Div(props) {
   var children = props.children,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
     _props$others = props.others,
-    others = _props$others === void 0 ? {} : _props$others;
+    others = _props$others === void 0 ? {} : _props$others,
+    otherProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     style: style
-  }, others), children);
+  }, others, otherProps), children);
 };
 export default Div;

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

@@ -1,2 +1,3 @@
+import "./index.less";
 declare const Drawer: any;
 export default Drawer;

package/es/components/drawer/index.js

@@ -1,12 +1,50 @@
+var _excluded = ["others"];
 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); }
-import React from 'react';
-import { Drawer as OriginalDrawer } from 'antd';
+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, { useMemo } from "react";
+import { Drawer as OriginalDrawer } from "antd";
+import XClose from "@pisell/icon/es/XClose";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var Title = function Title(props) {
+  var placement = props.placement,
+    onClose = props.onClose;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "drawer-outside-wrap ").concat(prefix, "drawer-outside-wrap-").concat(placement)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "drawer-outside-action-wrap"),
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(XClose, null)));
+};
 var Drawer = function Drawer(props) {
+  var others = props.others,
+    resetProps = _objectWithoutProperties(props, _excluded);
+  var operateMode = props.operateMode,
+    headerStyle = props.headerStyle,
+    placement = props.placement,
+    onClose = props.onClose;
   var innerProps = {};
-  if (props.__designMode === 'design') {
+  if (props.__designMode === "design") {
     // 低代码编辑态中强制显示，将控制权交给引擎侧
     innerProps.open = true;
   }
-  return /*#__PURE__*/React.createElement(OriginalDrawer, _extends({}, props, innerProps));
+  var otherProps = useMemo(function () {
+    if (operateMode === "outside") {
+      return {
+        headerStyle: {
+          border: "none",
+          height: 0,
+          padding: 0
+        },
+        title: /*#__PURE__*/React.createElement(Title, {
+          placement: placement,
+          onClose: onClose
+        })
+      };
+    }
+    return headerStyle;
+  }, [operateMode, placement, onClose]);
+  return /*#__PURE__*/React.createElement(OriginalDrawer, _extends({}, resetProps, innerProps, otherProps, others));
 };
 export default Drawer;

package/es/components/drawer/index.less

@@ -0,0 +1,34 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-drawer-outside-wrap {
+    position: absolute;
+    padding: 10px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+  }
+  &-drawer-outside-wrap-right {
+    left: -82px;
+  }
+  &-drawer-outside-action-wrap {
+    width: 56px;
+    height: 56px;
+    border-radius: 99px;
+    background: var(--base-white, #fff);
+    transition: background 300ms ease;
+    box-shadow: 0px 4px 8px 0px rgba(13, 22, 25, 0.02),
+      0px 12px 20px 0px rgba(0, 0, 0, 0.16);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    cursor: pointer;
+    &:hover {
+      background: #e8e8ee;
+    }
+    .anticon {
+      font-size: 20px;
+    }
+  }
+}

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
+import React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
 export default _default;

package/es/components/filter/components/Dropdown/index.d.ts

@@ -1,16 +1,5 @@
 import React from "react";
 import "./index.less";
-export declare type FilterItemProps = {
-    type: "single" | "input" | "datePicker" | "rangePicker";
-    name: string;
-    props: object;
-    label: string;
-    other: Record<string, any>;
-};
-export interface DropdownProps {
-    list: FilterItemProps[];
-    quickFilter: FilterItemProps[];
-    otherFilter: FilterItemProps[];
-}
+import { DropdownProps } from "./types";
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/es/components/filter/components/Dropdown/index.js

@@ -1,4 +1,10 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(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, { useCallback, useMemo } from "react";
 import DotsSix from "@pisell/icon/es/DotsSix";
 import HelpCircle from "@pisell/icon/es/HelpCircle";
@@ -6,13 +12,14 @@ import "./index.less";
 import FilterItem from "../FilterItem";
 import { Tooltip } from "antd";
 import MultipleContainersSortList from "../../../MultipleContainersSortList";
+import { getText } from "../../../../locales";
 var titleMap = {
-  quickFilter: "Quick Filter",
-  otherFilter: "Filter"
+  quickFilter: getText("table-action-filter-quick-filter"),
+  otherFilter: getText("table-action-filter-other-filter")
 };
 var tooltipMap = {
-  quickFilter: "Enable quick filtering directly on the page for convenient filtering operations, with a maximum of three filters allowed.\n",
-  otherFilter: "Select filter criteria in the list to perform filtering operations and display corresponding results."
+  quickFilter: getText("table-action-filter-quick-filter-tip"),
+  otherFilter: getText("table-action-filter-other-filter-tip")
 };
 var DragItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var attributes = props.attributes,
@@ -27,6 +34,9 @@ var DragItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DotsSix, _extends({
     ref: setActivatorNodeRef
   }, listeners, {
+    style: _objectSpread(_objectSpread({}, listeners.style || {}), {}, {
+      touchAction: "none"
+    }),
     className: "dots-six-icon"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "filter-dropdown-drag-item-right"
@@ -34,7 +44,10 @@ var DragItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var Dropdown = function Dropdown(props) {
   var quickFilter = props.quickFilter,
-    otherFilter = props.otherFilter;
+    otherFilter = props.otherFilter,
+    onChange = props.onChange,
+    quickFilterMaxLength = props.quickFilterMaxLength,
+    formFiltersPrefix = props.formFiltersPrefix;
   var list = useMemo(function () {
     return {
       quickFilter: quickFilter || [],
@@ -42,14 +55,7 @@ var Dropdown = function Dropdown(props) {
     };
   }, [quickFilter, otherFilter]);
   var handleSortChange = function handleSortChange(list) {
-    // dispatch({
-    //   type: "setQuickFilter",
-    //   payload: list.quickFilter,
-    // });
-    // dispatch({
-    //   type: "setOtherFilter",
-    //   payload: list.otherFilter,
-    // });
+    onChange === null || onChange === void 0 ? void 0 : onChange(list);
   };
   var renderContainer = useCallback(function (_ref) {
     var children = _ref.children,
@@ -62,14 +68,14 @@ var Dropdown = function Dropdown(props) {
     }, /*#__PURE__*/React.createElement("span", {
       className: "filter-dropdown-container-title"
     }, titleMap[id]), /*#__PURE__*/React.createElement(Tooltip, {
-      title: tooltipMap[id]
+      title: tooltipMap[id](quickFilterMaxLength)
     }, /*#__PURE__*/React.createElement(HelpCircle, {
       className: "filter-dropdown-container-icon-help"
     }))), /*#__PURE__*/React.createElement("div", {
       ref: ref,
       className: "filter-dropdown-container-filter-wrap"
     }, children));
-  }, []);
+  }, [quickFilterMaxLength]);
   return /*#__PURE__*/React.createElement("div", {
     className: "filter-dropdown-wrap"
   }, /*#__PURE__*/React.createElement("div", {
@@ -78,8 +84,10 @@ var Dropdown = function Dropdown(props) {
     list: list,
     rowKey: "name",
     renderContainer: renderContainer,
-    onChange: handleSortChange
+    onChange: handleSortChange,
+    quickFilterMaxLength: quickFilterMaxLength
   }, function (_ref2) {
+    var _item$name, _item$other;
     var item = _ref2.item,
       index = _ref2.index,
       style = _ref2.style,
@@ -87,6 +95,7 @@ var Dropdown = function Dropdown(props) {
       attributes = _ref2.attributes,
       setActivatorNodeRef = _ref2.setActivatorNodeRef,
       listeners = _ref2.listeners;
+    var name = [formFiltersPrefix, (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toString()].filter(Boolean);
     return /*#__PURE__*/React.createElement(DragItem, _extends({}, props, {
       index: index,
       attributes: attributes,
@@ -94,10 +103,16 @@ var Dropdown = function Dropdown(props) {
       listeners: listeners,
       style: style
     }), /*#__PURE__*/React.createElement(FilterItem, {
-      name: item.name,
+      key: name.join("-"),
+      name: name,
       label: item.label,
       type: item.type,
-      other: item.other
+      other: _objectSpread(_objectSpread({}, item.other), {}, {
+        style: _objectSpread(_objectSpread({}, ((_item$other = item.other) === null || _item$other === void 0 ? void 0 : _item$other.style) || {}), {}, {
+          width: "100%"
+        })
+      }),
+      props: item.props
     }));
   })));
 };

package/es/components/filter/components/Dropdown/index.less

@@ -3,12 +3,10 @@
   max-width: calc(100vw - 24px);
   min-width: 250px;
   padding: 4px;
-  max-height: 400px;
   display: flex;
   flex-direction: column;
   .filter-dropdown-wrap-content {
     flex: 1;
-    overflow: auto;
   }
   .filter-dropdown-wrap-footer {
 

package/es/components/filter/components/Dropdown/types.d.ts

@@ -0,0 +1,11 @@
+import { FilterItemProps } from "../../types";
+export interface DropdownProps {
+    quickFilter: FilterItemProps[];
+    otherFilter: FilterItemProps[];
+    onChange: (list: {
+        quickFilter: FilterItemProps[];
+        otherFilter: FilterItemProps[];
+    }) => void;
+    quickFilterMaxLength: number;
+    formFiltersPrefix: string;
+}

package/es/components/filter/components/Dropdown/types.js

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

package/es/components/filter/components/FilterButton/index.d.ts

@@ -1,9 +1,4 @@
 import React from "react";
-import { DropdownProps } from "../Dropdown";
-export declare type FilterListProps = {
-    list: DropdownProps["list"];
-    quickFilter: DropdownProps["quickFilter"];
-    otherFilter: DropdownProps["otherFilter"];
-};
+import { FilterListProps } from "./types";
 declare const Filter: React.FC<FilterListProps>;
 export default Filter;