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

package/lib/es/tooltip/index.js

@@ -6,20 +6,15 @@ import _omit from "lodash/omit";
 import _get from "lodash/get";
 import _noop from "lodash/noop";
 import _throttle from "lodash/throttle";
-
 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 prefer-destructuring, max-lines-per-function, react/no-find-dom-node, max-len, @typescript-eslint/no-empty-function */
-
-
 import React, { isValidElement, cloneElement } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -45,55 +40,42 @@ const prefix = cssClasses.PREFIX;
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 const blockDisplays = ['flex', 'block', 'table', 'flow-root', 'grid'];
-
 const defaultGetContainer = () => document.body;
-
 export default class Tooltip extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.setContainerEl = node => this.containerEl = {
       current: node
     };
-
     this.isSpecial = elem => {
       if (isHTMLElement(elem)) {
         return Boolean(elem.disabled);
       } else if ( /*#__PURE__*/isValidElement(elem)) {
         const disabled = _get(elem, 'props.disabled');
-
         if (disabled) {
           return strings.STATUS_DISABLED;
         }
-
         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) && (_get(elem, 'type.elementType') === 'Button' || _get(elem, 'type.elementType') === 'IconButton');
-
         if (loading && isButton) {
           return strings.STATUS_LOADING;
         }
       }
-
       return false;
-    }; // willEnter = () => {
+    };
+    // willEnter = () => {
     // this.foundation.calcPosition();
     // this.setState({ visible: true });
     // };
-
-
     this.didLeave = () => {
       if (this.props.keepDOM) {
         this.foundation.setDisplayNone(true);
       } else {
         this.foundation.removePortal();
       }
-
       this.foundation.unBindEvent();
     };
-
     this.renderIcon = () => {
       const {
         placement
@@ -105,11 +87,8 @@ export default class Tooltip extends BaseComponent {
       } = this.props;
       let icon = null;
       const triangleCls = classNames([`${prefixCls}-icon-arrow`]);
-
       const bgColor = _get(style, 'backgroundColor');
-
       const iconComponent = placement.includes('left') || placement.includes('right') ? /*#__PURE__*/React.createElement(TriangleArrowVertical, null) : /*#__PURE__*/React.createElement(TriangleArrow, null);
-
       if (showArrow) {
         if ( /*#__PURE__*/isValidElement(showArrow)) {
           icon = showArrow;
@@ -123,49 +102,40 @@ export default class Tooltip extends BaseComponent {
           });
         }
       }
-
       return icon;
     };
-
     this.handlePortalInnerClick = e => {
       if (this.props.clickToHide) {
         this.foundation.hide();
       }
-
       if (this.props.stopPropagation) {
         stopPropagation(e);
       }
     };
-
     this.handlePortalMouseDown = e => {
       if (this.props.stopPropagation) {
         stopPropagation(e);
       }
     };
-
     this.handlePortalFocus = e => {
       if (this.props.stopPropagation) {
         stopPropagation(e);
       }
     };
-
     this.handlePortalBlur = e => {
       if (this.props.stopPropagation) {
         stopPropagation(e);
       }
     };
-
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
-
     this.renderContentNode = content => {
       const contentProps = {
         initialFocusRef: this.initialFocusRef
       };
       return !_isFunction(content) ? content : content(contentProps);
     };
