@douyinfe/semi-ui 2.19.0-alpha.0 → 2.19.0-alpha.3

package/package.json

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

package/popconfirm/_story/popconfirm.stories.js

@@ -167,4 +167,40 @@ export const ClickOutSideDemo = () => {
 
 ClickOutSideDemo.story = {
   name: 'ClickOutSideDemo',
-};
+};
+
+export const PromiseCallback = () => {
+  const onConfirm = () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        console.log('ccc');
+        resolve(1);
+      }, 2000)
+    })
+  };
+
+  const onCancel = () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        console.log('ccc');
+        reject(1);
+      }, 2000)
+    })
+  };
+
+  return (
+    <Popconfirm
+      title="确定是否要保存此修改？"
+      content="此修改将不可逆"
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    >
+      <Button>保存</Button>
+    </Popconfirm>
+  );
+};
+
+PromiseCallback.story = {
+  name: 'PromiseCallbackDemo',
+};
+

package/popconfirm/index.tsx

@@ -35,14 +35,16 @@ export interface PopconfirmProps extends PopoverProps {
     zIndex?: number;
     trigger?: Trigger;
     position?: Position;
-    onCancel?: (e: React.MouseEvent) => void;
-    onConfirm?: (e: React.MouseEvent) => void;
+    onCancel?: (e: React.MouseEvent) => Promise<any> | void;
+    onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
 }
 
 export interface PopconfirmState {
     visible: boolean;
+    cancelLoading: boolean;
+    confirmLoading: boolean;
 }
 
 interface PopProps {
@@ -99,6 +101,8 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         super(props);
 
         this.state = {
+            cancelLoading: false,
+            confirmLoading: false,
             visible: props.defaultVisible || false,
         };
 
@@ -122,8 +126,10 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         return {
             ...super.adapter,
             setVisible: (visible: boolean): void => this.setState({ visible }),
-            notifyConfirm: (e: React.MouseEvent): void => this.props.onConfirm(e),
-            notifyCancel: (e: React.MouseEvent): void => this.props.onCancel(e),
+            updateConfirmLoading: (loading: boolean): void => this.setState({ confirmLoading: loading }),
+            updateCancelLoading: (loading: boolean): void => this.setState({ cancelLoading: loading }),
+            notifyConfirm: (e: React.MouseEvent): Promise<any> | void => this.props.onConfirm(e),
+            notifyCancel: (e: React.MouseEvent): Promise<any> | void => this.props.onCancel(e),
             notifyVisibleChange: (visible: boolean): void => this.props.onVisibleChange(visible),
             notifyClickOutSide: (e: React.MouseEvent) => this.props.onClickOutSide(e),
         };
@@ -141,14 +147,15 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
 
     renderControls() {
         const { okText, cancelText, okType, cancelType, cancelButtonProps, okButtonProps } = this.props;
+        const { cancelLoading, confirmLoading } = this.state;
         return (
             <LocaleConsumer componentName="Popconfirm">
                 {(locale: LocaleObject['Popconfirm'], localeCode: string) => (
                     <>
-                        <Button type={cancelType} onClick={this.handleCancel} {...cancelButtonProps}>
+                        <Button type={cancelType} onClick={this.handleCancel} loading={cancelLoading} {...cancelButtonProps}>
                             {cancelText || get(locale, 'cancel')}
                         </Button>
-                        <Button type={okType} theme="solid" onClick={this.handleConfirm} {...okButtonProps}>
+                        <Button type={okType} theme="solid" onClick={this.handleConfirm} loading={confirmLoading} {...okButtonProps}>
                             {okText || get(locale, 'confirm')}
                         </Button>
                     </>
@@ -171,6 +178,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         const showContent = content !== null || typeof content !== 'undefined';
 
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={popCardCls} onClick={this.stopImmediatePropagation} style={style}>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-header`}>

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/tree/treeNode.tsx

@@ -220,8 +220,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         );
     }
 
-    renderCheckbox(options: { label: React.ReactNode; icon: React.ReactNode }) {
-        const { label, icon } = options;
+    renderCheckbox() {
         const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
@@ -236,10 +235,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}
-                >
-                    {icon}
-                    {label}
-                </Checkbox>
+                />
             </div>
         );
     }
@@ -413,8 +409,6 @@ 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}
@@ -439,9 +433,9 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                 <span
                     className={labelCls}
                 >
-                    {multiple ? this.renderCheckbox({ label, icon }) : null}
-                    {!multiple && icon}
-                    {!multiple && <span className={`${prefixcls}-label-text`}>{label}</span> }
+                    {multiple ? this.renderCheckbox() : null}
+                    {this.renderIcon()}
+                    <span className={`${prefixcls}-label-text`}>{this.renderRealLabel()}</span>
                 </span>
             </li>
         );