@douyinfe/semi-ui 2.51.4 → 2.52.0-beta.0

package/lib/es/table/Table.js

@@ -468,6 +468,7 @@ class Table extends BaseComponent {
     this.renderSelection = function () {
       let record = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let inHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      let index = arguments.length > 2 ? arguments[2] : undefined;
       const {
         rowSelection,
         allDisabledRowKeysSet
@@ -477,43 +478,67 @@ class Table extends BaseComponent {
           selectedRowKeys = [],
           selectedRowKeysSet = new Set(),
           getCheckboxProps,
-          disabled
+          disabled,
+          renderCell
         } = rowSelection;
+        const allRowKeys = _this2.cachedFilteredSortedRowKeys;
+        const allRowKeysSet = _this2.cachedFilteredSortedRowKeysSet;
+        const allIsSelected = _this2.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
+        const hasRowSelected = _this2.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
+        const indeterminate = hasRowSelected && !allIsSelected;
         if (inHeader) {
           const columnKey = _get(rowSelection, 'key', strings.DEFAULT_KEY_COLUMN_SELECTION);
-          const allRowKeys = _this2.cachedFilteredSortedRowKeys;
-          const allRowKeysSet = _this2.cachedFilteredSortedRowKeysSet;
-          const allIsSelected = _this2.foundation.allIsSelected(selectedRowKeysSet, allDisabledRowKeysSet, allRowKeys);
-          const hasRowSelected = _this2.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
-          return /*#__PURE__*/React.createElement(ColumnSelection, {
+          const originNode = /*#__PURE__*/React.createElement(ColumnSelection, {
             "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
-            indeterminate: hasRowSelected && !allIsSelected,
+            indeterminate: indeterminate,
             onChange: (selected, e) => {
               _this2.toggleSelectAllRow(selected, e);
             }
           });
+          const selectAll = (selected, e) => _this2.toggleSelectAllRow(selected, e);
+          return _isFunction(renderCell) ? renderCell({
+            selected: allIsSelected,
+            record,
+            originNode,
+            inHeader,
+            disabled,
+            indeterminate,
+            selectAll
+          }) : originNode;
         } else {
           const key = _this2.foundation.getRecordKey(record);
           const selected = selectedRowKeysSet.has(key);
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
-          return /*#__PURE__*/React.createElement(ColumnSelection, {
+          const originNode = /*#__PURE__*/React.createElement(ColumnSelection, {
             "aria-label": `${selected ? 'Deselect' : 'Select'} this row`,
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this2.toggleSelectRow(status, key, e)
           });
+          const selectRow = (selected, e) => _this2.toggleSelectRow(selected, key, e);
+          return _isFunction(renderCell) ? renderCell({
+            selected,
+            record,
+            index,
+            originNode,
+            inHeader: false,
+            disabled,
+            indeterminate,
+            selectRow
+          }) : originNode;
         }
       }
       return null;
     };
     this.renderRowSelectionCallback = function (text) {
       let record = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return _this2.renderSelection(record);
+      let index = arguments.length > 2 ? arguments[2] : undefined;
+      return _this2.renderSelection(record, false, index);
     };
-    this.renderTitleSelectionCallback = () => this.renderSelection(null, true);
+    this.renderTitleSelectionCallback = () => this.renderSelection(undefined, true);
     this.normalizeSelectionColumn = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
@@ -608,7 +633,7 @@ class Table extends BaseComponent {
       const {
         prefixCls
       } = _this2.props;
-      if (column && (column.sorter || column.filters || column.useFullRender)) {
+      if (column && (column.sorter || column.filters || column.onFilter || column.useFullRender)) {
         let hasSorterOrFilter = false;
         const {
           dataIndex,
@@ -650,10 +675,10 @@ class Table extends BaseComponent {
         const stateFilteredValue = _get(curQuery, 'filteredValue');
         const defaultFilteredValue = _get(curQuery, 'defaultFilteredValue');
         const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
-        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown)) {
+        if (Array.isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown) || typeof column.renderFilterDropdown === 'function') {
           const filter = /*#__PURE__*/React.createElement(ColumnFilter, Object.assign({
             key: strings.DEFAULT_KEY_COLUMN_FILTER
-          }, curQuery, {
+          }, _omit(curQuery, 'children'), {
             filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this2.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this2.foundation.handleFilterSelect(dataIndex, data)

package/lib/es/table/index.d.ts

@@ -96,7 +96,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
     tableRef: React.RefObject<NormalTable<RecordType>>;
     context: ContextValue;
     constructor(props: TableProps);
-    getCurrentPageData: () => any;
+    getCurrentPageData: () => Pick<import("@douyinfe/semi-foundation/lib/es/table/foundation").BasePageData<RecordType>, "dataSource" | "groups">;
     render(): JSX.Element;
 }
 export * from './interface';

package/lib/es/table/interface.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, MutableRefObject } from 'react';
-import { BaseProps } from '../_base/baseComponent';
-import { PaginationProps } from '../pagination';
-import { CheckboxProps } from '../checkbox';
-import { DropdownProps } from '../dropdown';
-import { Locale } from '../locale/interface';
-import { ArrayElement } from '../_base/base';
+import type { BaseProps } from '../_base/baseComponent';
+import type { PaginationProps } from '../pagination';
+import type { CheckboxProps } from '../checkbox';
+import type { Locale } from '../locale/interface';
+import type { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/es/table/foundation';
-import { ScrollDirection, CSSDirection } from 'react-window';
+import type { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/es/table/foundation';
+import type { ScrollDirection, CSSDirection } from 'react-window';
+import type { ColumnFilterProps } from './ColumnFilter';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
     children?: ReactNode;
@@ -65,29 +65,37 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     children?: Array<ColumnProps<RecordType>>;
     className?: string;
     colSpan?: number;
+    /** use `dataIndex` to get current column data item from record. If you use `sorter` or `onFilter`, a unique `dataIndex` is required  */
     dataIndex?: string;
     defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
-    filterDropdown?: React.ReactNode;
-    filterDropdownProps?: DropdownProps;
+    filterDropdown?: ColumnFilterProps['filterDropdown'];
+    /** render filter Dropdown panel content  */
+    renderFilterDropdown?: ColumnFilterProps['renderFilterDropdown'];
+    /** filter Dropdown props  */
+    filterDropdownProps?: ColumnFilterProps['filterDropdownProps'];
     filterDropdownVisible?: boolean;
     filterIcon?: FilterIcon;
     filterMultiple?: boolean;
     filteredValue?: any[];
+    /** `filters` is not required if you use `renderFilterDropdown`  */
     filters?: Filter[];
     fixed?: Fixed;
+    /** the key required by React. If you have already set the `dataIndex`, the key does not need to be set again.  */
     key?: string | number;
     render?: ColumnRender<RecordType>;
     renderFilterDropdownItem?: RenderFilterDropdownItem;
     sortChildrenRecord?: boolean;
     sortOrder?: SortOrder;
+    /** enable sorting, `dataIndex` is required at the same time  */
     sorter?: Sorter<RecordType>;
     sortIcon?: SortIcon;
     title?: ColumnTitle;
     useFullRender?: boolean;
     width?: string | number;
     onCell?: OnCell<RecordType>;
+    /** enable filtering, `dataIndex` is required at the same time  */
     onFilter?: OnFilter<RecordType>;
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
@@ -217,7 +225,19 @@ export interface RowSelectionProps<RecordType> {
     onChange?: RowSelectionOnChange<RecordType>;
     onSelect?: RowSelectionOnSelect<RecordType>;
     onSelectAll?: RowSelectionOnSelectAll<RecordType>;
+    renderCell?: RowSelectionRenderCell<RecordType>;
 }
+export type RowSelectionRenderCell<RecordType> = (renderCellArgs: {
+    selected: boolean;
+    record: RecordType;
+    originNode: JSX.Element;
+    inHeader: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    index?: number;
+    selectRow?: (selected: boolean, e: Event) => void;
+    selectAll?: (selected: boolean, e: Event) => void;
+}) => ReactNode;
 export type GetCheckboxProps<RecordType> = (record: RecordType) => CheckboxProps;
 export type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;

package/lib/es/treeSelect/index.d.ts

@@ -82,6 +82,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     onChange?: OnChange;
     onFocus?: (e: React.MouseEvent) => void;
     onVisibleChange?: (isVisible: boolean) => void;
+    onClear?: (e: React.MouseEvent | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export type OverrideCommonState = 'keyEntities' | 'treeData' | 'disabledKeys' | 'flattenNodes';
 export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
@@ -121,6 +122,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         virtualize: PropTypes.Requireable<object>;
         treeNodeFilterProp: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/treeSelect/index.js

@@ -1146,6 +1146,9 @@ class TreeSelect extends BaseComponent {
           onLoad
         } = this.props;
         _isFunction(onLoad) && onLoad(newLoadedKeys, data);
+      },
+      notifyClear: e => {
+        this.props.onClear && this.props.onClear(e);
       }
     };
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
@@ -1317,6 +1320,7 @@ TreeSelect.propTypes = {
   virtualize: PropTypes.object,
   treeNodeFilterProp: PropTypes.string,
   onChange: PropTypes.func,
+  onClear: PropTypes.func,
   onSearch: PropTypes.func,
   onSelect: PropTypes.func,
   onExpand: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.51.4",
+    "version": "2.52.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.51.4",
-        "@douyinfe/semi-animation-react": "2.51.4",
-        "@douyinfe/semi-foundation": "2.51.4",
-        "@douyinfe/semi-icons": "2.51.4",
-        "@douyinfe/semi-illustrations": "2.51.4",
-        "@douyinfe/semi-theme-default": "2.51.4",
+        "@douyinfe/semi-animation": "2.52.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.52.0-beta.0",
+        "@douyinfe/semi-foundation": "2.52.0-beta.0",
+        "@douyinfe/semi-icons": "2.52.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.52.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.52.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b8cad87796be9b6b10409a95d3a5b4cb8b9592e6",
+    "gitHead": "92b9e3fc80cd5a352f6b9a1ffcb8f5191c688d95",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",