rc-picker - npm Package Compare versions

Comparing version 4.10.0 to 4.11.0-0

es/PickerInput/Popup/index.d.ts

@@ -11,4 +11,3 @@ import * as React from 'react';
     onPresetSubmit: (presetValue: PresetValue) => void;
-    activeOffset?: number;
-    placement?: string;
+    activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
     direction?: 'ltr' | 'rtl';
@@ -15,0 +14,0 @@ /** TimePicker or showTime only */

es/PickerInput/Popup/index.js

@@ -8,3 +8,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { toArray } from "../../utils/miscUtil";
-import { getRealPlacement, getoffsetUnit } from "../../utils/uiUtil";
 import PickerContext from "../context";
@@ -21,5 +20,4 @@ import Footer from "./Footer";
     multiple = props.multiple,
-    _props$activeOffset = props.activeOffset,
-    activeOffset = _props$activeOffset === void 0 ? 0 : _props$activeOffset,
-    placement = props.placement,
+    _props$activeInfo = props.activeInfo,
+    activeInfo = _props$activeInfo === void 0 ? [0, 0, 0] : _props$activeInfo,
     presets = props.presets,
@@ -56,22 +54,38 @@ onPresetHover = props.onPresetHover,
     setContainerOffset = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    arrowOffset = _React$useState6[0],
+    setArrowOffset = _React$useState6[1];
   var onResize = function onResize(info) {
-    if (info.offsetWidth) {
-      setContainerWidth(info.offsetWidth);
+    if (info.width) {
+      setContainerWidth(info.width);
     }
   };
+  var _activeInfo = _slicedToArray(activeInfo, 3),
+    activeInputLeft = _activeInfo[0],
+    activeInputRight = _activeInfo[1],
+    selectorWidth = _activeInfo[2];
   React.useEffect(function () {
     // `activeOffset` is always align with the active input element
     // So we need only check container contains the `activeOffset`
-    if (range) {
+    if (range && wrapperRef.current) {
       var _arrowRef$current;
       // Offset in case container has border radius
       var arrowWidth = ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.offsetWidth) || 0;
-      var maxOffset = containerWidth - arrowWidth;
-      if (activeOffset <= maxOffset) {
+
+      // Arrow Offset
+      var wrapperRect = wrapperRef.current.getBoundingClientRect();
+      var nextArrowOffset = rtl ? activeInputRight - arrowWidth : activeInputLeft - wrapperRect.left;
+      setArrowOffset(nextArrowOffset);
+
+      // Container Offset
+      if (containerWidth < selectorWidth) {
+        var offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth;
+        var safeOffset = Math.max(0, offset);
+        setContainerOffset(safeOffset);
+      } else {
         setContainerOffset(0);
-      } else {
-        setContainerOffset(activeOffset + arrowWidth - containerWidth);
       }
     }
-  }, [containerWidth, activeOffset, range]);
+  }, [rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
 
@@ -151,4 +165,2 @@ // ======================== Custom ========================
   if (range) {
-    var realPlacement = getRealPlacement(placement, rtl);
-    var offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = /*#__PURE__*/React.createElement("div", {
@@ -161,3 +173,5 @@ onMouseDown: onPanelMouseDown,
       className: "".concat(prefixCls, "-range-arrow"),
-      style: _defineProperty({}, offsetUnit, activeOffset)
+      style: {
+        left: arrowOffset
+      }
     }), /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -164,0 +178,0 @@ onResize: onResize

es/PickerInput/RangePicker.js

@@ -63,3 +63,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     classNames = filledProps.classNames,
-    placement = filledProps.placement,
     defaultValue = filledProps.defaultValue,
@@ -318,6 +317,7 @@ value = filledProps.value,
   // Save the offset with active bar position
-  var _React$useState5 = React.useState(0),
+  // const [activeOffset, setActiveOffset] = React.useState(0);
+  var _React$useState5 = React.useState([0, 0, 0]),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    activeOffset = _React$useState6[0],
-    setActiveOffset = _React$useState6[1];
+    activeInfo = _React$useState6[0],
+    setActiveInfo = _React$useState6[1];
 
@@ -405,4 +405,3 @@ // ======================= Presets ========================
     multiplePanel: multiplePanel,
-    activeOffset: activeOffset,
-    placement: placement
+    activeInfo: activeInfo
     // Disabled
@@ -625,3 +624,3 @@ ,
     ,
-    onActiveOffset: setActiveOffset
+    onActiveInfo: setActiveInfo
   }))));
