shopee-ui-react 0.0.1-security → 2.10.49

package/es/components/table/Table.js

@@ -0,0 +1,405 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import classNames from 'classnames';
+import RcTable from 'rc-table';
+import { INTERNAL_HOOKS } from "rc-table/es/Table";
+import { convertChildrenToColumns } from "rc-table/es/hooks/useColumns";
+import omit from "rc-util/es/omit";
+import Skeleton from '../skeleton';
+import ConfigProvider from '../config-provider';
+import usePagination, { DEFAULT_PAGE_SIZE, getPaginationParam } from './hooks/usePagination';
+import useLazyKVMap from './hooks/useLazyKVMap';
+import useSelection from './hooks/useSelection';
+import useSorter, { getSortData } from './hooks/useSorter';
+import useFilter, { getFilterData } from './hooks/useFilter';
+import useTitleColumns from './hooks/useTitleColumns';
+import renderExpandIcon from './ExpandIcon';
+import scrollTo from '../../utils/scrollTo';
+import devWarning from '../../utils/warnings';
+import useBreakpoint from './hooks/useBreakpoint';
+import Icon from '../icon';
+import Pagination from '../pagination';
+
+function format(props) {
+  var _a, _b, _c;
+
+  var _props$columns = props.columns,
+      columns = _props$columns === void 0 ? [] : _props$columns,
+      maxHeight = props.maxHeight;
+  var scroll = props.scroll;
+
+  if (maxHeight && !scroll) {
+    scroll = {
+      y: maxHeight
+    };
+  }
+
+  return Object.assign(Object.assign({}, props), {
+    columns: columns.map(function (tmp) {
+      var _a, _b, _c, _d, _e;
+
+      return Object.assign(Object.assign({}, tmp), {
+        title: (_a = tmp.title) !== null && _a !== void 0 ? _a : tmp.label,
+        dataIndex: (_b = tmp.dataIndex) !== null && _b !== void 0 ? _b : tmp.prop,
+        sorter: (_d = (_c = tmp.sorter) !== null && _c !== void 0 ? _c : tmp.sortMethod) !== null && _d !== void 0 ? _d : !!tmp.sortable,
+        onFilter: (_e = tmp.onFilter) !== null && _e !== void 0 ? _e : tmp.filterMethod
+      });
+    }),
+    sticky: (_a = props.sticky) !== null && _a !== void 0 ? _a : props.stickyHeader,
+    scroll: scroll,
+    expandable: (_b = props.expandable) !== null && _b !== void 0 ? _b : props.expandRender ? {
+      expandedRowRender: props.expandRender
+    } : undefined,
+    footer: (_c = props.footer) !== null && _c !== void 0 ? _c : props.append ? function () {
+      return props.append;
+    } : undefined
+  });
+}
+
+function Table(props) {
+  var _classNames2;
+
+  var formattedProps = format(props);
+  var customizePrefixCls = formattedProps.prefixCls,
+      className = formattedProps.className,
+      style = formattedProps.style,
+      stripe = formattedProps.stripe,
+      bordered = formattedProps.bordered,
+      _formattedProps$dataS = formattedProps.dataSource,
+      dataSource = _formattedProps$dataS === void 0 ? [] : _formattedProps$dataS,
+      pagination = formattedProps.pagination,
+      rowSelection = formattedProps.rowSelection,
+      rowKey = formattedProps.rowKey,
+      rowClassName = formattedProps.rowClassName,
+      _formattedProps$colum = formattedProps.columns,
+      columns = _formattedProps$colum === void 0 ? [] : _formattedProps$colum,
+      children = formattedProps.children,
+      legacyChildrenColumnName = formattedProps.childrenColumnName,
+      onChange = formattedProps.onChange,
+      getPopupContainer = formattedProps.getPopupContainer,
+      loading = formattedProps.loading,
+      expandIcon = formattedProps.expandIcon,
+      expandable = formattedProps.expandable,
+      expandedRowRender = formattedProps.expandedRowRender,
+      renderLoading = formattedProps.renderLoading,
+      renderEmpty = formattedProps.renderEmpty,
+      expandIconColumnIndex = formattedProps.expandIconColumnIndex,
+      indentSize = formattedProps.indentSize,
+      scroll = formattedProps.scroll,
+      sortDirections = formattedProps.sortDirections,
+      locale = formattedProps.locale;
+  devWarning(!(typeof rowKey === 'function' && rowKey.length > 1), 'Table', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.');
+  var screens = useBreakpoint();
+  var mergedColumns = React.useMemo(function () {
+    var matched = new Set(Object.keys(screens).filter(function (m) {
+      return screens[m];
+    }));
+    return (columns || convertChildrenToColumns(children)).filter(function (c) {
+      return !c.responsive || c.responsive.some(function (r) {
+        return matched.has(r);
+      });
+    });
+  }, [children, columns, screens]);
+  var tableProps = omit(formattedProps, ['className', 'style', 'columns']);
+
+  var _React$useContext = React.useContext(ConfigProvider.ConfigContext),
+      contextLocale = _React$useContext.locale,
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var tableLocale = Object.assign(Object.assign({}, contextLocale.Table), locale);
+  var rawData = dataSource || [];
+  var prefixCls = getPrefixCls('table', customizePrefixCls);
+  var mergedExpandable = Object.assign({
+    childrenColumnName: legacyChildrenColumnName,
+    expandIconColumnIndex: expandIconColumnIndex
+  }, expandable);
+  var _mergedExpandable$chi = mergedExpandable.childrenColumnName,
+      childrenColumnName = _mergedExpandable$chi === void 0 ? 'children' : _mergedExpandable$chi;
+  var expandType = React.useMemo(function () {
+    if (rawData.some(function (item) {
+      var _a;
+
+      return (_a = item) === null || _a === void 0 ? void 0 : _a[childrenColumnName];
+    })) {
+      return 'nest';
+    }
+
+    if (expandedRowRender || expandable && expandable.expandedRowRender) {
+      return 'row';
+    }
+
+    return null; // only watch rawData
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawData]);
+  var internalRefs = {
+    body: React.useRef()
+  }; // ============================ RowKey ============================
+
+  var getRowKey = React.useMemo(function () {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+
+    return function (record) {
+      var _a;
+
+      return (_a = record) === null || _a === void 0 ? void 0 : _a[rowKey];
+    };
+  }, [rowKey]);
+
+  var _useLazyKVMap = useLazyKVMap(rawData, childrenColumnName, getRowKey),
+      _useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
+      getRecordByKey = _useLazyKVMap2[0]; // ============================ Events =============================
+
+
+  var changeEventInfo = {};
+
+  var triggerOnChange = function triggerOnChange(info, action) {
+    var reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var changeInfo = Object.assign(Object.assign({}, changeEventInfo), info);
+
+    if (reset) {
+      changeEventInfo.resetPagination(); // Reset event param
+
+      if (changeInfo.pagination.current) {
+        changeInfo.pagination.current = 1;
+      } // Trigger pagination events
+
+
+      if (pagination && pagination.onChange) {
+        pagination.onChange(1, changeInfo.pagination.pageSize);
+      }
+    }
+
+    if (scroll && scroll.scrollToFirstRowOnChange !== false && internalRefs.body.current) {
+      scrollTo(0, {
+        getContainer: function getContainer() {
+          return internalRefs.body.current;
+        }
+      });
+    }
+
+    if (onChange) {
+      onChange(changeInfo.pagination, changeInfo.filters, changeInfo.sorter, {
+        currentDataSource: getFilterData(getSortData(rawData, changeInfo.sorterStates, childrenColumnName), changeInfo.filterStates),
+        action: action
+      });
+    }
+  };
+  /** Controlled state in `columns` is not a good idea
+   * that makes too many code (1000+ line?) to read state out and then put it back to title render.
+   * Move these code into `hooks` but still too complex.
+   * We should provides Table props like `sorter` & `filter` to
+   * handle control in next big version. */
+  // ============================ Sorter =============================
+
+
+  var onSorterChange = function onSorterChange(sorter, sorterStates) {
+    triggerOnChange({
+      sorter: sorter,
+      sorterStates: sorterStates
+    }, 'sort', false);
+  };
+
+  var _useSorter = useSorter({
+    prefixCls: prefixCls,
+    mergedColumns: mergedColumns,
+    onSorterChange: onSorterChange,
+    sortDirections: sortDirections || ['ascend', 'descend'],
+    tableLocale: tableLocale
+  }),
+      _useSorter2 = _slicedToArray(_useSorter, 4),
+      transformSorterColumns = _useSorter2[0],
+      sortStates = _useSorter2[1],
+      sorterTitleProps = _useSorter2[2],
+      getSorters = _useSorter2[3];
+
+  var sortedData = React.useMemo(function () {
+    return getSortData(rawData, sortStates, childrenColumnName);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [rawData, sortStates]);
+  changeEventInfo.sorter = getSorters();
+  changeEventInfo.sorterStates = sortStates; // ============================ Filter ============================
+
+  var onFilterChange = function onFilterChange(filters, filterStates) {
+    triggerOnChange({
+      filters: filters,
+      filterStates: filterStates
+    }, 'filter', true);
+  };
+
+  var _useFilter = useFilter({
+    prefixCls: prefixCls,
+    locale: tableLocale,
+    mergedColumns: mergedColumns,
+    onFilterChange: onFilterChange,
+    getPopupContainer: getPopupContainer
+  }),
+      _useFilter2 = _slicedToArray(_useFilter, 3),
+      transformFilterColumns = _useFilter2[0],
+      filterStates = _useFilter2[1],
+      getFilters = _useFilter2[2];
+
+  var mergedData = getFilterData(sortedData, filterStates);
+  changeEventInfo.filters = getFilters();
+  changeEventInfo.filterStates = filterStates; // ============================ Column ============================
+
+  var columnTitleProps = React.useMemo(function () {
+    return Object.assign({}, sorterTitleProps);
+  }, [sorterTitleProps]);
+
+  var _useTitleColumns = useTitleColumns(columnTitleProps),
+      _useTitleColumns2 = _slicedToArray(_useTitleColumns, 1),
+      transformTitleColumns = _useTitleColumns2[0]; // ========================== Pagination ==========================
+
+
+  var onPaginationChange = function onPaginationChange(current, pageSize) {
+    triggerOnChange({
+      pagination: Object.assign(Object.assign({}, changeEventInfo.pagination), {
+        current: current,
+        pageSize: pageSize
+      })
+    }, 'paginate');
+  };
+
+  var _usePagination = usePagination(mergedData.length, pagination, onPaginationChange),
+      _usePagination2 = _slicedToArray(_usePagination, 2),
+      mergedPagination = _usePagination2[0],
+      resetPagination = _usePagination2[1];
+
+  changeEventInfo.pagination = pagination === false ? {} : getPaginationParam(pagination, mergedPagination);
+  changeEventInfo.resetPagination = resetPagination; // ============================= Data =============================
+
+  var pageData = React.useMemo(function () {
+    if (loading) {
+      return [];
+    }
+
+    if (pagination === false || !mergedPagination.pageSize) {
+      return mergedData;
+    }
+
+    var _mergedPagination$cur = mergedPagination.current,
+        current = _mergedPagination$cur === void 0 ? 1 : _mergedPagination$cur,
+        total = mergedPagination.total,
+        _mergedPagination$pag = mergedPagination.pageSize,
+        pageSize = _mergedPagination$pag === void 0 ? DEFAULT_PAGE_SIZE : _mergedPagination$pag; // Dynamic table data
+
+    if (mergedData.length < total) {
+      if (mergedData.length > pageSize) {
+        devWarning(false, 'Table', '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.');
+        return mergedData.slice((current - 1) * pageSize, current * pageSize);
+      }
+
+      return mergedData;
+    }
+
+    return mergedData.slice((current - 1) * pageSize, current * pageSize);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [loading, pagination, mergedData, mergedPagination.current, mergedPagination.pageSize, mergedPagination.total]); // ========================== Selections ==========================
+
+  var _useSelection = useSelection(rowSelection, {
+    prefixCls: prefixCls,
+    data: mergedData,
+    pageData: pageData,
+    getRowKey: getRowKey,
+    getRecordByKey: getRecordByKey,
+    expandType: expandType,
+    childrenColumnName: childrenColumnName,
+    locale: tableLocale,
+    expandIconColumnIndex: mergedExpandable.expandIconColumnIndex
+  }),
+      _useSelection2 = _slicedToArray(_useSelection, 2),
+      transformSelectionColumns = _useSelection2[0],
+      selectedKeySet = _useSelection2[1];
+
+  var internalRowClassName = function internalRowClassName(record, index, indent) {
+    var mergedRowClassName;
+
+    if (typeof rowClassName === 'function') {
+      mergedRowClassName = classNames(rowClassName(record, index, indent));
+    } else {
+      mergedRowClassName = classNames(rowClassName);
+    }
+
+    return classNames(_defineProperty({}, "".concat(prefixCls, "-row-selected"), selectedKeySet.has(getRowKey(record, index))), mergedRowClassName);
+  }; // ========================== Expandable ==========================
+  // Customize expandable icon
+
+
+  mergedExpandable.expandIcon = mergedExpandable.expandIcon || expandIcon || renderExpandIcon(); // Adjust expand icon index, no overwrite expandIconColumnIndex if set.
+
+  if (expandType === 'nest' && mergedExpandable.expandIconColumnIndex === undefined) {
+    mergedExpandable.expandIconColumnIndex = rowSelection ? 1 : 0;
+  } else if (mergedExpandable.expandIconColumnIndex > 0 && rowSelection) {
+    mergedExpandable.expandIconColumnIndex -= 1;
+  } // Indent size
+
+
+  if (typeof mergedExpandable.indentSize !== 'number') {
+    mergedExpandable.indentSize = typeof indentSize === 'number' ? indentSize : 16;
+  } // ============================ Render ============================
+
+
+  var transformColumns = React.useCallback(function (innerColumns) {
+    return transformTitleColumns(transformSelectionColumns(transformFilterColumns(transformSorterColumns(innerColumns))));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [transformSorterColumns, transformFilterColumns, transformSelectionColumns]);
+  var paginationNode;
+
+  if (mergedPagination !== undefined && pagination !== false) {
+    paginationNode = /*#__PURE__*/React.createElement(Pagination, _extends({
+      className: "".concat(prefixCls, "-pagination")
+    }, mergedPagination));
+  }
+
+  var combinedFooter = paginationNode || tableProps.footer ? function (data) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, paginationNode, tableProps.footer && tableProps.footer(data));
+  } : undefined; // >>>>>>>>> Empty View
+
+  var emptyView;
+
+  if (loading) {
+    emptyView = renderLoading ? renderLoading() : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-loading-content")
+    }, /*#__PURE__*/React.createElement(Skeleton, null), /*#__PURE__*/React.createElement(Skeleton, null), /*#__PURE__*/React.createElement(Skeleton, null), /*#__PURE__*/React.createElement(Skeleton, null));
+  } else {
+    emptyView = renderEmpty ? renderEmpty() : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-empty-content")
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(prefixCls, "-empty-icon"),
+      type: "no-data"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-empty-text")
+    }, tableLocale && tableLocale.emptyText));
+  }
+
+  var wrapperClassNames = classNames("".concat(prefixCls, "-wrapper"), className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassNames,
+    style: style
+  }, /*#__PURE__*/React.createElement(RcTable, _extends({}, tableProps, {
+    columns: mergedColumns,
+    expandable: mergedExpandable,
+    prefixCls: prefixCls,
+    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-bordered"), bordered), _defineProperty(_classNames2, "".concat(prefixCls, "-stripe"), stripe), _defineProperty(_classNames2, "".concat(prefixCls, "-empty"), pageData.length === 0), _defineProperty(_classNames2, "".concat(prefixCls, "-nest"), expandType === 'nest'), _classNames2)),
+    data: pageData,
+    rowKey: getRowKey,
+    rowClassName: internalRowClassName,
+    emptyText: emptyView // Internal
+    ,
+    internalHooks: INTERNAL_HOOKS,
+    internalRefs: internalRefs,
+    transformColumns: transformColumns,
+    footer: combinedFooter
+  })));
+}
+
+Table.defaultProps = {
+  rowKey: 'id',
+  bordered: false,
+  pagination: false
+};
+export default Table;

