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: rename, reorder, etc.

Browse Source
This commit is contained in:
rusconn
2023-07-10 11:56:45 +09:00
parent e2a558f9e9
commit ce35eb910e
18 changed files with 211 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/buttons/base.tsx
View File

@@ -1,13 +1,13 @@
import { Button, ButtonProps } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
export type BaseButtonProps = ButtonProps & {
export type BaseProps = ButtonProps & {
icon: React.ReactNode;
iconOnly?: true;
labelText: string;
};
export function BaseButton({ icon, iconOnly, labelText, ...props }: BaseButtonProps) {
export function Base({ icon, iconOnly, labelText, ...props }: BaseProps) {
const button = (
<Button className="w-fit border" {...props}>
{icon}

10
components/buttons/clear.tsx
View File

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

17
components/buttons/copy.tsx
View File

@@ -3,14 +3,14 @@ import equal from "react-fast-compare";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
import { Base, BaseProps } from "./base";
export type CopyButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onClick"> & {
export type CopyProps = Omit<BaseProps, "icon" | "labelText" | "onClick"> & {
text: string;
};
function RawCopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
function RawButton({ text, iconOnly, ...props }: CopyProps) {
const onClick: BaseProps["onClick"] = useCallback(() => {
navigator.clipboard.writeText(text).catch(e => {
if (e instanceof Error) {
// eslint-disable-next-line no-alert
@@ -20,13 +20,8 @@ function RawCopyButton({ text, iconOnly, ...props }: CopyButtonProps) {
}, [text]);
return (
<BaseButton
{...props}
icon={<icons.Copy size={16} />}
{...{ iconOnly, onClick }}
labelText="Copy"
/>
<Base {...props} icon={<icons.Copy size={16} />} {...{ iconOnly, onClick }} labelText="Copy" />
);
}
export const CopyButton = memo(RawCopyButton, equal);
export const Copy = memo(RawButton, equal);

24
components/buttons/file.tsx
View File

@@ -3,30 +3,24 @@ import equal from "react-fast-compare";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
import { Base, BaseProps } from "./base";
type InputProps = React.ComponentProps<"input">;
export type FileButtonProps = Pick<InputProps, "accept"> &
Omit<BaseButtonProps, "icon" | "labelText" | "onClick"> & {
export type FileProps = Pick<InputProps, "accept"> &
Omit<BaseProps, "icon" | "labelText" | "onClick"> & {
maxFileSizeMb?: number;
onFileRead: (text: string) => void;
};
export function RawFileButton({
accept,
iconOnly,
maxFileSizeMb = 20,
onFileRead,
...props
}: FileButtonProps) {
export function RawFile({ accept, iconOnly, maxFileSizeMb = 20, onFileRead, ...props }: FileProps) {
const ref = useRef<HTMLInputElement>(null);
const onClick = () => ref.current?.click();
const onChange: NonNullable<InputProps["onChange"]> = useCallback(
({ currentTarget }) => {
const file = Array.from(currentTarget.files ?? []).at(0);
e => {
const file = Array.from(e.currentTarget.files ?? []).at(0);
if (!file) {
return;
@@ -51,14 +45,14 @@ export function RawFileButton({
// clear selected file to accept the same file again
// eslint-disable-next-line no-param-reassign
currentTarget.value = "";
e.currentTarget.value = "";
},
[maxFileSizeMb, onFileRead]
);
return (
<>
<BaseButton
<Base
{...props}
icon={<icons.File size={16} />}
{...{ iconOnly, onClick }}
@@ -69,4 +63,4 @@ export function RawFileButton({
);
}
export const FileButton = memo(RawFileButton, equal);
export const File = memo(RawFile, equal);

4
components/buttons/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export * from "./clear";
export * from "./copy";
export * from "./file";
export * from "./paste";

12
components/buttons/paste.tsx
View File

@@ -3,14 +3,14 @@ import equal from "react-fast-compare";
import { icons } from "@/components/icons";
import { BaseButton, BaseButtonProps } from "./base";
import { Base, BaseProps } from "./base";
export type PasteButtonProps = Omit<BaseButtonProps, "icon" | "labelText" | "onClick"> & {
export type PasteProps = Omit<BaseProps, "icon" | "labelText" | "onClick"> & {
onClipboardRead: (text: string) => void;
};
export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteButtonProps) {
const onClick: BaseButtonProps["onClick"] = useCallback(() => {
export function RawPaste({ iconOnly, onClipboardRead, ...props }: PasteProps) {
const onClick: BaseProps["onClick"] = useCallback(() => {
navigator.clipboard
.readText()
.then(onClipboardRead)
@@ -23,7 +23,7 @@ export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteBut
}, [onClipboardRead]);
return (
<BaseButton
<Base
{...props}
icon={<icons.Clipboard size={16} />}
{...{ iconOnly, onClick }}
@@ -32,4 +32,4 @@ export function RawPasteButton({ iconOnly, onClipboardRead, ...props }: PasteBut
);
}
export const PasteButton = memo(RawPasteButton, equal);
export const Paste = memo(RawPaste, equal);