@@ -628,0 +627,0 @@ }

es/PickerInput/Selector/RangeSelector.d.ts

@@ -23,5 +23,5 @@ import * as React from 'react';
      */
-    onActiveOffset: (offset: number) => void;
+    onActiveInfo: (info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number]) => void;
 }
 declare const RefRangeSelector: React.ForwardRefExoticComponent<RangeSelectorProps<object> & React.RefAttributes<RangePickerRef>>;
 export default RefRangeSelector;

es/PickerInput/Selector/RangeSelector.js

@@ -7,5 +7,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "prefix", "clearIcon", "suffixIcon", "separator", "activeIndex", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "value", "onChange", "onSubmit", "onInputChange", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onActiveOffset", "placement", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex"],
-  _excluded2 = ["index"],
-  _excluded3 = ["insetInlineStart", "insetInlineEnd"];
+var _excluded = ["id", "prefix", "clearIcon", "suffixIcon", "separator", "activeIndex", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "value", "onChange", "onSubmit", "onInputChange", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onActiveInfo", "placement", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex"],
+  _excluded2 = ["index"];
 import classNames from 'classnames';
@@ -20,3 +19,2 @@ import ResizeObserver from 'rc-resize-observer';
 import Input from "./Input";
-import { getoffsetUnit, getRealPlacement } from "../../utils/uiUtil";
 function RangeSelector(props, ref) {
@@ -56,3 +54,3 @@ var id = props.id,
     onOpenChange = props.onOpenChange,
-    onActiveOffset = props.onActiveOffset,
+    onActiveInfo = props.onActiveInfo,
     placement = props.placement,
@@ -129,5 +127,2 @@ _onMouseDown = props.onMouseDown,
   // ====================== ActiveBar =======================
-  var realPlacement = getRealPlacement(placement, rtl);
-  var offsetUnit = getoffsetUnit(realPlacement, rtl);
-  var placementRight = realPlacement === null || realPlacement === void 0 ? void 0 : realPlacement.toLowerCase().endsWith('right');
   var _React$useState = React.useState({
@@ -143,17 +138,12 @@ position: 'absolute',
     if (input) {
-      var _input$nativeElement = input.nativeElement,
-        offsetWidth = _input$nativeElement.offsetWidth,
-        offsetLeft = _input$nativeElement.offsetLeft,
-        offsetParent = _input$nativeElement.offsetParent;
-      var parentWidth = (offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.offsetWidth) || 0;
-      var activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
-      setActiveBarStyle(function (_ref2) {
-        var insetInlineStart = _ref2.insetInlineStart,
-          insetInlineEnd = _ref2.insetInlineEnd,
-          rest = _objectWithoutProperties(_ref2, _excluded3);
-        return _objectSpread(_objectSpread({}, rest), {}, _defineProperty({
-          width: offsetWidth
-        }, offsetUnit, activeOffset));
+      var inputRect = input.nativeElement.getBoundingClientRect();
+      var parentRect = rootRef.current.getBoundingClientRect();
+      var rectOffset = inputRect.left - parentRect.left;
+      setActiveBarStyle(function (ori) {
+        return _objectSpread(_objectSpread({}, ori), {}, {
+          width: inputRect.width,
+          left: rectOffset
+        });
       });
-      onActiveOffset(activeOffset);
+      onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);
     }
@@ -160,0 +150,0 @@ });

es/utils/uiUtil.d.ts

@@ -1,17 +0,1 @@
-/// <reference types="react" />
-import type { CustomFormat, PickerMode } from '../interface';
-/** Trigger when element is visible in view */
-export declare function waitElementReady(element: HTMLElement, callback: () => void): () => void;
-export declare function scrollTo(element: HTMLElement, to: number, duration: number): void;
-export type KeyboardConfig = {
-    onLeftRight?: ((diff: number) => void) | null;
-    onCtrlLeftRight?: ((diff: number) => void) | null;
-    onUpDown?: ((diff: number) => void) | null;
-    onPageUpDown?: ((diff: number) => void) | null;
-    onEnter?: (() => void) | null;
-};
-export declare function createKeyDownHandler(event: React.KeyboardEvent<HTMLElement>, { onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig): boolean;
-export declare function getDefaultFormat<DateType>(format: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[] | undefined, picker: PickerMode | undefined, showTime: boolean | object | undefined, use12Hours: boolean | undefined): string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
-export declare function elementsContains(elements: (HTMLElement | undefined | null)[], target: HTMLElement): boolean;
 export declare function getRealPlacement(placement: string, rtl: boolean): string;
-export declare function getoffsetUnit(placement: string, rtl: boolean): string;

es/utils/uiUtil.js

@@ -1,154 +0,2 @@
-import isVisible from "rc-util/es/Dom/isVisible";
-import KeyCode from "rc-util/es/KeyCode";
-import raf from "rc-util/es/raf";
-var scrollIds = new Map();
-
-/** Trigger when element is visible in view */
-export function waitElementReady(element, callback) {
-  var id;
-  function tryOrNextFrame() {
-    if (isVisible(element)) {
-      callback();
-    } else {
-      id = raf(function () {
-        tryOrNextFrame();
-      });
-    }
-  }
-  tryOrNextFrame();
-  return function () {
-    raf.cancel(id);
-  };
-}
-
-/* eslint-disable no-param-reassign */
-export function scrollTo(element, to, duration) {
-  if (scrollIds.get(element)) {
-    cancelAnimationFrame(scrollIds.get(element));
-  }
-
-  // jump to target if duration zero
-  if (duration <= 0) {
-    scrollIds.set(element, requestAnimationFrame(function () {
-      element.scrollTop = to;
-    }));
-    return;
-  }
-  var difference = to - element.scrollTop;
-  var perTick = difference / duration * 10;
-  scrollIds.set(element, requestAnimationFrame(function () {
-    element.scrollTop += perTick;
-    if (element.scrollTop !== to) {
-      scrollTo(element, to, duration - 10);
-    }
-  }));
-}
-/* eslint-enable */
-
-export function createKeyDownHandler(event, _ref) {
-  var onLeftRight = _ref.onLeftRight,
-    onCtrlLeftRight = _ref.onCtrlLeftRight,
-    onUpDown = _ref.onUpDown,
-    onPageUpDown = _ref.onPageUpDown,
-    onEnter = _ref.onEnter;
-  var which = event.which,
-    ctrlKey = event.ctrlKey,
-    metaKey = event.metaKey;
-  switch (which) {
-    case KeyCode.LEFT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(-1);
-          return true;
-        }
-      } else if (onLeftRight) {
-        onLeftRight(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.RIGHT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(1);
-          return true;
-        }
-      } else if (onLeftRight) {
-        onLeftRight(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.UP:
-      if (onUpDown) {
-        onUpDown(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.DOWN:
-      if (onUpDown) {
-        onUpDown(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.PAGE_UP:
-      if (onPageUpDown) {
-        onPageUpDown(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.PAGE_DOWN:
-      if (onPageUpDown) {
-        onPageUpDown(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case KeyCode.ENTER:
-      if (onEnter) {
-        onEnter();
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-  }
-  return false;
-}
-
-// ===================== Format =====================
-export function getDefaultFormat(format, picker, showTime, use12Hours) {
-  var mergedFormat = format;
-  if (!mergedFormat) {
-    switch (picker) {
-      case 'time':
-        mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
-        break;
-      case 'week':
-        mergedFormat = 'gggg-wo';
-        break;
-      case 'month':
-        mergedFormat = 'YYYY-MM';
-        break;
-      case 'quarter':
-        mergedFormat = 'YYYY-[Q]Q';
-        break;
-      case 'year':
-        mergedFormat = 'YYYY';
-        break;
-      default:
-        mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
-    }
-  }
-  return mergedFormat;
-}
-
 // ====================== Mode ======================
-export function elementsContains(elements, target) {
-  return elements.some(function (ele) {
-    return ele && ele.contains(target);
-  });
-}
 export function getRealPlacement(placement, rtl) {
@@ -159,13 +7,2 @@ if (placement !== undefined) {
   return rtl ? 'bottomRight' : 'bottomLeft';
-}
-export function getoffsetUnit(placement, rtl) {
-  var realPlacement = getRealPlacement(placement, rtl);
-  var placementRight = realPlacement === null || realPlacement === void 0 ? void 0 : realPlacement.toLowerCase().endsWith('right');
-  var offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
-  if (rtl) {
-    offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find(function (unit) {
-      return unit !== offsetUnit;
-    });
-  }
-  return offsetUnit;
 }

lib/PickerInput/Popup/index.d.ts

@@ -11,4 +11,3 @@ import * as React from 'react';
     onPresetSubmit: (presetValue: PresetValue) => void;
-    activeOffset?: number;
-    placement?: string;
+    activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
     direction?: 'ltr' | 'rtl';
@@ -15,0 +14,0 @@ /** TimePicker or showTime only */

lib/PickerInput/Popup/index.js

@@ -16,3 +16,2 @@ "use strict";
 var _miscUtil = require("../../utils/miscUtil");
-var _uiUtil = require("../../utils/uiUtil");
 var _context = _interopRequireDefault(require("../context"));
@@ -29,5 +28,4 @@ var _Footer = _interopRequireDefault(require("./Footer"));
     multiple = props.multiple,
-    _props$activeOffset = props.activeOffset,
-    activeOffset = _props$activeOffset === void 0 ? 0 : _props$activeOffset,
-    placement = props.placement,
+    _props$activeInfo = props.activeInfo,
+    activeInfo = _props$activeInfo === void 0 ? [0, 0, 0] : _props$activeInfo,
     presets = props.presets,
@@ -64,22 +62,38 @@ onPresetHover = props.onPresetHover,
     setContainerOffset = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    arrowOffset = _React$useState6[0],
+    setArrowOffset = _React$useState6[1];
   var onResize = function onResize(info) {
-    if (info.offsetWidth) {
-      setContainerWidth(info.offsetWidth);
+    if (info.width) {
+      setContainerWidth(info.width);
     }
   };
+  var _activeInfo = (0, _slicedToArray2.default)(activeInfo, 3),
+    activeInputLeft = _activeInfo[0],
+    activeInputRight = _activeInfo[1],
+    selectorWidth = _activeInfo[2];
   React.useEffect(function () {
     // `activeOffset` is always align with the active input element
     // So we need only check container contains the `activeOffset`
-    if (range) {
+    if (range && wrapperRef.current) {
       var _arrowRef$current;
       // Offset in case container has border radius
       var arrowWidth = ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.offsetWidth) || 0;
-      var maxOffset = containerWidth - arrowWidth;
-      if (activeOffset <= maxOffset) {
+
+      // Arrow Offset
+      var wrapperRect = wrapperRef.current.getBoundingClientRect();
+      var nextArrowOffset = rtl ? activeInputRight - arrowWidth : activeInputLeft - wrapperRect.left;
+      setArrowOffset(nextArrowOffset);
+
+      // Container Offset
+      if (containerWidth < selectorWidth) {
+        var offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth;
+        var safeOffset = Math.max(0, offset);
+        setContainerOffset(safeOffset);
+      } else {
         setContainerOffset(0);
-      } else {
-        setContainerOffset(activeOffset + arrowWidth - containerWidth);
       }
     }
-  }, [containerWidth, activeOffset, range]);
+  }, [rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
 
@@ -159,4 +173,2 @@ // ======================== Custom ========================
   if (range) {
-    var realPlacement = (0, _uiUtil.getRealPlacement)(placement, rtl);
-    var offsetUnit = (0, _uiUtil.getoffsetUnit)(realPlacement, rtl);
     renderNode = /*#__PURE__*/React.createElement("div", {
@@ -169,3 +181,5 @@ onMouseDown: onPanelMouseDown,
       className: "".concat(prefixCls, "-range-arrow"),
-      style: (0, _defineProperty2.default)({}, offsetUnit, activeOffset)
+      style: {
+        left: arrowOffset
+      }
     }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -172,0 +186,0 @@ onResize: onResize

lib/PickerInput/RangePicker.js

@@ -71,3 +71,2 @@ "use strict";
     classNames = filledProps.classNames,
-    placement = filledProps.placement,
     defaultValue = filledProps.defaultValue,
@@ -326,6 +325,7 @@ value = filledProps.value,
   // Save the offset with active bar position
-  var _React$useState5 = React.useState(0),
+  // const [activeOffset, setActiveOffset] = React.useState(0);
+  var _React$useState5 = React.useState([0, 0, 0]),
     _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    activeOffset = _React$useState6[0],
-    setActiveOffset = _React$useState6[1];
+    activeInfo = _React$useState6[0],
+    setActiveInfo = _React$useState6[1];
 
@@ -413,4 +413,3 @@ // ======================= Presets ========================
     multiplePanel: multiplePanel,
-    activeOffset: activeOffset,
-    placement: placement
+    activeInfo: activeInfo
     // Disabled
@@ -633,3 +632,3 @@ ,
     ,
-    onActiveOffset: setActiveOffset
+    onActiveInfo: setActiveInfo
   }))));
@@ -636,0 +635,0 @@ }

lib/PickerInput/Selector/RangeSelector.d.ts

@@ -23,5 +23,5 @@ import * as React from 'react';
      */
-    onActiveOffset: (offset: number) => void;
+    onActiveInfo: (info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number]) => void;
 }
 declare const RefRangeSelector: React.ForwardRefExoticComponent<RangeSelectorProps<object> & React.RefAttributes<RangePickerRef>>;
 export default RefRangeSelector;

lib/PickerInput/Selector/RangeSelector.js

@@ -11,3 +11,3 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -25,6 +25,4 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _Input = _interopRequireDefault(require("./Input"));
-var _uiUtil = require("../../utils/uiUtil");
-var _excluded = ["id", "prefix", "clearIcon", "suffixIcon", "separator", "activeIndex", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "value", "onChange", "onSubmit", "onInputChange", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onActiveOffset", "placement", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex"],
-  _excluded2 = ["index"],
-  _excluded3 = ["insetInlineStart", "insetInlineEnd"];
+var _excluded = ["id", "prefix", "clearIcon", "suffixIcon", "separator", "activeIndex", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "value", "onChange", "onSubmit", "onInputChange", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onActiveInfo", "placement", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex"],
+  _excluded2 = ["index"];
 function RangeSelector(props, ref) {
@@ -64,3 +62,3 @@ var id = props.id,
     onOpenChange = props.onOpenChange,
-    onActiveOffset = props.onActiveOffset,
+    onActiveInfo = props.onActiveInfo,
     placement = props.placement,
@@ -129,3 +127,3 @@ _onMouseDown = props.onMouseDown,
   // ======================== Inputs ========================
-  var _useInputProps = (0, _useInputProps3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
+  var _useInputProps = (0, _useInputProps3.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
       id: ids,
@@ -138,5 +136,2 @@ placeholder: mergedPlaceholder
   // ====================== ActiveBar =======================
-  var realPlacement = (0, _uiUtil.getRealPlacement)(placement, rtl);
-  var offsetUnit = (0, _uiUtil.getoffsetUnit)(realPlacement, rtl);
-  var placementRight = realPlacement === null || realPlacement === void 0 ? void 0 : realPlacement.toLowerCase().endsWith('right');
   var _React$useState = React.useState({
@@ -152,17 +147,12 @@ position: 'absolute',
     if (input) {
-      var _input$nativeElement = input.nativeElement,
-        offsetWidth = _input$nativeElement.offsetWidth,
-        offsetLeft = _input$nativeElement.offsetLeft,
-        offsetParent = _input$nativeElement.offsetParent;
-      var parentWidth = (offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.offsetWidth) || 0;
-      var activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
-      setActiveBarStyle(function (_ref2) {
-        var insetInlineStart = _ref2.insetInlineStart,
-          insetInlineEnd = _ref2.insetInlineEnd,
-          rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
-        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, rest), {}, (0, _defineProperty2.default)({
-          width: offsetWidth
-        }, offsetUnit, activeOffset));
+      var inputRect = input.nativeElement.getBoundingClientRect();
+      var parentRect = rootRef.current.getBoundingClientRect();
+      var rectOffset = inputRect.left - parentRect.left;
+      setActiveBarStyle(function (ori) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ori), {}, {
+          width: inputRect.width,
+          left: rectOffset
+        });
       });
-      onActiveOffset(activeOffset);
+      onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);
     }
@@ -169,0 +159,0 @@ });

lib/utils/uiUtil.d.ts

@@ -1,17 +0,1 @@
-/// <reference types="react" />
-import type { CustomFormat, PickerMode } from '../interface';
-/** Trigger when element is visible in view */
-export declare function waitElementReady(element: HTMLElement, callback: () => void): () => void;
-export declare function scrollTo(element: HTMLElement, to: number, duration: number): void;
-export type KeyboardConfig = {
-    onLeftRight?: ((diff: number) => void) | null;
-    onCtrlLeftRight?: ((diff: number) => void) | null;
-    onUpDown?: ((diff: number) => void) | null;
-    onPageUpDown?: ((diff: number) => void) | null;
-    onEnter?: (() => void) | null;
-};
-export declare function createKeyDownHandler(event: React.KeyboardEvent<HTMLElement>, { onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig): boolean;
-export declare function getDefaultFormat<DateType>(format: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[] | undefined, picker: PickerMode | undefined, showTime: boolean | object | undefined, use12Hours: boolean | undefined): string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
-export declare function elementsContains(elements: (HTMLElement | undefined | null)[], target: HTMLElement): boolean;
 export declare function getRealPlacement(placement: string, rtl: boolean): string;
-export declare function getoffsetUnit(placement: string, rtl: boolean): string;

lib/utils/uiUtil.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createKeyDownHandler = createKeyDownHandler;
-exports.elementsContains = elementsContains;
-exports.getDefaultFormat = getDefaultFormat;
 exports.getRealPlacement = getRealPlacement;
-exports.getoffsetUnit = getoffsetUnit;
-exports.scrollTo = scrollTo;
-exports.waitElementReady = waitElementReady;
-var _isVisible = _interopRequireDefault(require("rc-util/lib/Dom/isVisible"));
-var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-var scrollIds = new Map();
-
-/** Trigger when element is visible in view */
-function waitElementReady(element, callback) {
-  var id;
-  function tryOrNextFrame() {
-    if ((0, _isVisible.default)(element)) {
-      callback();
-    } else {
-      id = (0, _raf.default)(function () {
-        tryOrNextFrame();
-      });
-    }
-  }
-  tryOrNextFrame();
-  return function () {
-    _raf.default.cancel(id);
-  };
-}
-
-/* eslint-disable no-param-reassign */
-function scrollTo(element, to, duration) {
-  if (scrollIds.get(element)) {
-    cancelAnimationFrame(scrollIds.get(element));
-  }
-
-  // jump to target if duration zero
-  if (duration <= 0) {
-    scrollIds.set(element, requestAnimationFrame(function () {
-      element.scrollTop = to;
-    }));
-    return;
-  }
-  var difference = to - element.scrollTop;
-  var perTick = difference / duration * 10;
-  scrollIds.set(element, requestAnimationFrame(function () {
-    element.scrollTop += perTick;
-    if (element.scrollTop !== to) {
-      scrollTo(element, to, duration - 10);
-    }
-  }));
-}
-/* eslint-enable */
-
-function createKeyDownHandler(event, _ref) {
-  var onLeftRight = _ref.onLeftRight,
-    onCtrlLeftRight = _ref.onCtrlLeftRight,
-    onUpDown = _ref.onUpDown,
-    onPageUpDown = _ref.onPageUpDown,
-    onEnter = _ref.onEnter;
-  var which = event.which,
-    ctrlKey = event.ctrlKey,
-    metaKey = event.metaKey;
-  switch (which) {
-    case _KeyCode.default.LEFT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(-1);
-          return true;
-        }
-      } else if (onLeftRight) {
-        onLeftRight(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.RIGHT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(1);
-          return true;
-        }
-      } else if (onLeftRight) {
-        onLeftRight(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.UP:
-      if (onUpDown) {
-        onUpDown(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.DOWN:
-      if (onUpDown) {
-        onUpDown(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.PAGE_UP:
-      if (onPageUpDown) {
-        onPageUpDown(-1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.PAGE_DOWN:
-      if (onPageUpDown) {
-        onPageUpDown(1);
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-    case _KeyCode.default.ENTER:
-      if (onEnter) {
-        onEnter();
-        return true;
-      }
-      /* istanbul ignore next */
-      break;
-  }
-  return false;
-}
-
-// ===================== Format =====================
-function getDefaultFormat(format, picker, showTime, use12Hours) {
-  var mergedFormat = format;
-  if (!mergedFormat) {
-    switch (picker) {
-      case 'time':
-        mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
-        break;
-      case 'week':
-        mergedFormat = 'gggg-wo';
-        break;
-      case 'month':
-        mergedFormat = 'YYYY-MM';
-        break;
-      case 'quarter':
-        mergedFormat = 'YYYY-[Q]Q';
-        break;
-      case 'year':
-        mergedFormat = 'YYYY';
-        break;
-      default:
-        mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
-    }
-  }
-  return mergedFormat;
-}
-
 // ====================== Mode ======================
-function elementsContains(elements, target) {
-  return elements.some(function (ele) {
-    return ele && ele.contains(target);
-  });
-}
 function getRealPlacement(placement, rtl) {
@@ -172,13 +13,2 @@ if (placement !== undefined) {
   return rtl ? 'bottomRight' : 'bottomLeft';
-}
-function getoffsetUnit(placement, rtl) {
-  var realPlacement = getRealPlacement(placement, rtl);
-  var placementRight = realPlacement === null || realPlacement === void 0 ? void 0 : realPlacement.toLowerCase().endsWith('right');
-  var offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
-  if (rtl) {
-    offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find(function (unit) {
-      return unit !== offsetUnit;
-    });
-  }
-  return offsetUnit;
 }

package.json

 {
   "name": "rc-picker",
-  "version": "4.10.0",
+  "version": "4.11.0-0",
   "description": "React date & time picker",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

898497

decreased by-1.25%

Lines of code

21782

decreased by-1.59%

Number of low quality alerts

1

increased byInfinity%

No dependency changes