Skip to content

Commit

Permalink
Merge pull request #41 from cobaltinc/park/tooltip-visible
Browse files Browse the repository at this point in the history
Tooltip visible 로직 수정했다
  • Loading branch information
kciter authored Nov 8, 2023
2 parents 11e483d + d370504 commit 49710f5
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 4 deletions.
16 changes: 13 additions & 3 deletions packages/co-design-core/src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ import { Stack } from '../Stack';
export type TooltipStylesNames = ClassNames<typeof useStyles>;

export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, React.ComponentPropsWithoutRef<'div'> {
/**
* Tooltip 의 초기 visible 상태를 설정합니다
*/
initVisible?: boolean;

/**
* true일 경우 Tooltip 컴포넌트를 보여줍니다.
* Tooltip 컴포넌트를 직접 제어할 경우 사용하는 속성입니다.
Expand Down Expand Up @@ -84,7 +89,8 @@ const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) =>

export const Tooltip = ({
children,
visible = false,
visible,
initVisible = false,
colorScheme,
title,
label,
Expand All @@ -111,7 +117,7 @@ export const Tooltip = ({
{ overrideStyles, name: 'Tooltip' },
);

const [currentVisible, setCurrentVisible] = useToggle(visible);
const [currentVisible, setCurrentVisible] = useToggle(initVisible);
const balloonRef = useRef<HTMLDivElement>(null);
const targetRef = useClickAway<HTMLDivElement>((e: MouseEvent) => {
if (
Expand All @@ -138,14 +144,18 @@ export const Tooltip = ({
const handleFocus = trigger === 'focus' ? () => setCurrentVisible(true) : undefined;
const handleBlur = trigger === 'focus' ? () => setCurrentVisible(false) : undefined;

useUpdateEffect(() => {
setCurrentVisible(visible);
}, [visible]);

useUpdateEffect(() => {
onChangeVisible?.(currentVisible);
}, [currentVisible]);

const contentStyle: React.CSSProperties = {
width: width ? width : 'auto',
whiteSpace: width ? 'normal' : 'nowrap',
pointerEvents: visible ? 'all' : 'none',
pointerEvents: currentVisible ? 'all' : 'none',
};
const positionStyle = getPositionStyle(placement, targetRef.current);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import { StoryObj } from '@storybook/react';
import { Center } from '../../Center';
import { Tooltip } from '../Tooltip';
import { Popover } from '../../Popover';
import { Button } from '../../Button';
import { Menu } from '../../Menu';

export default {
title: '@co-design/core/Tooltip',
Expand Down Expand Up @@ -65,3 +69,27 @@ export const WithTitle = {
title: 'Title',
},
};

export const WithPopover: StoryObj = {
render: (arg) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);

return (
<Popover
placement="bottom"
onOpen={() => setIsPopoverOpen(true)}
onClose={() => setIsPopoverOpen(false)}
content={
<Menu>
<Menu.Item>1</Menu.Item>
<Menu.Item>2</Menu.Item>
</Menu>
}
>
<Tooltip visible={!isPopoverOpen} label="Peek-A-Boo" {...arg}>
<Button>hello</Button>
</Tooltip>
</Popover>
);
},
};

0 comments on commit 49710f5

Please sign in to comment.