@oceanbase/design 0.1.0

package/es/SideTip/Dragger.js

@@ -0,0 +1,293 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable react/sort-comp */
+/* eslint-disable no-restricted-syntax */
+
+import React from 'react';
+import { getScrollOffsets, getClientWidth, getScrollBarSize, getClientHeight, isFixedElem } from "./utils";
+import classnames from 'classnames';
+var INIT_RIGHT = 32;
+var INIT_BOTTOM = 32;
+var Draggable = /*#__PURE__*/function (_React$Component) {
+  _inherits(Draggable, _React$Component);
+  var _super = _createSuper(Draggable);
+  function Draggable(props) {
+    var _this;
+    _classCallCheck(this, Draggable);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "nodeRef", void 0);
+    _defineProperty(_assertThisInitialized(_this), "intervalStart", void 0);
+    _defineProperty(_assertThisInitialized(_this), "deltaX", void 0);
+    _defineProperty(_assertThisInitialized(_this), "deltaY", void 0);
+    _defineProperty(_assertThisInitialized(_this), "defaultScrollBarSize", void 0);
+    _defineProperty(_assertThisInitialized(_this), "overlapDetection", function () {
+      var node = _this.nodeRef.current;
+      var _node$getBoundingClie = node.getBoundingClientRect(),
+        left = _node$getBoundingClie.left,
+        top = _node$getBoundingClie.top,
+        right = _node$getBoundingClie.right,
+        bottom = _node$getBoundingClie.bottom,
+        width = _node$getBoundingClie.width,
+        height = _node$getBoundingClie.height;
+      var aroundElems = [document.elementFromPoint(left, top), document.elementFromPoint(right, bottom), document.elementFromPoint(left + width / 2, top + height / 2)];
+      for (var _i = 0, _aroundElems = aroundElems; _i < _aroundElems.length; _i++) {
+        var elem = _aroundElems[_i];
+        if (elem !== node && isFixedElem(elem)) {
+          if (_this.props.onOverlap) {
+            // eslint-disable-next-line react/destructuring-assignment
+            _this.props.onOverlap();
+          }
+          break;
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getContainerDom", function () {
+      var getPopupContainer = _this.props.getPopupContainer;
+      var dom = getPopupContainer ? getPopupContainer() : undefined;
+      return dom;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
+      var dom = _this.getContainerDom();
+      // update defaultScrollBarSize
+      _this.defaultScrollBarSize = getScrollBarSize();
+      var node = _this.nodeRef.current;
+      var clientRect = node.getBoundingClientRect();
+      var width = clientRect.width,
+        height = clientRect.height;
+      var _window$getComputedSt = window.getComputedStyle(node),
+        styleRight = _window$getComputedSt.right,
+        styleBottom = _window$getComputedSt.bottom;
+      var right = Number(styleRight.replace('px', ''));
+      var bottom = Number(styleBottom.replace('px', ''));
+      var clientWidth = getClientWidth(dom);
+      var clientHeight = getClientHeight(dom);
+      var deltaX = clientWidth - right - width;
+      var deltaY = clientHeight - bottom - height;
+
+      // drag boundary detection
+      if (deltaX < 0) {
+        right += deltaX;
+      }
+      if (deltaY < 0) {
+        bottom += deltaY;
+      }
+      _this.setState({
+        bottom: bottom,
+        right: right
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
+      // 非鼠标左键点按不处理
+      if (e.button !== 0) {
+        return;
+      }
+      var dom = _this.getContainerDom();
+      _this.intervalStart = new Date().getTime();
+      var scroll = getScrollOffsets(dom);
+      var node = _this.nodeRef.current;
+      var startX = e.clientX + scroll.x;
+      var startY = e.clientY + scroll.y;
+      var origX = node.offsetLeft;
+      var origY = node.offsetTop;
+      _this.deltaX = startX - origX;
+      _this.deltaY = startY - origY;
+      if (_this.props.onDragStart) {
+        _this.props.onDragStart();
+      }
+      _this.setState({
+        dragged: true
+      });
+
+      // We've handled this event. Don't let anybody else see it.
+      if (e.stopPropagation) e.stopPropagation();
+      // Standard model
+      else e.cancelBubble = true; // IE
+
+      // Now prevent any default action.
+      if (e.preventDefault) e.preventDefault();
+      // Standard model
+      else e.returnValue = false; // IE
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function (e) {
+      var dragged = _this.state.dragged;
+      var hide = _this.props.hide;
+
+      // 非鼠标左键点击 || 不在组件点击或拖拽过程中 || 组件隐藏中 都不处理鼠标移动事件
+      if (e.button !== 0 || !dragged || !!hide) {
+        return;
+      }
+      var clientX = e.clientX,
+        clientY = e.clientY;
+      var _assertThisInitialize = _assertThisInitialized(_this),
+        deltaX = _assertThisInitialize.deltaX,
+        deltaY = _assertThisInitialize.deltaY;
+      var node = _this.nodeRef.current;
+      var dom = _this.getContainerDom();
+      var scroll = getScrollOffsets(dom);
+      var clientWidth = getClientWidth(dom);
+      var clientHeight = getClientHeight(dom);
+      var _node$getBoundingClie2 = node.getBoundingClientRect(),
+        width = _node$getBoundingClie2.width,
+        height = _node$getBoundingClie2.height;
+      var left = clientX + scroll.x - deltaX;
+      var top = clientY + scroll.y - deltaY;
+      var right = clientWidth - left - width;
+      var bottom = clientHeight - top - height;
+
+      // boundary detection
+      // left boundary
+      if (right > clientWidth - width) {
+        right = clientWidth - width;
+      }
+      // top boundary
+      if (bottom > clientHeight - height) {
+        bottom = clientHeight - height;
+      }
+      // right boundary
+      if (right < 0) {
+        right = 0;
+      }
+      // bottom boundary
+      if (bottom < 0) {
+        bottom = 0;
+      }
+      _this.setState({
+        dragged: true,
+        right: right - _this.defaultScrollBarSize,
+        bottom: bottom
+      }, function () {
+        if (_this.props.onDrag) {
+          _this.props.onDrag({
+            right: right,
+            bottom: bottom
+          });
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
+      var dragged = _this.state.dragged;
+
+      // 非组件左键点按之后的事件不处理
+      if (dragged) {
+        var interval = new Date().getTime() - _this.intervalStart;
+        if (interval < 200 && e.target.id !== 'ui-mini-hide') {
+          _this.props.onClick(e);
+          _this.setState({
+            dragged: false
+          });
+          return;
+        }
+        _this.setState({
+          dragged: false
+        }, function () {
+          if (_this.props.onDragEnd) {
+            _this.props.onDragEnd();
+          }
+        });
+      }
+    });
+    var _props$position = props.position,
+      position = _props$position === void 0 ? {} : _props$position;
+    _this.intervalStart = 0;
+    _this.nodeRef = /*#__PURE__*/React.createRef();
+    _this.deltaX = 0;
+    _this.deltaY = 0;
+    _this.defaultScrollBarSize = getScrollBarSize();
+    _this.state = {
+      dragged: false,
+      width: 0,
+      bottom: position.bottom ? position.bottom : INIT_BOTTOM,
+      right: position.right ? position.right : INIT_RIGHT
+    };
+    return _this;
+  }
+  _createClass(Draggable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('resize', this.handleResize, false);
+      window.addEventListener('mousemove', this.handleMouseMove, false);
+      window.addEventListener('mouseup', this.handleMouseUp, false);
+      window.addEventListener('load', this.overlapDetection, false);
+      var _this$nodeRef$current = this.nodeRef.current.getBoundingClientRect(),
+        width = _this$nodeRef$current.width;
+      this.setState({
+        width: width
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('load', this.overlapDetection, false);
+      window.removeEventListener('mousemove', this.handleMouseMove, false);
+      window.removeEventListener('mouseup', this.handleMouseUp, false);
+      window.removeEventListener('resize', this.handleResize, false);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps) {
+      var preHide = preProps.hide;
+      var hide = this.props.hide;
+
+      // 隐藏到显示，贴右侧边
+      if (preHide && !hide) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          right: INIT_RIGHT
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames;
+      var _this$props = this.props,
+        children = _this$props.children,
+        hide = _this$props.hide,
+        _this$props$style = _this$props.style,
+        style = _this$props$style === void 0 ? {} : _this$props$style,
+        prefix = _this$props.prefix,
+        className = _this$props.className,
+        id = _this$props.id,
+        onMouseEnter = _this$props.onMouseEnter,
+        onMouseLeave = _this$props.onMouseLeave;
+      var _this$state = this.state,
+        dragged = _this$state.dragged,
+        width = _this$state.width,
+        bottom = _this$state.bottom,
+        right = _this$state.right;
+      var containerStyle = _objectSpread({
+        bottom: bottom,
+        right: right
+      }, style);
+      var containerPrefix = "".concat(prefix, "-container");
+      var containerClassName = classnames(containerPrefix, className, (_classnames = {}, _defineProperty(_classnames, "".concat(containerPrefix, "-dragged"), dragged), _defineProperty(_classnames, "".concat(containerPrefix, "-hide"), hide), _defineProperty(_classnames, "".concat(containerPrefix, "-hide-not-dragged"), hide && !dragged), _classnames));
+      return /*#__PURE__*/React.createElement("div", {
+        id: id,
+        ref: this.nodeRef,
+        onMouseDown: this.handleMouseDown,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        style: hide ? _objectSpread(_objectSpread({}, containerStyle), {}, {
+          right: -width / 1.5
+        }) : containerStyle,
+        className: containerClassName
+      }, children);
+    }
+  }]);
+  return Draggable;
+}(React.Component);
+export default Draggable;

package/es/SideTip/IconLoading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const iconLoading: (props: any) => React.JSX.Element;
+export default iconLoading;

package/es/SideTip/IconLoading.js

@@ -0,0 +1,38 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import Icon from '@ant-design/icons';
+var LoadingSvg = function LoadingSvg() {
+  return /*#__PURE__*/React.createElement("svg", {
+    version: "1.1",
+    id: "dc-spinner",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    width: "1em",
+    height: "1em",
+    stroke: "currentColor",
+    viewBox: "3 3 34 34",
+    preserveAspectRatio: "xMinYMin meet"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeWidth: "1",
+    strokeMiterlimit: "10",
+    d: "M5.203,20 c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z",
+    transform: "rotate(278.217 20 20)"
+  }, /*#__PURE__*/React.createElement("animateTransform", {
+    attributeName: "transform",
+    type: "rotate",
+    from: "0 20 20",
+    to: "360 20 20",
+    calcMode: "spline",
+    keySplines: "0.2, 0.2, 0.2, 0.2",
+    keyTimes: "0;1",
+    dur: "1.2s",
+    repeatCount: "indefinite"
+  })));
+};
+var iconLoading = function iconLoading(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    component: LoadingSvg
+  }, props));
+};
+export default iconLoading;

package/es/SideTip/index.d.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+import type { BadgeProps } from 'antd/es/badge/index';
+import type { TooltipPropsWithTitle } from 'antd/es/tooltip/index';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export declare type SideTipType = 'primary' | 'default';
+export declare type SideTipSize = 'small' | 'default';
+export interface Position {
+    /**
+     * @title 距离右侧
+     * @description 设置悬浮按钮距离右侧边框的像素距离
+     * @default "32"
+     */
+    right?: number;
+    /**
+     * @title 距离底部
+     * @description 设置悬浮按钮距离底部边框的像素距离
+     * @default "32"
+     */
+    bottom?: number;
+}
+export interface SideTipProps extends LocaleWrapperProps {
+    /**
+     * @description 自定义前缀
+     * @ignore
+     */
+    prefix?: string;
+    /**
+     * @title 按钮类型
+     * @description 按钮类型
+     */
+    type?: SideTipType;
+    /**
+     * @title 按钮尺寸
+     * @description 按钮尺寸
+     */
+    size?: SideTipSize;
+    /**
+     * @title icon 地址
+     * @description icon地址，可以设置图片地址或 ReactNode
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * @title 指定是否打开
+     * @description 指定是否打开
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * @title 指定是否打开
+     * @description 指定是否打开
+     * @default false
+     * @deprecated
+     */
+    visible?: boolean;
+    /**
+     * @title 加载中
+     * @description 指定是否loading
+     */
+    loading?: boolean;
+    /**
+     * @title 是否可隐藏
+     * @description 是否可隐藏
+     * @default true
+     */
+    hideable?: boolean;
+    /**
+     * @title 组件 ID
+     * @description 若页面中有多个侧边提示组件，则通过 id 标识当前组件，用于缓存侧边提示组件是否隐藏配置
+     */
+    id?: string;
+    /**
+     * @description style 属性
+     * @ignore
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description className
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @title 按钮 style 属性
+     * @description 按钮的 style 属性
+     */
+    buttonStyle?: React.CSSProperties;
+    /**
+     * @title 按钮的 className 属性
+     * @description 按钮的 className 属性
+     */
+    buttonClassName?: string;
+    /**
+     * @title 徽标属性
+     * @description 徽标属性，详见antd [badge](https://ant.design/components/badge-cn/#API)属性
+     */
+    badge?: BadgeProps;
+    /**
+     * @title ToolTip 相关属性
+     * @description ToolTip 相关属性
+     */
+    tooltip?: TooltipPropsWithTitle;
+    /**
+     * @title 默认是否隐藏
+     * @description 按钮默认是否隐藏
+     * @default false
+     */
+    defaultHide?: boolean;
+    /**
+     * @title 初始位置
+     * @description 初始位置
+     */
+    position?: Position;
+    /**
+     * @description 点击气泡事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * @description 开始拖动
+     */
+    onDragStart?: () => void;
+    /**
+     * @description 结束拖动
+     */
+    onDragEnd?: () => void;
+    /**
+     * @description 正在拖动
+     */
+    onDrag?: (offset: any) => void;
+    /**
+     * 鼠标移入事件
+     */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /**
+     * 鼠标离开事件
+     */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /**
+     * @title 不可用
+     * @description 不可用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @title 返回气泡弹出所在的容器
+     * @description 返回气泡弹出所在的容器
+     * @default "() => document.body"
+     */
+    getPopupContainer?: () => HTMLElement;
+    children?: any;
+}
+export interface SideTipState {
+    hide?: boolean;
+    hovered?: boolean;
+}
+declare const _default: any;
+export default _default;

package/es/SideTip/index.js

@@ -0,0 +1,177 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { createRef, useEffect, useState } from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import { Badge, Tooltip } from 'antd';
+import classnames from 'classnames';
+import Dragger from "./Dragger";
+import IconLoading from "./IconLoading";
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix } from "../_util";
+import zhCN from "./locale/zh-CN";
+// @ts-ignore
+import "./index.less";
+var STORE_SIDETIP_HIDE = 'ob-sidetip-hide';
+var getLocalStorageKey = function getLocalStorageKey(id) {
+  return ["".concat(STORE_SIDETIP_HIDE), id].join('-');
+};
+var SideTip = function SideTip(props) {
+  var _classnames, _classnames2, _classnames3;
+  var buttonRef = /*#__PURE__*/createRef();
+  var defaultHide = props.defaultHide,
+    onClick = props.onClick,
+    open = props.open,
+    loading = props.loading,
+    children = props.children,
+    icon = props.icon,
+    type = props.type,
+    size = props.size,
+    style = props.style,
+    visible = props.visible,
+    className = props.className,
+    badge = props.badge,
+    tooltip = props.tooltip,
+    position = props.position,
+    onDragStart = props.onDragStart,
+    onDragEnd = props.onDragEnd,
+    onDrag = props.onDrag,
+    customButtonClassName = props.buttonClassName,
+    buttonStyle = props.buttonStyle,
+    id = props.id,
+    _props$hideable = props.hideable,
+    hideable = _props$hideable === void 0 ? true : _props$hideable,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    getPopupContainer = props.getPopupContainer;
+  var _useState = useState(hideable ? defaultHide === undefined ? window.localStorage.getItem(getLocalStorageKey(id)) === 'true' : !!defaultHide : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hide = _useState2[0],
+    setHide = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hovered = _useState4[0],
+    setHovered = _useState4[1];
+  useEffect(function () {
+    if (hide) {
+      window.localStorage.setItem(getLocalStorageKey(id), 'true');
+    } else {
+      window.localStorage.removeItem(getLocalStorageKey(id));
+    }
+  }, [hide]);
+  var hideSideTip = function hideSideTip() {
+    setHide(true);
+  };
+  var onButtonClick = function onButtonClick(e) {
+    if (hide) {
+      // isHide
+      setHide(false);
+    } else {
+      if (disabled) return;
+      // not hide, show iframe
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter(e) {
+    setHovered(true);
+    if (props.onMouseEnter) {
+      props.onMouseEnter(e);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    setHovered(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(e);
+    }
+  };
+  var getTypeCls = function getTypeCls(typeCls) {
+    if (typeCls === 'primary') return 'primary';
+    return '';
+  };
+  var getSizeCls = function getSizeCls(sizeCls) {
+    if (sizeCls === 'small') return 'small';
+    return '';
+  };
+  var prefix = getPrefix('sidetip');
+  var typeCls = getTypeCls(type);
+  var sizeCls = getSizeCls(size);
+  var buttonPrefix = "".concat(prefix, "-button");
+
+  // icon
+  var iconClassName = classnames("".concat(buttonPrefix, "-icon"), (open || visible) && "".concat(buttonPrefix, "-icon-open"), disabled && "".concat(buttonPrefix, "-icon-disabled"), typeCls && "".concat(buttonPrefix, "-icon-").concat(typeCls), sizeCls && "".concat(buttonPrefix, "-icon-").concat(sizeCls));
+  // 接受三种形式的icon
+  var iconDom = /*#__PURE__*/React.createElement("span", {
+    className: iconClassName
+  }, /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement("img", {
+    src: icon,
+    alt: "icon",
+    width: "100%",
+    height: "100%"
+  }));
+
+  // close 按钮
+  var closeClassName = classnames("".concat(buttonPrefix, "-close"), (_classnames = {}, _defineProperty(_classnames, "".concat(buttonPrefix, "-close-show"), open || visible), _defineProperty(_classnames, "".concat(buttonPrefix, "-close-").concat(typeCls), typeCls), _defineProperty(_classnames, "".concat(buttonPrefix, "-close-").concat(sizeCls), sizeCls), _classnames));
+  var buttonClassName = classnames(buttonPrefix, customButtonClassName, (_classnames2 = {}, _defineProperty(_classnames2, "".concat(buttonPrefix, "-disabled"), disabled), _defineProperty(_classnames2, "".concat(buttonPrefix, "-").concat(typeCls), typeCls), _defineProperty(_classnames2, "".concat(buttonPrefix, "-").concat(sizeCls), sizeCls), _classnames2));
+  var loadingClassName = classnames("".concat(buttonPrefix, "-loading"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(buttonPrefix, "-loading-").concat(typeCls), typeCls), _defineProperty(_classnames3, "".concat(buttonPrefix, "-loading-").concat(sizeCls), sizeCls), _classnames3));
+
+  // 内部 Icon
+  var InnerButton = /*#__PURE__*/React.createElement("div", {
+    className: buttonClassName,
+    ref: buttonRef,
+    style: buttonStyle
+  }, loading && /*#__PURE__*/React.createElement(IconLoading, {
+    className: loadingClassName
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, iconDom, /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: closeClassName
+  })));
+
+  // 徽标
+  var BadgeButton = badge ? /*#__PURE__*/React.createElement(Badge, _extends({
+    offset: [-6, 6]
+  }, badge), InnerButton) : InnerButton;
+  var hideIconClassName = classnames("".concat(prefix, "-hide"), _defineProperty({}, "".concat(prefix, "-hide-hovered"), hovered));
+
+  // 隐藏按钮
+  var hideIcon = /*#__PURE__*/React.createElement("div", {
+    id: "ui-mini-hide",
+    onClick: hideSideTip,
+    className: hideIconClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-hide-icon")
+  }));
+  return /*#__PURE__*/React.createElement(Dragger, {
+    id: id,
+    open: open || visible,
+    hide: hide,
+    onClick: onButtonClick,
+    onOverlap: hideSideTip,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    style: style,
+    position: position,
+    prefix: prefix,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    onDrag: onDrag,
+    getPopupContainer: getPopupContainer,
+    className: className
+  }, tooltip && tooltip.title ? /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    getPopupContainer: function getPopupContainer() {
+      return buttonRef.current;
+    }
+  }), BadgeButton) : BadgeButton, hideable && hideIcon, children);
+};
+export default LocaleWrapper({
+  componentName: 'SideTip',
+  defaultLocale: zhCN
+})(SideTip);