@douyinfe/semi-ui 2.19.0-alpha.6 → 2.19.0-alpha.7

package/lib/es/popconfirm/index.d.ts

@@ -27,13 +27,15 @@ 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;
 }
 export default class Popconfirm extends BaseComponent<PopconfirmProps, PopconfirmState> {
     static contextType: React.Context<ContextValue>;

package/lib/es/popconfirm/index.js

@@ -44,6 +44,8 @@ export default class Popconfirm extends BaseComponent {
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
     this.state = {
+      cancelLoading: false,
+      confirmLoading: false,
       visible: props.defaultVisible || false
     };
     this.foundation = new PopconfirmFoundation(this.adapter);
@@ -67,6 +69,12 @@ export default class Popconfirm extends BaseComponent {
       setVisible: visible => this.setState({
         visible
       }),
+      updateConfirmLoading: loading => this.setState({
+        confirmLoading: loading
+      }),
+      updateCancelLoading: loading => this.setState({
+        cancelLoading: loading
+      }),
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
       notifyVisibleChange: visible => this.props.onVisibleChange(visible),
@@ -83,15 +91,21 @@ export default class Popconfirm extends BaseComponent {
       cancelButtonProps,
       okButtonProps
     } = this.props;
+    const {
+      cancelLoading,
+      confirmLoading
+    } = this.state;
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Popconfirm"
     }, (locale, localeCode) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _Object$assign({
       type: cancelType,
-      onClick: this.handleCancel
+      onClick: this.handleCancel,
+      loading: cancelLoading
     }, cancelButtonProps), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, _Object$assign({
       type: okType,
       theme: "solid",
-      onClick: this.handleConfirm
+      onClick: this.handleConfirm,
+      loading: confirmLoading
     }, okButtonProps), okText || _get(locale, 'confirm'))));
   }
 
@@ -113,35 +127,39 @@ export default class Popconfirm extends BaseComponent {
     });
     const showTitle = title !== null && typeof title !== 'undefined';
     const showContent = content !== null || typeof content !== 'undefined';
-    return /*#__PURE__*/React.createElement("div", {
-      className: popCardCls,
-      onClick: this.stopImmediatePropagation,
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-inner")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header")
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "".concat(prefixCls, "-header-icon"),
-      "x-semi-prop": "icon"
-    }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header-body")
-    }, showTitle ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header-title"),
-      "x-semi-prop": "title"
-    }, title) : null, showContent ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header-content"),
-      "x-semi-prop": "content"
-    }, content) : null), /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(prefixCls, "-btn-close"),
-      icon: /*#__PURE__*/React.createElement(IconClose, null),
-      size: "small",
-      theme: 'borderless',
-      type: cancelType,
-      onClick: this.handleCancel
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer")
-    }, this.renderControls())));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        className: popCardCls,
+        onClick: this.stopImmediatePropagation,
+        style: style
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-inner")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-header")
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "".concat(prefixCls, "-header-icon"),
+        "x-semi-prop": "icon"
+      }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-header-body")
+      }, showTitle ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-header-title"),
+        "x-semi-prop": "title"
+      }, title) : null, showContent ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-header-content"),
+        "x-semi-prop": "content"
+      }, content) : null), /*#__PURE__*/React.createElement(Button, {
+        className: "".concat(prefixCls, "-btn-close"),
+        icon: /*#__PURE__*/React.createElement(IconClose, null),
+        size: "small",
+        theme: 'borderless',
+        type: cancelType,
+        onClick: this.handleCancel
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-footer")
+      }, this.renderControls())))
+    );
   }
 
   render() {

package/lib/es/radio/radio.d.ts

@@ -81,7 +81,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/tabs/TabBar.js

@@ -125,7 +125,11 @@ class TabBar extends React.Component {
       var _context5, _context6;
 
       if (_isEmpty(items)) {
-        return null;
+        return /*#__PURE__*/React.createElement(Button, {
+          disabled: true,
+          icon: icon,
+          theme: "borderless"
+        });
       }
 
       const {

package/lib/es/timePicker/TimePicker.d.ts

@@ -99,11 +99,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+declare const TimeShape: PropTypes.Requireable<string | number | string[] | Date | number[] | Date[]>;
 export { TimeShape };

package/lib/es/timePicker/index.d.ts

@@ -19,11 +19,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: import("prop-types").Requireable<string | number | string[] | Date | number[] | Date[]>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;

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/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/upload/index.d.ts

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.19.0-alpha.6",
+    "version": "2.19.0-alpha.7",
     "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.6",
-        "@douyinfe/semi-foundation": "2.19.0-alpha.6",
-        "@douyinfe/semi-icons": "2.19.0-alpha.6",
+        "@douyinfe/semi-animation-react": "2.19.0-alpha.7",
+        "@douyinfe/semi-foundation": "2.19.0-alpha.7",
+        "@douyinfe/semi-icons": "2.19.0-alpha.7",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.19.0-alpha.6",
+        "@douyinfe/semi-theme-default": "2.19.0-alpha.7",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f131defbb2a909ebb7035eea975bf3466908ac15",
+    "gitHead": "e4926d98b1e98ec52a3bc8b7c29a51bf223b8208",
     "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.6",
+        "@douyinfe/semi-scss-compile": "2.19.0-alpha.7",
         "@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 = (