cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-12 02:43:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: swatch picker and inline colour picker

Browse Source
This commit is contained in:
Shobhit-Nagpal
2025-01-02 17:41:59 +05:30
committed by Carlos Valente
parent 1ba48c6a6f
commit dbd56522f6
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
+6 -3
View File
@@ -12,6 +12,7 @@ interface SwatchPickerProps {
color: string;
isSelected?: boolean;
onChange: (name: string) => void;
alwaysDisplayColor?: boolean;
}
const getIconColor = (color: string, isSelected: boolean) => {
@@ -28,11 +29,11 @@ const getIconColor = (color: string, isSelected: boolean) => {
};
export default function SwatchPicker(props: SwatchPickerProps) {
const { color, onChange, isSelected } = props;
const { color, onChange, isSelected, alwaysDisplayColor } = props;
const classes = cx([style.swatch, isSelected ? style.selected : null, style.selectable]);
const iconColor = getIconColor(color, isSelected ?? false);
const iconColor = getIconColor(color, (alwaysDisplayColor || isSelected) ?? false);
const debouncedOnChange = useCallback(
debounce((newValue: string) => {
@@ -41,10 +42,12 @@ export default function SwatchPicker(props: SwatchPickerProps) {
[onChange],
);
const displayColor = alwaysDisplayColor || isSelected ? color : '';
return (
<div className={classes}>
<PopoverPicker
color={isSelected ? color : ''}
color={displayColor}
onChange={debouncedOnChange}
icon={<IoEyedrop color={iconColor} />}
hasInput