@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/Ranger/locale/zh-CN.js

@@ -1,27 +1,9 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/Ranger/locale/zh-CN.ts
-var zh_CN_exports = {};
-__export(zh_CN_exports, {
-  default: () => zh_CN_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_CN_exports);
-var zh_CN_default = {
-  customize: "自定义时间"
-};
+exports.default = void 0;
+var _default = exports.default = {
+  customize: '自定义时间'
+};

package/lib/Ranger/locale/zh-TW.js

@@ -1,27 +1,9 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/Ranger/locale/zh-TW.ts
-var zh_TW_exports = {};
-__export(zh_TW_exports, {
-  default: () => zh_TW_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_TW_exports);
-var zh_TW_default = {
-  customize: "自定義時間"
-};
+exports.default = void 0;
+var _default = exports.default = {
+  customize: '自定義時間'
+};

package/lib/Ranger/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type RangerToken = OBToken;
+export declare const genRangerStyle: GenerateStyle<RangerToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/Ranger/style/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genRangerStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genRangerStyle = token => {
+  const {
+    componentCls,
+    antCls
+  } = token;
+  return {
+    [`${componentCls}`]: {
+      [`${antCls}-space-item:nth-child(2)`]: {
+        flex: 1,
+        width: '100%',
+        [`${antCls}-picker, ${antCls}-picker-range, ${componentCls}-range-picker`]: {
+          width: '100%',
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          input: {
+            textAlign: 'center'
+          }
+        }
+      },
+      [`${componentCls}-date-picker`]: {
+        [`${antCls}-select-selector`]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          '&:hover': {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      }
+    },
+    [`${componentCls}-show-range`]: {
+      [`${componentCls}-quick-picker${componentCls}-quick-picker-select`]: {
+        marginRight: -1,
+        [`${antCls}-select-selector`]: {
+          borderTopRightRadius: '0 !important',
+          borderBottomRightRadius: '0 !important',
+          '&:hover': {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      }
+    }
+  };
+};
+exports.genRangerStyle = genRangerStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('Ranger', token => {
+    return [genRangerStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+exports.default = _default;

package/lib/Ranger/typing.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/Ranger/typing.ts
-var typing_exports = {};
-module.exports = __toCommonJS(typing_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/SideTip/Dragger.js

@@ -1,195 +1,35 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/SideTip/Dragger.tsx
-var Dragger_exports = {};
-__export(Dragger_exports, {
-  default: () => Dragger_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Dragger_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_utils = require("./utils");
-var INIT_RIGHT = 32;
-var INIT_BOTTOM = 32;
-var Draggable = class extends import_react.default.Component {
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+/* eslint-disable react/sort-comp */
+/* eslint-disable no-restricted-syntax */
+const INIT_RIGHT = 32;
+const INIT_BOTTOM = 32;
+class Draggable extends _react.default.Component {
+  nodeRef;
+  intervalStart;
+  deltaX;
+  deltaY;
+  defaultScrollBarSize;
   constructor(props) {
     super(props);
-    this.overlapDetection = () => {
-      const node = this.nodeRef.current;
-      const { left, top, right, bottom, width, height } = node.getBoundingClientRect();
-      const aroundElems = [
-        document.elementFromPoint(left, top),
-        document.elementFromPoint(right, bottom),
-        document.elementFromPoint(left + width / 2, top + height / 2)
-      ];
-      for (const elem of aroundElems) {
-        if (elem !== node && (0, import_utils.isFixedElem)(elem)) {
-          if (this.props.onOverlap) {
-            this.props.onOverlap();
-          }
-          break;
-        }
-      }
-    };
-    this.getContainerDom = () => {
-      const { getPopupContainer } = this.props;
-      const dom = getPopupContainer ? getPopupContainer() : void 0;
-      return dom;
-    };
-    this.handleResize = () => {
-      const dom = this.getContainerDom();
-      this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
-      const node = this.nodeRef.current;
-      const clientRect = node.getBoundingClientRect();
-      const { width, height } = clientRect;
-      const { right: styleRight, bottom: styleBottom } = window.getComputedStyle(node);
-      let right = Number(styleRight.replace("px", ""));
-      let bottom = Number(styleBottom.replace("px", ""));
-      const clientWidth = (0, import_utils.getClientWidth)(dom);
-      const clientHeight = (0, import_utils.getClientHeight)(dom);
-      const deltaX = clientWidth - right - width;
-      const deltaY = clientHeight - bottom - height;
-      if (deltaX < 0) {
-        right += deltaX;
-      }
-      if (deltaY < 0) {
-        bottom += deltaY;
-      }
-      this.setState({
-        bottom,
-        right
-      });
-    };
-    this.handleMouseDown = (e) => {
-      if (e.button !== 0) {
-        return;
-      }
-      const dom = this.getContainerDom();
-      this.intervalStart = (/* @__PURE__ */ new Date()).getTime();
-      const scroll = (0, import_utils.getScrollOffsets)(dom);
-      const node = this.nodeRef.current;
-      const startX = e.clientX + scroll.x;
-      const startY = e.clientY + scroll.y;
-      const origX = node.offsetLeft;
-      const origY = node.offsetTop;
-      this.deltaX = startX - origX;
-      this.deltaY = startY - origY;
-      if (this.props.onDragStart) {
-        this.props.onDragStart();
-      }
-      this.setState({
-        dragged: true
-      });
-      if (e.stopPropagation)
-        e.stopPropagation();
-      else
-        e.cancelBubble = true;
-      if (e.preventDefault)
-        e.preventDefault();
-      else
-        e.returnValue = false;
-    };
-    this.handleMouseMove = (e) => {
-      const { dragged } = this.state;
-      const { hide } = this.props;
-      if (e.button !== 0 || !dragged || !!hide) {
-        return;
-      }
-      const { clientX, clientY } = e;
-      const { deltaX, deltaY } = this;
-      const node = this.nodeRef.current;
-      const dom = this.getContainerDom();
-      const scroll = (0, import_utils.getScrollOffsets)(dom);
-      const clientWidth = (0, import_utils.getClientWidth)(dom);
-      const clientHeight = (0, import_utils.getClientHeight)(dom);
-      const { width, height } = node.getBoundingClientRect();
-      const left = clientX + scroll.x - deltaX;
-      const top = clientY + scroll.y - deltaY;
-      let right = clientWidth - left - width;
-      let bottom = clientHeight - top - height;
-      if (right > clientWidth - width) {
-        right = clientWidth - width;
-      }
-      if (bottom > clientHeight - height) {
-        bottom = clientHeight - height;
-      }
-      if (right < 0) {
-        right = 0;
-      }
-      if (bottom < 0) {
-        bottom = 0;
-      }
-      this.setState(
-        {
-          dragged: true,
-          right: right - this.defaultScrollBarSize,
-          bottom
-        },
-        () => {
-          if (this.props.onDrag) {
-            this.props.onDrag({
-              right,
-              bottom
-            });
-          }
-        }
-      );
-    };
-    this.handleMouseUp = (e) => {
-      const { dragged } = this.state;
-      if (dragged) {
-        const interval = (/* @__PURE__ */ 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
-          },
-          () => {
-            if (this.props.onDragEnd) {
-              this.props.onDragEnd();
-            }
-          }
-        );
-      }
-    };
-    const { position = {} } = props;
+    const {
+      position = {}
+    } = props;
     this.intervalStart = 0;
-    this.nodeRef = import_react.default.createRef();
+    this.nodeRef = /*#__PURE__*/_react.default.createRef();
     this.deltaX = 0;
     this.deltaY = 0;
-    this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
+    this.defaultScrollBarSize = (0, _utils.getScrollBarSize)();
     this.state = {
       dragged: false,
       width: 0,
@@ -197,35 +37,227 @@ var Draggable = class extends import_react.default.Component {
       right: position.right ? position.right : INIT_RIGHT
     };
   }
+  overlapDetection = () => {
+    const node = this.nodeRef.current;
+    const {
+      left,
+      top,
+      right,
+      bottom,
+      width,
+      height
+    } = node.getBoundingClientRect();
+    const aroundElems = [document.elementFromPoint(left, top), document.elementFromPoint(right, bottom), document.elementFromPoint(left + width / 2, top + height / 2)];
+    for (const elem of aroundElems) {
+      if (elem !== node && (0, _utils.isFixedElem)(elem)) {
+        if (this.props.onOverlap) {
+          // eslint-disable-next-line react/destructuring-assignment
+          this.props.onOverlap();
+        }
+        break;
+      }
+    }
+  };
   componentDidMount() {
-    const { draggable = true } = this.props;
-    window.addEventListener("resize", this.handleResize, false);
-    if (draggable)
-      window.addEventListener("mousemove", this.handleMouseMove, false);
-    window.addEventListener("mouseup", this.handleMouseUp, false);
-    window.addEventListener("load", this.overlapDetection, false);
-    const { width } = this.nodeRef.current.getBoundingClientRect();
+    const {
+      draggable = true
+    } = this.props;
+    window.addEventListener('resize', this.handleResize, false);
+    if (draggable) window.addEventListener('mousemove', this.handleMouseMove, false);
+    window.addEventListener('mouseup', this.handleMouseUp, false);
+    window.addEventListener('load', this.overlapDetection, false);
+    const {
+      width
+    } = this.nodeRef.current.getBoundingClientRect();
     this.setState({
       width
     });
   }
   componentWillUnmount() {
-    const { draggable = true } = this.props;
-    window.removeEventListener("load", this.overlapDetection, false);
-    if (draggable)
-      window.removeEventListener("mousemove", this.handleMouseMove, false);
-    window.removeEventListener("mouseup", this.handleMouseUp, false);
-    window.removeEventListener("resize", this.handleResize, false);
+    const {
+      draggable = true
+    } = this.props;
+    window.removeEventListener('load', this.overlapDetection, false);
+    if (draggable) window.removeEventListener('mousemove', this.handleMouseMove, false);
+    window.removeEventListener('mouseup', this.handleMouseUp, false);
+    window.removeEventListener('resize', this.handleResize, false);
   }
+  getContainerDom = () => {
+    const {
+      getPopupContainer
+    } = this.props;
+    const dom = getPopupContainer ? getPopupContainer() : undefined;
+    return dom;
+  };
   componentDidUpdate(preProps) {
-    const { hide: preHide } = preProps;
-    const { hide } = this.props;
+    const {
+      hide: preHide
+    } = preProps;
+    const {
+      hide
+    } = this.props;
+
+    // 隐藏到显示，贴右侧边
     if (preHide && !hide) {
+      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         right: INIT_RIGHT
       });
     }
   }
+  handleResize = () => {
+    const dom = this.getContainerDom();
+    // update defaultScrollBarSize
+    this.defaultScrollBarSize = (0, _utils.getScrollBarSize)();
+    const node = this.nodeRef.current;
+    const clientRect = node.getBoundingClientRect();
+    const {
+      width,
+      height
+    } = clientRect;
+    const {
+      right: styleRight,
+      bottom: styleBottom
+    } = window.getComputedStyle(node);
+    let right = Number(styleRight.replace('px', ''));
+    let bottom = Number(styleBottom.replace('px', ''));
+    const clientWidth = (0, _utils.getClientWidth)(dom);
+    const clientHeight = (0, _utils.getClientHeight)(dom);
+    const deltaX = clientWidth - right - width;
+    const deltaY = clientHeight - bottom - height;
+
+    // drag boundary detection
+    if (deltaX < 0) {
+      right += deltaX;
+    }
+    if (deltaY < 0) {
+      bottom += deltaY;
+    }
+    this.setState({
+      bottom,
+      right
+    });
+  };
+  handleMouseDown = e => {
+    // 非鼠标左键点按不处理
+    if (e.button !== 0) {
+      return;
+    }
+    const dom = this.getContainerDom();
+    this.intervalStart = new Date().getTime();
+    const scroll = (0, _utils.getScrollOffsets)(dom);
+    const node = this.nodeRef.current;
+    const startX = e.clientX + scroll.x;
+    const startY = e.clientY + scroll.y;
+    const origX = node.offsetLeft;
+    const 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
+  };
+  handleMouseMove = e => {
+    const {
+      dragged
+    } = this.state;
+    const {
+      hide
+    } = this.props;
+
+    // 非鼠标左键点击 || 不在组件点击或拖拽过程中 || 组件隐藏中 都不处理鼠标移动事件
+    if (e.button !== 0 || !dragged || !!hide) {
+      return;
+    }
+    const {
+      clientX,
+      clientY
+    } = e;
+    const {
+      deltaX,
+      deltaY
+    } = this;
+    const node = this.nodeRef.current;
+    const dom = this.getContainerDom();
+    const scroll = (0, _utils.getScrollOffsets)(dom);
+    const clientWidth = (0, _utils.getClientWidth)(dom);
+    const clientHeight = (0, _utils.getClientHeight)(dom);
+    const {
+      width,
+      height
+    } = node.getBoundingClientRect();
+    const left = clientX + scroll.x - deltaX;
+    const top = clientY + scroll.y - deltaY;
+    let right = clientWidth - left - width;
+    let 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
+    }, () => {
+      if (this.props.onDrag) {
+        this.props.onDrag({
+          right,
+          bottom
+        });
+      }
+    });
+  };
+  handleMouseUp = e => {
+    const {
+      dragged
+    } = this.state;
+
+    // 非组件左键点按之后的事件不处理
+    if (dragged) {
+      const 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
+      }, () => {
+        if (this.props.onDragEnd) {
+          this.props.onDragEnd();
+        }
+      });
+    }
+  };
   render() {
     const {
       children,
@@ -237,27 +269,36 @@ var Draggable = class extends import_react.default.Component {
       onMouseEnter,
       onMouseLeave
     } = this.props;
-    const { dragged, width, bottom, right } = this.state;
-    const containerStyle = { bottom, right, ...style };
+    const {
+      dragged,
+      width,
+      bottom,
+      right
+    } = this.state;
+    const containerStyle = {
+      bottom,
+      right,
+      ...style
+    };
     const containerPrefix = `${prefix}-container`;
-    const containerClassName = (0, import_classnames.default)(containerPrefix, className, {
+    const containerClassName = (0, _classnames.default)(containerPrefix, className, {
       [`${containerPrefix}-dragged`]: dragged,
       [`${containerPrefix}-hide`]: hide,
       [`${containerPrefix}-hide-not-dragged`]: hide && !dragged
     });
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        id,
-        ref: this.nodeRef,
-        onMouseDown: this.handleMouseDown,
-        onMouseEnter,
-        onMouseLeave,
-        style: hide ? { ...containerStyle, right: -width / 1.5 } : containerStyle,
-        className: containerClassName
-      },
-      children
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: id,
+      ref: this.nodeRef,
+      onMouseDown: this.handleMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      style: hide ? {
+        ...containerStyle,
+        right: -width / 1.5
+      } : containerStyle,
+      className: containerClassName,
+      children: children
+    });
   }
-};
-var Dragger_default = Draggable;
+}
+var _default = exports.default = Draggable;