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

package/lib/es/select/option.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 max-len */
-
-
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -20,21 +15,18 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/select/constants';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconTick } from '@douyinfe/semi-icons';
 import { getHighLightTextHTML } from '../_utils/index';
-
 class Option extends PureComponent {
   onClick(_a, event) {
     var {
-      value,
-      label,
-      children
-    } = _a,
-        rest = __rest(_a, ["value", "label", "children"]);
-
+        value,
+        label,
+        children
+      } = _a,
+      rest = __rest(_a, ["value", "label", "children"]);
     const {
       props
     } = this;
     const isDisabled = props.disabled;
-
     if (!isDisabled) {
       props.onSelect(Object.assign(Object.assign({}, rest), {
         value,
@@ -42,7 +34,6 @@ class Option extends PureComponent {
       }), event);
     }
   }
-
   renderOptionContent(_ref) {
     let {
       config,
@@ -50,37 +41,33 @@ class Option extends PureComponent {
       inputValue,
       prefixCls
     } = _ref;
-
     if (_isString(children) && inputValue) {
       return getHighLightTextHTML(config);
     }
-
     return children;
   }
-
   render() {
     const _a = this.props,
-          {
-      children,
-      disabled,
-      value,
-      selected,
-      label,
-      empty,
-      emptyContent,
-      onSelect,
-      focused,
-      showTick,
-      className,
-      style,
-      onMouseEnter,
-      prefixCls,
-      renderOptionItem,
-      inputValue,
-      id
-    } = _a,
-          rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
-
+      {
+        children,
+        disabled,
+        value,
+        selected,
+        label,
+        empty,
+        emptyContent,
+        onSelect,
+        focused,
+        showTick,
+        className,
+        style,
+        onMouseEnter,
+        prefixCls,
+        renderOptionItem,
+        inputValue,
+        id
+      } = _a,
+      rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
     const optionClassName = classNames(prefixCls, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-selected`]: selected,
@@ -89,21 +76,18 @@ class Option extends PureComponent {
       [className]: className
     });
     const selectedIconClassName = classNames([`${prefixCls}-icon`]);
-
     if (empty) {
       if (emptyContent === null) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement("div", {
         className: optionClassName,
         "x-semi-prop": "emptyContent"
       }, emptyContent || locale.emptyText));
-    } // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
-
-
+    }
+    // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
     if (typeof renderOptionItem === 'function') {
       return renderOptionItem(Object.assign({
         disabled,
@@ -121,7 +105,6 @@ class Option extends PureComponent {
         }, rest), e)
       }, rest));
     }
-
     const config = {
       searchWords: inputValue,
       sourceString: children,
@@ -159,9 +142,7 @@ class Option extends PureComponent {
       })) : children)
     );
   }
-
 }
-
 Option.isSelectOption = true;
 Option.propTypes = {
   children: PropTypes.node,

package/lib/es/select/optionGroup.js

@@ -4,7 +4,6 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/select/constants';
 import BaseComponent from '../_base/baseComponent';
 const prefixCls = cssClasses.PREFIX_GROUP;
-
 class OptionGroup extends BaseComponent {
   render() {
     const {
@@ -15,19 +14,15 @@ class OptionGroup extends BaseComponent {
     const groupCls = cls(className, {
       [prefixCls]: true
     });
-
     if (!label && typeof label !== 'number') {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: groupCls,
       style: style
     }, label);
   }
-
 }
-
 OptionGroup.isSelectOptionGroup = true;
 OptionGroup.propTypes = {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),

package/lib/es/select/utils.js

@@ -1,24 +1,18 @@
 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 from 'react';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
-
 const generateOption = (child, parent, index) => {
   const childProps = child.props;
-
   if (!child || !childProps) {
     return null;
   }
-
   const option = Object.assign(Object.assign({
     value: childProps.value,
     // Drop-down menu rendering priority label value, children, value in turn downgrade
@@ -31,7 +25,6 @@ const generateOption = (child, parent, index) => {
   });
   return option;
 };
-
 const getOptionsFromGroup = selectChildren => {
   let optionGroups = [];
   let options = [];
@@ -39,9 +32,9 @@ const getOptionsFromGroup = selectChildren => {
     label: '',
     children: [],
     _show: false
-  }; // avoid null
+  };
+  // avoid null
   // eslint-disable-next-line max-len
-
   let childNodes = React.Children.toArray(selectChildren);
   childNodes = childNodes.filter(childNode => childNode && childNode.props);
   let type = '';
@@ -54,15 +47,14 @@ const getOptionsFromGroup = selectChildren => {
       emptyGroup.children.push(option);
       options.push(option);
     } else if (child.type.isSelectOptionGroup) {
-      type = 'group'; // Avoid saving children (reactNode) by... removing other props from the group except children, causing performance problems
+      type = 'group';
+      // Avoid saving children (reactNode) by... removing other props from the group except children, causing performance problems
       // eslint-disable-next-line prefer-const
-
       let _a = child.props,
-          {
-        children
-      } = _a,
-          restGroupProps = __rest(_a, ["children"]);
-
+        {
+          children
+        } = _a,
+        restGroupProps = __rest(_a, ["children"]);
       children = React.Children.toArray(children);
       const childrenOption = children.map(option => {
         optionIndex++;
@@ -78,15 +70,12 @@ const getOptionsFromGroup = selectChildren => {
       warning(true, '[Semi Select] The children of `Select` should be `Select.Option` or `Select.OptionGroup`');
     }
   });
-
   if (type === 'option') {
     optionGroups = [emptyGroup];
   }
-
   return {
     optionGroups,
     options
   };
 };
-
 export { generateOption, getOptionsFromGroup };

package/lib/es/select/virtualRow.js

@@ -11,5 +11,4 @@ const VirtualRow = _ref => {
   const option = visibleOptions[index];
   return renderOption(option, index, style);
 };
-
 export default VirtualRow;

package/lib/es/sideSheet/SideSheetContent.js

@@ -1,16 +1,12 @@
 import _noop from "lodash/noop";
-
 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 from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
@@ -22,13 +18,11 @@ const prefixCls = cssClasses.PREFIX;
 export default class SideSheetContent extends React.PureComponent {
   constructor() {
     super(...arguments);
-
     this.onMaskClick = e => {
       if (e.target === e.currentTarget) {
         this.close(e);
       }
     };
-
     this.close = e => {
       const {
         onClose
@@ -36,24 +30,19 @@ export default class SideSheetContent extends React.PureComponent {
       onClose && onClose(e);
     };
   }
-
   componentDidMount() {
     this.sideSheetId = `sidesheet-${uuid++}`;
   }
-
   componentWillUnmount() {
     clearTimeout(this.timeoutId);
   }
-
   getMaskElement() {
     var _a;
-
     const {
       mask,
       maskStyle,
       maskClosable
     } = this.props;
-
     if (mask) {
       return /*#__PURE__*/React.createElement("div", Object.assign({
         "aria-hidden": true,
@@ -63,10 +52,8 @@ export default class SideSheetContent extends React.PureComponent {
         onClick: maskClosable ? this.onMaskClick : null
       }, this.props.maskExtraProps));
     }
-
     return null;
   }
-
   renderHeader() {
     const {
       title,
@@ -74,14 +61,12 @@ export default class SideSheetContent extends React.PureComponent {
       headerStyle
     } = this.props;
     let header, closer;
-
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, this.props.title);
     }
-
     if (closable) {
       closer = /*#__PURE__*/React.createElement(Button, {
         className: `${prefixCls}-close`,
@@ -93,7 +78,6 @@ export default class SideSheetContent extends React.PureComponent {
         size: "small"
       });
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-header`,
       role: 'heading',
@@ -101,26 +85,20 @@ export default class SideSheetContent extends React.PureComponent {
       style: Object.assign({}, headerStyle)
     }, header, closer);
   }
-
   getDialogElement() {
     var _a;
-
     const props = __rest(this.props, []);
-
     const style = {};
-
     if (props.width) {
-      style.width = props.width; // When the mask is false, the width is set on the wrapper. At this time, sidesheet-inner does not need to set the width again, otherwise, the percentage will be accumulated repeatedly when the width is a percentage
-
+      style.width = props.width;
+      // When the mask is false, the width is set on the wrapper. At this time, sidesheet-inner does not need to set the width again, otherwise, the percentage will be accumulated repeatedly when the width is a percentage
       if (!props.mask) {
         style.width = '100%';
       }
     }
-
     if (props.height) {
       style.height = props.height;
     }
-
     const header = this.renderHeader();
     const dialogElement = /*#__PURE__*/React.createElement("div", Object.assign({
       key: "dialog-element",
@@ -141,7 +119,6 @@ export default class SideSheetContent extends React.PureComponent {
     }, props.footer) : null));
     return dialogElement;
   }
-
   render() {
     const {
       mask,
@@ -153,17 +130,14 @@ export default class SideSheetContent extends React.PureComponent {
       [`${prefixCls}-size-${this.props.size}`]: !mask
     });
     const wrapperStyle = {};
-
     if (!mask && width) {
       wrapperStyle.width = width;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,
       style: wrapperStyle
     }, this.getMaskElement(), this.getDialogElement());
   }
-
 }
 SideSheetContent.propTypes = {
   onClose: PropTypes.func

package/lib/es/sideSheet/index.js

@@ -1,18 +1,13 @@
 import _noop from "lodash/noop";
-
 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 no-nested-ternary */
-
-
 import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
@@ -30,32 +25,26 @@ const defaultHeight = strings.HEIGHT;
 export default class SideSheet extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.handleCancel = e => {
       this.foundation.handleCancel(e);
     };
-
     this.handleKeyDown = e => {
       this.foundation.handleKeyDown(e);
     };
-
     this.updateState = () => {
       this.foundation.toggleDisplayNone(!this.props.visible);
     };
-
     this.state = {
       displayNone: !this.props.visible
     };
     this.foundation = new SideSheetFoundation(this.adapter);
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       disabledBodyScroll: () => {
         const {
           getPopupContainer
         } = this.props;
-
         if (!getPopupContainer && document) {
           document.body.style.overflow = 'hidden';
         }
@@ -64,7 +53,6 @@ export default class SideSheet extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-
         if (!getPopupContainer && document) {
           document.body.style.overflow = '';
         }
@@ -94,68 +82,57 @@ export default class SideSheet extends BaseComponent {
       }
     });
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const newState = {};
-
     if (props.visible && prevState.displayNone) {
       newState.displayNone = false;
     }
