diff --git a/src/svelte-interface/components/ColourPicker.tsx b/src/svelte-interface/components/ColourPicker.tsx index 234d97ac..36231d2c 100644 --- a/src/svelte-interface/components/ColourPicker.tsx +++ b/src/svelte-interface/components/ColourPicker.tsx @@ -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(null); - const [presets, setPresets] = useState(defaultPresets); +interface PickerProps { + customOnChange?: (color: string) => void + customState?: string + savePresets?: boolean +} + +export default function Picker({ + customOnChange, + customState, + savePresets = true, +}: PickerProps) { + const [customThemeColor, setCustomThemeColor] = useState( + () => customState ?? settingsState.selectedColor ?? null + ) + const [presets, setPresets] = useState(() => { + 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 - return () => { - if (customThemeColor) { + if (customThemeColor && !customOnChange && savePresets) { + return () => { // 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 ( - - ); + { + if (customOnChange) { + customOnChange(color) + } else { + setCustomThemeColor(color) + } + }} + /> + ) } - -export default Picker;