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

package/radio/radioGroup.tsx

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

package/table/ColumnFilter.tsx

@@ -164,13 +164,12 @@ 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="default"
+                    size="small"
                 />
             </div>
         );

package/table/ColumnSorter.tsx

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

package/table/Table.tsx

@@ -933,22 +933,16 @@ 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');
@@ -970,7 +964,10 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
             const newTitle =
                 typeof rawTitle === 'function' ?
-                    () => rawTitle(titleMap) : titleArr;
+                    () => rawTitle(titleMap) :
+                    titleArr.unshift(
+                        <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle}</React.Fragment>
+                    ) && titleArr;
 
             column = { ...column, title: newTitle };
         }

package/tabs/TabBar.tsx

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

package/transfer/index.tsx

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

package/webpack.config.js

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