ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 20:49:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: memoize icons on export

Browse Source
This commit is contained in:
rusconn
2023-06-24 09:26:37 +09:00
parent 257080b00d
commit 240fba0e74
14 changed files with 74 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/buttons/clear.tsx
View File

@@ -1,5 +1,3 @@
import { useMemo } from "react";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
@@ -7,7 +5,5 @@ import { BaseButton, BaseButtonProps } from "./base";
export type ClearButtonProps = Omit<BaseButtonProps, "icon" | "labelText">;
export function ClearButton({ iconOnly, ...props }: ClearButtonProps) {
const icon = useMemo(() => <icons.X size={16} />, []);
return <BaseButton {...props} {...{ icon, iconOnly }} labelText="Clear" />;
return <BaseButton {...props} icon={<icons.X size={16} />} {...{ iconOnly }} labelText="Clear" />;
}

13
components/buttons/copy.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useMemo } from "react";
import { useCallback } from "react";
import { icons } from "@/components/icons";
@@ -18,7 +18,12 @@ export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
});
}, [text]);
const icon = useMemo(() => <icons.Copy size={16} />, []);
return <BaseButton {...props} {...{ icon, iconOnly, onClick }} labelText="Copy" />;
return (
<BaseButton
{...props}
icon={<icons.Copy size={16} />}
{...{ iconOnly, onClick }}
labelText="Copy"
/>
);
}

11
components/buttons/file.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useMemo, useRef } from "react";
import { useCallback, useRef } from "react";
import { icons } from "@/components/icons";
@@ -55,11 +55,14 @@ export function FileButton({
[maxFileSizeMb, onFileRead]
);
const icon = useMemo(() => <icons.File size={16} />, []);
return (
<>
<BaseButton {...props} {...{ icon, iconOnly, onClick }} labelText="Load a file" />
<BaseButton
{...props}
icon={<icons.File size={16} />}
{...{ iconOnly, onClick }}
labelText="Load a file"
/>
<input hidden type="file" {...{ ref, accept, onChange }} />
</>
);

13
components/buttons/paste.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useMemo } from "react";
import { useCallback } from "react";
import { icons } from "@/components/icons";
@@ -21,7 +21,12 @@ export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButton
});
}, [onClipboardRead]);
const icon = useMemo(() => <icons.Clipboard size={16} />, []);
return <BaseButton {...props} {...{ icon, iconOnly, onClick }} labelText="Paste" />;
return (
<BaseButton
{...props}
icon={<icons.Clipboard size={16} />}
{...{ iconOnly, onClick }}
labelText="Paste"
/>
);
}