@douyinfe/semi-ui 2.0.9-alpha.4 → 2.1.0-alpha.3

package/lib/es/tabs/TabPaneTransition.js

@@ -5,8 +5,7 @@ import React from 'react';
 import { Transition } from '@douyinfe/semi-animation-react';
 import { toInteger } from 'lodash-es';
 
-const TabPaneTransition = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const TabPaneTransition = (props = {}) => {
   const direction = props.direction ? 1 : -1;
   const {
     mode
@@ -46,11 +45,10 @@ const TabPaneTransition = function () {
           duration: 200
         }
       }
-    }, motion), typeof props.children === 'function' ? _ref => {
-      let {
-        translateY,
-        opacity
-      } = _ref;
+    }, motion), typeof props.children === 'function' ? ({
+      translateY,
+      opacity
+    }) => {
       // delete translateX in 0 in case of zIndex problems.
       const finalState = toInteger(translateY) === 0 ? {
         opacity
@@ -85,11 +83,10 @@ const TabPaneTransition = function () {
         duration: 200
       }
     }
-  }, motion), typeof props.children === 'function' ? _ref2 => {
-    let {
-      translateX,
-      opacity
-    } = _ref2;
+  }, motion), typeof props.children === 'function' ? ({
+    translateX,
+    opacity
+  }) => {
     // delete translateX in 0 in case of zIndex problems.
     const finalState = toInteger(translateX) === 0 ? {
       opacity

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

@@ -1,4 +1,4 @@
-import { RefObject, ReactElement, MouseEvent, RefCallback, ReactNode } from 'react';
+import { MouseEvent, ReactElement, ReactNode, RefCallback, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import TabsFoundation, { TabsAdapter } from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
 import BaseComponent from '../_base/baseComponent';
@@ -32,6 +32,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPaneMotion: PropTypes.Requireable<boolean | object>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
+        onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: TabsProps;
     contentRef: RefObject<HTMLDivElement>;
@@ -45,6 +46,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];
+    deleteTabItem: (tabKey: string, event: MouseEvent<HTMLDivElement>) => void;
     render(): ReactNode;
 }
 export default Tabs;

package/lib/es/tabs/index.js

@@ -5,6 +5,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
@@ -26,7 +27,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tabs/const
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import TabsFoundation from '@douyinfe/semi-foundation/lib/es/tabs/foundation';
-import { isEqual, pick, omit } from 'lodash-es';
+import { isEqual, omit, pick } from 'lodash-es';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/tabs/tabs.css';
 import TabBar from './TabBar';
@@ -87,6 +88,11 @@ class Tabs extends BaseComponent {
       });
     };
 
+    this.deleteTabItem = (tabKey, event) => {
+      event.stopPropagation();
+      this.foundation.handleTabDelete(tabKey);
+    };
+
     this.foundation = new TabsFoundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
@@ -119,13 +125,15 @@ class Tabs extends BaseComponent {
               tab,
               icon,
               disabled,
-              itemKey
+              itemKey,
+              closable
             } = child.props;
             return {
               tab,
               icon,
               disabled,
-              itemKey
+              itemKey,
+              closable
             };
           }
 
@@ -136,6 +144,61 @@ class Tabs extends BaseComponent {
           panes
         });
       },
+      collectActiveKey: () => {
+        let panes = [];
+        const {
+          tabList,
+          children,
+          activeKey: propsActiveKey
+        } = this.props;
+
+        if (typeof propsActiveKey !== 'undefined') {
+          return;
+        }
+
+        const {
+          activeKey
+        } = this.state;
+
+        if (_Array$isArray(tabList) && tabList.length) {
+          panes = tabList;
+        } else {
+          var _context3;
+
+          panes = _mapInstanceProperty(_context3 = React.Children).call(_context3, children, child => {
+            if (child) {
+              const {
+                tab,
+                icon,
+                disabled,
+                itemKey,
+                closable
+              } = child.props;
+              return {
+                tab,
+                icon,
+                disabled,
+                itemKey,
+                closable
+              };
+            }
+
+            return undefined;
+          });
+        }
+
+        if (_findIndexInstanceProperty(panes).call(panes, p => p.itemKey === activeKey) === -1) {
+          if (panes.length > 0) {
+            this.setState({
+              activeKey: panes[0].itemKey
+            });
+          } else {
+            this.setState({
+              activeKey: ''
+            });
+          }
+        }
+      },
       notifyTabClick: (activeKey, event) => {
         this.props.onTabClick(activeKey, event);
       },
