Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Tooltip): Tooltip trigger外に移動する際にtooltipを非表示にする #5219

Closed
wants to merge 9 commits into from
Closed

fix(Tooltip): Tooltip trigger外に移動する際にtooltipを非表示にする #5219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
67d0a33
fix: Tooltip trigger外に移動するとtooltipを非表示にする
daiHash Dec 20, 2024
65fc2ea
fix: tooltipの表示handlerの修正
daiHash Dec 20, 2024
a052c31
fix: pointer event handlerの修正
daiHash Dec 20, 2024
b826eed
fix: 不要なoptional chainingの削除
daiHash Dec 23, 2024
e47d4eb
fix: tooltip表示handlerの修正
daiHash Dec 24, 2024
f32663e
fix: 不要なimportの削除
daiHash Dec 24, 2024
e8fec8e
fix: dropdown menuの間にスペースをあける
daiHash Dec 24, 2024
c0ae95a
fix: テスト修正
daiHash Dec 24, 2024
8072d5d
fix: 不要なログの削除
daiHash Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/smarthr-ui/src/components/Dropdown/dropdownHelper.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 800 }
const scroll = { top: 0, left: 0 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '135px', // 140 - 5
top: '145px', // 140 - 5 + 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
left: '-5px', // trigger left - 5
maxHeight: '',
})
Expand All @@ -20,7 +20,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 800 }
const scroll = { top: 0, left: 0 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '205px', // 600 - 400 + 5
top: '195px', // 600 - 400 + 5 - 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
left: '-5px', // trigger left - 5
maxHeight: '',
})
Expand All @@ -32,7 +32,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 370 }
const scroll = { top: 0, left: 0 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '135px', // 140 - 5
top: '145px', // 140 - 5 + 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
left: '-5px', // trigger left - 5
maxHeight: '220px', // 370 - 140 - 10
})
Expand All @@ -44,7 +44,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 370 }
const scroll = { top: 0, left: 0 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '15px', // 0 + 10 + 5
top: '5px', // 0 + 10 + 5 - 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
left: '-5px', // trigger left - 5
maxHeight: '190px', // 200 - 10
})
Expand All @@ -56,7 +56,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 800 }
const scroll = { top: 0, left: 0 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '135px', // 140 - 5
top: '145px', // 140 - 5 + 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
right: '375px', // window width - trigger right - 5
maxHeight: '',
})
Expand All @@ -68,7 +68,7 @@ describe('dropdownHelper', () => {
const windowSize = { width: 1000, height: 800 }
const scroll = { top: 500, left: 600 }
expect(getContentBoxStyle(triggerRect, contentSize, windowSize, scroll)).toEqual({
top: '635px', // 140 - 5 + 500
top: '645px', // 140 - 5 + 500 + 10(dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分)
left: '595px', // trigger left + scroll left - 5
maxHeight: '',
})
Expand Down
15 changes: 10 additions & 5 deletions packages/smarthr-ui/src/components/Dropdown/dropdownHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ export function isEventFromChild(e: Event, parent: Element | null): boolean {
return path.includes(parent)
}

/**
* dropdown menu buttonとdropdown menu contentの間にスペースがあくための10px分
*/
const DROPDOWN_MENU_GAP = 10

export function getContentBoxStyle(
triggerRect: Rect,
contentSize: Size,
Expand All @@ -39,21 +44,21 @@ export function getContentBoxStyle(

if (triggerRect.bottom + contentSize.height <= windowSize.height) {
// ドロップダウンのサイズがトリガの下側の領域に収まる場合
contentBox.top = `${scroll.top + triggerRect.bottom - 5}px`
contentBox.top = `${scroll.top + triggerRect.bottom + DROPDOWN_MENU_GAP - 5}px`
} else if (triggerRect.top - contentSize.height >= 0) {
// ドロップダウンのサイズがトリガの上川の領域に収まる場合
contentBox.top = `${scroll.top + triggerRect.top - contentSize.height + 5}px`
// ドロップダウンのサイズがトリガの上側の領域に収まる場合
contentBox.top = `${scroll.top + triggerRect.top - contentSize.height - DROPDOWN_MENU_GAP + 5}px`
} else {
const padding = 10
const triggerHeight = triggerRect.bottom - triggerRect.top

if (triggerRect.top + triggerHeight / 2 < windowSize.height / 2) {
// 下側の領域のほうが広い場合
contentBox.top = `${scroll.top + triggerRect.bottom - 5}px`
contentBox.top = `${scroll.top + triggerRect.bottom + DROPDOWN_MENU_GAP - 5}px`
contentBox.maxHeight = `${windowSize.height - triggerRect.bottom - padding}px`
} else {
// 上側の領域のほうが広い場合
contentBox.top = `${scroll.top + padding + 5}px`
contentBox.top = `${scroll.top + padding - DROPDOWN_MENU_GAP + 5}px`
contentBox.maxHeight = `${triggerRect.top - padding}px`
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/smarthr-ui/src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,11 @@ export const Tooltip: FC<Props & ElementProps> = ({
return
}

// Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない
if (!ref.current.contains((e as React.BaseSyntheticEvent).target)) {
return
}

if (ellipsisOnly) {
const outerWidth = parseInt(
window
Expand Down
Loading