ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-17 04:59: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);

2
components/sidebar/search-bar.tsx
View File

@@ -27,7 +27,7 @@ export function SearchBar() {
}
};
const changeText: InputProps["onChange"] = ({ currentTarget }) => setText(currentTarget.value);
const changeText: InputProps["onChange"] = e => setText(e.currentTarget.value);
const searchIfEnter: InputProps["onKeyDown"] = ({ code }) => {
if (code === "Enter") {

26
components/ui/select.tsx
View File

@@ -7,13 +7,11 @@ import { cn } from "@/lib/style";
import { icons } from "@/components/icons";
import { Indicator } from "@/components/indicator";
export type SelectProps = React.ComponentPropsWithoutRef<typeof Select>;
export type Props = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;
export const Select = SelectPrimitive.Root;
export const SelectGroup = SelectPrimitive.Group;
export const SelectValue = SelectPrimitive.Value;
export const { Root, Group, Value } = SelectPrimitive;
export const SelectTrigger = React.forwardRef<
export const Trigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
@@ -34,9 +32,9 @@ export const SelectTrigger = React.forwardRef<
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
Trigger.displayName = SelectPrimitive.Trigger.displayName;
export const SelectContent = React.forwardRef<
export const Content = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
@@ -62,9 +60,9 @@ export const SelectContent = React.forwardRef<
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
Content.displayName = SelectPrimitive.Content.displayName;
export const SelectLabel = React.forwardRef<
export const Label = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
@@ -74,9 +72,9 @@ export const SelectLabel = React.forwardRef<
{...props}
/>
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
Label.displayName = SelectPrimitive.Label.displayName;
export const SelectItem = React.forwardRef<
export const Item = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
@@ -98,9 +96,9 @@ export const SelectItem = React.forwardRef<
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
Item.displayName = SelectPrimitive.Item.displayName;
export const SelectSeparator = React.forwardRef<
export const Separator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
@@ -110,4 +108,4 @@ export const SelectSeparator = React.forwardRef<
{...props}
/>
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
Separator.displayName = SelectPrimitive.Separator.displayName;