mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
fix(colourPicker): recursively rerendering itself
This commit is contained in:
sethburkart123
@@ -1,77 +1,101 @@
|
||||
import ColorPicker from 'react-best-gradient-color-picker';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { settingsState } from '@/seqta/utils/listeners/SettingsState';
|
||||
import ColorPicker from "react-best-gradient-color-picker"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||
|
||||
const defaultPresets = [
|
||||
'linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)',
|
||||
'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)',
|
||||
'linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)',
|
||||
'linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)',
|
||||
'linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)',
|
||||
'linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)',
|
||||
'radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)',
|
||||
'radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)',
|
||||
'linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)',
|
||||
'rgba(114, 1, 170, 0.89)',
|
||||
'rgba(93, 135, 63, 0.89)',
|
||||
'rgba(4, 4, 138, 0.77)',
|
||||
'rgba(21, 20, 20, 0.89)',
|
||||
'linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)',
|
||||
'radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)',
|
||||
'rgba(17, 94, 89, 1)',
|
||||
'rgba(30, 64, 175, 0.89)',
|
||||
'rgba(134, 25, 143, 1)',
|
||||
'rgba(14, 165, 233, 0.9)'
|
||||
];
|
||||
"linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
|
||||
"linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
|
||||
"linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)",
|
||||
"radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)",
|
||||
"radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)",
|
||||
"linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)",
|
||||
"rgba(114, 1, 170, 0.89)",
|
||||
"rgba(93, 135, 63, 0.89)",
|
||||
"rgba(4, 4, 138, 0.77)",
|
||||
"rgba(21, 20, 20, 0.89)",
|
||||
"linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)",
|
||||
"radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)",
|
||||
"rgba(17, 94, 89, 1)",
|
||||
"rgba(30, 64, 175, 0.89)",
|
||||
"rgba(134, 25, 143, 1)",
|
||||
"rgba(14, 165, 233, 0.9)",
|
||||
]
|
||||
|
||||
function Picker() {
|
||||
const [customThemeColor, setCustomThemeColor] = useState<string | null>(null);
|
||||
const [presets, setPresets] = useState<string[]>(defaultPresets);
|
||||
interface PickerProps {
|
||||
customOnChange?: (color: string) => void
|
||||
customState?: string
|
||||
savePresets?: boolean
|
||||
}
|
||||
|
||||
export default function Picker({
|
||||
customOnChange,
|
||||
customState,
|
||||
savePresets = true,
|
||||
}: PickerProps) {
|
||||
const [customThemeColor, setCustomThemeColor] = useState<string | null>(
|
||||
() => customState ?? settingsState.selectedColor ?? null
|
||||
)
|
||||
const [presets, setPresets] = useState<string[]>(() => {
|
||||
const savedPresets = localStorage.getItem("colorPickerPresets")
|
||||
return savedPresets ? JSON.parse(savedPresets) : defaultPresets
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setCustomThemeColor(settingsState.selectedColor);
|
||||
setPresets(() => {
|
||||
const savedPresets = localStorage.getItem('colorPickerPresets');
|
||||
return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (customState !== undefined) {
|
||||
setCustomThemeColor(customState)
|
||||
}
|
||||
}, [customState])
|
||||
|
||||
useEffect(() => {
|
||||
// on component dismount, save the presets to local storage
|
||||
if (customThemeColor && !customOnChange && savePresets) {
|
||||
return () => {
|
||||
if (customThemeColor) {
|
||||
// Check if the selected color is already in the presets
|
||||
const existingIndex = presets.indexOf(customThemeColor);
|
||||
const existingIndex = presets.indexOf(customThemeColor)
|
||||
|
||||
let updatedPresets;
|
||||
let updatedPresets
|
||||
if (existingIndex > -1) {
|
||||
// If the color exists, move it to the front
|
||||
updatedPresets = [
|
||||
customThemeColor,
|
||||
...presets.slice(0, existingIndex),
|
||||
...presets.slice(existingIndex + 1)
|
||||
];
|
||||
...presets.slice(existingIndex + 1),
|
||||
]
|
||||
} else {
|
||||
// If the color is new, add it to the front and slice the array
|
||||
updatedPresets = [customThemeColor, ...presets].slice(0, 18);
|
||||
updatedPresets = [customThemeColor, ...presets].slice(0, 18)
|
||||
}
|
||||
|
||||
setPresets(updatedPresets);
|
||||
localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
|
||||
setPresets(updatedPresets)
|
||||
localStorage.setItem(
|
||||
"colorPickerPresets",
|
||||
JSON.stringify(updatedPresets),
|
||||
)
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
}, [customThemeColor, customOnChange, savePresets, presets])
|
||||
|
||||
useEffect(() => {
|
||||
if (customThemeColor) {
|
||||
settingsState.selectedColor = customThemeColor;
|
||||
if (customThemeColor && !customOnChange) {
|
||||
settingsState.selectedColor = customThemeColor
|
||||
}
|
||||
}, [customThemeColor]);
|
||||
}, [customThemeColor, customOnChange])
|
||||
|
||||
return (
|
||||
<ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor ?? ''} onChange={setCustomThemeColor} />
|
||||
);
|
||||
<ColorPicker
|
||||
disableDarkMode={true}
|
||||
presets={presets}
|
||||
hideInputs={true}
|
||||
value={customThemeColor ?? ""}
|
||||
onChange={(color: string) => {
|
||||
if (customOnChange) {
|
||||
customOnChange(color)
|
||||
} else {
|
||||
setCustomThemeColor(color)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Picker;
|
||||
|
||||
Reference in New Issue
Block a user