Skip to content

Commit

Permalink
refactor: style of writing react components (#392)
Browse files Browse the repository at this point in the history
* refactor: memoize all components

* refactor: style of writing react components

* minor
  • Loading branch information
Charlie-XIAO authored Feb 2, 2025
1 parent c5c1326 commit 619ee44
Show file tree
Hide file tree
Showing 18 changed files with 100 additions and 69 deletions.
8 changes: 5 additions & 3 deletions src/canvas/components/ErrorDisplay.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Badge, Box, Flex, Heading, ScrollArea, Text } from "@radix-ui/themes";

export interface ErrorDisplayProps {
interface ErrorDisplayProps {
/** Title of the error display. */
title: string;
/** The full error message. */
Expand All @@ -14,7 +14,7 @@ export interface ErrorDisplayProps {
* error message displayed as pre-wrap monospace text. The component is wrapped in a
* scroll area is scrollable in both directions.
*/
export default function ErrorDisplay({ title, error }: ErrorDisplayProps) {
const ErrorDisplay = ({ title, error }: ErrorDisplayProps) => {
return (
<ScrollArea scrollbars="both" asChild>
<Box p="2">
Expand All @@ -35,4 +35,6 @@ export default function ErrorDisplay({ title, error }: ErrorDisplayProps) {
</Box>
</ScrollArea>
);
}
};

export default ErrorDisplay;
8 changes: 5 additions & 3 deletions src/canvas/components/WidgetContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Box } from "@radix-ui/themes";
import { WidgetState, updateWidgetSettings } from "../hooks/useWidgetsStore";
import { emitUpdateSettingsToManager } from "../../events";

export interface WidgetContainerProps {
interface WidgetContainerProps {
/** ID of the widget. */
id: string;
/** The widget state. */
Expand All @@ -25,7 +25,7 @@ export interface WidgetContainerProps {
* If the child (i.e., the widget) throws a rendering error, it will be caught by the
* error boundary and displayed with the {@link ErrorDisplay} component.
*/
export default function WidgetContainer({ id, widget }: WidgetContainerProps) {
const WidgetContainer = ({ id, widget }: WidgetContainerProps) => {
const { Component, width, height, x, y, opacity } = widget;
const containerRef = useRef<HTMLDivElement>(null);
let retried = false;
Expand Down Expand Up @@ -107,4 +107,6 @@ export default function WidgetContainer({ id, widget }: WidgetContainerProps) {
</Box>
</Draggable>
);
}
};

export default WidgetContainer;
10 changes: 6 additions & 4 deletions src/manager/components/ExternalCopyLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { writeText } from "@tauri-apps/plugin-clipboard-manager";
import { toast } from "sonner";
import { PropsWithChildren } from "react";

export interface ExternalCopyLinkProps {
interface ExternalCopyLinkProps {
/** The external target of the link. */
href: LinkProps["href"];
/** The gap size between the link text and the copy button. */
Expand All @@ -24,11 +24,11 @@ export interface ExternalCopyLinkProps {
* The link will be opened in a new tab when clicked. The copy button will copy the link
* address to the clipboard. Wrap the link text within this component.
*/
export default function ExternalCopyLink({
const ExternalCopyLink = ({
href,
gap = "3",
children,
}: PropsWithChildren<ExternalCopyLinkProps>) {
}: PropsWithChildren<ExternalCopyLinkProps>) => {
return (
<Flex gap={gap} align="center">
<Link href={href} target="_blank" rel="noreferrer">
Expand All @@ -49,4 +49,6 @@ export default function ExternalCopyLink({
</Tooltip>
</Flex>
);
}
};

export default ExternalCopyLink;
10 changes: 6 additions & 4 deletions src/manager/components/FloatButton.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box, IconButton, Tooltip } from "@radix-ui/themes";
import { ReactNode } from "react";

export interface FloatButtonProps {
interface FloatButtonProps {
/** The order of the button, i.e., `(order - 1) * 40` pixels away from the bottom. */
order: number;
/** The icon to display in the float button. */
Expand All @@ -20,13 +20,13 @@ export interface FloatButtonProps {
* This will be a circular icon button with a tooltip on hover, rendered in the bottom
* right corner of the window.
*/
export default function FloatButton({
const FloatButton = ({
order,
icon,
tooltip,
onClick,
disabled,
}: FloatButtonProps) {
}: FloatButtonProps) => {
return (
<Box position="absolute" right="0" bottom={`${(order - 1) * 40}px`}>
<Tooltip content={tooltip} side="left">
Expand All @@ -41,4 +41,6 @@ export default function FloatButton({
</Tooltip>
</Box>
);
}
};

export default FloatButton;
8 changes: 5 additions & 3 deletions src/manager/components/ManagerToaster.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Toaster } from "sonner";
import { Theme } from "../../types/backend";

export interface ManagerToasterProps {
interface ManagerToasterProps {
/** The theme. */
theme: Theme;
}
Expand All @@ -12,7 +12,7 @@ export interface ManagerToasterProps {
* This is styled on top of [`Toaster`](https://sonner.emilkowal.ski/toaster), rendered
* in the bottom center of the manager window.
*/
export default function ManagerToaster({ theme }: ManagerToasterProps) {
const ManagerToaster = ({ theme }: ManagerToasterProps) => {
return (
<Toaster
position="bottom-center"
Expand All @@ -28,4 +28,6 @@ export default function ManagerToaster({ theme }: ManagerToasterProps) {
}}
/>
);
}
};

export default ManagerToaster;
10 changes: 6 additions & 4 deletions src/manager/components/NumberInput.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ChangeEvent } from "react";

export interface NumberInputProps {
interface NumberInputProps {
/** The controlled number input value. */
value: number;
/** The callback on value change. */
Expand All @@ -25,13 +25,13 @@ export interface NumberInputProps {
* such that it has the increment/decrement buttons, accepts keyboard input, reacts to
* up/down keys and the scroll wheel, etc.
*/
export default function NumberInput({
const NumberInput = ({
value,
onChange,
min,
max,
width,
}: NumberInputProps) {
}: NumberInputProps) => {
function handleChange(event: ChangeEvent<HTMLInputElement>) {
if (event.target.value === "") {
onChange(min ?? 0);
Expand Down Expand Up @@ -66,4 +66,6 @@ export default function NumberInput({
}}
/>
);
}
};

export default NumberInput;
10 changes: 6 additions & 4 deletions src/manager/components/SettingToggleShortcut.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Shortcut from "./Shortcut";
import { FaEdit } from "react-icons/fa";
import useKeyboardListener from "../hooks/useKeyboardListener";

export interface SettingToggleShortcutProps {
interface SettingToggleShortcutProps {
/** Setter for the toggle shortcut state. */
setToggleShortcut: Dispatch<SetStateAction<string | null>>;
}
Expand All @@ -40,9 +40,9 @@ export interface SettingToggleShortcutProps {
* within the popover will be reset to initial. The actual shortcut will not be
* touched.
*/
export default function SettingToggleShortcut({
const SettingToggleShortcut = ({
setToggleShortcut,
}: SettingToggleShortcutProps) {
}: SettingToggleShortcutProps) => {
const [popoverOpen, setPopoverOpen] = useState(false);
const [disableShortcut, setDisableShortcut] = useState(false);

Expand Down Expand Up @@ -196,4 +196,6 @@ export default function SettingToggleShortcut({
</Popover.Content>
</Popover.Root>
);
}
};

export default SettingToggleShortcut;
10 changes: 6 additions & 4 deletions src/manager/components/Shortcut.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Flex, Kbd, KbdProps, Text } from "@radix-ui/themes";
import { ComponentPropsWithoutRef, Fragment } from "react";

export interface ShortcutProps {
interface ShortcutProps {
/** The array of shortcut keys. */
keys: string[];
/** The size of the shortcut display. */
Expand All @@ -15,11 +15,11 @@ export interface ShortcutProps {
* wrapped in a flex box with default gap size 1. All flex box props can be passed to
* this component to further customize the display layout.
*/
export default function Shortcut({
const Shortcut = ({
keys,
size = "2",
...props
}: ShortcutProps & ComponentPropsWithoutRef<typeof Flex>) {
}: ShortcutProps & ComponentPropsWithoutRef<typeof Flex>) => {
return (
<Flex align="center" gap="1" {...props}>
{keys.length > 0 ? (
Expand All @@ -38,4 +38,6 @@ export default function Shortcut({
)}
</Flex>
);
}
};

export default Shortcut;
11 changes: 5 additions & 6 deletions src/manager/components/ThemeToggler.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
import { Dispatch, SetStateAction } from "react";
import { emitSwitchThemeToCanvas } from "../../events";

export interface AppearanceTogglerProps {
interface AppearanceTogglerProps {
/** Theme. */
theme: Theme;
/** State for theme. */
Expand All @@ -18,10 +18,7 @@ export interface AppearanceTogglerProps {
* window. Clicking the icon button should switch the theme appearance between light
* and dark mode. The tooltip and icon should reflect the current theme appearance.
*/
export default function AppearanceToggler({
theme,
setTheme,
}: AppearanceTogglerProps) {
const AppearanceToggler = ({ theme, setTheme }: AppearanceTogglerProps) => {
const toggleTheme = () => {
const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT;
setTheme(newTheme);
Expand All @@ -44,4 +41,6 @@ export default function AppearanceToggler({
</Tooltip>
</Box>
);
}
};

export default AppearanceToggler;
10 changes: 6 additions & 4 deletions src/manager/components/WidgetContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { toast } from "sonner";
import WidgetContentConfigList from "../components/WidgetContentConfigList";
import WidgetContentSettingsList from "../components/WidgetContentSettingsList";

export interface WidgetContentProps {
interface WidgetContentProps {
/** The index of the widget in the collection. */
index: number;
/** The widget ID. */
Expand All @@ -44,13 +44,13 @@ export interface WidgetContentProps {
* {@link WidgetContentConfigList} and a setting section
* {@link WidgetContentSettingsList}.
*/
export default function WidgetContent({
const WidgetContent = ({
index,
id,
config,
settings,
setManagerWidgetStates,
}: WidgetContentProps) {
}: WidgetContentProps) => {
return (
<Tabs.Content value={`tab${index}`} asChild>
<Flex height="100%" gap="3" direction="column" css={{ flex: 3 }}>
Expand Down Expand Up @@ -105,4 +105,6 @@ export default function WidgetContent({
</Flex>
</Tabs.Content>
);
}
};

export default WidgetContent;
10 changes: 6 additions & 4 deletions src/manager/components/WidgetContentConfigList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import WidgetDependencies from "../components/WidgetDependencies";
import { MdOpenInNew } from "react-icons/md";
import { invokeOpenInWidgetsDir } from "../../commands";

export interface WidgetContentConfigListProps {
interface WidgetContentConfigListProps {
/** The widget ID. */
id: string;
/** The widget configuration. */
Expand All @@ -17,10 +17,10 @@ export interface WidgetContentConfigListProps {
* This is rendered as a data list, displaying the widget ID, name, entry, and
* external dependencies.
*/
export default function WidgetContentConfigList({
const WidgetContentConfigList = ({
id,
config,
}: WidgetContentConfigListProps) {
}: WidgetContentConfigListProps) => {
return (
<DataList.Root size="2" css={{ gap: "var(--space-2)" }}>
<DataList.Item>
Expand Down Expand Up @@ -60,4 +60,6 @@ export default function WidgetContentConfigList({
</DataList.Item>
</DataList.Root>
);
}
};

export default WidgetContentConfigList;
10 changes: 6 additions & 4 deletions src/manager/components/WidgetContentHeading.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button, Flex, Heading } from "@radix-ui/themes";
import { ReactNode } from "react";

export interface WidgetContentHeadingProps {
interface WidgetContentHeadingProps {
/** The component to put in the heading. */
heading: ReactNode;
/** The icon for the action button. */
Expand All @@ -18,12 +18,12 @@ export interface WidgetContentHeadingProps {
* This displays the heading aligned left and the action button aligned right. The
* action button will be composed of the icon then the text.
*/
export default function WidgetContentHeading({
const WidgetContentHeading = ({
heading,
actionIcon,
actionText,
action,
}: WidgetContentHeadingProps) {
}: WidgetContentHeadingProps) => {
return (
<Flex justify="between" align="center">
<Heading size="2">{heading}</Heading>
Expand All @@ -39,4 +39,6 @@ export default function WidgetContentHeading({
</Button>
</Flex>
);
}
};

export default WidgetContentHeading;
10 changes: 6 additions & 4 deletions src/manager/components/WidgetContentSettingsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { DataList, Flex } from "@radix-ui/themes";
import NumberInput from "../components/NumberInput";
import { FaTimes } from "react-icons/fa";

export interface WidgetContentSettingListProps {
interface WidgetContentSettingListProps {
/** The widget ID. */
id: string;
/** The widget-specific setting. */
Expand All @@ -24,11 +24,11 @@ export interface WidgetContentSettingListProps {
* manager will be updated via the setter, and the updated settings will also be sent
* to the canvas via emitting corresponding events.
*/
export default function WidgetContentSettingList({
const WidgetContentSettingList = ({
id,
settings,
setManagerWidgetStates,
}: WidgetContentSettingListProps) {
}: WidgetContentSettingListProps) => {
function updateSetting(partialSettings: Partial<WidgetSettings>) {
const newSettings = { ...settings, ...partialSettings };
setManagerWidgetStates((prev) => ({
Expand Down Expand Up @@ -78,4 +78,6 @@ export default function WidgetContentSettingList({
</DataList.Item>
</DataList.Root>
);
}
};

export default WidgetContentSettingList;
Loading

0 comments on commit 619ee44

Please sign in to comment.