xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

给ActionIcon增加Ref转发以方便控制DOM。

Browse Source
This commit is contained in:
徐涛 2025-03-31 15:04:16 +08:00
parent cb9a01109e
commit 6643eae433
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ActionIcon.tsx
View File

@ -1,15 +1,16 @@
import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
import cx from 'clsx';
import { MouseEvent, MouseEventHandler, useCallback } from 'react';
import { MouseEvent, MouseEventHandler, RefObject, useCallback } from 'react';
import styles from './ActionIcon.module.css';
type ActionIconProps = {
icon: IconProps['icon'];
onClick?: MouseEventHandler<HTMLButtonElement>;
extendClassName?: HTMLButtonElement['className'];
ref: RefObject<HTMLButtonElement>;
};
export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps) {
export function ActionIcon({ icon, onClick, extendClassName, ref }: ActionIconProps) {
const handleClick = useCallback(
(event: MouseEvent<HTMLButtonElement>) => {
onClick?.(event);
@ -18,7 +19,11 @@ export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps)
);
return (
<button type="button" onClick={handleClick} className={cx(styles.action_icon, extendClassName)}>
<button
type="button"
onClick={handleClick}
className={cx(styles.action_icon, extendClassName)}
ref={ref}>
<Icon icon={icon} className={styles.icon} />
</button>
);