From a0e27a3533ba20da287e4695eee975505e582ad7 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Thu, 22 Aug 2024 14:36:22 +0300 Subject: [PATCH 1/7] fixed deletion of favorite colors for ColorPicker --- ColorPickerPOC/ColorPickerPOC.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index ce7c26ee1c..8676543de7 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -102,8 +102,6 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index + 4}`} minWidth={false} onClick={onSelectFavoriteColor} - onMouseDown={onPressHandler} - onMouseUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -127,8 +125,6 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index}`} minWidth={false} onClick={onSelectFavoriteColor} - onMouseDown={onPressHandler} - onMouseUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -177,6 +173,11 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, const [favoriteColors, setFavoriteColors] = useState(colors); const [selectedColor, setSelectedColor] = useState(color); + // useEffect(() => { + // setSelectedColor(color); + // setFavoriteColors(colors); + // }, [color, colors]); + useEffect(() => { if (selectedColor || favoriteColors) { onChangeColor({selectedColor, favoriteColors}); From 79ef8713aee6a72e6dd1075e165aa4ade0459bc6 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Thu, 22 Aug 2024 14:48:06 +0300 Subject: [PATCH 2/7] save component state when props change --- ColorPickerPOC/ColorPickerPOC.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 8676543de7..1ad0e83181 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -173,10 +173,10 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, const [favoriteColors, setFavoriteColors] = useState(colors); const [selectedColor, setSelectedColor] = useState(color); - // useEffect(() => { - // setSelectedColor(color); - // setFavoriteColors(colors); - // }, [color, colors]); + useEffect(() => { + setSelectedColor(color); + setFavoriteColors(colors); + }, [color, colors]); useEffect(() => { if (selectedColor || favoriteColors) { From 0ce7be62448d71f687d4f4c9012a408e8d9972e2 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Thu, 22 Aug 2024 17:17:50 +0300 Subject: [PATCH 3/7] removed unnecessary code --- ColorPickerPOC/ColorPickerPOC.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 1ad0e83181..4d40868c4a 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -173,11 +173,6 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, const [favoriteColors, setFavoriteColors] = useState(colors); const [selectedColor, setSelectedColor] = useState(color); - useEffect(() => { - setSelectedColor(color); - setFavoriteColors(colors); - }, [color, colors]); - useEffect(() => { if (selectedColor || favoriteColors) { onChangeColor({selectedColor, favoriteColors}); From 83e58be5cee2d81ed5b4d3e408b7757be268a476 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Fri, 23 Aug 2024 10:11:21 +0300 Subject: [PATCH 4/7] added back useEffect --- ColorPickerPOC/ColorPickerPOC.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index e0d633aebb..ecea742d2d 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -173,6 +173,11 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, const [favoriteColors, setFavoriteColors] = useState(colors); const [selectedColor, setSelectedColor] = useState(color); + useEffect(() => { + setFavoriteColors(colors); + setSelectedColor(color); + }, [color, colors]); + useEffect(() => { if (selectedColor || favoriteColors) { onChangeColor({selectedColor, favoriteColors}); From 2c886be6075ae47a61da781a371e0027d7fb23e9 Mon Sep 17 00:00:00 2001 From: Stanca Date: Fri, 23 Aug 2024 14:54:25 +0300 Subject: [PATCH 5/7] changed outputText color to be more visible --- ColorPickerPOC/ColorPickerSlider.module.less | 1 + 1 file changed, 1 insertion(+) diff --git a/ColorPickerPOC/ColorPickerSlider.module.less b/ColorPickerPOC/ColorPickerSlider.module.less index 6c74cd8175..21a6124200 100644 --- a/ColorPickerPOC/ColorPickerSlider.module.less +++ b/ColorPickerPOC/ColorPickerSlider.module.less @@ -15,6 +15,7 @@ justify-content: center; align-items: center; background-color: #eeeeee; + color: rgb(76, 80, 89); border-radius: 12px; margin-left: 30px; } From 9ce58d4ab774ddbbb9b36bcd5c58fb22100593b9 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Fri, 23 Aug 2024 15:17:54 +0300 Subject: [PATCH 6/7] added handler for Enter key to edit favorite colors --- ColorPickerPOC/ColorPickerPOC.js | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index ecea742d2d..12b6cd6c5c 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -17,6 +17,7 @@ import ColorPickerSpectrum from './ColorPickerSpectrum'; import {generateOppositeColor} from './utils'; import componentsCss from './ColorPickerPOC.module.less'; +import Spotlight, {getDirection} from "../../enact/packages/spotlight"; const SpottableButton = Spottable(ButtonBase); @@ -90,6 +91,35 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol }, 100); }, []); + const handleKeyDown = useCallback((ev) => { + if(ev.keyCode === 13) { + const target = ev.target.id ? ev.target : ev.target.offsetParent; + + shakeEffectRef.current = setTimeout(() => { + target.classList.add(componentsCss.shakeFavoriteColor); + }, 300); + + timerRef.current = setTimeout(() => { + setEditEnabled(true); + setClickEnabled(false); + target.classList.remove(componentsCss.shakeFavoriteColor); + }, 1000); + } + }, [editEnabled]); + + const handleKeyUp = useCallback((ev) => { + if(ev.keyCode === 13) { + const target = ev.target.id ? ev.target : ev.target.offsetParent; + target.classList.remove(componentsCss.shakeFavoriteColor); + + clearTimeout(shakeEffectRef.current); + clearTimeout(timerRef.current); + setTimeout(() => { + setClickEnabled(true); + }, 100); + } + }, []); + return (
@@ -102,6 +132,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index + 4}`} minWidth={false} onClick={onSelectFavoriteColor} + onKeyDown={handleKeyDown} + onKeyUp={handleKeyUp} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -125,6 +157,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index}`} minWidth={false} onClick={onSelectFavoriteColor} + onKeyDown={handleKeyDown} + onKeyUp={handleKeyUp} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" From 18cea23ee970cf6a24d317f5003ff34528aceea2 Mon Sep 17 00:00:00 2001 From: Daniel Stoian Date: Mon, 26 Aug 2024 09:34:54 +0300 Subject: [PATCH 7/7] code review fix --- ColorPickerPOC/ColorPickerPOC.js | 54 ++++++++------------------------ 1 file changed, 13 insertions(+), 41 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 12b6cd6c5c..923db0ff83 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -17,7 +17,6 @@ import ColorPickerSpectrum from './ColorPickerSpectrum'; import {generateOppositeColor} from './utils'; import componentsCss from './ColorPickerPOC.module.less'; -import Spotlight, {getDirection} from "../../enact/packages/spotlight"; const SpottableButton = Spottable(ButtonBase); @@ -67,32 +66,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol const onPressHandler = useCallback((ev) => { if (editEnabled) return; - const target = ev.target.id ? ev.target : ev.target.offsetParent; - - shakeEffectRef.current = setTimeout(() => { - target.classList.add(componentsCss.shakeFavoriteColor); - }, 300); - - timerRef.current = setTimeout(() => { - setEditEnabled(true); - setClickEnabled(false); - target.classList.remove(componentsCss.shakeFavoriteColor); - }, 1000); - }, [editEnabled]); - - const onReleaseHandler = useCallback((ev) => { - const target = ev.target.id ? ev.target : ev.target.offsetParent; - target.classList.remove(componentsCss.shakeFavoriteColor); - - clearTimeout(shakeEffectRef.current); - clearTimeout(timerRef.current); - setTimeout(() => { - setClickEnabled(true); - }, 100); - }, []); - - const handleKeyDown = useCallback((ev) => { - if(ev.keyCode === 13) { + if (ev.type === 'pointerdown' || (ev.type === 'keydown' && ev.keyCode === 13)) { const target = ev.target.id ? ev.target : ev.target.offsetParent; shakeEffectRef.current = setTimeout(() => { @@ -107,17 +81,15 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol } }, [editEnabled]); - const handleKeyUp = useCallback((ev) => { - if(ev.keyCode === 13) { - const target = ev.target.id ? ev.target : ev.target.offsetParent; - target.classList.remove(componentsCss.shakeFavoriteColor); + const onReleaseHandler = useCallback((ev) => { + const target = ev.target.id ? ev.target : ev.target.offsetParent; + target.classList.remove(componentsCss.shakeFavoriteColor); - clearTimeout(shakeEffectRef.current); - clearTimeout(timerRef.current); - setTimeout(() => { - setClickEnabled(true); - }, 100); - } + clearTimeout(shakeEffectRef.current); + clearTimeout(timerRef.current); + setTimeout(() => { + setClickEnabled(true); + }, 100); }, []); return ( @@ -132,8 +104,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index + 4}`} minWidth={false} onClick={onSelectFavoriteColor} - onKeyDown={handleKeyDown} - onKeyUp={handleKeyUp} + onKeyDown={onPressHandler} + onKeyUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -157,8 +129,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index}`} minWidth={false} onClick={onSelectFavoriteColor} - onKeyDown={handleKeyDown} - onKeyUp={handleKeyUp} + onKeyDown={onPressHandler} + onKeyUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small"