-
     if (!props.visible && !props.motion && !prevState.displayNone) {
       newState.displayNone = true;
     }
-
     return newState;
   }
-
   componentDidMount() {
     if (this.props.visible) {
       this.foundation.beforeShow();
     }
   }
-
   componentDidUpdate(prevProps, prevState, snapshot) {
     // hide => show
     if (!prevProps.visible && this.props.visible) {
       this.foundation.beforeShow();
-    } // show => hide
-
-
+    }
+    // show => hide
     if (prevProps.visible && !this.props.visible) {
       this.foundation.afterHide();
     }
-
     if (prevState.displayNone !== this.state.displayNone) {
       this.foundation.onVisibleChange(!this.state.displayNone);
     }
   }
-
   componentWillUnmount() {
     if (this.props.visible) {
       this.foundation.destroy();
     }
   }
-
   renderContent() {
     const _a = this.props,
-          {
-      placement,
-      className,
-      children,
-      width,
-      height,
-      motion,
-      visible,
-      style,
-      maskStyle,
-      size,
-      zIndex,
-      getPopupContainer,
-      keepDOM
-    } = _a,
-          props = __rest(_a, ["placement", "className", "children", "width", "height", "motion", "visible", "style", "maskStyle", "size", "zIndex", "getPopupContainer", "keepDOM"]);
-
+      {
+        placement,
+        className,
+        children,
+        width,
+        height,
+        motion,
+        visible,
+        style,
+        maskStyle,
+        size,
+        zIndex,
+        getPopupContainer,
+        keepDOM
+      } = _a,
+      props = __rest(_a, ["placement", "className", "children", "width", "height", "motion", "visible", "style", "maskStyle", "size", "zIndex", "getPopupContainer", "keepDOM"]);
     const {
       direction
     } = this.context;
@@ -181,10 +158,8 @@ export default class SideSheet extends BaseComponent {
       height: sheetHeight,
       onClose: this.handleCancel
     });
