@douyinfe/semi-ui 2.19.0-alpha.5 → 2.19.0-alpha.8

package/lib/es/form/field.d.ts

@@ -74,7 +74,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onListScroll?: (e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void;
     children?: import("react").ReactNode;
     preventScroll?: boolean;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "getPopupContainer" | "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "motion"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

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.js

@@ -203,16 +203,26 @@ class Radio extends BaseComponent {
       ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
     }, addonClassName);
 
-    const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
-      className: addonCls,
-      style: addonStyle,
-      id: addonId,
-      "x-semi-prop": "children"
-    }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefix, "-extra"),
-      id: extraId,
-      "x-semi-prop": "extra"
-    }, extra) : null);
+    const renderContent = () => {
+      if (!children && !extra) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls(["".concat(prefix, "-content"), {
+          ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+        }])
+      }, children ? /*#__PURE__*/React.createElement("span", {
+        className: addonCls,
+        style: addonStyle,
+        id: addonId,
+        "x-semi-prop": "children"
+      }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefix, "-extra"),
+        id: extraId,
+        "x-semi-prop": "extra"
+      }, extra) : null);
+    };
 
     return /*#__PURE__*/React.createElement("label", {
       style: style,
@@ -233,9 +243,7 @@ class Radio extends BaseComponent {
       focusInner: focusVisible && !focusOuter,
       onInputFocus: this.handleFocusVisible,
       onInputBlur: this.handleBlur
-    })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefix, "-isCardRadioGroup_content")
-    }, renderContent()) : renderContent());
+    })), renderContent());
   }
 
 }

package/lib/es/radio/radioGroup.js

@@ -22,7 +22,7 @@ class RadioGroup extends BaseComponent {
     this.getFormatName = () => this.props.name || 'default';
 
     this.state = {
-      value: undefined
+      value: props.value || props.defaultValue
     };
     this.foundation = new RadioGroupFoundation(this.adapter);
   }

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/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<4 | 2 | 1 | 3 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/package.json

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

@@ -254,18 +254,18 @@ _RadioGroup.story = {
 
 export const RadioWithVertical = () => {
   return (
-    <Radio.Group>
-      <Radio value="A" displayMode="vertical">
+    <Radio.Group direction="vertical">
+      <Radio value="A">
         无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
         change the header, show/hide various UI elements and to enable full-screen mode by default.
       </Radio>
-      <Radio value="C" displayMode="vertical">
+      <Radio value="C">
         C
       </Radio>
-      <Radio value="D" displayMode="vertical">
+      <Radio value="D">
         D
       </Radio>
-      <Radio value="E" displayMode="vertical">
+      <Radio value="E">
         E
       </Radio>
     </Radio.Group>

package/radio/radio.tsx

@@ -268,20 +268,25 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
             [`${prefix}-focus`]: focusVisible && isButtonRadio,
         }, addonClassName);
-        const renderContent = () => (
-            <>
-                {children ? (
-                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
-                        {children}
-                    </span>
-                ) : null}
-                {extra && !isButtonRadio ? (
-                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
-                        {extra}
-                    </div>
-                ) : null}
-            </>
-        );
+        const renderContent = () => {
+            if (!children && !extra) {
+                return null;
+            }
+            return (
+                <div className={cls([`${prefix}-content`, { [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup }])}>
+                    {children ? (
+                        <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
+                            {children}
+                        </span>
+                    ) : null}
+                    {extra && !isButtonRadio ? (
+                        <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
+                            {extra}
+                        </div>
+                    ) : null}
+                </div>
+            );
+        };
 
         return (
             <label
@@ -307,11 +312,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {
-                    isCardRadioGroup ?
-                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
-                        renderContent()
-                }
+                {renderContent()}
             </label>
         );
     }

package/radio/radioGroup.tsx

@@ -88,7 +88,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     constructor(props: RadioGroupProps) {
         super(props);
         this.state = {
-            value: undefined,
+            value: props.value || props.defaultValue,
         };
         this.foundation = new RadioGroupFoundation(this.adapter);
     }

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 = (