@@ -148,14 +211,14 @@ class Tabs extends BaseComponent {
         });
       },
       getDefaultActiveKeyFromChildren: () => {
-        var _context3;
+        var _context4;
 
         const {
           tabList,
           children
         } = this.props;
         let activeKey = '';
-        const list = tabList ? tabList : _mapInstanceProperty(_context3 = React.Children.toArray(children)).call(_context3, child => /*#__PURE__*/isValidElement(child) ? child.props : null);
+        const list = tabList ? tabList : _mapInstanceProperty(_context4 = React.Children.toArray(children)).call(_context4, child => /*#__PURE__*/isValidElement(child) ? child.props : null);
 
         _forEachInstanceProperty(list).call(list, item => {
           if (item && !activeKey && !item.disabled) {
@@ -164,6 +227,9 @@ class Tabs extends BaseComponent {
         });
 
         return activeKey;
+      },
+      notifyTabDelete: tabKey => {
+        this.props.onTabClose && this.props.onTabClose(tabKey);
       }
     });
   }
@@ -179,12 +245,12 @@ class Tabs extends BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
-    var _context4, _context5;
+    var _context5, _context6;
 
     // Panes state acts on tab bar, no need to compare TabPane children
-    const prevChildrenProps = _mapInstanceProperty(_context4 = React.Children.toArray(prevProps.children)).call(_context4, child => pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
+    const prevChildrenProps = _mapInstanceProperty(_context5 = React.Children.toArray(prevProps.children)).call(_context5, child => pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
 
-    const nowChildrenProps = _mapInstanceProperty(_context5 = React.Children.toArray(this.props.children)).call(_context5, child => pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
+    const nowChildrenProps = _mapInstanceProperty(_context6 = React.Children.toArray(this.props.children)).call(_context6, child => pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
 
     const isTabListType = this.props.tabList || prevProps.tabList;
 
@@ -202,7 +268,7 @@ class Tabs extends BaseComponent {
   }
 
   render() {
-    var _context6, _context7;
+    var _context7, _context8;
 
     const _a = this.props,
           {
@@ -230,11 +296,11 @@ class Tabs extends BaseComponent {
     } = this.state;
     const tabWrapperCls = cls(className, {
       [cssClasses.TABS]: true,
-      [_concatInstanceProperty(_context6 = "".concat(cssClasses.TABS, "-")).call(_context6, tabPosition)]: tabPosition
+      [_concatInstanceProperty(_context7 = "".concat(cssClasses.TABS, "-")).call(_context7, tabPosition)]: tabPosition
     });
     const tabContentCls = cls({
       [cssClasses.TABS_CONTENT]: true,
-      [_concatInstanceProperty(_context7 = "".concat(cssClasses.TABS_CONTENT, "-")).call(_context7, tabPosition)]: tabPosition
+      [_concatInstanceProperty(_context8 = "".concat(cssClasses.TABS_CONTENT, "-")).call(_context8, tabPosition)]: tabPosition
     });
     const tabBarProps = {
       activeKey,
@@ -246,7 +312,8 @@ class Tabs extends BaseComponent {
       style: tabBarStyle,
       tabBarExtraContent,
       tabPosition,
-      type
+      type,
+      deleteTabItem: this.deleteTabItem
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : /*#__PURE__*/React.createElement(TabBar, _Object$assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();
@@ -291,7 +358,8 @@ Tabs.propTypes = {
   tabList: PropTypes.array,
   tabPaneMotion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
-  type: PropTypes.oneOf(strings.TYPE_MAP)
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  onTabClose: PropTypes.func
 };
 Tabs.defaultProps = {
   children: [],
@@ -303,6 +371,7 @@ Tabs.defaultProps = {
   size: 'large',
   tabPaneMotion: true,
   tabPosition: 'top',
-  type: 'line'
+  type: 'line',
+  onTabClose: () => undefined
 };
 export default Tabs;

package/lib/es/tabs/interface.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, ComponentType, CSSProperties } from 'react';
+import { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 export declare type TabType = 'line' | 'card' | 'button';
 export declare type TabSize = 'small' | 'medium' | 'large';
@@ -8,6 +8,7 @@ export interface PlainTab {
     icon?: ReactNode;
     itemKey: string;
     tab?: ReactNode;
+    closable: boolean;
 }
 export interface TabsProps {
     activeKey?: string;
@@ -30,6 +31,7 @@ export interface TabsProps {
     tabPaneMotion?: boolean;
     tabPosition?: TabPosition;
     type?: TabType;
+    onTabClose?: (tabKey: string) => void;
 }
 export interface TabBarProps {
     activeKey?: string;
@@ -44,6 +46,8 @@ export interface TabBarProps {
     type?: TabType;
     dropdownClassName?: string;
     dropdownStyle?: CSSProperties;
+    closable?: boolean;
+    deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
 }
 export interface TabPaneProps {
     className?: string;
@@ -52,6 +56,7 @@ export interface TabPaneProps {
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;
+    closable?: boolean;
 }
 export interface TabPaneTransitionProps {
     [key: string]: any;

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

@@ -29,6 +29,7 @@ export interface TagInputProps {
     onFocus?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onInputChange?: (value: string, e: React.MouseEvent<HTMLInputElement>) => void;
     onInputExceed?: ((value: string) => void);
+    onKeyDown?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onRemove?: (removedValue: string, idx: number) => void;
     placeholder?: string;
     prefix?: React.ReactNode;
@@ -78,6 +79,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onInputExceed: PropTypes.Requireable<(...args: any[]) => any>;
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -101,6 +103,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onInputExceed: (...args: any[]) => void;
         onAdd: (...args: any[]) => void;
         onRemove: (...args: any[]) => void;
+        onKeyDown: (...args: any[]) => void;
     };
     inputRef: React.RefObject<HTMLInputElement>;
     constructor(props: TagInputProps);

package/lib/es/tagInput/index.js

@@ -112,6 +112,9 @@ class TagInput extends BaseComponent {
       },
       notifyTagRemove: (v, idx) => {
         this.props.onRemove(v, idx);
+      },
+      notifyKeyDown: e => {
+        this.props.onKeyDown(e);
       }
     });
   }
@@ -360,6 +363,7 @@ TagInput.propTypes = {
   onInputExceed: PropTypes.func,
   onAdd: PropTypes.func,
   onRemove: PropTypes.func,
+  onKeyDown: PropTypes.func,
   size: PropTypes.oneOf(strings.SIZE_SET),
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -382,6 +386,7 @@ TagInput.defaultProps = {
   onExceed: noop,
   onInputExceed: noop,
   onAdd: noop,
-  onRemove: noop
+  onRemove: noop,
+  onKeyDown: noop
 };
 export default TagInput;

package/lib/es/timePicker/Combobox.js

@@ -41,12 +41,11 @@ class Combobox extends BaseComponent {
       });
     };
 
-    this.onItemChange = _ref => {
-      let {
-        type,
-        value,
-        disabled
-      } = _ref;
+    this.onItemChange = ({
+      type,
+      value,
+      disabled
+    }) => {
       // eslint-disable-next-line prefer-const
       let {
         onChange,

package/lib/es/timePicker/TimeInput.js

@@ -79,18 +79,10 @@ class TimeInput extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
-      notifyChange: function () {
-        return _this.props.onChange(...arguments);
-      },
-      notifyFocus: function () {
-        return _this.props.onFocus(...arguments);
-      },
-      notifyBlur: function () {
-        return _this.props.onBlur(...arguments);
-      }
+      notifyChange: (...args) => this.props.onChange(...args),
+      notifyFocus: (...args) => this.props.onFocus(...args),
+      notifyBlur: (...args) => this.props.onBlur(...args)
     });
   }
 

package/lib/es/timePicker/TimePicker.js

@@ -36,10 +36,7 @@ import '@douyinfe/semi-foundation/lib/es/timePicker/timePicker.css';
 import Trigger from '../trigger';
 export default class TimePicker extends BaseComponent {
   constructor(props) {
-    var _this;
-
     super(props);
-    _this = this;
 
     this.onCurrentSelectPanelChange = currentSelectPanel => {
       this.setState({
@@ -51,20 +48,19 @@ export default class TimePicker extends BaseComponent {
 
     this.handleInput = value => this.foundation.handleInputChange(value);
 
-    this.createPanelProps = function () {
-      let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    this.createPanelProps = (index = 0) => {
       const {
         panels,
         panelFooter,
         panelHeader,
         locale
-      } = _this.props;
+      } = this.props;
       const panelProps = {
         panelHeader,
         panelFooter
       };
 
-      if (_this.adapter.isRangePicker()) {
+      if (this.adapter.isRangePicker()) {
         const defaultHeaderMap = {
           0: locale.begin,
           1: locale.end
@@ -110,8 +106,6 @@ export default class TimePicker extends BaseComponent {
   }
 
   get adapter() {
-    var _this2 = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
       togglePanel: show => {
         this.setState({
@@ -145,18 +139,10 @@ export default class TimePicker extends BaseComponent {
           this.clickOutSideHandler = null;
         }
       },
-      notifyOpenChange: function () {
-        return _this2.props.onOpenChange(...arguments);
-      },
-      notifyChange: function () {
-        return _this2.props.onChange && _this2.props.onChange(...arguments);
-      },
-      notifyFocus: function () {
-        return _this2.props.onFocus && _this2.props.onFocus(...arguments);
-      },
-      notifyBlur: function () {
-        return _this2.props.onBlur && _this2.props.onBlur(...arguments);
-      },
+      notifyOpenChange: (...args) => this.props.onOpenChange(...args),
+      notifyChange: (...args) => this.props.onChange && this.props.onChange(...args),
+      notifyFocus: (...args) => this.props.onFocus && this.props.onFocus(...args),
+      notifyBlur: (...args) => this.props.onBlur && this.props.onBlur(...args),
       isRangePicker: () => this.props.type === strings.TYPE_TIME_RANGE_PICKER
     });
   }

package/lib/es/timePicker/index.js

@@ -9,21 +9,18 @@ export default class LocaleTimePicker extends React.PureComponent {
     const {
       type
     } = this.props;
-    return /*#__PURE__*/React.createElement(ConfigContext.Consumer, null, _ref => {
-      let {
-        timeZone
-      } = _ref;
-      return /*#__PURE__*/React.createElement(LocaleConsumer, {
-        componentName: "TimePicker"
-      }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/React.createElement(BaseTimePicker, _Object$assign({
-        timeZone: timeZone,
-        placeholder: get(locale, ['placeholder', type])
-      }, this.props, {
-        locale: locale,
-        localeCode: localeCode,
-        dateFnsLocale: dateFnsLocale
-      })));
-    });
+    return /*#__PURE__*/React.createElement(ConfigContext.Consumer, null, ({
+      timeZone
+    }) => /*#__PURE__*/React.createElement(LocaleConsumer, {
+      componentName: "TimePicker"
+    }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/React.createElement(BaseTimePicker, _Object$assign({
+      timeZone: timeZone,
+      placeholder: get(locale, ['placeholder', type])
+    }, this.props, {
+      locale: locale,
+      localeCode: localeCode,
+      dateFnsLocale: dateFnsLocale
+    }))));
   }
 
 }

package/lib/es/toast/ToastTransition.js

@@ -2,8 +2,7 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 // @ts-ignore  Currently there is no types for semi-animation-react
 import { Transition } from '@douyinfe/semi-animation-react';
 import React from 'react';
-export default function ToastTransition() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export default function ToastTransition(props = {}) {
   let {
     motion = {}
   } = props;
@@ -43,14 +42,11 @@ export default function ToastTransition() {
         duration: 200
       }
     }
-  }, motion), typeof props.children === 'function' ? _ref => {
-    let {
-      translateY,
-      opacity
-    } = _ref;
-    return props.children({
-      transform: "translateY(".concat(translateY, "%)"),
-      opacity
-    });
-  } : props.children);
+  }, motion), typeof props.children === 'function' ? ({
+    translateY,
+    opacity
+  }) => props.children({
+    transform: "translateY(".concat(translateY, "%)"),
+    opacity
+  }) : props.children);
 }

package/lib/es/toast/useToast/index.js

@@ -23,12 +23,9 @@ function usePatchElement() {
       config
     }, ...originElements]);
     return id => {
-      setElements(originElements => _filterInstanceProperty(originElements).call(originElements, _ref => {
-        let {
-          config: configOfCurrentElement
-        } = _ref;
-        return configOfCurrentElement.id !== id;
-      }));
+      setElements(originElements => _filterInstanceProperty(originElements).call(originElements, ({
+        config: configOfCurrentElement
+      }) => configOfCurrentElement.id !== id));
     };
   }
 

package/lib/es/tooltip/TooltipStyledTransition.js

@@ -10,8 +10,7 @@ import getMotionObjFromProps from '@douyinfe/semi-foundation/lib/es/utils/getMot
 const enterCls = "".concat(cssClasses.PREFIX, "-bounceIn");
 const leaveCls = "".concat(cssClasses.PREFIX, "-zoomOut");
 
-const TooltipTransition = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const TooltipTransition = (props = {}) => {
   const {
     children
   } = props;
@@ -20,18 +19,15 @@ const TooltipTransition = function () {
     enter: enterCls,
     leave: leaveCls,
     duration: '100ms'
-  }, motion), typeof children === 'function' ? _ref => {
-    let {
-      animateCls,
-      animateEvents,
-      animateStyle
-    } = _ref;
-    return children({
-      animateCls,
-      animateEvents,
-      animateStyle
-    });
-  } : children);
+  }, motion), typeof children === 'function' ? ({
+    animateCls,
+    animateEvents,
+    animateStyle
+  }) => children({
+    animateCls,
+    animateEvents,
+    animateStyle
+  }) : children);
 };
 
 export default TooltipTransition;

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

@@ -31,6 +31,7 @@ export interface TooltipProps extends BaseProps {
     content?: React.ReactNode;
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
     spacing?: number;
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
@@ -77,6 +78,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefixCls: PropTypes.Requireable<string>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         spacing: PropTypes.Requireable<number>;
         showArrow: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         zIndex: PropTypes.Requireable<number>;
@@ -105,6 +107,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         mouseEnterDelay: 50;
         mouseLeaveDelay: 50;
         onVisibleChange: (...args: any[]) => void;
+        onClickOutSide: (...args: any[]) => void;
         spacing: 8;
         showArrow: boolean;
         arrowBounding: {