-
     this.renderPortal = () => {
       const {
         containerStyle = {},
@@ -198,13 +168,9 @@ export default class Tooltip extends BaseComponent {
         [`${prefixCls}-rtl`]: direction === 'rtl'
       });
       const icon = this.renderIcon();
-
       const portalInnerStyle = _omit(containerStyle, motion ? ['transformOrigin'] : undefined);
-
       const transformOrigin = _get(containerStyle, 'transformOrigin');
-
       const userOpacity = _get(style, 'opacity');
-
       const opacity = userOpacity ? userOpacity : 1;
       const inner = /*#__PURE__*/React.createElement(CSSAnimation, {
         fillMode: "forwards",
@@ -213,7 +179,6 @@ export default class Tooltip extends BaseComponent {
         startClassName: transitionState === 'enter' ? `${prefix}-animation-show` : `${prefix}-animation-hide`,
         onAnimationEnd: () => {
           var _a, _b;
-
           if (transitionState === 'leave') {
             this.didLeave();
             (_b = (_a = this.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -258,56 +223,43 @@ export default class Tooltip extends BaseComponent {
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
-
     this.wrapSpan = elem => {
       const {
         wrapperClassName
       } = this.props;
-
       const display = _get(elem, 'props.style.display');
-
       const block = _get(elem, 'props.block');
-
       const style = {
         display: 'inline-block'
       };
-
       if (block || blockDisplays.includes(display)) {
         style.width = '100%';
-      } // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-
-
+      }
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       return /*#__PURE__*/React.createElement("span", {
         className: wrapperClassName,
         style: style
       }, elem);
     };
-
     this.mergeEvents = (rawEvents, events) => {
       const mergedEvents = {};
-
       _each(events, (handler, key) => {
         if (typeof handler === 'function') {
           mergedEvents[key] = function () {
             handler(...arguments);
-
             if (rawEvents && typeof rawEvents[key] === 'function') {
               rawEvents[key](...arguments);
             }
           };
         }
       });
-
       return mergedEvents;
     };
-
     this.getPopupId = () => {
       return this.state.id;
     };
-
     this.state = {
       visible: false,
-
       /**
        *
        * Note: The transitionState parameter is equivalent to isInsert
@@ -315,7 +267,8 @@ export default class Tooltip extends BaseComponent {
       transitionState: '',
       triggerEventSet: {},
       portalEventSet: {},
-      containerStyle: {// zIndex: props.zIndex,
+      containerStyle: {
+        // zIndex: props.zIndex,
       },
       isInsert: false,
       placement: props.position || 'top',
@@ -332,13 +285,10 @@ export default class Tooltip extends BaseComponent {
     this.clickOutsideHandler = null;
     this.resizeHandler = null;
     this.isWrapped = false; // Identifies whether a span element is wrapped
-
     this.containerPosition = undefined;
   }
-
   get adapter() {
     var _this = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -352,10 +302,9 @@ export default class Tooltip extends BaseComponent {
       },
       insertPortal: (content, _a) => {
         var {
-          position
-        } = _a,
-            containerStyle = __rest(_a, ["position"]);
-
+            position
+          } = _a,
+          containerStyle = __rest(_a, ["position"]);
         this.setState({
           isInsert: true,
           transitionState: 'enter',
@@ -405,7 +354,6 @@ export default class Tooltip extends BaseComponent {
       getPopupContainerRect: () => {
         const container = this.getPopupContainer();
         let rect = null;
-
         if (container && isHTMLElement(container)) {
           const boundingRect = convertDOMRectToObject(container.getBoundingClientRect());
           rect = Object.assign(Object.assign({}, boundingRect), {
@@ -413,7 +361,6 @@ export default class Tooltip extends BaseComponent {
             scrollTop: container.scrollTop
           });
         }
-
         return rect;
       },
       containerIsBody: () => {
@@ -434,10 +381,9 @@ export default class Tooltip extends BaseComponent {
       getDocumentElementBounding: () => document.documentElement.getBoundingClientRect(),
       setPosition: _a => {
         var {
-          position
-        } = _a,
-            style = __rest(_a, ["position"]);
-
+            position
+          } = _a,
+          style = __rest(_a, ["position"]);
         this.setState({
           containerStyle: Object.assign(Object.assign({}, this.state.containerStyle), style),
           placement: position,
@@ -468,23 +414,19 @@ export default class Tooltip extends BaseComponent {
         if (this.clickOutsideHandler) {
           this.adapter.unregisterClickOutsideHandler();
         }
-
         this.clickOutsideHandler = e => {
           if (!this.mounted) {
             return false;
           }
-
           let el = this.triggerEl && this.triggerEl.current;
           let popupEl = this.containerEl && this.containerEl.current;
           el = ReactDOM.findDOMNode(el);
           popupEl = ReactDOM.findDOMNode(popupEl);
-
           if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
             this.props.onClickOutSide(e);
             cb();
           }
         };
-
         window.addEventListener('mousedown', this.clickOutsideHandler);
       },
       unregisterClickOutsideHandler: () => {
@@ -497,12 +439,10 @@ export default class Tooltip extends BaseComponent {
         if (this.resizeHandler) {
           this.adapter.unregisterResizeHandler();
         }
-
         this.resizeHandler = _throttle(e => {
           if (!this.mounted) {
             return false;
           }
-
           cb(e);
         }, 10);
         window.addEventListener('resize', this.resizeHandler, false);
@@ -520,15 +460,12 @@ export default class Tooltip extends BaseComponent {
         if (this.scrollHandler) {
           this.adapter.unregisterScrollHandler();
         }
-
         this.scrollHandler = _throttle(e => {
           if (!this.mounted) {
             return false;
           }
-
           const triggerDOM = this.adapter.getTriggerNode();
           const isRelativeScroll = e.target.contains(triggerDOM);
-
           if (isRelativeScroll) {
             const scrollPos = {
               x: e.target.scrollLeft,
@@ -537,7 +474,6 @@ export default class Tooltip extends BaseComponent {
             rePositionCb(scrollPos);
           }
         }, 10); // When it is greater than 16ms, it will be very obvious
-
         window.addEventListener('scroll', this.scrollHandler, true);
       },
       unregisterScrollHandler: () => {
@@ -549,7 +485,6 @@ export default class Tooltip extends BaseComponent {
       canMotion: () => Boolean(this.props.motion),
       updateContainerPosition: () => {
         const container = this.getPopupContainer();
-
         if (container && isHTMLElement(container)) {
           // getComputedStyle need first parameter is Element type
           const computedStyle = window.getComputedStyle(container);
@@ -561,11 +496,9 @@ export default class Tooltip extends BaseComponent {
       getContainer: () => this.containerEl && this.containerEl.current,
       getTriggerNode: () => {
         let triggerDOM = this.triggerEl.current;
-
         if (!isHTMLElement(this.triggerEl.current)) {
           triggerDOM = ReactDOM.findDOMNode(this.triggerEl.current);
         }
-
         return triggerDOM;
       },
       getFocusableElements: node => {
@@ -578,9 +511,7 @@ export default class Tooltip extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         const focusRefNode = _get(this, 'initialFocusRef.current');
-
         if (focusRefNode && 'focus' in focusRefNode) {
           focusRefNode.focus({
             preventScroll
@@ -597,13 +528,11 @@ export default class Tooltip extends BaseComponent {
       }
     });
   }
-
   componentDidMount() {
     this.mounted = true;
     this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.mounted = false;
     this.foundation.destroy();
@@ -611,21 +540,15 @@ export default class Tooltip extends BaseComponent {
   /**
    * focus on tooltip trigger
    */
-
-
   focusTrigger() {
     this.foundation.focusTrigger();
   }
   /** for transition - end */
-
-
   rePosition() {
     return this.foundation.calcPosition();
   }
-
   componentDidUpdate(prevProps, prevState) {
     warning(this.props.mouseLeaveDelay < this.props.mouseEnterDelay, "[Semi Tooltip] 'mouseLeaveDelay' cannot be less than 'mouseEnterDelay', which may cause the dropdown layer to not be hidden.");
-
     if (prevProps.visible !== this.props.visible) {
       if (['hover', 'focus'].includes(this.props.trigger)) {
         this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
@@ -633,12 +556,10 @@ export default class Tooltip extends BaseComponent {
         this.props.visible ? this.foundation.show() : this.foundation.hide();
       }
     }
-
     if (!_isEqual(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }
-
   render() {
     const {
       isInsert,
@@ -656,57 +577,49 @@ export default class Tooltip extends BaseComponent {
     } = this.props;
     const childrenStyle = Object.assign({}, _get(children, 'props.style'));
     const extraStyle = {};
-
     if (wrapWhenSpecial) {
       const isSpecial = this.isSpecial(children);
-
       if (isSpecial) {
         childrenStyle.pointerEvents = 'none';
-
         if (isSpecial === strings.STATUS_DISABLED) {
           extraStyle.cursor = 'not-allowed';
         }
-
         children = /*#__PURE__*/cloneElement(children, {
           style: childrenStyle
         });
-
         if (trigger !== 'custom') {
           // no need to wrap span when trigger is custom, cause it don't need bind event
           children = this.wrapSpan(children);
         }
-
         this.isWrapped = true;
       } else if (! /*#__PURE__*/isValidElement(children)) {
         children = this.wrapSpan(children);
         this.isWrapped = true;
       }
-    } // eslint-disable-next-line prefer-const
-
-
-    let ariaAttribute = {}; // Take effect when used by Popover component
-
+    }
+    // eslint-disable-next-line prefer-const
+    let ariaAttribute = {};
+    // Take effect when used by Popover component
     if (role === 'dialog') {
       ariaAttribute['aria-expanded'] = visible ? 'true' : 'false';
       ariaAttribute['aria-haspopup'] = 'dialog';
       ariaAttribute['aria-controls'] = id;
     } else {
       ariaAttribute['aria-describedby'] = id;
-    } // The incoming children is a single valid element, otherwise wrap a layer with span
-
-
+    }
+    // The incoming children is a single valid element, otherwise wrap a layer with span
     const newChild = /*#__PURE__*/React.cloneElement(children, Object.assign(Object.assign(Object.assign(Object.assign({}, ariaAttribute), children.props), this.mergeEvents(children.props, triggerEventSet)), {
       style: Object.assign(Object.assign({}, _get(children, 'props.style')), extraStyle),
       className: classNames(_get(children, 'props.className')),
       // to maintain refs with callback
       ref: node => {
         // Keep your own reference
-        this.triggerEl.current = node; // Call the original ref, if any
-
+        this.triggerEl.current = node;
+        // Call the original ref, if any
         const {
           ref
-        } = children; // this.log('tooltip render() - get ref', ref);
-
+        } = children;
+        // this.log('tooltip render() - get ref', ref);
         if (typeof ref === 'function') {
           ref(node);
         } else if (ref && typeof ref === 'object') {
@@ -715,12 +628,11 @@ export default class Tooltip extends BaseComponent {
       },
       tabIndex: children.props.tabIndex || 0,
       'data-popupid': id
-    })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
+    }));
+    // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, isInsert ? this.renderPortal() : null, newChild);
   }
-
 }
 Tooltip.contextType = ConfigContext;
 Tooltip.propTypes = {

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

@@ -32,7 +32,7 @@ export interface EmptyContent {
     right?: React.ReactNode;
     search?: React.ReactNode;
 }
-export declare type Type = 'list' | 'groupList' | 'treeList';
+export type Type = 'list' | 'groupList' | 'treeList';
 export interface SourcePanelProps {
     value: Array<string | number>;
     loading: boolean;
@@ -49,7 +49,7 @@ export interface SourcePanelProps {
     onSelectOrRemove: (item: DataItem) => void;
     onSelect: (value: Array<string | number>) => void;
 }
-export declare type OnSortEnd = ({ oldIndex, newIndex }: OnSortEndProps) => void;
+export type OnSortEnd = ({ oldIndex, newIndex }: OnSortEndProps) => void;
 export interface SelectedPanelProps {
     length: number;
     selectedData: Array<DataItem>;
@@ -68,7 +68,7 @@ export interface DraggableResolvedDataItem {
     index?: number;
     item?: ResolvedDataItem;
 }
-export declare type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
+export type DataSource = Array<DataItem> | Array<GroupItem> | Array<TreeItem>;
 interface HeaderConfig {
     totalContent: string;
     allContent: string;
@@ -78,13 +78,13 @@ interface HeaderConfig {
     num: number;
     allChecked?: boolean;
 }
-declare type SourceHeaderProps = {
+type SourceHeaderProps = {
     num: number;
     showButton: boolean;
     allChecked: boolean;
     onAllClick: () => void;
 };
-declare type SelectedHeaderProps = {
+type SelectedHeaderProps = {
     num: number;
     showButton: boolean;
     onClear: () => void;