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

package/lib/cjs/tooltip/index.js

@@ -4,76 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _each2 = _interopRequireDefault(require("lodash/each"));
-
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/base/constants");
-
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
-
 var _Event = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/Event"));
-
 var _dom = require("@douyinfe/semi-foundation/lib/cjs/utils/dom");
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/tooltip/foundation"));
-
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/tooltip/constants");
-
 var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
-
 require("@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css");
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _reactUtils = require("../_base/reactUtils");
-
 var _utils = require("../_utils");
-
 var _index = _interopRequireDefault(require("../_portal/index"));
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _TriangleArrow = _interopRequireDefault(require("./TriangleArrow"));
-
 var _TriangleArrowVertical = _interopRequireDefault(require("./TriangleArrowVertical"));
-
 var _ArrowBoundingShape = _interopRequireDefault(require("./ArrowBoundingShape"));
-
 var _cssAnimation = _interopRequireDefault(require("../_cssAnimation"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__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]];
   }
@@ -81,59 +46,46 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 /* eslint-disable prefer-destructuring, max-lines-per-function, react/no-find-dom-node, max-len, @typescript-eslint/no-empty-function */
 
-
 const prefix = _constants2.cssClasses.PREFIX;
 const positionSet = _constants2.strings.POSITION_SET;
 const triggerSet = _constants2.strings.TRIGGER_SET;
 const blockDisplays = ['flex', 'block', 'table', 'flow-root', 'grid'];
-
 const defaultGetContainer = () => document.body;
