@douyinfe/semi-ui 2.18.0-beta.0 → 2.18.1

package/lib/es/transfer/index.js

@@ -280,7 +280,8 @@ class Transfer extends BaseComponent {
     const noMatch = inSearchMode && searchResult.size === 0;
     const emptySearch = emptyContent.search ? emptyContent.search : locale.emptySearch;
     const emptyLeft = emptyContent.left ? emptyContent.left : locale.emptyLeft;
-    const emptyCom = this.renderEmpty('left', inputValue ? emptySearch : emptyLeft);
+    const emptyDataCom = this.renderEmpty('left', emptyLeft);
+    const emptySearchCom = this.renderEmpty('left', emptySearch);
     const loadingCom = /*#__PURE__*/React.createElement(Spin, null);
     let content = null;
 
@@ -290,7 +291,11 @@ class Transfer extends BaseComponent {
         break;
 
       case noMatch:
-        content = emptyCom;
+        content = emptySearchCom;
+        break;
+
+      case data.length === 0:
+        content = emptyDataCom;
         break;
 
       case type === strings.TYPE_TREE_TO_LIST:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.18.0-beta.0",
+    "version": "2.18.1",
     "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.18.0-beta.0",
-        "@douyinfe/semi-foundation": "2.18.0-beta.0",
-        "@douyinfe/semi-icons": "2.18.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.18.1",
+        "@douyinfe/semi-foundation": "2.18.1",
+        "@douyinfe/semi-icons": "2.18.1",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.18.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.18.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d390ac3fde2f62a63087a9ab8ea1dd1166432069",
+    "gitHead": "42e7d9b618dc5cabad8d5ce7287f0c5f5d7691bd",
     "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.18.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.18.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/radio/radio.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { noop } from 'lodash';
+import { noop, isUndefined, isBoolean } from 'lodash';
 
 import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/radio/radioFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
@@ -52,6 +52,7 @@ export interface RadioState {
     addonId?: string;
     extraId?: string;
     focusVisible?: boolean;
+    checked?: boolean;
 }
 
 export { RadioChangeEvent };
@@ -104,11 +105,22 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             hover: false,
             addonId: props.addonId,
             extraId: props.extraId,
+            checked: props.checked || props.defaultChecked || false,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
     }
 
+    componentDidUpdate(prevProps: RadioProps) {
+        if (this.props.checked !== prevProps.checked) {
+            if (isUndefined(this.props.checked)) {
+                this.foundation.setChecked(false);
+            } else if (isBoolean(this.props.checked)) {
+                this.foundation.setChecked(this.props.checked);
+            }
+        }
+    }
+
     get adapter(): RadioAdapter {
         return {
             ...super.adapter,
@@ -118,6 +130,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             setAddonId: () => {
                 this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
             },
+            setChecked: (checked: boolean) => {
+                this.setState({ checked });
+            },
             setExtraId: () => {
                 this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             },
@@ -146,6 +161,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             const { radioGroup } = this.context;
             radioGroup.onChange && radioGroup.onChange(e);
         }
+        !('checked' in this.props) && this.foundation.setChecked(e.target.checked);
         onChange && onChange(e);
     };
 
@@ -171,7 +187,6 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         const {
             addonClassName,
             addonStyle,
-            checked,
             disabled,
             style,
             className,
@@ -194,8 +209,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const { hover: isHover, addonId, extraId, focusVisible } = this.state;
-        let props = {};
+        const { hover: isHover, addonId, extraId, focusVisible, checked, } = this.state;
+        const props: Record<string, any> = {
+            checked,
+            disabled,
+        };
 
         if (this.isInGroup()) {
             realChecked = this.context.radioGroup.value === propValue;
@@ -206,13 +224,17 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isPureCardRadioGroup = this.context.radioGroup.isPureCardRadio;
             buttonSize = this.context.radioGroup.buttonSize;
             realPrefixCls = prefixCls || this.context.radioGroup.prefixCls;
-            props = { checked: realChecked, disabled: isDisabled };
+            props.checked = realChecked;
+            props.disabled = isDisabled;
         } else {
             realChecked = checked;
             isDisabled = disabled;
             realMode = mode;
             isButtonRadioComponent = type === 'button';
             realPrefixCls = prefixCls;
+            isButtonRadioGroup = type === strings.TYPE_BUTTON;
+            isPureCardRadioGroup = type === strings.TYPE_PURECARD;
+            isCardRadioGroup = type === strings.TYPE_CARD || isPureCardRadioGroup;
         }
         const isButtonRadio = typeof isButtonRadioGroup === 'undefined' ? isButtonRadioComponent : isButtonRadioGroup;
 

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/tabs/TabBar.tsx

@@ -147,7 +147,13 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
 
     renderCollapse = (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end'): ReactNode => {
         if (isEmpty(items)) {
-            return null;
+            return (
+                <Button
+                    disabled={true}
+                    icon={icon}
+                    theme="borderless"
+                />
+            );
         }
         const { dropdownClassName, dropdownStyle } = this.props;
         const { rePosKey } = this.state;

package/transfer/index.tsx

@@ -393,7 +393,9 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         const noMatch = inSearchMode && searchResult.size === 0;
         const emptySearch = emptyContent.search ? emptyContent.search : locale.emptySearch;
         const emptyLeft = emptyContent.left ? emptyContent.left : locale.emptyLeft;
-        const emptyCom = this.renderEmpty('left', inputValue ? emptySearch : emptyLeft);
+        const emptyDataCom = this.renderEmpty('left', emptyLeft);
+        const emptySearchCom = this.renderEmpty('left', emptySearch);
+
         const loadingCom = <Spin />;
 
         let content: React.ReactNode = null;
@@ -402,7 +404,10 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 content = loadingCom;
                 break;
             case noMatch:
-                content = emptyCom;
+                content = emptySearchCom;
+                break;
+            case data.length === 0:
+                content = emptyDataCom;
                 break;
             case type === strings.TYPE_TREE_TO_LIST:
                 content = (

package/webpack.config.js

@@ -22,13 +22,16 @@ module.exports = function ({ minimize }) {
             library: 'SemiUI',
             libraryTarget: 'umd'
         },
+        
         module: {
             rules: [
                 {
                     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: [
                         {
@@ -45,7 +48,7 @@ module.exports = function ({ minimize }) {
                         }
                     ]
                 },
-                { 
+                {
                     test: /semi-icons\/.+\.css$/,
                     loaders: 'null-loader'
                 },
@@ -66,7 +69,14 @@ module.exports = function ({ minimize }) {
             new HashedModuleIdsPlugin()
         ],
         resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+            alias: {
+                "@douyinfe/semi-foundation": path.resolve(__dirname, "../semi-foundation"),
+                "@douyinfe/semi-icons": path.resolve(__dirname, "../semi-icons"),
+                "@douyinfe/semi-illustrations":path.resolve(__dirname, "../semi-illustrations"),
+                "@douyinfe/semi-animation":path.resolve(__dirname, "../semi-animation"),
+                "@douyinfe/semi-animation-react":path.resolve(__dirname, "../semi-animation-react")
+            },
         },
         externals: {
             react: {