perf: memoize relatively intensively computed values
This commit is contained in:
parent
12509f8157
commit
1be6738715
|
@ -9,7 +9,7 @@ import "./colorStyles.css";
|
||||||
import { classNameFactory } from "@api/Styles";
|
import { classNameFactory } from "@api/Styles";
|
||||||
import { LazyComponent } from "@utils/react";
|
import { LazyComponent } from "@utils/react";
|
||||||
import { find, findByCodeLazy } from "@webpack";
|
import { find, findByCodeLazy } from "@webpack";
|
||||||
import { Forms, Popout, useState } from "@webpack/common";
|
import { Forms, Popout, useMemo, useState } from "@webpack/common";
|
||||||
|
|
||||||
interface ColorPickerProps {
|
interface ColorPickerProps {
|
||||||
value: number | null;
|
value: number | null;
|
||||||
|
@ -69,14 +69,14 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
|
||||||
themeSettings[name] = corrected;
|
themeSettings[name] = corrected;
|
||||||
}
|
}
|
||||||
|
|
||||||
const normalizedValue = TinyColor(value).toHex();
|
const normalizedValue = useMemo(() => parseInt(TinyColor(value).toHex(), 16), [value]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection>
|
<Forms.FormSection>
|
||||||
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
|
||||||
<ColorPicker
|
<ColorPicker
|
||||||
key={name}
|
key={name}
|
||||||
value={parseInt(normalizedValue, 16)}
|
value={normalizedValue}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
</Forms.FormSection>
|
</Forms.FormSection>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Forms, Slider, useState } from "@webpack/common";
|
import { Forms, Slider, useMemo, useState } from "@webpack/common";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label: string;
|
label: string;
|
||||||
|
@ -27,12 +27,16 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
|
||||||
themeSettings[name] = corrected;
|
themeSettings[name] = corrected;
|
||||||
}
|
}
|
||||||
|
|
||||||
const markers: number[] = [];
|
const markers = useMemo(() => {
|
||||||
|
const markers: number[] = [];
|
||||||
|
|
||||||
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
|
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
|
||||||
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
|
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
|
||||||
markers.push(i);
|
markers.push(i);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return markers;
|
||||||
|
}, [min, max, step]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection>
|
<Forms.FormSection>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { identity } from "@utils/misc";
|
import { identity } from "@utils/misc";
|
||||||
import { ComponentTypes, Forms, Select, useState } from "@webpack/common";
|
import { ComponentTypes, Forms, Select, useMemo, useState } from "@webpack/common";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label: string;
|
label: string;
|
||||||
|
@ -28,14 +28,14 @@ export function SettingSelectComponent({ label, name, options, default: def, the
|
||||||
themeSettings[name] = value;
|
themeSettings[name] = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
const opts = options.map(option => ({
|
const opts = useMemo(() => options.map(option => ({
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
|
||||||
key: option.name,
|
key: option.name,
|
||||||
value: option.value,
|
value: option.value,
|
||||||
default: def === option.name,
|
default: def === option.name,
|
||||||
label: option.label
|
label: option.label
|
||||||
} as ComponentTypes.SelectOption));
|
} satisfies ComponentTypes.SelectOption)), [options, def]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection>
|
<Forms.FormSection>
|
||||||
|
|
Loading…
Reference in a new issue