diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 5e6b799055..923db0ff83 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -66,17 +66,19 @@ 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); + if (ev.type === 'pointerdown' || (ev.type === 'keydown' && 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 onReleaseHandler = useCallback((ev) => { @@ -102,8 +104,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index + 4}`} minWidth={false} onClick={onSelectFavoriteColor} - onMouseDown={onPressHandler} - onMouseUp={onReleaseHandler} + onKeyDown={onPressHandler} + onKeyUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -127,8 +129,8 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol key={`${color}_${index}`} minWidth={false} onClick={onSelectFavoriteColor} - onMouseDown={onPressHandler} - onMouseUp={onReleaseHandler} + onKeyDown={onPressHandler} + onKeyUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} size="small" @@ -177,6 +179,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}); 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; }