From eec6be075111a27a34089ddf2db250386a089eae Mon Sep 17 00:00:00 2001 From: xiejay97 Date: Fri, 18 Nov 2022 17:16:28 +0800 Subject: [PATCH] refactor(ui): compute size without using `getBoundingClientRect` When the element contains transition, using `getBoundingClientRect` will often not get the original size. --- .../src/app/components/map/MapMarker.tsx | 5 ++-- .../src/components/_date-input/DateInput.tsx | 4 +-- .../_transition/CollapseTransition.tsx | 6 ++-- .../components/auto-complete/AutoComplete.tsx | 6 ++-- .../ui/src/components/cascader/Cascader.tsx | 4 +-- .../ui/src/components/dropdown/Dropdown.tsx | 4 +-- packages/ui/src/components/dropdown/Sub.tsx | 4 +-- packages/ui/src/components/menu/Sub.tsx | 9 +++--- packages/ui/src/components/modal/Modal.tsx | 4 +-- .../components/notification/Notification.tsx | 2 +- .../ui/src/components/progress/Progress.tsx | 2 +- packages/ui/src/components/select/Select.tsx | 6 ++-- packages/ui/src/components/slides/Slides.tsx | 28 +++++++++---------- .../ui/src/components/spinner/Spinner.tsx | 2 +- packages/ui/src/components/toast/Toast.tsx | 2 +- .../src/components/tree-select/TreeSelect.tsx | 6 ++-- packages/utils/src/getOriginalSize.ts | 21 -------------- packages/utils/src/index.ts | 1 - .../utils/src/position/getPopupPosition.ts | 4 +-- 19 files changed, 47 insertions(+), 73 deletions(-) delete mode 100644 packages/utils/src/getOriginalSize.ts diff --git a/packages/platform/src/app/components/map/MapMarker.tsx b/packages/platform/src/app/components/map/MapMarker.tsx index 31e63a52..31a38149 100644 --- a/packages/platform/src/app/components/map/MapMarker.tsx +++ b/packages/platform/src/app/components/map/MapMarker.tsx @@ -37,10 +37,11 @@ export function AppMapMarker(props: AppMapMarkerProps): JSX.Element | null { div.innerHTML = elRef.current.outerHTML; div.style.cssText = 'position:fixed;top:-200vh;left:-200vw;'; document.body.appendChild(div); - const rect = div.firstElementChild!.getBoundingClientRect(); + const width = (div.firstElementChild as HTMLElement).offsetWidth; + const height = (div.firstElementChild as HTMLElement).offsetHeight; document.body.removeChild(div); - return new AMap.Pixel(-(rect.width / 2), -rect.height); + return new AMap.Pixel(-(width / 2), -height); })() : isArray(aOptions.offset) ? new AMap.Pixel(...aOptions.offset) diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx index 360cf40e..14e0b194 100644 --- a/packages/ui/src/components/_date-input/DateInput.tsx +++ b/packages/ui/src/components/_date-input/DateInput.tsx @@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'; import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useRefExtra, useResize } from '@react-devui/hooks'; import { CloseCircleFilled, SwapRightOutlined } from '@react-devui/icons'; -import { checkNodeExist, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { checkNodeExist, getClassName, getVerticalSidePosition } from '@react-devui/utils'; import { dayjs } from '../../dayjs'; import { useDValue, useMaxIndex } from '../../hooks'; @@ -210,7 +210,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef(); const updatePosition = useEventCallback(() => { if (visible && boxRef.current && popupRef.current) { - const { height } = getOriginalSize(popupRef.current); + const height = popupRef.current.offsetHeight; const maxWidth = window.innerWidth - WINDOW_SPACE * 2; const width = Math.min(popupRef.current.scrollWidth, maxWidth); const { top, left, transformOrigin } = getVerticalSidePosition( diff --git a/packages/ui/src/components/_transition/CollapseTransition.tsx b/packages/ui/src/components/_transition/CollapseTransition.tsx index b1d6e32a..d1357c15 100644 --- a/packages/ui/src/components/_transition/CollapseTransition.tsx +++ b/packages/ui/src/components/_transition/CollapseTransition.tsx @@ -59,8 +59,7 @@ export function DCollapseTransition(props: DCollapseTransitionProps): JSX.Elemen ref.current.style.width = 'auto'; ref.current.style.paddingLeft = getSizeStyle(dOriginalSize.padding?.[3]); ref.current.style.paddingRight = getSizeStyle(dOriginalSize.padding?.[1]); - const { width } = ref.current.getBoundingClientRect(); - dataRef.current.width = width; + dataRef.current.width = ref.current.offsetWidth; ref.current.style.cssText = cssText; // eslint-disable-next-line @typescript-eslint/no-unused-expressions ref.current.offsetTop; @@ -69,8 +68,7 @@ export function DCollapseTransition(props: DCollapseTransitionProps): JSX.Elemen ref.current.style.height = 'auto'; ref.current.style.paddingTop = getSizeStyle(dOriginalSize.padding?.[0]); ref.current.style.paddingBottom = getSizeStyle(dOriginalSize.padding?.[2]); - const { height } = ref.current.getBoundingClientRect(); - dataRef.current.height = height; + dataRef.current.height = ref.current.offsetHeight; ref.current.style.cssText = cssText; // eslint-disable-next-line @typescript-eslint/no-unused-expressions ref.current.offsetTop; diff --git a/packages/ui/src/components/auto-complete/AutoComplete.tsx b/packages/ui/src/components/auto-complete/AutoComplete.tsx index eb901ee6..b1ee2006 100644 --- a/packages/ui/src/components/auto-complete/AutoComplete.tsx +++ b/packages/ui/src/components/auto-complete/AutoComplete.tsx @@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'; import { useEvent, useEventCallback, useId, useRefExtra, useResize } from '@react-devui/hooks'; import { LoadingOutlined } from '@react-devui/icons'; -import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { findNested, getClassName, getVerticalSidePosition } from '@react-devui/utils'; import { useMaxIndex, useDValue } from '../../hooks'; import { cloneHTMLElement, registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -100,8 +100,8 @@ function AutoComplete( const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (visible && boxRef.current && popupRef.current) { - const boxWidth = boxRef.current.getBoundingClientRect().width; - const { height } = getOriginalSize(popupRef.current); + const boxWidth = boxRef.current.offsetWidth; + const height = popupRef.current.offsetHeight; const maxWidth = window.innerWidth - WINDOW_SPACE * 2; const width = Math.min(Math.max(popupRef.current.scrollWidth, boxWidth), maxWidth); const { top, left, transformOrigin } = getVerticalSidePosition( diff --git a/packages/ui/src/components/cascader/Cascader.tsx b/packages/ui/src/components/cascader/Cascader.tsx index fbffdc96..bb7affb7 100644 --- a/packages/ui/src/components/cascader/Cascader.tsx +++ b/packages/ui/src/components/cascader/Cascader.tsx @@ -10,7 +10,7 @@ import React, { useCallback, useState, useMemo, useRef, useImperativeHandle } fr import { useEventCallback, useId } from '@react-devui/hooks'; import { CloseOutlined, LoadingOutlined } from '@react-devui/icons'; -import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { findNested, getClassName, getVerticalSidePosition } from '@react-devui/utils'; import { useGeneralContext, useDValue } from '../../hooks'; import { cloneHTMLElement, registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -277,7 +277,7 @@ function Cascader>( const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (visible && boxRef.current && popupRef.current) { - const { height } = getOriginalSize(popupRef.current); + const height = popupRef.current.offsetHeight; const maxWidth = window.innerWidth - WINDOW_SPACE * 2; const width = Math.min(popupRef.current.scrollWidth, maxWidth); const { top, left, transformOrigin } = getVerticalSidePosition( diff --git a/packages/ui/src/components/dropdown/Dropdown.tsx b/packages/ui/src/components/dropdown/Dropdown.tsx index 9711d26e..62d69aed 100644 --- a/packages/ui/src/components/dropdown/Dropdown.tsx +++ b/packages/ui/src/components/dropdown/Dropdown.tsx @@ -5,7 +5,7 @@ import React, { useImperativeHandle, useRef, useState } from 'react'; import ReactDOM from 'react-dom'; import { useEventCallback, useId, useRefExtra } from '@react-devui/hooks'; -import { getClassName, getOriginalSize, getVerticalSidePosition, scrollToView } from '@react-devui/utils'; +import { getClassName, getVerticalSidePosition, scrollToView } from '@react-devui/utils'; import { useMaxIndex, useDValue } from '../../hooks'; import { registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -181,7 +181,7 @@ function Dropdown>( const [arrowPosition, setArrowPosition] = useState(); const updatePosition = useEventCallback(() => { if (visible && childRef.current && dropdownRef.current) { - const { width, height } = getOriginalSize(dropdownRef.current); + const [width, height] = [dropdownRef.current.offsetWidth, dropdownRef.current.offsetHeight]; const { top, left, transformOrigin, arrowPosition } = getVerticalSidePosition( childRef.current, { width, height }, diff --git a/packages/ui/src/components/dropdown/Sub.tsx b/packages/ui/src/components/dropdown/Sub.tsx index c74f0ba1..0c8d2d90 100644 --- a/packages/ui/src/components/dropdown/Sub.tsx +++ b/packages/ui/src/components/dropdown/Sub.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import { useEventCallback, useRefExtra } from '@react-devui/hooks'; import { RightOutlined } from '@react-devui/icons'; -import { checkNodeExist, getClassName, getHorizontalSidePosition, getOriginalSize } from '@react-devui/utils'; +import { checkNodeExist, getClassName, getHorizontalSidePosition } from '@react-devui/utils'; import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; import { DPopup } from '../_popup'; @@ -58,7 +58,7 @@ function Sub(props: DSubProps, ref: React.ForwardedRef<() => void>): JSX.Element const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (isVisible && ulRef.current && liRef.current) { - const { width, height } = getOriginalSize(ulRef.current); + const [width, height] = [ulRef.current.offsetWidth, ulRef.current.offsetHeight]; const { top, left, transformOrigin } = getHorizontalSidePosition( liRef.current, { width, height }, diff --git a/packages/ui/src/components/menu/Sub.tsx b/packages/ui/src/components/menu/Sub.tsx index 2582331e..2e0b0671 100644 --- a/packages/ui/src/components/menu/Sub.tsx +++ b/packages/ui/src/components/menu/Sub.tsx @@ -5,7 +5,7 @@ import React, { useState, useRef, useImperativeHandle, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { useEventCallback, useRefExtra } from '@react-devui/hooks'; -import { checkNodeExist, getClassName, getHorizontalSidePosition, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { checkNodeExist, getClassName, getHorizontalSidePosition, getVerticalSidePosition } from '@react-devui/utils'; import { useMaxIndex } from '../../hooks'; import { TTANSITION_DURING_BASE, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -98,12 +98,11 @@ function Sub(props: DSubProps, ref: React.ForwardedRef<() => void>): JSX.Element const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (isVisible && ulRef.current && liRef.current) { - const size = getOriginalSize(ulRef.current); - const height = size.height; + const height = ulRef.current.offsetHeight; - let width = size.width; + let width = ulRef.current.offsetWidth; if (inHorizontalNav) { - width = liRef.current.getBoundingClientRect().width - 32; + width = liRef.current.offsetWidth - 32; } const { top, left, transformOrigin } = inHorizontalNav diff --git a/packages/ui/src/components/modal/Modal.tsx b/packages/ui/src/components/modal/Modal.tsx index 3fe36ed9..d3ce35d2 100644 --- a/packages/ui/src/components/modal/Modal.tsx +++ b/packages/ui/src/components/modal/Modal.tsx @@ -144,8 +144,8 @@ export const DModal: { if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) { dataRef.current.transformOrigin = undefined; } else if (modalContentRef.current) { - const left = `${(window.innerWidth - modalContentRef.current.clientWidth) / 2}px`; - const top = dTop === 'center' ? `${(window.innerHeight - modalContentRef.current.clientHeight) / 2}px` : topStyle; + const left = `${(window.innerWidth - modalContentRef.current.offsetWidth) / 2}px`; + const top = dTop === 'center' ? `${(window.innerHeight - modalContentRef.current.offsetHeight) / 2}px` : topStyle; dataRef.current.transformOrigin = `calc(${ROOT_DATA.clickEvent.e.clientX}px - ${left}) calc(${ROOT_DATA.clickEvent.e.clientY}px - ${top})`; } }} diff --git a/packages/ui/src/components/notification/Notification.tsx b/packages/ui/src/components/notification/Notification.tsx index fe7f3a6a..65b621e5 100644 --- a/packages/ui/src/components/notification/Notification.tsx +++ b/packages/ui/src/components/notification/Notification.tsx @@ -60,7 +60,7 @@ export function DNotification(props: DNotificationProps & { dVisible: boolean }) case 'leave': if (panelRef.current) { - const { height } = panelRef.current.getBoundingClientRect(); + const height = panelRef.current.offsetHeight; transitionStyle = { height, overflow: 'hidden' }; } break; diff --git a/packages/ui/src/components/progress/Progress.tsx b/packages/ui/src/components/progress/Progress.tsx index 5e222888..7bd9c6c4 100644 --- a/packages/ui/src/components/progress/Progress.tsx +++ b/packages/ui/src/components/progress/Progress.tsx @@ -89,7 +89,7 @@ export function DProgress(props: DProgressProps): JSX.Element | null { if (progressRef.current) { const el = progressRef.current.querySelector(`[data-progress-svg="${uniqueId}"]`); if (el) { - setLineWidth(el.getBoundingClientRect().width); + setLineWidth(el.clientWidth); } } }); diff --git a/packages/ui/src/components/select/Select.tsx b/packages/ui/src/components/select/Select.tsx index d9cc3b31..cb464ee8 100644 --- a/packages/ui/src/components/select/Select.tsx +++ b/packages/ui/src/components/select/Select.tsx @@ -8,7 +8,7 @@ import React, { useState, useCallback, useMemo, useRef, useImperativeHandle } fr import { useEventCallback, useId } from '@react-devui/hooks'; import { CloseOutlined, LoadingOutlined, PlusOutlined } from '@react-devui/icons'; -import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { findNested, getClassName, getVerticalSidePosition } from '@react-devui/utils'; import { useGeneralContext, useDValue } from '../../hooks'; import { cloneHTMLElement, registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -304,8 +304,8 @@ function Select>( const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (visible && boxRef.current && popupRef.current) { - const width = Math.min(boxRef.current.getBoundingClientRect().width, window.innerWidth - WINDOW_SPACE * 2); - const { height } = getOriginalSize(popupRef.current); + const width = Math.min(boxRef.current.offsetWidth, window.innerWidth - WINDOW_SPACE * 2); + const height = popupRef.current.offsetHeight; const { top, left, transformOrigin } = getVerticalSidePosition( boxRef.current, { width, height }, diff --git a/packages/ui/src/components/slides/Slides.tsx b/packages/ui/src/components/slides/Slides.tsx index 27c8cb5d..ebd1849a 100644 --- a/packages/ui/src/components/slides/Slides.tsx +++ b/packages/ui/src/components/slides/Slides.tsx @@ -103,9 +103,9 @@ export function DSlides>(props: DSlides slideEls.forEach((el) => { const index = Number((el as HTMLDivElement).dataset['index']); if (index < activeIndex) { - size += el[dVertical ? 'clientHeight' : 'clientWidth']; + size += el[dVertical ? 'offsetHeight' : 'offsetWidth']; } else if (index === activeIndex) { - slidesRef.current!.style.height = el.clientHeight + 'px'; + slidesRef.current!.style.height = (el as HTMLDivElement).offsetHeight + 'px'; } }); @@ -152,15 +152,15 @@ export function DSlides>(props: DSlides if (distance > 0) { let size = 0; for (let index = activeIndex - 1; index >= 0; index--) { - size += els[index][dVertical ? 'clientHeight' : 'clientWidth']; + size += els[index][dVertical ? 'offsetHeight' : 'offsetWidth']; } const distanceValue = Math.abs(distance) > size ? size + Math.sin( - Math.min((Math.abs(distance) - size) / (els[0][dVertical ? 'clientHeight' : 'clientWidth'] * 3), 1) * (Math.PI / 2) + Math.min((Math.abs(distance) - size) / (els[0][dVertical ? 'offsetHeight' : 'offsetWidth'] * 3), 1) * (Math.PI / 2) ) * - els[0][dVertical ? 'clientHeight' : 'clientWidth'] + els[0][dVertical ? 'offsetHeight' : 'offsetWidth'] : distance; setDragDistance(distanceValue); setDragOpacity({ @@ -168,22 +168,22 @@ export function DSlides>(props: DSlides value: activeIndex === 0 ? 1 - : Math.max(1 - Math.abs(distanceValue) / els[activeIndex - 1][dVertical ? 'clientHeight' : 'clientWidth'], 0), + : Math.max(1 - Math.abs(distanceValue) / els[activeIndex - 1][dVertical ? 'offsetHeight' : 'offsetWidth'], 0), }); } else { let size = 0; for (let index = activeIndex + 1; index < dList.length; index++) { - size += els[index][dVertical ? 'clientHeight' : 'clientWidth']; + size += els[index][dVertical ? 'offsetHeight' : 'offsetWidth']; } const distanceValue = Math.abs(distance) > size ? -( size + Math.sin( - Math.min((Math.abs(distance) - size) / (els[dList.length - 1][dVertical ? 'clientHeight' : 'clientWidth'] * 3), 1) * + Math.min((Math.abs(distance) - size) / (els[dList.length - 1][dVertical ? 'offsetHeight' : 'offsetWidth'] * 3), 1) * (Math.PI / 2) ) * - els[dList.length - 1][dVertical ? 'clientHeight' : 'clientWidth'] + els[dList.length - 1][dVertical ? 'offsetHeight' : 'offsetWidth'] ) : distance; setDragDistance(distanceValue); @@ -192,7 +192,7 @@ export function DSlides>(props: DSlides value: activeIndex === dList.length - 1 ? 1 - : Math.min(Math.abs(distanceValue) / els[activeIndex + 1][dVertical ? 'clientHeight' : 'clientWidth'], 1), + : Math.min(Math.abs(distanceValue) / els[activeIndex + 1][dVertical ? 'offsetHeight' : 'offsetWidth'], 1), }); } } @@ -210,8 +210,8 @@ export function DSlides>(props: DSlides let newIndex = activeIndex; let size = 0; for (let index = activeIndex - 1; index >= 0; index--) { - if (Math.abs(dragDistance) > size + els[index][dVertical ? 'clientHeight' : 'clientWidth'] / 2) { - size += els[index][dVertical ? 'clientHeight' : 'clientWidth']; + if (Math.abs(dragDistance) > size + els[index][dVertical ? 'offsetHeight' : 'offsetWidth'] / 2) { + size += els[index][dVertical ? 'offsetHeight' : 'offsetWidth']; newIndex = index; } else { break; @@ -228,8 +228,8 @@ export function DSlides>(props: DSlides let newIndex = activeIndex; let size = 0; for (let index = activeIndex + 1; index < dList.length; index++) { - if (Math.abs(dragDistance) > size + els[index][dVertical ? 'clientHeight' : 'clientWidth'] / 2) { - size += els[index][dVertical ? 'clientHeight' : 'clientWidth']; + if (Math.abs(dragDistance) > size + els[index][dVertical ? 'offsetHeight' : 'offsetWidth'] / 2) { + size += els[index][dVertical ? 'offsetHeight' : 'offsetWidth']; newIndex = index; } else { break; diff --git a/packages/ui/src/components/spinner/Spinner.tsx b/packages/ui/src/components/spinner/Spinner.tsx index 9e2fdaee..0b2f2c42 100644 --- a/packages/ui/src/components/spinner/Spinner.tsx +++ b/packages/ui/src/components/spinner/Spinner.tsx @@ -90,7 +90,7 @@ export function DSpinner(props: DSpinnerProps): JSX.Element | null { dDuring={TTANSITION_DURING_BASE} onEnter={() => { if (!dAlone && spinnerRef.current && containerRef.current) { - containerRef.current.style.height = `${spinnerRef.current.clientHeight}px`; + containerRef.current.style.height = `${spinnerRef.current.offsetHeight}px`; } }} dDestroyWhenLeaved diff --git a/packages/ui/src/components/toast/Toast.tsx b/packages/ui/src/components/toast/Toast.tsx index 5c36fd74..fa4a7e26 100644 --- a/packages/ui/src/components/toast/Toast.tsx +++ b/packages/ui/src/components/toast/Toast.tsx @@ -59,7 +59,7 @@ export function DToast(props: DToastProps & { dVisible: boolean }): JSX.Element case 'leave': if (panelRef.current) { - const { height } = panelRef.current.getBoundingClientRect(); + const height = panelRef.current.offsetHeight; transitionStyle = { height, overflow: 'hidden' }; } break; diff --git a/packages/ui/src/components/tree-select/TreeSelect.tsx b/packages/ui/src/components/tree-select/TreeSelect.tsx index 13c631d9..cd5d0cc0 100644 --- a/packages/ui/src/components/tree-select/TreeSelect.tsx +++ b/packages/ui/src/components/tree-select/TreeSelect.tsx @@ -11,7 +11,7 @@ import React, { useCallback, useState, useMemo, useRef, useImperativeHandle } fr import { useEventCallback, useId } from '@react-devui/hooks'; import { CloseOutlined, LoadingOutlined } from '@react-devui/icons'; -import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils'; +import { findNested, getClassName, getVerticalSidePosition } from '@react-devui/utils'; import { useGeneralContext, useDValue } from '../../hooks'; import { cloneHTMLElement, registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils'; @@ -306,8 +306,8 @@ function TreeSelect>( const [transformOrigin, setTransformOrigin] = useState(); const updatePosition = useEventCallback(() => { if (visible && boxRef.current && popupRef.current) { - const boxWidth = boxRef.current.getBoundingClientRect().width; - const { height } = getOriginalSize(popupRef.current); + const boxWidth = boxRef.current.offsetWidth; + const height = popupRef.current.offsetHeight; const maxWidth = window.innerWidth - WINDOW_SPACE * 2; const width = Math.min(Math.max(popupRef.current.scrollWidth, boxWidth), maxWidth); const { top, left, transformOrigin } = getVerticalSidePosition( diff --git a/packages/utils/src/getOriginalSize.ts b/packages/utils/src/getOriginalSize.ts deleted file mode 100644 index 048ba713..00000000 --- a/packages/utils/src/getOriginalSize.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { toPx } from './toPx'; - -export function getOriginalSize(el: HTMLElement) { - let width = el.clientWidth; - let height = el.clientHeight; - const { - borderTopWidth: _borderTopWidth, - borderRightWidth: _borderRightWidth, - borderBottomWidth: _borderBottomWidth, - borderLeftWidth: _borderLeftWidth, - } = getComputedStyle(el); - const borderTopWidth = toPx(_borderTopWidth, true); - const borderRightWidth = toPx(_borderRightWidth, true); - const borderBottomWidth = toPx(_borderBottomWidth, true); - const borderLeftWidth = toPx(_borderLeftWidth, true); - - width = width + borderRightWidth + borderLeftWidth; - height = height + borderTopWidth + borderBottomWidth; - - return { width, height }; -} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 84a69a5b..b0390a32 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -5,7 +5,6 @@ export { copy } from './copy'; export { findNested } from './findNested'; export { getClassName } from './getClassName'; export { getOffsetToRoot } from './getOffsetToRoot'; -export { getOriginalSize } from './getOriginalSize'; export { getUID } from './getUID'; export { isSimpleArrayEqual } from './isSimpleArrayEqual'; export { saveFile } from './saveFile'; diff --git a/packages/utils/src/position/getPopupPosition.ts b/packages/utils/src/position/getPopupPosition.ts index 60c7955c..11ac2ce5 100644 --- a/packages/utils/src/position/getPopupPosition.ts +++ b/packages/utils/src/position/getPopupPosition.ts @@ -1,7 +1,5 @@ import { isUndefined } from 'lodash'; -import { getOriginalSize } from '../getOriginalSize'; - export type DPopupPlacement = | 'top' | 'top-left' @@ -45,7 +43,7 @@ export function getPopupPosition( }, space?: [number, number, number, number] ): { top: number; left: number; placement?: DPopupPlacement } | undefined { - const { width, height } = getOriginalSize(popupEl); + const [width, height] = [popupEl.offsetWidth, popupEl.offsetHeight]; const { placement, offset = 10, inWindow = false } = config; const updatePosition = (position: any) => {