@douyinfe/semi-ui 2.19.0-alpha.2 → 2.19.0-alpha.5

package/lib/es/table/Table.js

@@ -494,15 +494,23 @@ class Table extends BaseComponent {
         const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
 
         const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+        const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: strings.DEFAULT_KEY_COLUMN_TITLE
+        }, rawTitle);
 
         if (typeof column.sorter === 'function' || column.sorter === true) {
+          // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+          // both the title and sorting areas are used as the click hot area for sorting。
           const sorter = /*#__PURE__*/React.createElement(ColumnSorter, {
             key: strings.DEFAULT_KEY_COLUMN_SORTER,
             sortOrder: sortOrder,
-            onClick: e => _this.foundation.handleSort(column, e)
+            onClick: e => _this.foundation.handleSort(column, e),
+            title: TitleNode
           });
           useFullRender && (titleMap.sorter = sorter);
           titleArr.push(sorter);
+        } else {
+          titleArr.push(TitleNode);
         }
 
         const stateFilteredValue = _get(curQuery, 'filteredValue');
@@ -523,9 +531,7 @@ class Table extends BaseComponent {
           titleArr.push(filter);
         }
 
-        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr.unshift( /*#__PURE__*/React.createElement(React.Fragment, {
-          key: strings.DEFAULT_KEY_COLUMN_TITLE
-        }, rawTitle)) && titleArr;
+        const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
         column = _Object$assign(_Object$assign({}, column), {
           title: newTitle
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.19.0-alpha.2",
+    "version": "2.19.0-alpha.5",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.19.0-alpha.2",
-        "@douyinfe/semi-foundation": "2.19.0-alpha.2",
-        "@douyinfe/semi-icons": "2.19.0-alpha.2",
+        "@douyinfe/semi-animation-react": "2.19.0-alpha.5",
+        "@douyinfe/semi-foundation": "2.19.0-alpha.5",
+        "@douyinfe/semi-icons": "2.19.0-alpha.5",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.19.0-alpha.2",
+        "@douyinfe/semi-theme-default": "2.19.0-alpha.5",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "8f3924ea67e8b1df150c590927421b42f7325074",
+    "gitHead": "f49d77763d9cf17af15945bddd04557e57858b4b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.19.0-alpha.2",
+        "@douyinfe/semi-scss-compile": "2.19.0-alpha.5",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/radio/radioGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { get, noop } from 'lodash';
+import { noop } from 'lodash';
 
 import { radioGroupClasses as css, strings } from '@douyinfe/semi-foundation/radio/constants';
 import RadioGroupFoundation, { RadioGroupAdapter } from '@douyinfe/semi-foundation/radio/radioGroupFoundation';
@@ -177,7 +177,6 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                             key={index}
                             disabled={this.props.disabled}
                             value={option}
-                            type={type}
                         >
                             {option}
                         </Radio>
@@ -191,7 +190,6 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                             extra={option.extra}
                             className={option.className}
                             style={option.style}
-                            type={type}
                         >
                             {option.label}
                         </Radio>
@@ -199,18 +197,9 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                 }
             });
         } else if (children) {
-            inner = React.Children.map(children, (itm, index) => {
-                if (React.isValidElement(itm)) {
-                    const props: Record<string, any> = { key: index };
-                    const isRadioComp = ['Radio', 'RadioWithGroup'].some(comp => [get(itm, 'type.displayName'), get(itm, 'type.name')].includes(comp));
-                    if (isRadioComp) {
-                        props.type = type;
-                    }
-                    return React.cloneElement(itm, props);
-                } else {
-                    return null;
-                }
-            });
+            inner = React.Children.map(children, (itm, index) => (React.isValidElement(itm) ?
+                React.cloneElement(itm, { key: index }) :
+                null));
         }
 
         return (

package/table/ColumnFilter.tsx

@@ -164,12 +164,13 @@ export default function ColumnFilter(props: ColumnFilterProps = {}): React.React
     } else {
         iconElem = (
             <div className={finalCls}>
+                {'\u200b'/* ZWSP(zero-width space) */}
                 <IconFilter
                     role="button"
                     aria-label="Filter data with this column"
                     aria-haspopup="listbox"
                     tabIndex={-1}
-                    size="small"
+                    size="default"
                 />
             </div>
         );

package/table/ColumnSorter.tsx

@@ -15,6 +15,7 @@ export interface ColumnSorterProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     prefixCls?: string;
     sortOrder?: SortOrder;
+    title?: React.ReactNode;
 }
 
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
@@ -33,9 +34,9 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     };
 
     render() {
-        const { prefixCls, onClick, sortOrder, style } = this.props;
+        const { prefixCls, onClick, sortOrder, style, title } = this.props;
 
-        const iconBtnSize = 'small';
+        const iconBtnSize = 'default';
 
         const upCls = cls(`${prefixCls}-column-sorter-up`, {
             on: sortOrder === strings.SORT_DIRECTIONS[0],
@@ -58,17 +59,22 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
                 role='button'
                 {...ariaProps}
                 tabIndex={-1}
-                style={style}
-                className={`${prefixCls}-column-sorter`}
+                className={`${prefixCls}-column-sorter-wrapper`}
                 onClick={onClick}
                 onKeyPress={e => isEnterPress(e) && onClick(e as any)}
             >
-                <span className={`${upCls}`}>
-                    <IconCaretup size={iconBtnSize} />
-                </span>
-                <span className={`${downCls}`}>
-                    <IconCaretdown size={iconBtnSize} />
-                </span>
+                {title}
+                <div
+                    style={style}
+                    className={`${prefixCls}-column-sorter`}
+                >
+                    <span className={`${upCls}`}>
+                        <IconCaretup size={iconBtnSize} />
+                    </span>
+                    <span className={`${downCls}`}>
+                        <IconCaretdown size={iconBtnSize} />
+                    </span>
+                </div>
             </div>
         );
     }

package/table/Table.tsx

@@ -933,16 +933,22 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const stateSortOrder = get(curQuery, 'sortOrder');
             const defaultSortOrder = get(curQuery, 'defaultSortOrder', false);
             const sortOrder = this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+            const TitleNode = typeof rawTitle !== 'function' && <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle as React.ReactNode}</React.Fragment>;
             if (typeof column.sorter === 'function' || column.sorter === true) {
+                // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+                // both the title and sorting areas are used as the click hot area for sorting。
                 const sorter = (
                     <ColumnSorter
                         key={strings.DEFAULT_KEY_COLUMN_SORTER}
                         sortOrder={sortOrder}
                         onClick={e => this.foundation.handleSort(column, e)}
+                        title={TitleNode}
                     />
                 );
                 useFullRender && (titleMap.sorter = sorter);
                 titleArr.push(sorter);
+            } else {
+                titleArr.push(TitleNode);
             }
 
             const stateFilteredValue = get(curQuery, 'filteredValue');
@@ -964,10 +970,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
             const newTitle =
                 typeof rawTitle === 'function' ?
-                    () => rawTitle(titleMap) :
-                    titleArr.unshift(
-                        <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle}</React.Fragment>
-                    ) && titleArr;
+                    () => rawTitle(titleMap) : titleArr;
 
             column = { ...column, title: newTitle };
         }

package/webpack.config.js

@@ -29,7 +29,9 @@ module.exports = function ({ minimize }) {
                     test: /\.tsx?$/,
                     include: [
                         path.join(rootPath, 'packages/semi-ui'),
-                        path.join(rootPath, 'packages/semi-foundation')
+                        path.join(rootPath, 'packages/semi-foundation'),
+                        path.join(rootPath, 'packages/semi-animation'),
+                        path.join(rootPath, 'packages/semi-animation-react')
                     ],
                     use: [
                         {