From 572b453f028e6c478fff2c25d17e488fea38c72d Mon Sep 17 00:00:00 2001 From: xiexiejie Date: Tue, 17 Dec 2024 11:18:01 +0800 Subject: [PATCH] fix: Modify the method of edge computing --- packages/bui-core/src/Popover/Popover.tsx | 20 ++++----- packages/bui-core/src/Tooltip/Tooltip.tsx | 19 ++++----- .../bui-utils/src/directionLocationUtil.ts | 42 ++++++++++++------- packages/bui-utils/src/index.ts | 1 + 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/packages/bui-core/src/Popover/Popover.tsx b/packages/bui-core/src/Popover/Popover.tsx index cd72922..1c6d297 100644 --- a/packages/bui-core/src/Popover/Popover.tsx +++ b/packages/bui-core/src/Popover/Popover.tsx @@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react'; import { getStylesAndLocation, triggerEventTransform, + parsePlacement, useUniqueId, throttle, } from '@bifrostui/utils'; @@ -30,16 +31,7 @@ const Popover = React.forwardRef((props, ref) => { } = props; const controlByUser = typeof open !== 'undefined'; - const positionArr = placement.split(/([A-Z])/); - const direction = positionArr[0]; - let location; - if (positionArr.length > 1) { - positionArr.splice(0, 1); - location = positionArr.join('').toLowerCase(); - } else { - location = 'center'; - } - + const { direction, location = 'center' } = parsePlacement(placement); const childrenRef = useRef(); const [openStatus, setOpenStatus] = useState(defaultOpen); // 气泡所在位置 @@ -83,10 +75,14 @@ const Popover = React.forwardRef((props, ref) => { }; const onRootElementMouted = throttle(() => { + const { + direction: newParsedDirection, + location: newParsedLocation = 'center', + } = parsePlacement(placement); const result = getStylesAndLocation({ childrenRef, - arrowDirection, - arrowLocation, + arrowDirection: newParsedDirection, + arrowLocation: newParsedLocation, offsetSpacing, selector: `[data-id="tt_${ttId}"]`, }); diff --git a/packages/bui-core/src/Tooltip/Tooltip.tsx b/packages/bui-core/src/Tooltip/Tooltip.tsx index c2c43bd..a354b88 100644 --- a/packages/bui-core/src/Tooltip/Tooltip.tsx +++ b/packages/bui-core/src/Tooltip/Tooltip.tsx @@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react'; import { getStylesAndLocation, triggerEventTransform, + parsePlacement, useUniqueId, throttle, } from '@bifrostui/utils'; @@ -28,16 +29,8 @@ const Tooltip = React.forwardRef((props, ref) => { } = props; const controlByUser = typeof open !== 'undefined'; - const positionArr = placement.split(/([A-Z])/); - const direction = positionArr[0]; - let location; - if (positionArr.length > 1) { - positionArr.splice(0, 1); - location = positionArr.join('').toLowerCase(); - } else { - location = 'center'; - } + const { direction, location = 'center' } = parsePlacement(placement); const childrenRef = useRef(); const [openStatus, setOpenStatus] = useState(defaultOpen); // 气泡所在位置 @@ -81,10 +74,14 @@ const Tooltip = React.forwardRef((props, ref) => { }; const onRootElementMouted = throttle(() => { + const { + direction: newParsedDirection, + location: newParsedLocation = 'center', + } = parsePlacement(placement); const result = getStylesAndLocation({ childrenRef, - arrowDirection, - arrowLocation, + arrowDirection: newParsedDirection, + arrowLocation: newParsedLocation, offsetSpacing, selector: `[data-id="tt_${ttId}"]`, }); diff --git a/packages/bui-utils/src/directionLocationUtil.ts b/packages/bui-utils/src/directionLocationUtil.ts index 8536bd1..f829b30 100644 --- a/packages/bui-utils/src/directionLocationUtil.ts +++ b/packages/bui-utils/src/directionLocationUtil.ts @@ -111,8 +111,8 @@ export const getDirectionLocationStyle = ({ } = rootOffset; const { width, height } = tipOffset; if (arrowDirection === 'top') { - styles.top = cTop - offsetSpacing; - styles.transform = `translateY(-100%)`; + // 浮层在上方 + styles.top = cTop - offsetSpacing - height; switch (arrowLocation) { case 'left': styles.left = cLeft; @@ -121,13 +121,13 @@ export const getDirectionLocationStyle = ({ styles.left = cLeft + (cWidth - width) / 2; break; case 'right': - styles.left = cRight; - styles.transform = `translate(-100%, -100%)`; + styles.left = cRight - width; break; default: break; } } else if (arrowDirection === 'bottom') { + // 浮层在下方 styles.top = cBottom + offsetSpacing; switch (arrowLocation) { case 'left': @@ -137,15 +137,14 @@ export const getDirectionLocationStyle = ({ styles.left = cLeft + (cWidth - width) / 2; break; case 'right': - styles.left = cRight; - styles.transform = `translateX(-100%)`; + styles.left = cRight - width; break; default: break; } } else if (arrowDirection === 'left') { - styles.left = cLeft - offsetSpacing; - styles.transform = `translateX(-100%)`; + // 浮层在左方 + styles.left = cLeft - offsetSpacing - width; switch (arrowLocation) { case 'top': styles.top = cTop; @@ -154,13 +153,13 @@ export const getDirectionLocationStyle = ({ styles.top = cTop + (cHeight - height) / 2; break; case 'bottom': - styles.top = cBottom; - styles.transform = `translate(-100%, -100%)`; + styles.top = cBottom - height; break; default: break; } } else if (arrowDirection === 'right') { + // 浮层在右方 styles.left = cRight + offsetSpacing; switch (arrowLocation) { case 'top': @@ -170,8 +169,7 @@ export const getDirectionLocationStyle = ({ styles.top = cTop + (cHeight - height) / 2; break; case 'bottom': - styles.top = cBottom; - styles.transform = `translateY(-100%)`; + styles.top = cBottom - height; break; default: break; @@ -183,8 +181,6 @@ export const getDirectionLocationStyle = ({ if (styles.left) { styles.left = `${styles.left + scrollLeft}px`; } - // 此处设置宽高是为了防止left和transform导致气泡宽度显示错误 - styles.width = `${width}px`; return styles; }; @@ -268,3 +264,21 @@ export const triggerEventTransform = ({ trigger, click, show, hide }) => { return option; }; +/** + * for example： placement = 'topLeft'， return { direction: 'top', location: 'left' } + * @param placement + * @returns + */ +export const parsePlacement = (placement) => { + const positionArr = placement.split(/([A-Z])/); + const direction = positionArr[0]; + let location; + if (positionArr.length > 1) { + positionArr.splice(0, 1); + location = positionArr.join('').toLowerCase(); + } + return { + direction, + location, + }; +}; diff --git a/packages/bui-utils/src/index.ts b/packages/bui-utils/src/index.ts index 061d66a..262b34b 100644 --- a/packages/bui-utils/src/index.ts +++ b/packages/bui-utils/src/index.ts @@ -2,6 +2,7 @@ export { default as debounce } from './debounce'; export { getStylesAndLocation, triggerEventTransform, + parsePlacement, } from './directionLocationUtil'; export { default as convertHexToRGBA } from './hex2rgba'; export {