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 buttons on export

Browse Source
This commit is contained in:
rusconn
2023-06-24 13:58:57 +09:00
parent 240fba0e74
commit 822a8db8f9
13 changed files with 103 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/buttons/clear.tsx
View File

@@ -1,9 +1,14 @@
import { memo } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
export type ClearButtonProps = Omit<BaseButtonProps, "icon" | "labelText">;
export function ClearButton({ iconOnly, ...props }: ClearButtonProps) {
function RawClearButton({ iconOnly, ...props }: ClearButtonProps) {
return <BaseButton {...props} icon={<icons.X size={16} />} {...{ iconOnly }} labelText="Clear" />;
}
export const ClearButton = memo(RawClearButton, equal);

7
components/buttons/copy.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback } from "react";
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -8,7 +9,7 @@ export type CopyButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onCl
text: string;
};
export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
function RawCopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
navigator.clipboard.writeText(text).catch(e => {
if (e instanceof Error) {
@@ -27,3 +28,5 @@ export function CopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
/>
);
}
export const CopyButton = memo(RawCopyButton, equal);

7
components/buttons/file.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback, useRef } from "react";
import { memo, useCallback, useRef } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -12,7 +13,7 @@ export type FileButtonProps = Pick<InputProps, "accept"> &
onFileRead: (text: string) => void;
};
export function FileButton({
export function RawFileButton({
accept,
iconOnly,
maxFileSizeMb = 20,
@@ -67,3 +68,5 @@ export function FileButton({
</>
);
}
export const FileButton = memo(RawFileButton, equal);

7
components/buttons/paste.tsx
View File

@@ -1,4 +1,5 @@
import { useCallback } from "react";
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import { icons } from "@/components/icons";
@@ -8,7 +9,7 @@ export type PasteButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onC
onClipboardRead: (text: string) => void;
};
export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) {
export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
navigator.clipboard
.readText()
@@ -30,3 +31,5 @@ export function PasteButton({ iconOnly, onClipboardRead, ...props }: PasteButton
/>
);
}
export const PasteButton = memo(RawPasteButton, equal);