package/es/components/table/hooks/useBreakpoint.d.ts

@@ -0,0 +1,3 @@
+import { ScreenMap } from '../../../utils/responsiveObserve';
+declare function useBreakpoint(): ScreenMap;
+export default useBreakpoint;

package/es/components/table/hooks/useBreakpoint.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import ResponsiveObserve from '../../../utils/responsiveObserve';
+
+function useBreakpoint() {
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      screens = _useState2[0],
+      setScreens = _useState2[1];
+
+  useEffect(function () {
+    var token = ResponsiveObserve.subscribe(function (supportScreens) {
+      setScreens(supportScreens);
+    });
+    return function () {
+      return ResponsiveObserve.unsubscribe(token);
+    };
+  }, []);
+  return screens;
+}
+
+export default useBreakpoint;

package/es/components/table/hooks/useFilter/FilterDropdown.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ColumnType, Key, GetPopupContainer } from '../../types';
+import { FilterState } from '.';
+export interface FilterDropdownProps<RecordType> {
+    prefixCls: string;
+    column: ColumnType<RecordType>;
+    filterState?: FilterState<RecordType>;
+    columnKey: Key;
+    children: React.ReactNode;
+    triggerFilter: (filterState: FilterState<RecordType>) => void;
+    getPopupContainer?: GetPopupContainer;
+}
+declare function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>): React.ReactElement;
+export default FilterDropdown;

