@douyinfe/semi-ui 2.18.0-beta.0 → 2.19.0-alpha.0

package/lib/es/tree/treeNode.js

@@ -300,7 +300,11 @@ export default class TreeNode extends PureComponent {
     });
   }
 
-  renderCheckbox() {
+  renderCheckbox(options) {
+    const {
+      label,
+      icon
+    } = options;
     const {
       checked,
       halfChecked,
@@ -317,7 +321,7 @@ export default class TreeNode extends PureComponent {
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
-    }));
+    }, icon, label));
   }
 
   renderIcon() {
@@ -487,6 +491,8 @@ export default class TreeNode extends PureComponent {
     const setsize = _get(rest, ['data', 'children', 'length']);
 
     const posinset = _isString(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
+    const label = this.renderRealLabel();
+    const icon = this.renderIcon();
     return /*#__PURE__*/React.createElement("li", _Object$assign({
       className: nodeCls,
       role: "treeitem",
@@ -506,9 +512,12 @@ export default class TreeNode extends PureComponent {
       style: style
     }, dragProps), this.renderArrow(), /*#__PURE__*/React.createElement("span", {
       className: labelCls
-    }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
+    }, multiple ? this.renderCheckbox({
+      label,
+      icon
+    }) : null, !multiple && icon, !multiple && /*#__PURE__*/React.createElement("span", {
       className: "".concat(prefixcls, "-label-text")
-    }, this.renderRealLabel())));
+    }, label)));
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.18.0-beta.0",
+    "version": "2.19.0-alpha.0",
     "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.19.0-alpha.0",
+        "@douyinfe/semi-foundation": "2.19.0-alpha.0",
+        "@douyinfe/semi-icons": "2.19.0-alpha.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.18.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.19.0-alpha.0",
         "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": "58f801d44b0fb3079606c9e7b060f5c782d37e0a",
     "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.19.0-alpha.0",
         "@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/tree/treeNode.tsx

@@ -220,7 +220,8 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         );
     }
 
-    renderCheckbox() {
+    renderCheckbox(options: { label: React.ReactNode; icon: React.ReactNode }) {
+        const { label, icon } = options;
         const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
@@ -235,7 +236,10 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}
-                />
+                >
+                    {icon}
+                    {label}
+                </Checkbox>
             </div>
         );
     }
@@ -409,6 +413,8 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         });
         const setsize = get(rest, ['data', 'children', 'length']);
         const posinset = isString(rest.pos) ? Number(rest.pos.split('-')[level+1]) + 1 : 1;
+        const label = this.renderRealLabel();
+        const icon = this.renderIcon();
         return (
             <li
                 className={nodeCls}
@@ -433,9 +439,9 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                 <span
                     className={labelCls}
                 >
-                    {multiple ? this.renderCheckbox() : null}
-                    {this.renderIcon()}
-                    <span className={`${prefixcls}-label-text`}>{this.renderRealLabel()}</span>
+                    {multiple ? this.renderCheckbox({ label, icon }) : null}
+                    {!multiple && icon}
+                    {!multiple && <span className={`${prefixcls}-label-text`}>{label}</span> }
                 </span>
             </li>
         );

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: {