-    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone
-    /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
-    ; // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
-
+    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */;
+    // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
     return /*#__PURE__*/React.createElement(CSSAnimation, {
       motion: this.props.motion,
       animationState: visible ? 'enter' : 'leave',
@@ -199,9 +174,7 @@ export default class SideSheet extends BaseComponent {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
         startClassName: visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`,
-        onAnimationEnd: this.updateState
-        /* for no mask case*/
-
+        onAnimationEnd: this.updateState /* for no mask case*/
       }, _ref2 => {
         let {
           animationClassName,
@@ -219,7 +192,6 @@ export default class SideSheet extends BaseComponent {
       });
     });
   }
-
   render() {
     const {
       zIndex,
@@ -228,20 +200,17 @@ export default class SideSheet extends BaseComponent {
     let wrapperStyle = {
       zIndex
     };
-
     if (getPopupContainer) {
       wrapperStyle = {
         zIndex,
         position: 'static'
       };
     }
-
     return /*#__PURE__*/React.createElement(Portal, {
       getPopupContainer: getPopupContainer,
       style: wrapperStyle
     }, this.renderContent());
   }
-
 }
 SideSheet.contextType = ConfigContext;
 SideSheet.propTypes = {

package/lib/es/skeleton/index.js

@@ -1,14 +1,11 @@
 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, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -16,25 +13,22 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/skeleton/constants'
 import '@douyinfe/semi-foundation/lib/es/skeleton/skeleton.css';
 import { Avatar, Image, Title, Button, Paragraph } from './item';
 const prefixCls = cssClasses.PREFIX;
-
 class Skeleton extends PureComponent {
   render() {
     const _a = this.props,
-          {
-      placeholder,
-      active,
-      children,
-      className,
-      loading,
-      style
-    } = _a,
-          others = __rest(_a, ["placeholder", "active", "children", "className", "loading", "style"]);
-
+      {
+        placeholder,
+        active,
+        children,
+        className,
+        loading,
+        style
+      } = _a,
+      others = __rest(_a, ["placeholder", "active", "children", "className", "loading", "style"]);
     const skCls = cls(prefixCls, {
       [`${prefixCls}-active`]: Boolean(active)
     }, className);
     let content;
-
     if (loading) {
       content = /*#__PURE__*/React.createElement("div", Object.assign({
         className: skCls,
@@ -45,12 +39,9 @@ class Skeleton extends PureComponent {
     } else {
       content = children;
     }
-
     return content;
   }
-
 }
-
 Skeleton.Avatar = Avatar;
 Skeleton.Title = Title;
 Skeleton.Button = Button;

package/lib/es/skeleton/item.d.ts

@@ -2,7 +2,7 @@ import React, { PureComponent, CSSProperties, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/avatar/constants';
 import '@douyinfe/semi-foundation/lib/es/skeleton/skeleton.css';
-export declare type BasicProps = {
+export type BasicProps = {
     prefixCls?: string;
     className?: string;
     style?: CSSProperties;
@@ -15,7 +15,7 @@ export interface AvatarProps extends BasicProps {
     size?: typeof strings.SIZE[number];
     shape?: string;
 }
-export declare type GenericProps = BasicProps & AvatarProps;
+export type GenericProps = BasicProps & AvatarProps;
 export declare const Avatar: React.FC<AvatarProps>;
 export declare const Image: React.FC<BasicProps>;
 export declare const Title: React.FC<BasicProps>;