ColorPicker - fix - hue changes to red after move lightness to white (#2942)

Inbal-Tish · web-flow · commit 634df31dc4b4 · 2024-02-11T13:23:45.000+02:00
* ColorPicker - fix types on subcomponents

* clean types

* ColorSliderGroup - replace asBaseComponent with useThemeProps hook
diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -1,17 +1,16 @@
 import _ from 'lodash';
 import React, {useCallback, useEffect, useState} from 'react';
 import {LayoutAnimation, StyleSheet, Keyboard, StyleProp, ViewStyle} from 'react-native';
-
 import {Constants, asBaseComponent} from '../../commons/new';
 import {Colors} from '../../style';
 import {ModalProps} from '../../components/modal';
 import Dialog, {DialogProps} from '../../incubator/Dialog';
-import {getColorValue, getValidColorString, getTextColor, BORDER_RADIUS} from './ColorPickerPresenter';
+import {getColorValue, getValidColorString, getTextColor, BORDER_RADIUS, HSLColor} from './ColorPickerPresenter';
 import Header from './ColorPickerDialogHeader';
 import Preview from './ColorPickerPreview';
 import Sliders from './ColorPickerDialogSliders';
 
-interface Props extends DialogProps {
+export interface ColorPickerDialogProps extends DialogProps {
   /**
    * The initial color to pass the picker dialog
    */
@@ -45,7 +44,6 @@ interface Props extends DialogProps {
    */
   migrate?: boolean;
 }
-export type ColorPickerDialogProps = Props;
 
 const KEYBOARD_HEIGHT = 216;
 const MODAL_PROPS = {
@@ -57,7 +55,7 @@ const MODAL_PROPS = {
  * @extends: Dialog
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx
  */
-const ColorPickerDialog = (props: Props) => {
+const ColorPickerDialog = (props: ColorPickerDialogProps) => {
   const {
     initialColor = Colors.$backgroundNeutralLight,
     dialogProps,
@@ -149,8 +147,9 @@ const ColorPickerDialog = (props: Props) => {
     setValid(valid);
   };
 
-  const updateColor = useCallback((hex: string) => {
-    setColor(Colors.getHSL(hex));
+  const updateColor = useCallback((value: HSLColor) => {
+    setColor(value);
+    const hex = Colors.getHexString(value);
     setText(_.toUpper(getColorValue(hex)));
     setValid(true);
   }, []);
@@ -191,7 +190,7 @@ const ColorPickerDialog = (props: Props) => {
 
 ColorPickerDialog.displayName = 'ColorPicker';
 
-export default asBaseComponent<Props>(ColorPickerDialog);
+export default asBaseComponent<ColorPickerDialogProps>(ColorPickerDialog);
 
 const styles = StyleSheet.create({
   dialog: {
diff --git a/src/components/colorPicker/ColorPickerDialogSliders.tsx b/src/components/colorPicker/ColorPickerDialogSliders.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
-
 import {Colors} from '../../style';
 import ColorSliderGroup from '../slider/ColorSliderGroup';
 import {HSLColor} from './ColorPickerPresenter';
@@ -9,14 +8,15 @@ import {ColorPickerDialogProps} from './ColorPickerDialog';
 type SlidersProps = Pick<ColorPickerDialogProps, 'migrate'> & {
   keyboardHeight: number;
   color: HSLColor;
-  onSliderValueChange: (value: string) => void;
+  onSliderValueChange: (value: HSLColor) => void;
 };
 
 const Sliders = (props: SlidersProps) => {
   const {keyboardHeight, color, migrate, onSliderValueChange} = props;
-  const colorValue = color.a === 0 ? Colors.$backgroundInverted : Colors.getHexString(color);
+  const colorValue = color.a === 0 ? Colors.getHSL(Colors.$backgroundInverted) : color;
+  
   return (
-    <ColorSliderGroup
+    <ColorSliderGroup<HSLColor>
       initialColor={colorValue}
       containerStyle={[styles.sliderGroup, {height: keyboardHeight}]}
       sliderContainerStyle={styles.slider}
diff --git a/src/components/slider/ColorSlider.tsx b/src/components/slider/ColorSlider.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Text from '../text';
-import {GradientSliderTypes, ColorSliderGroupProps} from './types';
+import {GradientSliderTypes, ColorSliderGroupProps, HSLA} from './types';
 import GradientSlider from './GradientSlider';
 
 type ColorSliderProps = Pick<
-  ColorSliderGroupProps,
+  ColorSliderGroupProps<HSLA>,
   'sliderContainerStyle' | 'showLabels' | 'labelsStyle' | 'accessible' | 'labels' | 'migrate' | 'initialColor'
 > & {
   type: GradientSliderTypes;
diff --git a/src/components/slider/ColorSliderGroup.tsx b/src/components/slider/ColorSliderGroup.tsx
@@ -1,35 +1,42 @@
-import React, {useState, useEffect, useCallback} from 'react';
-import {asBaseComponent} from '../../commons/new';
+import _ from 'lodash';
+import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import {Colors} from '../../style';
+import {useThemeProps} from '../../hooks';
 import GradientSlider from './GradientSlider';
 import SliderGroup from './context/SliderGroup';
 import ColorSlider from './ColorSlider';
-import {ColorSliderGroupProps} from './types';
+import {ColorSliderGroupProps, HSLA} from './types';
 
 /**
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorSliderGroup/ColorSliderGroup.gif?raw=true
  */
-const ColorSliderGroup = (props: ColorSliderGroupProps) => {
-  const {initialColor, containerStyle, ...others} = props;
-  const [color, setColor] = useState(initialColor);
-  useEffect(() => {
-    setColor(initialColor);
+const ColorSliderGroup = <T extends string | HSLA = string>(props: ColorSliderGroupProps<T>) => {
+  const themeProps = useThemeProps(props, 'ColorSliderGroup');
+  const {initialColor, containerStyle, onValueChange, ...others} = themeProps;
+  const _initialColor = useMemo(() => {
+    return _.isString(initialColor) ? Colors.HSLA(initialColor) : initialColor;
   }, [initialColor]);
+  const [color, setColor] = useState<HSLA>(_initialColor);
+
+  useEffect(() => {
+    setColor(_initialColor);
+  }, [_initialColor]);
 
-  const onValueChange = useCallback((value: string) => {
-    props?.onValueChange?.(value);
-  },
-  [props]);
+  const _onValueChange = useCallback((value: HSLA) => {
+    const _value = _.isString(initialColor) ? Colors.getHexString(value) : value;
+    onValueChange?.(_value as T);
+  }, [onValueChange, initialColor]);
 
   return (
-    <SliderGroup style={containerStyle} color={color} onValueChange={onValueChange}>
-      <ColorSlider type={GradientSlider.types.HUE} initialColor={initialColor} {...others}/>
-      <ColorSlider type={GradientSlider.types.SATURATION} initialColor={initialColor} {...others}/>
-      <ColorSlider type={GradientSlider.types.LIGHTNESS} initialColor={initialColor} {...others}/>
+    <SliderGroup style={containerStyle} color={color} onValueChange={_onValueChange}>
+      <ColorSlider type={GradientSlider.types.HUE} initialColor={_initialColor} {...others}/>
+      <ColorSlider type={GradientSlider.types.SATURATION} initialColor={_initialColor} {...others}/>
+      <ColorSlider type={GradientSlider.types.LIGHTNESS} initialColor={_initialColor} {...others}/>
     </SliderGroup>
   );
 };
 
 ColorSliderGroup.displayName = 'ColorSliderGroup';
-export default asBaseComponent<ColorSliderGroupProps, typeof ColorSliderGroup>(ColorSliderGroup);
+export default ColorSliderGroup;
diff --git a/src/components/slider/GradientSlider.tsx b/src/components/slider/GradientSlider.tsx
@@ -1,28 +1,27 @@
 import _ from 'lodash';
-import tinycolor from 'tinycolor2';
-import React, {useCallback, useEffect, useState, useRef, useMemo} from 'react';
+import React, {useCallback, useEffect, useState, useMemo} from 'react';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
 import {ComponentStatics} from '../../typings/common';
 import {Colors} from '../../style';
 import {Slider as NewSlider} from '../../incubator';
 import Gradient from '../gradient';
-import {GradientSliderProps, GradientSliderTypes} from './types';
+import {GradientSliderProps, GradientSliderTypes, HSLA} from './types';
 import Slider from './index';
 import {SliderContextProps} from './context/SliderContext';
 import asSliderGroupChild from './context/asSliderGroupChild';
 
-type GradientSliderComponentProps = {
+type GradientSliderComponentProps<T> = {
   sliderContext: SliderContextProps;
-} & GradientSliderProps;
+} & GradientSliderProps<T>;
 
-type Props = GradientSliderComponentProps & ForwardRefInjectedProps;
+type Props<T> = GradientSliderComponentProps<T> & ForwardRefInjectedProps;
 
 /**
  * @description: A Gradient Slider component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/GradientSlider/GradientSlider.gif?raw=true
  */
-const GradientSlider = (props: Props) => {
+const GradientSlider = <T extends string | HSLA = string>(props: Props<T>) => {
   const {
     type = GradientSliderTypes.DEFAULT,
     gradientSteps = 120,
@@ -37,12 +36,14 @@ const GradientSlider = (props: Props) => {
     ...others
   } = props;
 
-  const initialColor = useRef(Colors.getHSL(propsColors));
-  const [color, setColor] = useState(Colors.getHSL(propsColors));
+  const initialColor = useMemo<HSLA>(() => {
+    return _.isString(propsColors) ? Colors.HSLA(propsColors) : propsColors;
+  }, [propsColors]);
+  const [color, setColor] = useState(initialColor);
   
   useEffect(() => {
-    setColor(Colors.getHSL(propsColors));
-  }, [propsColors]);
+    setColor(initialColor);
+  }, [initialColor]);
 
   const getColor = useCallback(() => {
     return color || sliderContext.value;
@@ -80,7 +81,7 @@ const GradientSlider = (props: Props) => {
   },
   [_onValueChange]);
 
-  const updateColor = useCallback((color: tinycolor.ColorFormats.HSLA) => {
+  const updateColor = useCallback((color: HSLA) => {
     if (!_.isEmpty(sliderContext)) {
       sliderContext.setValue?.(color);
     } else {
@@ -92,7 +93,7 @@ const GradientSlider = (props: Props) => {
   [sliderContext, onValueChange]);
 
   const reset = useCallback(() => {
-    updateColor(initialColor.current);
+    updateColor(initialColor);
   }, [initialColor, updateColor]);
 
   const updateAlpha = useCallback((a: number) => {
@@ -129,17 +130,17 @@ const GradientSlider = (props: Props) => {
     case GradientSliderTypes.HUE:
       step = 1;
       maximumValue = 359;
-      value = initialColor.current.h;
+      value = initialColor.h;
       renderTrack = renderHueGradient;
       sliderOnValueChange = updateHue;
       break;
     case GradientSliderTypes.LIGHTNESS:
-      value = initialColor.current.l;
+      value = initialColor.l;
       renderTrack = renderLightnessGradient;
       sliderOnValueChange = updateLightness;
       break;
     case GradientSliderTypes.SATURATION:
-      value = initialColor.current.s;
+      value = initialColor.s;
       renderTrack = renderSaturationGradient;
       sliderOnValueChange = updateSaturation;
       break;
diff --git a/src/components/slider/context/SliderContext.ts b/src/components/slider/context/SliderContext.ts
@@ -1,9 +1,11 @@
 import React from 'react';
+import {HSLA} from '../types';
 
 export interface SliderContextProps {
-  value?: tinycolor.ColorFormats.HSLA;
-  setValue?: (value: tinycolor.ColorFormats.HSLA) => void;
+  value?: HSLA;
+  setValue?: (value: HSLA) => void;
 }
 
 const SliderContext: React.Context<SliderContextProps> = React.createContext({});
+SliderContext.displayName = 'IGNORE';
 export default SliderContext;
diff --git a/src/components/slider/context/SliderGroup.tsx b/src/components/slider/context/SliderGroup.tsx
@@ -1,24 +1,23 @@
-import tinycolor from 'tinycolor2';
 import React, {useCallback, useMemo, useState} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {Colors} from '../../../style';
 import View from '../../view';
+import {HSLA} from '../types';
 import SliderContext from './SliderContext';
 
 interface SliderGroupProps {
-  color: string;
-  onValueChange: (color: string) => void;
+  color: HSLA;
+  onValueChange: (value: HSLA) => void;
   style?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
 }
 
 const SliderGroup = (props: SliderGroupProps) => {
   const {color, onValueChange, children} = props;
-  const [value, setValue] = useState(Colors.getHSL(color));
+  const [value, setValue] = useState(color);
 
-  const _setValue = useCallback((value: tinycolor.ColorFormats.HSLA) => {
+  const _setValue = useCallback((value: HSLA) => {
     setValue(value);
-    onValueChange?.(Colors.getHexString(value));
+    onValueChange?.(value);
   },
   [onValueChange]);
 
diff --git a/src/components/slider/types.ts b/src/components/slider/types.ts
@@ -1,7 +1,10 @@
+import tinycolor from 'tinycolor2';
 import {ReactElement} from 'react';
 import {StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {ThumbProps} from './Thumb';
 
+export type HSLA = tinycolor.ColorFormats.HSLA;
+
 export type SliderOnValueChange = (value: number) => void;
 export type SliderOnRangeChange = (values: {min: number; max: number}) => void;
 
@@ -107,11 +110,11 @@ export enum GradientSliderTypes {
   SATURATION = 'saturation'
 }
 
-export type GradientSliderProps = Omit<SliderProps, 'onValueChange'> & {
+export type GradientSliderProps<T> = Omit<SliderProps, 'onValueChange'> & {
   /**
    * The gradient color
    */
-  color?: string;
+  color?: T;
   /**
    * The gradient type (default, hue, lightness, saturation)
    */
@@ -138,15 +141,15 @@ export type GradientSliderProps = Omit<SliderProps, 'onValueChange'> & {
   disabled?: boolean;
 }
 
-export type ColorSliderGroupProps = {
+export type ColorSliderGroupProps<T> = {
   /**
    * The gradient color
    */
-  initialColor: string;
+  initialColor: T;
   /**
    * Callback for onValueChange returns the new hex color
    */
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: T) => void;
   /**
    * Group container style
    */
