Skip to content

Commit

Permalink
feat: 내부 중복 이벤트 외부에서도 받도록 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamo-o
hamo-o committed Jun 30, 2024
1 parent fff6ec2 commit 75a56e1
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 24 deletions.
34 changes: 33 additions & 1 deletion packages/wow-ui/src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,39 @@ const meta = {
},
onKeyDown: {
description:
"버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트를 나타냅니다.",
"버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onKeyUp: {
description:
"버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onMouseLeave: {
description:
"버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerDown: {
description:
"버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerUp: {
description:
"버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
Expand Down
34 changes: 27 additions & 7 deletions packages/wow-ui/src/components/Button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import type {
* @param {boolean} [disabled] - 버튼이 비활성화되어 있는지 여부.
* @param {"lg" | "sm"} [size] - 버튼의 크기.
* @param {"solid" | "outline"} [variant] - 버튼의 종류.
* @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트.
* @param {() => void} [onKeyUp] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트.
* @param {() => void} [onKeyDown] - 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onMouseLeave] - 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트.
* @param {() => void} [onPointerDown] - 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onPointerUp] - 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트.
* @param {CSSProperties} [style] - 버튼의 커스텀 스타일.
* @param {string} [className] - 버튼에 전달하는 커스텀 클래스.
* @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
Expand All @@ -31,7 +35,11 @@ export interface CustomButtonProps {
disabled?: boolean;
size?: "lg" | "sm";
variant?: "solid" | "outline";
onKeyUp?: () => void;
onKeyDown?: () => void;
onMouseLeave?: () => void;
onPointerDown?: () => void;
onPointerUp?: () => void;
style?: CSSProperties;
className?: string;
}
Expand All @@ -53,7 +61,11 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
disabled = false,
size = "lg",
variant = "solid",
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
...rest
}: ButtonProps<C>,
ref?: PolymorphicRef<C>
Expand All @@ -64,9 +76,17 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
pressed,
handleKeyDown,
handleKeyUp,
handleClickDown,
handleClickUp,
} = useButton({ disabled, onKeyDown });
handlePointerDown,
handlePointerUp,
handleMouseLeave,
} = useButton({
disabled,
onMouseLeave,
onKeyUp,
onKeyDown,
onPointerDown,
onPointerUp,
});

return (
<Component
Expand All @@ -80,9 +100,9 @@ const Button: ButtonComponent & { displayName?: string } = forwardRef(
})}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onMouseLeave={handleClickUp}
onPointerDown={handleClickDown}
onPointerUp={handleClickUp}
onMouseLeave={handleMouseLeave}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
{...rest}
>
<styled.span
Expand Down
34 changes: 33 additions & 1 deletion packages/wow-ui/src/components/TextButton/TextButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,39 @@ const meta = {
},
onKeyDown: {
description:
"텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트를 나타냅니다.",
"텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onKeyUp: {
description:
"텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onMouseLeave: {
description:
"텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerDown: {
description:
"텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
control: false,
},
onPointerUp: {
description:
"텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트를 나타냅니다.",
table: {
type: { summary: "() => void" },
},
Expand Down
33 changes: 26 additions & 7 deletions packages/wow-ui/src/components/TextButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ import type {
* @param {string} label - 텍스트 버튼의 라벨.
* @param {boolean} [disabled] - 텍스트 버튼이 비활성화되어 있는지 여부.
* @param {"lg" | "sm"} [size] - 텍스트 버튼의 크기.
* @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트.
* @param {() => void} [onKeyDown] - 텍스트 버튼에 포커스 된 상태에서 엔터 키 또는 스페이스 바를 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onMouseLeave] - 텍스트 버튼의 영역에서 마우스가 벗어났을 때 동작할 이벤트.
* @param {() => void} [onPointerDown] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치로 누르고 있는 동안 동작할 이벤트.
* @param {() => void} [onPointerUp] - 텍스트 버튼에 포커스 된 상태에서 마우스 또는 터치를 뗐을 때 동작할 이벤트.
* @param {CSSProperties} [style] - 텍스트 버튼의 커스텀 스타일.
* @param {string} [className] - 텍스트 버튼에 전달하는 커스텀 클래스.
* @param {ComponentPropsWithoutRef<T>} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props.
Expand All @@ -29,7 +32,11 @@ export interface CustomButtonProps {
label: string;
disabled?: boolean;
size?: "lg" | "sm";
onKeyUp?: () => void;
onKeyDown?: () => void;
onMouseLeave?: () => void;
onPointerDown?: () => void;
onPointerUp?: () => void;
style?: CSSProperties;
className?: string;
}
Expand All @@ -50,7 +57,11 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef(
label,
disabled = false,
size = "lg",
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
...rest
}: ButtonProps<C>,
ref?: PolymorphicRef<C>
Expand All @@ -61,9 +72,17 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef(
pressed,
handleKeyDown,
handleKeyUp,
handleClickDown,
handleClickUp,
} = useButton({ disabled, onKeyDown });
handlePointerDown,
handlePointerUp,
handleMouseLeave,
} = useButton({
disabled,
onKeyUp,
onKeyDown,
onMouseLeave,
onPointerDown,
onPointerUp,
});

return (
<Component
Expand All @@ -74,9 +93,9 @@ const TextButton: ButtonComponent & { displayName?: string } = forwardRef(
ref={ref}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onMouseLeave={handleClickUp}
onPointerDown={handleClickDown}
onPointerUp={handleClickUp}
onMouseLeave={handleMouseLeave}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
{...rest}
>
<styled.span
Expand Down
36 changes: 28 additions & 8 deletions packages/wow-ui/src/hooks/useButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,37 @@ import { useCallback, useState } from "react";

interface UseButtonProps {
disabled?: boolean;
onMouseLeave?: () => void;
onKeyUp?: () => void;
onKeyDown?: () => void;
onPointerDown?: () => void;
onPointerUp?: () => void;
}

const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => {
const useButton = ({
disabled = false,
onMouseLeave,
onKeyUp,
onKeyDown,
onPointerDown,
onPointerUp,
}: UseButtonProps) => {
const [pressed, setPressed] = useState<boolean>(false);

const handleClickDown = useCallback(() => {
const handleMouseLeave = useCallback(() => {
if (!disabled) setPressed(false);
onMouseLeave?.();
}, [setPressed, disabled, onMouseLeave]);

const handlePointerDown = useCallback(() => {
if (!disabled) setPressed(true);
}, [setPressed, disabled]);
onPointerDown?.();
}, [setPressed, disabled, onPointerDown]);

const handleClickUp = useCallback(() => {
const handlePointerUp = useCallback(() => {
if (!disabled) setPressed(false);
}, [setPressed, disabled]);
onPointerUp?.();
}, [setPressed, disabled, onPointerUp]);

const handleKeyDown = useCallback(
(event: KeyboardEvent) => {
Expand All @@ -33,17 +51,19 @@ const useButton = ({ disabled = false, onKeyDown }: UseButtonProps) => {
(event: KeyboardEvent) => {
if (event.key === " " || event.key === "Enter") {
setPressed(false);
onKeyUp?.();
}
},
[setPressed]
[setPressed, onKeyUp]
);

return {
pressed,
handleKeyDown,
handleKeyUp,
handleClickDown,
handleClickUp,
handleMouseLeave,
handlePointerDown,
handlePointerUp,
};
};

Expand Down

0 comments on commit 75a56e1

Please sign in to comment.