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

chore: upgrade to react 19 beta and next 14 canary

Browse Source
This commit is contained in:
andres
2024-05-19 14:53:00 +02:00
parent fe429295ef
commit 63e0be09e6
65 changed files with 2626 additions and 1898 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/buttons/clear.tsx
View File

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

11
components/buttons/copy.tsx
View File

@@ -1,6 +1,3 @@
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import * as icons from "@/components/icons";
import { Base, BaseProps } from "./base";
@@ -9,19 +6,17 @@ export type CopyProps = Omit<BaseProps, "icon" | "labelText" | "onClick"> & {
text: string;
};
function RawButton({ text, iconOnly, ...props }: CopyProps) {
const onClick: BaseProps["onClick"] = useCallback(() => {
export function Copy({ text, iconOnly, ...props }: CopyProps) {
const onClick: BaseProps["onClick"] = () => {
navigator.clipboard.writeText(text).catch(e => {
if (e instanceof Error) {
// eslint-disable-next-line no-alert
alert(e.message);
}
});
}, [text]);
};
return (
<Base {...props} icon={<icons.Copy size={16} />} {...{ iconOnly, onClick }} labelText="Copy" />
);
}
export const Copy = memo(RawButton, equal);

58
components/buttons/file.tsx
View File

@@ -1,5 +1,4 @@
import { memo, useCallback, useRef } from "react";
import equal from "react-fast-compare";
import { useRef } from "react";
import * as icons from "@/components/icons";
@@ -13,42 +12,39 @@ export type FileProps = Pick<InputProps, "accept"> &
onFileRead: (text: string) => void;
};
export function RawFile({ accept, iconOnly, maxFileSizeMb = 20, onFileRead, ...props }: FileProps) {
export function File({ accept, iconOnly, maxFileSizeMb = 20, onFileRead, ...props }: FileProps) {
const ref = useRef<HTMLInputElement>(null);
const onClick = () => ref.current?.click();
const onChange: NonNullable<InputProps["onChange"]> = useCallback(
e => {
const file = Array.from(e.currentTarget.files ?? []).at(0);
const onChange: NonNullable<InputProps["onChange"]> = e => {
const file = Array.from(e.currentTarget.files ?? []).at(0);
if (!file) {
return;
if (!file) {
return;
}
// TODO: reject if the file is unsupported
if (file.size > maxFileSizeMb * 2 ** 20) {
// eslint-disable-next-line no-alert
return alert(`The file is too big. Up to ${maxFileSizeMb}MiB.`);
}
const reader = new FileReader();
reader.onload = ({ target }) => {
if (typeof target?.result === "string") {
onFileRead(target?.result);
}
};
// TODO: reject if the file is unsupported
reader.readAsText(file);
if (file.size > maxFileSizeMb * 2 ** 20) {
// eslint-disable-next-line no-alert
return alert(`The file is too big. Up to ${maxFileSizeMb}MiB.`);
}
const reader = new FileReader();
reader.onload = ({ target }) => {
if (typeof target?.result === "string") {
onFileRead(target?.result);
}
};
reader.readAsText(file);
// clear selected file to accept the same file again
// eslint-disable-next-line no-param-reassign
e.currentTarget.value = "";
},
[maxFileSizeMb, onFileRead]
);
// clear selected file to accept the same file again
// eslint-disable-next-line no-param-reassign
e.currentTarget.value = "";
};
return (
<>
@@ -62,5 +58,3 @@ export function RawFile({ accept, iconOnly, maxFileSizeMb = 20, onFileRead, ...p
</>
);
}
export const File = memo(RawFile, equal);

11
components/buttons/paste.tsx
View File

@@ -1,6 +1,3 @@
import { memo, useCallback } from "react";
import equal from "react-fast-compare";
import * as icons from "@/components/icons";
import { Base, BaseProps } from "./base";
@@ -9,8 +6,8 @@ export type PasteProps = Omit<BaseProps, "icon" | "labelText" | "onClick"> & {
onClipboardRead: (text: string) => void;
};
export function RawPaste({ iconOnly, onClipboardRead, ...props }: PasteProps) {
const onClick: BaseProps["onClick"] = useCallback(() => {
export function Paste({ iconOnly, onClipboardRead, ...props }: PasteProps) {
const onClick: BaseProps["onClick"] = () => {
navigator.clipboard
.readText()
.then(onClipboardRead)
@@ -20,7 +17,7 @@ export function RawPaste({ iconOnly, onClipboardRead, ...props }: PasteProps) {
alert(e.message);
}
});
}, [onClipboardRead]);
};
return (
<Base
@@ -31,5 +28,3 @@ export function RawPaste({ iconOnly, onClipboardRead, ...props }: PasteProps) {
/>
);
}
export const Paste = memo(RawPaste, equal);

7
components/buttons/toggle-full-size.tsx
View File

@@ -1,6 +1,3 @@
import { memo } from "react";
import equal from "react-fast-compare";
import * as Icon from "@/components/icons";
import { Base, BaseProps } from "./base";
@@ -9,7 +6,7 @@ export type ToggleFullSizeProps = Omit<BaseProps, "icon" | "labelText"> & {
expanded: boolean;
};
function RawToggleFullSize({ expanded, ...props }: ToggleFullSizeProps) {
export function ToggleFullSize({ expanded, ...props }: ToggleFullSizeProps) {
return (
<Base
{...props}
@@ -18,5 +15,3 @@ function RawToggleFullSize({ expanded, ...props }: ToggleFullSizeProps) {
/>
);
}
export const ToggleFullSize = memo(RawToggleFullSize, equal);