@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/timePicker/TimePicker.js

@@ -1,5 +1,3 @@
-import _get from "lodash/get";
-import _noop from "lodash/noop";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -22,6 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { noop, get } from 'lodash-es';
 import ConfigContext from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/timePicker/constants';
@@ -37,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({
@@ -52,26 +48,25 @@ 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
         };
-        panelProps.panelHeader = _get(panels, index, isNullOrUndefined(panelHeader) ? _get(defaultHeaderMap, index, null) : panelHeader);
-        panelProps.panelFooter = _get(panels, index, panelFooter);
+        panelProps.panelHeader = get(panels, index, isNullOrUndefined(panelHeader) ? get(defaultHeaderMap, index, null) : panelHeader);
+        panelProps.panelFooter = get(panels, index, panelFooter);
       }
 
       return panelProps;
@@ -111,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({
@@ -146,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
     });
   }
@@ -442,7 +427,7 @@ TimePicker.defaultProps = _Object$assign({
   showClear: true,
   zIndex: popoverNumbers.DEFAULT_Z_INDEX,
   rangeSeparator: strings.DEFAULT_RANGE_SEPARATOR,
-  onOpenChange: _noop,
+  onOpenChange: noop,
   clearText: 'clear',
   prefixCls: cssClasses.PREFIX,
   inputReadOnly: false,
@@ -458,12 +443,12 @@ TimePicker.defaultProps = _Object$assign({
   disabledSeconds: () => [],
   hideDisabledOptions: false,
   // position: 'bottomLeft',
-  onFocus: _noop,
-  onBlur: _noop,
-  onChange: _noop,
+  onFocus: noop,
+  onBlur: noop,
+  onChange: noop,
   use12Hours: false,
   focusOnOpen: false,
-  onKeyDown: _noop,
+  onKeyDown: noop,
   size: 'default',
   type: strings.DEFAULT_TYPE
 }, PanelShapeDefaults);

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

@@ -13,11 +13,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         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/timePicker/index.js

@@ -1,29 +1,26 @@
-import _get from "lodash/get";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React from 'react';
 import LocaleConsumer from '../locale/localeConsumer';
 import BaseTimePicker from './TimePicker';
 import ConfigContext from '../configProvider/context';
+import { get } from 'lodash-es';
 export default class LocaleTimePicker extends React.PureComponent {
   render() {
     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/index.d.ts

@@ -4,14 +4,14 @@ import { ToastListAdapter, ToastListProps, ToastListState } from '@douyinfe/semi
 import '@douyinfe/semi-foundation/lib/es/toast/toast.css';
 import useToast from './useToast';
 import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/semi-foundation/lib/es/toast/toastFoundation';
-import { Motion } from '_base/base';
+import { Motion } from '../_base/base';
 export { ToastTransitionProps } from './ToastTransition';
 export interface ToastReactProps extends ToastProps {
     style?: CSSProperties;
     icon?: React.ReactNode;
     content: React.ReactNode;
 }
-export { ToastListProps, ToastListState, ToastState };
+export { ConfigProps, ToastListProps, ToastListState, ToastState };
 declare const createBaseToast: () => {
     new (props: ToastListProps): {
         readonly adapter: ToastListAdapter;

package/lib/es/toast/toast.js

@@ -1,4 +1,3 @@
-import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
@@ -12,6 +11,7 @@ import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/t
 import BaseComponent from '../_base/baseComponent';
 import Button from '../iconButton/index';
 import { IconClose, IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { noop } from 'lodash-es';
 import { isSemiIcon } from '../_utils';
 const prefixCls = cssClasses.PREFIX;
 
@@ -149,9 +149,9 @@ Toast.propTypes = {
   direction: PropTypes.oneOf(strings.directions)
 };
 Toast.defaultProps = {
-  onClose: _noop,
+  onClose: noop,
   content: '',
-  close: _noop,
+  close: noop,
   duration: numbers.duration,
   textMaxWidth: 450,
   showClose: true,

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: {

package/lib/es/tooltip/index.js

@@ -1,9 +1,3 @@
-import _isEmpty from "lodash/isEmpty";
-import _each from "lodash/each";
-import _omit from "lodash/omit";
-import _get from "lodash/get";
-import _noop from "lodash/noop";
-import _throttle from "lodash/throttle";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
@@ -26,6 +20,7 @@ import React, { isValidElement, cloneElement } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { throttle, noop, get, omit, each, isEmpty } from 'lodash-es';
 import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/lib/es/base/constants';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
@@ -61,17 +56,16 @@ export default class Tooltip extends BaseComponent {
       if (isHTMLElement(elem)) {
         return Boolean(elem.disabled);
       } else if ( /*#__PURE__*/isValidElement(elem)) {
-        const disabled = _get(elem, 'props.disabled');
+        const disabled = get(elem, 'props.disabled');
 
         if (disabled) {
           return strings.STATUS_DISABLED;
         }
 
-        const loading = _get(elem, 'props.loading');
+        const loading = get(elem, 'props.loading');
         /* Only judge the loading state of the Button, and no longer judge other components */
 
-
-        const isButton = !_isEmpty(elem) && !_isEmpty(elem.type) && elem.type.name === 'Button' || elem.type.name === 'IconButton';
+        const isButton = !isEmpty(elem) && !isEmpty(elem.type) && elem.type.name === 'Button' || elem.type.name === 'IconButton';
 
         if (loading && isButton) {
           return strings.STATUS_LOADING;
@@ -110,9 +104,7 @@ export default class Tooltip extends BaseComponent {
       } = this.props;
       let icon = null;
       const triangleCls = classNames(["".concat(prefixCls, "-icon-arrow")]);
-
-      const bgColor = _get(style, 'backgroundColor');
-
+      const bgColor = get(style, 'backgroundColor');
       const iconComponent = _includesInstanceProperty(placement).call(placement, 'left') || _includesInstanceProperty(placement).call(placement, 'right') ? /*#__PURE__*/React.createElement(TriangleArrowVertical, null) : /*#__PURE__*/React.createElement(TriangleArrow, null);
 
       if (showArrow) {
@@ -169,33 +161,27 @@ export default class Tooltip extends BaseComponent {
         ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
       });
       const icon = this.renderIcon();
-
-      const portalInnerStyle = _omit(containerStyle, motion ? ['transformOrigin'] : undefined);
-
-      const transformOrigin = _get(containerStyle, 'transformOrigin');
-
+      const portalInnerStyle = omit(containerStyle, motion ? ['transformOrigin'] : undefined);
+      const transformOrigin = get(containerStyle, 'transformOrigin');
       const inner = motion ? /*#__PURE__*/React.createElement(TooltipTransition, {
         position: placement,
         willEnter: this.willEnter,
         didLeave: this.didLeave,
         motion: motion
-      }, transitionState === 'enter' ? _ref => {
-        let {
-          animateCls,
-          animateStyle,
-          animateEvents
-        } = _ref;
-        return /*#__PURE__*/React.createElement("div", _Object$assign({
-          className: classNames(className, animateCls),
-          style: _Object$assign(_Object$assign(_Object$assign({
-            visibility: 'visible'
-          }, animateStyle), {
-            transformOrigin
-          }), style)
-        }, portalEventSet, animateEvents, {
-          "x-placement": placement
-        }), content, icon);
-      } : null) : /*#__PURE__*/React.createElement("div", _Object$assign({
+      }, transitionState === 'enter' ? ({
+        animateCls,
+        animateStyle,
+        animateEvents
+      }) => /*#__PURE__*/React.createElement("div", _Object$assign({
+        className: classNames(className, animateCls),
+        style: _Object$assign(_Object$assign(_Object$assign({
+          visibility: 'visible'
+        }, animateStyle), {
+          transformOrigin
+        }), style)
+      }, portalEventSet, animateEvents, {
+        "x-placement": placement
+      }), content, icon) : null) : /*#__PURE__*/React.createElement("div", _Object$assign({
         className: className
       }, portalEventSet, {
         "x-placement": placement,
@@ -218,11 +204,8 @@ export default class Tooltip extends BaseComponent {
       const {
         wrapperClassName
       } = this.props;
-
-      const display = _get(elem, 'props.style.display');
-
-      const block = _get(elem, 'props.block');
-
+      const display = get(elem, 'props.style.display');
+      const block = get(elem, 'props.block');
       const style = {
         display: 'inline-block'
       };
@@ -239,19 +222,17 @@ export default class Tooltip extends BaseComponent {
 
     this.mergeEvents = (rawEvents, events) => {
       const mergedEvents = {};
-
-      _each(events, (handler, key) => {
+      each(events, (handler, key) => {
         if (typeof handler === 'function') {
-          mergedEvents[key] = function () {
-            handler(...arguments);
+          mergedEvents[key] = (...args) => {
+            handler(...args);
 
             if (rawEvents && typeof rawEvents[key] === 'function') {
-              rawEvents[key](...arguments);
+              rawEvents[key](...args);
             }
           };
         }
       });
-
       return mergedEvents;
     };
 
@@ -283,19 +264,13 @@ export default class Tooltip extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     return _Object$assign(_Object$assign({}, super.adapter), {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      on: function () {
-        return _this.eventManager.on(...arguments);
-      },
+      on: (...args) => this.eventManager.on(...args),
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      off: function () {
-        return _this.eventManager.off(...arguments);
-      },
+      off: (...args) => this.eventManager.off(...args),
       insertPortal: (content, _a) => {
         var {
           position
@@ -439,6 +414,7 @@ export default class Tooltip extends BaseComponent {
           popupEl = ReactDOM.findDOMNode(popupEl);
 
           if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide) {
+            this.props.onClickOutSide(e);
             cb();
           }
         };
@@ -456,7 +432,7 @@ export default class Tooltip extends BaseComponent {
           this.adapter.unregisterResizeHandler();
         }
 
-        this.resizeHandler = _throttle(e => {
+        this.resizeHandler = throttle(e => {
           if (!this.mounted) {
             return false;
           }
@@ -479,7 +455,7 @@ export default class Tooltip extends BaseComponent {
           this.adapter.unregisterScrollHandler();
         }
 
-        this.scrollHandler = _throttle(e => {
+        this.scrollHandler = throttle(e => {
           if (!this.mounted) {
             return false;
           }
@@ -565,7 +541,7 @@ export default class Tooltip extends BaseComponent {
       children
     } = this.props;
 
-    const childrenStyle = _Object$assign({}, _get(children, 'props.style'));
+    const childrenStyle = _Object$assign({}, get(children, 'props.style'));
 
     const extraStyle = {};
 
@@ -592,8 +568,8 @@ export default class Tooltip extends BaseComponent {
 
 
     const newChild = /*#__PURE__*/React.cloneElement(children, _Object$assign(_Object$assign(_Object$assign({}, children.props), this.mergeEvents(children.props, triggerEventSet)), {
-      style: _Object$assign(_Object$assign({}, _get(children, 'props.style')), extraStyle),
-      className: classNames(_get(children, 'props.className') // `${prefixCls}-trigger`
+      style: _Object$assign(_Object$assign({}, get(children, 'props.style')), extraStyle),
+      className: classNames(get(children, 'props.className') // `${prefixCls}-trigger`
       ),
       // to maintain refs with callback
       ref: node => {
@@ -637,6 +613,7 @@ Tooltip.propTypes = {
   content: PropTypes.node,
   prefixCls: PropTypes.string,
   onVisibleChange: PropTypes.func,
+  onClickOutSide: PropTypes.func,
   spacing: PropTypes.number,
   showArrow: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   zIndex: PropTypes.number,
@@ -661,7 +638,8 @@ Tooltip.defaultProps = {
   autoAdjustOverflow: true,
   mouseEnterDelay: numbers.MOUSE_ENTER_DELAY,
   mouseLeaveDelay: numbers.MOUSE_LEAVE_DELAY,
-  onVisibleChange: _noop,
+  onVisibleChange: noop,
+  onClickOutSide: noop,
   spacing: numbers.SPACING,
   showArrow: true,
   arrowBounding: numbers.ARROW_BOUNDING