package/es/components/table/hooks/useFilter/FilterDropdown.js

@@ -0,0 +1,204 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import isEqual from 'lodash.isequal';
+import Dropdown, { DropdownMenu, DropdownItem } from '../../../dropdown';
+import Icon from '../../../icon';
+import useSyncState from '../../../../hooks/useSyncState';
+
+function renderFilterItems(_ref) {
+  var filters = _ref.filters,
+      filteredKeys = _ref.filteredKeys,
+      onClick = _ref.onClick;
+
+  if (filters.length === 0) {
+    // wrapped with <div /> to avoid react warning
+    // https://github.com/ant-design/ant-design/issues/25979
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '16px 0'
+      }
+    });
+  }
+
+  return filters.map(function (filter, index) {
+    var key = String(filter.value);
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: filter.value !== undefined ? key : index,
+      onDropdownItemClick: function onDropdownItemClick() {
+        return onClick && onClick(filter);
+      },
+      selected: filteredKeys.includes(key)
+    }, filter.text);
+  });
+}
+
+function FilterDropdown(props) {
+  var _a;
+
+  var prefixCls = props.prefixCls,
+      column = props.column,
+      columnKey = props.columnKey,
+      filterState = props.filterState,
+      triggerFilter = props.triggerFilter,
+      children = props.children,
+      getPopupContainer = props.getPopupContainer;
+  var filterDropdownVisible = column.filterDropdownVisible,
+      onFilterDropdownVisibleChange = column.onFilterDropdownVisibleChange;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  var filtered = !!(filterState && (((_a = filterState.filteredKeys) === null || _a === void 0 ? void 0 : _a.length) || filterState.forceFiltered));
+
+  var triggerVisible = function triggerVisible(newVisible) {
+    setVisible(newVisible);
+
+    if (onFilterDropdownVisibleChange) {
+      onFilterDropdownVisibleChange(newVisible);
+    }
+  };
+
+  var mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible; // ===================== Select Keys =====================
+
+  var propFilteredKeys = filterState && filterState.filteredKeys;
+
+  var _useSyncState = useSyncState(propFilteredKeys || []),
+      _useSyncState2 = _slicedToArray(_useSyncState, 2),
+      getFilteredKeysSync = _useSyncState2[0],
+      setFilteredKeysSync = _useSyncState2[1];
+
+  var onSelectKeys = function onSelectKeys(_ref2) {
+    var selectedKeys = _ref2.selectedKeys;
+    setFilteredKeysSync(selectedKeys);
+  };
+
+  React.useEffect(function () {
+    onSelectKeys({
+      selectedKeys: propFilteredKeys || []
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propFilteredKeys]); // ======================= Submit ========================
+
+  var internalTriggerFilter = function internalTriggerFilter(keys) {
+    var mergedKeys = keys && keys.length ? keys : null;
+
+    if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
+      return;
+    }
+
+    if (isEqual(mergedKeys, filterState === null || filterState === void 0 ? void 0 : filterState.filteredKeys)) {
+      return;
+    }
+
+    triggerFilter({
+      column: column,
+      key: columnKey,
+      filteredKeys: mergedKeys
+    });
+  };
+
+  var onConfirm = function onConfirm() {
+    internalTriggerFilter(getFilteredKeysSync());
+  };
+
+  var onReset = function onReset() {
+    setFilteredKeysSync([]);
+    internalTriggerFilter([]);
+  };
+
+  var onVisibleChange = function onVisibleChange(newVisible) {
+    if (newVisible && propFilteredKeys !== undefined) {
+      // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefiend)
+      setFilteredKeysSync(propFilteredKeys || []);
+    }
+
+    triggerVisible(newVisible);
+  }; // ======================== Style ========================
+
+
+  var keys = getFilteredKeysSync();
+  var dropdownContent;
+
+  if (typeof column.filterDropdown === 'function') {
+    dropdownContent = column.filterDropdown({
+      prefixCls: "".concat(prefixCls, "-custom"),
+      setSelectedKeys: function setSelectedKeys(selectedKeys) {
+        return onSelectKeys({
+          selectedKeys: selectedKeys
+        });
+      },
+      selectedKeys: keys,
+      confirm: onConfirm,
+      clearFilters: onReset,
+      filters: column.filters,
+      visible: mergedVisible
+    });
+  } else if (column.filterDropdown) {
+    dropdownContent = column.filterDropdown;
+  } else {
+    dropdownContent = /*#__PURE__*/React.createElement(DropdownMenu, {
+      align: {
+        offset: [0, 15]
+      },
+      placement: "bottomLeft",
+      getPopupContainer: getPopupContainer
+    }, renderFilterItems({
+      filters: column.filters || [],
+      filteredKeys: keys,
+      onClick: function onClick(item) {
+        if (item.value !== undefined && item.value !== null) {
+          onSelectKeys({
+            selectedKeys: [String(item.value)]
+          });
+          onConfirm();
+        } else {
+          onReset();
+        }
+      }
+    }));
+  }
+
+  var filterIcon;
+
+  if (typeof column.filterIcon === 'function') {
+    filterIcon = column.filterIcon(filtered);
+  } else if (column.filterIcon) {
+    filterIcon = column.filterIcon;
+  } else {
+    filterIcon = /*#__PURE__*/React.createElement(Icon, {
+      className: "".concat(prefixCls, "-cell-icon"),
+      type: "arrow-down"
+    });
+  }
+
+  var columnTitle = useMemo(function () {
+    return keys && keys.length > 0 ? column.filters.filter(function (tmp) {
+      return keys.includes(String(tmp.value));
+    }).map(function (tmp) {
+      return tmp.text;
+    }).join(' ') : children;
+  }, [keys, column.filters, children]);
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: dropdownContent,
+    trigger: "click",
+    visible: mergedVisible,
+    onVisibleChange: onVisibleChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-column"))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-column-title")
+  }, columnTitle), /*#__PURE__*/React.createElement("span", {
+    className: classNames("".concat(prefixCls, "-trigger-container"), _defineProperty({}, "".concat(prefixCls, "-trigger-container-open"), mergedVisible))
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    tabIndex: -1,
+    className: classNames("".concat(prefixCls, "-trigger"), {
+      active: filtered
+    })
+  }, filterIcon))));
+}
+
+export default FilterDropdown;

package/es/components/table/hooks/useFilter/index.d.ts

@@ -0,0 +1,17 @@
+import { TransformColumns, ColumnsType, ColumnType, Key, TableLocale, GetPopupContainer } from '../../types';
+export interface FilterState<RecordType> {
+    column: ColumnType<RecordType>;
+    key: Key;
+    filteredKeys?: Key[] | null;
+    forceFiltered?: boolean;
+}
+export declare function getFilterData<RecordType>(data: RecordType[], filterStates: FilterState<RecordType>[]): RecordType[];
+interface FilterConfig<RecordType> {
+    prefixCls: string;
+    mergedColumns: ColumnsType<RecordType>;
+    locale: TableLocale;
+    onFilterChange: (filters: Record<string, (Key | boolean)[] | null>, filterStates: FilterState<RecordType>[]) => void;
+    getPopupContainer?: GetPopupContainer;
+}
+declare function useFilter<RecordType>({ prefixCls, mergedColumns, onFilterChange, getPopupContainer, locale: tableLocale, }: FilterConfig<RecordType>): [TransformColumns<RecordType>, FilterState<RecordType>[], () => Record<string, (Key | boolean)[] | null>];
+export default useFilter;