@oceanbase/ui 0.2.0

package/es/SideTip/Dragger.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Position } from './index';
+interface DraggableProps {
+    onOverlap?: () => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    onDrag?: (offset: any) => void;
+    onClick?: (e: any) => void;
+    onMouseEnter?: (e: any) => void;
+    onMouseLeave?: (e: any) => void;
+    hide?: boolean;
+    open?: boolean;
+    style?: React.CSSProperties;
+    position?: Position;
+    className?: string;
+    prefix?: string;
+    id?: string;
+    getPopupContainer?: () => HTMLElement;
+    children?: any;
+}
+interface DraggableState {
+    dragged?: boolean;
+    width?: number;
+    bottom?: number;
+    right?: number;
+}
+declare class Draggable extends React.Component<DraggableProps, DraggableState> {
+    nodeRef: React.RefObject<HTMLDivElement>;
+    intervalStart: number;
+    deltaX: number;
+    deltaY: number;
+    defaultScrollBarSize: number;
+    constructor(props: any);
+    overlapDetection: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getContainerDom: () => HTMLElement;
+    componentDidUpdate(preProps: any): void;
+    handleResize: () => void;
+    handleMouseDown: (e: any) => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    render(): React.JSX.Element;
+}
+export default Draggable;

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 classnames from 'classnames';
+import React from 'react';
+import { getClientHeight, getClientWidth, getScrollBarSize, getScrollOffsets, isFixedElem } from "./utils";
+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 @@
+/// <reference types="react" />
+declare const iconLoading: (props: any) => import("react").JSX.Element;
+export default iconLoading;

package/es/SideTip/IconLoading.js

@@ -0,0 +1,37 @@
+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 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 type { BadgeProps } from 'antd/es/badge/index';
+import type { TooltipPropsWithTitle } from 'antd/es/tooltip/index';
+import React from 'react';
+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;