-
 class Tooltip extends _baseComponent.default {
   constructor(props) {
     super(props);
-
     this.setContainerEl = node => this.containerEl = {
       current: node
     };
-
     this.isSpecial = elem => {
       if ((0, _reactUtils.isHTMLElement)(elem)) {
         return Boolean(elem.disabled);
       } else if ( /*#__PURE__*/(0, _react.isValidElement)(elem)) {
         const disabled = (0, _get2.default)(elem, 'props.disabled');
-
         if (disabled) {
           return _constants2.strings.STATUS_DISABLED;
         }
-
         const loading = (0, _get2.default)(elem, 'props.loading');
         /* Only judge the loading state of the Button, and no longer judge other components */
-
         const isButton = !(0, _isEmpty2.default)(elem) && !(0, _isEmpty2.default)(elem.type) && ((0, _get2.default)(elem, 'type.elementType') === 'Button' || (0, _get2.default)(elem, 'type.elementType') === 'IconButton');
-
         if (loading && isButton) {
           return _constants2.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
@@ -147,7 +99,6 @@ class Tooltip extends _baseComponent.default {
       const triangleCls = (0, _classnames.default)([`${prefixCls}-icon-arrow`]);
       const bgColor = (0, _get2.default)(style, 'backgroundColor');
       const iconComponent = placement.includes('left') || placement.includes('right') ? /*#__PURE__*/_react.default.createElement(_TriangleArrowVertical.default, null) : /*#__PURE__*/_react.default.createElement(_TriangleArrow.default, null);
-
       if (showArrow) {
         if ( /*#__PURE__*/(0, _react.isValidElement)(showArrow)) {
           icon = showArrow;
@@ -161,49 +112,40 @@ class Tooltip extends _baseComponent.default {
           });
         }
       }
-
       return icon;
     };
-
     this.handlePortalInnerClick = e => {
       if (this.props.clickToHide) {
         this.foundation.hide();
       }
-
       if (this.props.stopPropagation) {
         (0, _utils.stopPropagation)(e);
       }
     };
-
     this.handlePortalMouseDown = e => {
       if (this.props.stopPropagation) {
         (0, _utils.stopPropagation)(e);
       }
     };
-
     this.handlePortalFocus = e => {
       if (this.props.stopPropagation) {
         (0, _utils.stopPropagation)(e);
       }
     };
-
     this.handlePortalBlur = e => {
       if (this.props.stopPropagation) {
         (0, _utils.stopPropagation)(e);
       }
     };
-
     this.handlePortalInnerKeyDown = e => {
       this.foundation.handleContainerKeydown(e);
     };
-
     this.renderContentNode = content => {
       const contentProps = {
         initialFocusRef: this.initialFocusRef
       };
       return !(0, _isFunction2.default)(content) ? content : content(contentProps);
     };
-
     this.renderPortal = () => {
       const {
         containerStyle = {},
@@ -240,7 +182,6 @@ class Tooltip extends _baseComponent.default {
       const transformOrigin = (0, _get2.default)(containerStyle, 'transformOrigin');
       const userOpacity = (0, _get2.default)(style, 'opacity');
       const opacity = userOpacity ? userOpacity : 1;
-
       const inner = /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
         fillMode: "forwards",
         animationState: transitionState,
@@ -248,7 +189,6 @@ class Tooltip extends _baseComponent.default {
         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);
@@ -275,7 +215,6 @@ class Tooltip extends _baseComponent.default {
           id: id
         }), contentNode, icon);
       });
-
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: this.props.getPopupContainer,
         style: {
@@ -294,7 +233,6 @@ class Tooltip extends _baseComponent.default {
         onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
-
     this.wrapSpan = elem => {
       const {
         wrapperClassName
@@ -304,25 +242,21 @@ class Tooltip extends _baseComponent.default {
       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.default.createElement("span", {
         className: wrapperClassName,
         style: style
       }, elem);
     };
-
     this.mergeEvents = (rawEvents, events) => {
       const mergedEvents = {};
       (0, _each2.default)(events, (handler, key) => {
         if (typeof handler === 'function') {
           mergedEvents[key] = function () {
             handler(...arguments);
-
             if (rawEvents && typeof rawEvents[key] === 'function') {
               rawEvents[key](...arguments);
             }
@@ -331,14 +265,11 @@ class Tooltip extends _baseComponent.default {
       });
       return mergedEvents;
     };
-
     this.getPopupId = () => {
       return this.state.id;
     };
-
     this.state = {
       visible: false,
-
       /**
        *
        * Note: The transitionState parameter is equivalent to isInsert
@@ -346,7 +277,8 @@ class Tooltip extends _baseComponent.default {
       transitionState: '',
       triggerEventSet: {},
       portalEventSet: {},
-      containerStyle: {// zIndex: props.zIndex,
+      containerStyle: {
+        // zIndex: props.zIndex,
       },
       isInsert: false,
       placement: props.position || 'top',
@@ -363,13 +295,10 @@ class Tooltip extends _baseComponent.default {
     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
@@ -383,10 +312,9 @@ class Tooltip extends _baseComponent.default {
       },
       insertPortal: (content, _a) => {
         var {
-          position
-        } = _a,
-            containerStyle = __rest(_a, ["position"]);
-
+            position
+          } = _a,
+          containerStyle = __rest(_a, ["position"]);
         this.setState({
           isInsert: true,
           transitionState: 'enter',
@@ -436,7 +364,6 @@ class Tooltip extends _baseComponent.default {
       getPopupContainerRect: () => {
         const container = this.getPopupContainer();
         let rect = null;
-
         if (container && (0, _reactUtils.isHTMLElement)(container)) {
           const boundingRect = (0, _dom.convertDOMRectToObject)(container.getBoundingClientRect());
           rect = Object.assign(Object.assign({}, boundingRect), {
@@ -444,7 +371,6 @@ class Tooltip extends _baseComponent.default {
             scrollTop: container.scrollTop
           });
         }
-
         return rect;
       },
       containerIsBody: () => {
@@ -465,10 +391,9 @@ class Tooltip extends _baseComponent.default {
       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,
@@ -499,23 +424,19 @@ class Tooltip extends _baseComponent.default {
         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.default.findDOMNode(el);
           popupEl = _reactDom.default.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: () => {
@@ -528,12 +449,10 @@ class Tooltip extends _baseComponent.default {
         if (this.resizeHandler) {
           this.adapter.unregisterResizeHandler();
         }
-
         this.resizeHandler = (0, _throttle2.default)(e => {
           if (!this.mounted) {
             return false;
           }
-
           cb(e);
         }, 10);
         window.addEventListener('resize', this.resizeHandler, false);
@@ -551,15 +470,12 @@ class Tooltip extends _baseComponent.default {
         if (this.scrollHandler) {
           this.adapter.unregisterScrollHandler();
         }
-
         this.scrollHandler = (0, _throttle2.default)(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,
@@ -568,7 +484,6 @@ class Tooltip extends _baseComponent.default {
             rePositionCb(scrollPos);
           }
         }, 10); // When it is greater than 16ms, it will be very obvious
-
         window.addEventListener('scroll', this.scrollHandler, true);
       },
       unregisterScrollHandler: () => {
@@ -580,7 +495,6 @@ class Tooltip extends _baseComponent.default {
       canMotion: () => Boolean(this.props.motion),
       updateContainerPosition: () => {
         const container = this.getPopupContainer();
-
         if (container && (0, _reactUtils.isHTMLElement)(container)) {
           // getComputedStyle need first parameter is Element type
           const computedStyle = window.getComputedStyle(container);
@@ -592,11 +506,9 @@ class Tooltip extends _baseComponent.default {
       getContainer: () => this.containerEl && this.containerEl.current,
       getTriggerNode: () => {
         let triggerDOM = this.triggerEl.current;
-
         if (!(0, _reactUtils.isHTMLElement)(this.triggerEl.current)) {
           triggerDOM = _reactDom.default.findDOMNode(this.triggerEl.current);
         }
-
         return triggerDOM;
       },
       getFocusableElements: node => {
@@ -610,7 +522,6 @@ class Tooltip extends _baseComponent.default {
           preventScroll
         } = this.props;
         const focusRefNode = (0, _get2.default)(this, 'initialFocusRef.current');
-
         if (focusRefNode && 'focus' in focusRefNode) {
           focusRefNode.focus({
             preventScroll
@@ -627,13 +538,11 @@ class Tooltip extends _baseComponent.default {
       }
     });
   }
-
   componentDidMount() {
     this.mounted = true;
     this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.mounted = false;
     this.foundation.destroy();
@@ -641,21 +550,15 @@ class Tooltip extends _baseComponent.default {
   /**
    * focus on tooltip trigger
    */
-
-
   focusTrigger() {
     this.foundation.focusTrigger();
   }
   /** for transition - end */
-
-
   rePosition() {
     return this.foundation.calcPosition();
   }
-
   componentDidUpdate(prevProps, prevState) {
     (0, _warning.default)(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();
@@ -663,12 +566,10 @@ class Tooltip extends _baseComponent.default {
         this.props.visible ? this.foundation.show() : this.foundation.hide();
       }
     }
-
     if (!(0, _isEqual2.default)(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }
-
   render() {
     const {
       isInsert,
@@ -686,57 +587,49 @@ class Tooltip extends _baseComponent.default {
     } = this.props;
     const childrenStyle = Object.assign({}, (0, _get2.default)(children, 'props.style'));
     const extraStyle = {};
-
     if (wrapWhenSpecial) {
       const isSpecial = this.isSpecial(children);
-
       if (isSpecial) {
         childrenStyle.pointerEvents = 'none';
-
         if (isSpecial === _constants2.strings.STATUS_DISABLED) {
           extraStyle.cursor = 'not-allowed';
         }
-
         children = /*#__PURE__*/(0, _react.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__*/(0, _react.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.default.cloneElement(children, Object.assign(Object.assign(Object.assign(Object.assign({}, ariaAttribute), children.props), this.mergeEvents(children.props, triggerEventSet)), {
       style: Object.assign(Object.assign({}, (0, _get2.default)(children, 'props.style')), extraStyle),
       className: (0, _classnames.default)((0, _get2.default)(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') {
@@ -745,15 +638,12 @@ class Tooltip extends _baseComponent.default {
       },
       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.default.createElement(_react.default.Fragment, null, isInsert ? this.renderPortal() : null, newChild);
   }
-
 }
-
 exports.default = Tooltip;
 Tooltip.contextType = _context.default;
 Tooltip.propTypes = {

package/lib/cjs/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;