@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/tabs/index.js

@@ -1,17 +1,13 @@
 import _pick from "lodash/pick";
 import _isEqual from "lodash/isEqual";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React, { createRef, isValidElement } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -27,35 +23,27 @@ import TabItem from './TabItem';
 import TabsContext from './tabs-context';
 const panePickKeys = ['className', 'style', 'disabled', 'itemKey', 'tab', 'icon'];
 export * from './interface';
-
 class Tabs extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.setContentRef = ref => {
       this.contentRef = {
         current: ref
       };
     };
-
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
     /* istanbul ignore next */
-
-
     this.rePosChildren = (children, activeKey) => {
       const newChildren = [];
       const falttenChildren = React.Children.toArray(children);
-
       if (children.length) {
         newChildren.push(...falttenChildren.filter(child => child.props && child.props.itemKey === activeKey));
         newChildren.push(...falttenChildren.filter(child => child.props && child.props.itemKey !== activeKey));
       }
-
       return newChildren;
     };
-
     this.getActiveItem = () => {
       const {
         activeKey
@@ -64,25 +52,20 @@ class Tabs extends BaseComponent {
         children,
         tabList
       } = this.props;
-
       if (tabList || !Array.isArray(children)) {
         return children;
       }
-
       return React.Children.toArray(children).filter(pane => {
         if ( /*#__PURE__*/isValidElement(pane) && pane.type && pane.type.isTabPane) {
           return pane.props.itemKey === activeKey;
         }
-
         return true;
       });
     };
-
     this.deleteTabItem = (tabKey, event) => {
       event.stopPropagation();
       this.foundation.handleTabDelete(tabKey);
     };
-
     this.foundation = new TabsFoundation(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
@@ -93,7 +76,6 @@ class Tabs extends BaseComponent {
     this.contentRef = /*#__PURE__*/createRef();
     this.contentHeight = 'auto';
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       collectPane: () => {
@@ -101,14 +83,12 @@ class Tabs extends BaseComponent {
           tabList,
           children
         } = this.props;
-
         if (Array.isArray(tabList) && tabList.length) {
           this.setState({
             panes: tabList
           });
           return;
         }
-
         const panes = React.Children.map(children, child => {
           if (child) {
             const {
@@ -126,7 +106,6 @@ class Tabs extends BaseComponent {
               closable
             };
           }
-
           return undefined;
         });
         this.setState({
@@ -140,15 +119,12 @@ class Tabs extends BaseComponent {
           children,
           activeKey: propsActiveKey
         } = this.props;
-
         if (typeof propsActiveKey !== 'undefined') {
           return;
         }
-
         const {
           activeKey
         } = this.state;
-
         if (Array.isArray(tabList) && tabList.length) {
           panes = tabList;
         } else {
@@ -169,11 +145,9 @@ class Tabs extends BaseComponent {
                 closable
               };
             }
-
             return undefined;
           });
         }
-
         if (panes.findIndex(p => p.itemKey === activeKey) === -1) {
           if (panes.length > 0) {
             this.setState({
@@ -216,75 +190,64 @@ class Tabs extends BaseComponent {
       }
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const states = {};
-
     if (!isNullOrUndefined(props.activeKey) && props.activeKey !== state.activeKey) {
       state.prevActiveKey = state.activeKey;
       states.activeKey = props.activeKey;
     }
-
     return states;
   }
-
   componentDidUpdate(prevProps, prevState) {
     // Panes state acts on tab bar, no need to compare TabPane children
     const prevChildrenProps = React.Children.toArray(prevProps.children).map(child => _pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
     const nowChildrenProps = React.Children.toArray(this.props.children).map(child => _pick( /*#__PURE__*/isValidElement(child) ? child.props : null, panePickKeys));
     const isTabListType = this.props.tabList || prevProps.tabList;
-
     if (!_isEqual(this.props.tabList, prevProps.tabList)) {
       this.foundation.handleTabListChange();
     }
-
     if (prevState.activeKey !== this.state.activeKey && prevState.activeKey !== this.state.prevActiveKey) {
       this.setState({
         prevActiveKey: prevState.activeKey
       });
     }
-
     if (prevProps.activeKey !== this.props.activeKey) {
       const newAddedPanelItemKey = (() => {
         const prevItemKeys = new Set(prevChildrenProps.map(p => p.itemKey));
         return nowChildrenProps.map(p => p.itemKey).filter(itemKey => !prevItemKeys.has(itemKey));
       })();
-
       this.setState({
         forceDisableMotion: newAddedPanelItemKey.includes(this.props.activeKey)
       });
-    } // children变化，tabList方式使用时，啥也不用做
+    }
+    // children变化，tabList方式使用时，啥也不用做
     // children变化，非tabList方式使用，需要重新取activeKey。TabPane可能是异步更新的，若不重新取，未设activeKey时，第一个不会自动激活
     // children changed: do nothing in tabList case
     // children changed: recalc activeKey. TabPane could be updated async. If not recalc the first panel will not be activated
-
-
     if (!_isEqual(prevChildrenProps, nowChildrenProps) && !isTabListType) {
       this.foundation.handleTabPanesChange();
     }
   }
-
   render() {
     const _a = this.props,
-          {
-      children,
-      className,
-      collapsible,
-      contentStyle,
-      keepDOM,
-      lazyRender,
-      renderTabBar,
-      size,
-      style,
-      tabBarClassName,
-      tabBarExtraContent,
-      tabBarStyle,
-      tabPaneMotion,
-      tabPosition,
-      type
-    } = _a,
-          restProps = __rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type"]);
-
+      {
+        children,
+        className,
+        collapsible,
+        contentStyle,
+        keepDOM,
+        lazyRender,
+        renderTabBar,
+        size,
+        style,
+        tabBarClassName,
+        tabBarExtraContent,
+        tabBarStyle,
+        tabPaneMotion,
+        tabPosition,
+        type
+      } = _a,
+      restProps = __rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type"]);
     const {
       panes,
       activeKey
@@ -332,9 +295,7 @@ class Tabs extends BaseComponent {
       style: Object.assign({}, contentStyle)
     }, content)));
   }
-
 }
-
 Tabs.TabPane = TabPane;
 Tabs.TabItem = TabItem;
 Tabs.propTypes = {

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

@@ -1,9 +1,9 @@
 import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 import TabBar from './TabBar';
-export declare type TabType = 'line' | 'card' | 'button';
-export declare type TabSize = 'small' | 'medium' | 'large';
-export declare type TabPosition = 'top' | 'left';
+export type TabType = 'line' | 'card' | 'button';
+export type TabSize = 'small' | 'medium' | 'large';
+export type TabPosition = 'top' | 'left';
 export interface PlainTab {
     disabled?: boolean;
     icon?: ReactNode;

package/lib/es/tag/group.js

@@ -25,7 +25,6 @@ export default class TagGroup extends PureComponent {
       key: "_+n",
       onMouseEnter: onPlusNMouseEnter
     }, "+", n);
-
     if (showPopover) {
       nTag = /*#__PURE__*/React.createElement(Popover, Object.assign({
         showArrow: true,
@@ -38,10 +37,8 @@ export default class TagGroup extends PureComponent {
         key: "_+n_Popover"
       }), nTag);
     }
-
     return nTag;
   }
-
   renderMergeTags(tags) {
     const {
       maxTagCount,
@@ -53,16 +50,13 @@ export default class TagGroup extends PureComponent {
     const normalTags = tags.slice(0, maxTagCount);
     const restTags = tags.slice(maxTagCount);
     let nTag = null;
-
     if (n > 0) {
       nTag = this.renderNTag(n, restTags);
       normalTags.push(nTag);
       renderTags = normalTags;
     }
-
     return renderTags;
   }
-
   renderAllTags() {
     const {
       tagList,
@@ -75,17 +69,13 @@ export default class TagGroup extends PureComponent {
       if (mode === 'custom') {
         return tag;
       }
-
       const newTag = Object.assign({}, tag);
-
       if (!newTag.size) {
         newTag.size = size;
       }
-
       if (!newTag.avatarShape) {
         newTag.avatarShape = avatarShape;
       }
-
       if (!newTag.tagKey) {
         if (typeof newTag.children === 'string' || typeof newTag.children === 'number') {
           newTag.tagKey = newTag.children;
@@ -93,21 +83,18 @@ export default class TagGroup extends PureComponent {
           newTag.tagKey = Math.random();
         }
       }
-
       return /*#__PURE__*/React.createElement(Tag, Object.assign({}, newTag, {
         key: newTag.tagKey,
         onClose: (tagChildren, e, tagKey) => {
           if (newTag.onClose) {
             newTag.onClose(tagChildren, e, tagKey);
           }
-
           onTagClose && onTagClose(tagChildren, e, tagKey);
         }
       }));
     });
     return renderTags;
   }
-
   render() {
     const {
       style,
@@ -128,7 +115,6 @@ export default class TagGroup extends PureComponent {
       className: groupCls
     }, tagContents);
   }
-
 }
 TagGroup.defaultProps = {
   style: {},

package/lib/es/tag/index.js

@@ -1,18 +1,13 @@
 import _isString from "lodash/isString";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -36,19 +31,16 @@ export default class Tag extends Component {
     };
     this.close = this.close.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-  } // any other way to achieve this?
-
-
+  }
+  // any other way to achieve this?
   static getDerivedStateFromProps(nextProps) {
     if ('visible' in nextProps) {
       return {
         visible: nextProps.visible
       };
     }
-
     return null;
   }
-
   setVisible(visible) {
     if (!('visible' in this.props)) {
       this.setState({
@@ -56,52 +48,43 @@ export default class Tag extends Component {
       });
     }
   }
-
   close(e, value, tagKey) {
     const {
       onClose
     } = this.props;
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    onClose && onClose(value, e, tagKey); // when user call e.preventDefault() in onClick callback, tag will not hidden
-
+    onClose && onClose(value, e, tagKey);
+    // when user call e.preventDefault() in onClick callback, tag will not hidden
     if (e.defaultPrevented) {
       return;
     }
-
     this.setVisible(false);
   }
-
   handleKeyDown(event) {
     const {
       closable,
       onClick,
       onKeyDown
     } = this.props;
-
     switch (event.key) {
       case "Backspace":
       case "Delete":
         closable && this.close(event, this.props.children, this.props.tagKey);
         handlePrevent(event);
         break;
-
       case "Enter":
         onClick(event);
         handlePrevent(event);
         break;
-
       case 'Escape':
         event.target.blur();
         break;
-
       default:
         break;
     }
-
     onKeyDown && onKeyDown(event);
   }
-
   renderAvatar() {
     const {
       avatarShape,
@@ -113,32 +96,30 @@ export default class Tag extends Component {
     });
     return avatar;
   }
-
   render() {
     const _a = this.props,
-          {
-      tagKey,
-      children,
-      size,
-      color,
-      closable,
-      visible,
-      onClose,
-      onClick,
-      className,
-      type,
-      shape,
-      avatarSrc,
-      avatarShape,
-      tabIndex
-    } = _a,
-          attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex"]);
-
+      {
+        tagKey,
+        children,
+        size,
+        color,
+        closable,
+        visible,
+        onClose,
+        onClick,
+        className,
+        type,
+        shape,
+        avatarSrc,
+        avatarShape,
+        tabIndex
+      } = _a,
+      attr = __rest(_a, ["tagKey", "children", "size", "color", "closable", "visible", "onClose", "onClick", "className", "type", "shape", "avatarSrc", "avatarShape", "tabIndex"]);
     const {
       visible: isVisible
     } = this.state;
-    const clickable = onClick !== Tag.defaultProps.onClick || closable; // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
-
+    const clickable = onClick !== Tag.defaultProps.onClick || closable;
+    // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
     const a11yProps = {
       role: 'button',
       tabIndex: tabIndex || 0,
@@ -170,9 +151,7 @@ export default class Tag extends Component {
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
-
     const stringChild = _isString(children);
-
     const contentCls = cls(`${prefixCls}-content`, `${prefixCls}-content-${stringChild ? 'ellipsis' : 'center'}`);
     return /*#__PURE__*/React.createElement("div", Object.assign({
       "aria-label": this.props['aria-label'] || stringChild ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
@@ -180,7 +159,6 @@ export default class Tag extends Component {
       className: contentCls
     }, children), closeIcon);
   }
-
 }
 Tag.defaultProps = {
   size: tagSize[0],

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { PopoverProps } from '../popover/index';
-export declare type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
-export declare type TagType = 'ghost' | 'solid' | 'light';
-export declare type TagSize = 'default' | 'small' | 'large';
-export declare type AvatarShape = 'circle' | 'square';
-export declare type TagShape = 'circle' | 'square';
+export type TagColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
+export type TagType = 'ghost' | 'solid' | 'light';
+export type TagSize = 'default' | 'small' | 'large';
+export type AvatarShape = 'circle' | 'square';
+export type TagShape = 'circle' | 'square';
 export interface TagProps {
     children?: React.ReactNode;
     tagKey?: string | number;

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

@@ -7,9 +7,9 @@ import { ArrayElement } from '../_base/base';
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
 import { ShowTooltip } from '../typography';
-export declare type Size = ArrayElement<typeof strings.SIZE_SET>;
-export declare type RestTagsPopoverProps = PopoverProps;
-declare type ValidateStatus = "default" | "error" | "warning";
+export type Size = ArrayElement<typeof strings.SIZE_SET>;
+export type RestTagsPopoverProps = PopoverProps;
+type ValidateStatus = "default" | "error" | "warning";
 export interface TagInputProps {
     className?: string;
     clearIcon?: React.ReactNode;