Skip to content

Commit 31590f7

Browse files
NerivecNerivec
committed
fix: memo form fields.
1 parent 816b87b commit 31590f7

File tree

15 files changed

+62
-47
lines changed

15 files changed

+62
-47
lines changed

‎src/components/ThemeSwitcher.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import { type JSX, useEffect, useState } from "react";
44
import store2 from "store2";
55
import { THEME_KEY } from "../localStoreConsts.js";
6-
import { PopoverDropdown } from "./dropdown/PopoverDropdown.js";
6+
import PopoverDropdown from "./dropdown/PopoverDropdown.js";
77

88
const ALL_THEMES = [
99
"", // "Default"

‎src/components/device-page/AddScene.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function AddScene(props: AddSceneProps): JSX.Element {
7676
<InputField
7777
name="scene_name"
7878
label={t("scene_name")}
79-
type="string"
79+
type="text"
8080
value={sceneName}
8181
placeholder={`Scene ${sceneId}`}
8282
onChange={(e) => setSceneName(e.target.value)}

‎src/components/device-page/HeaderDeviceSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Link } from "react-router";
66
import type { TabName } from "../../pages/DevicePage.js";
77
import type { RootState } from "../../store.js";
88
import type { Device } from "../../types.js";
9-
import { PopoverDropdown } from "../dropdown/PopoverDropdown.js";
9+
import PopoverDropdown from "../dropdown/PopoverDropdown.js";
1010

1111
interface HeaderDeviceSelectorProps {
1212
devices: RootState["devices"];

‎src/components/dropdown/PopoverDropdown.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { CSSProperties, HTMLAttributes, ReactElement } from "react";
1+
import { type CSSProperties, type HTMLAttributes, type ReactElement, memo } from "react";
22
import Button from "../Button.js";
33

44
interface PopoverDropdownProps extends HTMLAttributes<HTMLUListElement> {
@@ -8,7 +8,7 @@ interface PopoverDropdownProps extends HTMLAttributes<HTMLUListElement> {
88
dropdownStyle?: string;
99
}
1010

11-
export function PopoverDropdown(props: PopoverDropdownProps) {
11+
const PopoverDropdown = memo((props: PopoverDropdownProps) => {
1212
const { buttonChildren, children, name, buttonStyle, dropdownStyle } = props;
1313
const popoverId = `popover-${name}`;
1414
const anchorName = `--anchor-${name}`;
@@ -32,4 +32,6 @@ export function PopoverDropdown(props: PopoverDropdownProps) {
3232
</Button>
3333
</>
3434
);
35-
}
35+
});
36+
37+
export default PopoverDropdown;

‎src/components/form-fields/ArrayField.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { faCheck, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3-
import { type FocusEvent, useCallback, useEffect, useState } from "react";
3+
import { type FocusEvent, memo, useCallback, useEffect, useState } from "react";
44
import Button from "../Button.js";
55

6-
export type ArrayFieldProps = {
6+
type ArrayFieldProps = {
77
defaultValues: (string | number)[];
88
label?: string;
99
detail?: string;
1010
type: "string" | "number";
1111
onSubmit(values: (string | number)[]): void;
1212
};
1313

14-
export default function ArrayField(props: ArrayFieldProps) {
14+
const ArrayField = memo((props: ArrayFieldProps) => {
1515
const { defaultValues, label, detail, type, onSubmit } = props;
1616
const [currentValues, setCurrentValues] = useState<(string | number)[]>(defaultValues || []);
1717

@@ -77,4 +77,6 @@ export default function ArrayField(props: ArrayFieldProps) {
7777
</div>
7878
</fieldset>
7979
);
80-
}
80+
});
81+
82+
export default ArrayField;

‎src/components/form-fields/CheckboxField.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { type ChangeEvent, type DetailedHTMLProps, type InputHTMLAttributes, useCallback } from "react";
1+
import { type ChangeEvent, type DetailedHTMLProps, type InputHTMLAttributes, memo, useCallback } from "react";
22

3-
export type CheckboxFieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
3+
type CheckboxFieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
44
name: string;
55
label?: string;
66
detail?: string;
77
onChange(event: ChangeEvent<HTMLInputElement>): void;
88
};
99

10-
export default function CheckboxField(props: CheckboxFieldProps) {
10+
const CheckboxField = memo((props: CheckboxFieldProps) => {
1111
const { type, label, detail, onChange, ...rest } = props;
1212

1313
const onValidChange = useCallback(
@@ -32,4 +32,6 @@ export default function CheckboxField(props: CheckboxFieldProps) {
3232
)}
3333
</fieldset>
3434
);
35-
}
35+
});
36+
37+
export default CheckboxField;

‎src/components/form-fields/CheckboxesField.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { faCheck } from "@fortawesome/free-solid-svg-icons";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3-
import { type ChangeEvent, useCallback, useEffect, useState } from "react";
3+
import { type ChangeEvent, memo, useCallback, useEffect, useState } from "react";
44
import Button from "../Button.js";
55

6-
export type CheckboxFieldProps = {
6+
type CheckboxFieldProps = {
77
names: string[];
88
defaultsChecked: string[];
99
label?: string;
1010
detail?: string;
1111
onSubmit(values: string[]): void;
1212
};
1313

14-
export default function CheckboxesField(props: CheckboxFieldProps) {
14+
const CheckboxesField = memo((props: CheckboxFieldProps) => {
1515
const { names, label, detail, defaultsChecked, onSubmit } = props;
1616
const [currentValues, setCurrentValues] = useState<string[]>(defaultsChecked || []);
1717

@@ -61,4 +61,6 @@ export default function CheckboxesField(props: CheckboxFieldProps) {
6161
</div>
6262
</fieldset>
6363
);
64-
}
64+
});
65+
66+
export default CheckboxesField;

‎src/components/form-fields/DebouncedInput.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
import { type InputHTMLAttributes, useEffect, useState } from "react";
1+
import { type InputHTMLAttributes, memo, useEffect, useState } from "react";
22

3-
/** A typical debounced input react component */
4-
export default function DebouncedInput({
5-
value: initialValue,
6-
onChange,
7-
debounce = 500,
8-
...props
9-
}: {
3+
type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
104
value: string | number;
115
onChange: (value: string | number) => void;
126
debounce?: number;
13-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange">) {
7+
};
8+
9+
/** A typical debounced input react component */
10+
const DebouncedInput = memo(({ value: initialValue, onChange, debounce = 500, ...props }: Props) => {
1411
const [value, setValue] = useState(initialValue);
1512

1613
useEffect(() => {
@@ -26,4 +23,6 @@ export default function DebouncedInput({
2623
}, [value, debounce, onChange]);
2724

2825
return <input {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
29-
}
26+
});
27+
28+
export default DebouncedInput;

‎src/components/form-fields/InputField.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { type ChangeEvent, type DetailedHTMLProps, type FocusEvent, type InputHTMLAttributes, useCallback } from "react";
1+
import { type ChangeEvent, type DetailedHTMLProps, type FocusEvent, type InputHTMLAttributes, memo, useCallback } from "react";
22

3-
export type InputFieldProps<T> = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
3+
type InputFieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
44
name: string;
55
label?: string;
66
detail?: string;
7-
type: T;
7+
type: "text" | "number";
88
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
99
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
1010
};
1111

12-
export default function InputField<T>(props: InputFieldProps<T>) {
12+
const InputField = memo((props: InputFieldProps) => {
1313
const { label, detail, onChange, onBlur, ...rest } = props;
1414

1515
const onValidChange = useCallback(
@@ -42,4 +42,6 @@ export default function InputField<T>(props: InputFieldProps<T>) {
4242
{detail && <p className="label">{detail}</p>}
4343
</fieldset>
4444
);
45-
}
45+
});
46+
47+
export default InputField;

‎src/components/form-fields/NumberField.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { type ChangeEvent, type DetailedHTMLProps, type FocusEvent, type InputHTMLAttributes, useCallback, useEffect, useState } from "react";
1+
import { type ChangeEvent, type DetailedHTMLProps, type FocusEvent, type InputHTMLAttributes, memo, useCallback, useEffect, useState } from "react";
22

3-
export type NumberFieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
3+
type NumberFieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
44
name: string;
55
label?: string;
66
detail?: string;
77
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
88
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
99
};
1010

11-
export default function NumberField(props: NumberFieldProps) {
11+
const NumberField = memo((props: NumberFieldProps) => {
1212
const { label, detail, onChange, onBlur, defaultValue, ...rest } = props;
1313
const [currentValue, setCurrentValue] = useState(defaultValue || props.min || "");
1414

@@ -70,4 +70,6 @@ export default function NumberField(props: NumberFieldProps) {
7070
{detail && <p className="label whitespace-normal">{detail}</p>}
7171
</fieldset>
7272
);
73-
}
73+
});
74+
75+
export default NumberField;

0 commit comments

Comments
 (0)