BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(colourPicker): recursively rerendering itself

Browse Source
This commit is contained in:
sethburkart123
2024-09-29 12:08:55 +10:00
parent e49849c18a
commit 1360736dd7
1 changed files with 75 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/components/ColourPicker.tsx
+74 -50
View File
@@ -1,77 +1,101 @@
import ColorPicker from 'react-best-gradient-color-picker'; import ColorPicker from "react-best-gradient-color-picker"
import { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react"
import { settingsState } from '@/seqta/utils/listeners/SettingsState'; import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
const defaultPresets = [ 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(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(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, 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(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(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%)', "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(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%)', "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%)', "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(114, 1, 170, 0.89)",
'rgba(93, 135, 63, 0.89)', "rgba(93, 135, 63, 0.89)",
'rgba(4, 4, 138, 0.77)', "rgba(4, 4, 138, 0.77)",
'rgba(21, 20, 20, 0.89)', "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%)', "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%)', "radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)",
'rgba(17, 94, 89, 1)', "rgba(17, 94, 89, 1)",
'rgba(30, 64, 175, 0.89)', "rgba(30, 64, 175, 0.89)",
'rgba(134, 25, 143, 1)', "rgba(134, 25, 143, 1)",
'rgba(14, 165, 233, 0.9)' "rgba(14, 165, 233, 0.9)",
]; ]
function Picker() { interface PickerProps {
const [customThemeColor, setCustomThemeColor] = useState<string | null>(null); customOnChange?: (color: string) => void
const [presets, setPresets] = useState<string[]>(defaultPresets); 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(() => { useEffect(() => {
setCustomThemeColor(settingsState.selectedColor); if (customState !== undefined) {
setPresets(() => { setCustomThemeColor(customState)
const savedPresets = localStorage.getItem('colorPickerPresets'); }
return savedPresets ? JSON.parse(savedPresets) : defaultPresets; }, [customState])
});
}, []);
useEffect(() => { useEffect(() => {
// on component dismount, save the presets to local storage if (customThemeColor && !customOnChange && savePresets) {
return () => { return () => {
if (customThemeColor) {
// Check if the selected color is already in the presets // 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 (existingIndex > -1) {
// If the color exists, move it to the front // If the color exists, move it to the front
updatedPresets = [ updatedPresets = [
customThemeColor, customThemeColor,
...presets.slice(0, existingIndex), ...presets.slice(0, existingIndex),
...presets.slice(existingIndex + 1) ...presets.slice(existingIndex + 1),
]; ]
} else { } else {
// If the color is new, add it to the front and slice the array // 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); setPresets(updatedPresets)
localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets)); localStorage.setItem(
"colorPickerPresets",
JSON.stringify(updatedPresets),
)
} }
} }
}, []); }, [customThemeColor, customOnChange, savePresets, presets])
useEffect(() => { useEffect(() => {
if (customThemeColor) { if (customThemeColor && !customOnChange) {
settingsState.selectedColor = customThemeColor; settingsState.selectedColor = customThemeColor
} }
}, [customThemeColor]); }, [customThemeColor, customOnChange])
return ( 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;