dtable-ui-component 5.2.16 → 5.2.18-alpha.1

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ColorPickerPortal;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _utils = require("../../utils/utils");
+function ColorPickerPortal(_ref) {
+  let {
+    target,
+    scrollContainerId,
+    throttleDelay,
+    children
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  (0, _react.useEffect)(() => {
+    if (!target || !containerRef.current) return;
+    const updatePosition = () => {
+      const targetRect = target.getBoundingClientRect();
+      const {
+        top: spaceAbove,
+        left
+      } = targetRect;
+      const portalRectHeight = containerRef.current.clientHeight;
+      if (spaceAbove < portalRectHeight) {
+        setPosition({
+          top: "calc(".concat(spaceAbove, "px + 2.375rem)"),
+          left: left + 1 + 'px'
+        });
+        return;
+      }
+      setPosition({
+        top: "calc(".concat(spaceAbove - portalRectHeight, "px)"),
+        left: left + 1 + 'px'
+      });
+    };
+    updatePosition();
+    const throttledUpdatePosition = (0, _utils.throttle)(updatePosition, throttleDelay);
+    const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : null;
+    scrollContainer && scrollContainer.addEventListener('scroll', throttledUpdatePosition);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      scrollContainer && scrollContainer.removeEventListener('scroll', throttledUpdatePosition);
+    };
+  }, [target, containerRef, scrollContainerId, throttleDelay]);
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-color-picker-portal",
+    style: {
+      position: 'absolute',
+      zIndex: '10',
+      left: position.left,
+      top: position.top,
+      width: '240px',
+      height: '370px'
+    },
+    ref: containerRef
+  }, children), document.body);
+}

package/lib/DTableColorPicker/index.js

@@ -13,6 +13,7 @@ var _dtableUtils = require("dtable-utils");
 var _lang = require("../lang");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _utils = require("./utils");
+var _ColorPickerPortal = _interopRequireDefault(require("./ColorPickerPortal"));
 require("./index.css");
 const DEFAULT_COLORS = ['#ffffff', '#f5f5f5', '#eef6f9', '#333333', '#ff0000', '#ffff00', '#0000ff', '#00ff00'];
 const COLOR_PICKER_MODE = {
@@ -30,7 +31,11 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     onToggle,
     popoverStyle,
     color,
-    defaultColors
+    defaultColors,
+    useProtal,
+    target,
+    scrollContainerId,
+    throttleDelay = 20
   } = props;
   const initialRgbaColor = (0, _utils.hexToRgba)(color);
   const [value, setValue] = (0, _react.useState)(initialRgbaColor);
@@ -327,13 +332,21 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       className: "blank-placeholder d-flex align-items-center justify-content-center"
     }, /*#__PURE__*/_react.default.createElement("span", null, "/"))));
   };
-  return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+  const colorPicker = /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
     onClickOutside: onClosePopover
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: popoverStyle,
     ref: colorPickerRef,
     className: "dtable-color-picker"
   }, renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()));
+  if (useProtal && target && scrollContainerId) {
+    return /*#__PURE__*/_react.default.createElement(_ColorPickerPortal.default, {
+      target: target,
+      scrollContainerId: scrollContainerId,
+      throttleDelay: throttleDelay
+    }, colorPicker);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorPicker);
 });
 DTableColorPicker.defaultProps = {
   color: '#ffffff'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.16",
+  "version": "5.2.18-alpha.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",