docs(react-color-picker): Added RGB fields to stories.

[ValentinaKozlova]

New Behavior

Added RGB color fields to the ColorPicker

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[dmytrokirpa]

No need to store state for red/green/blue since it's already in rgb.

const parseRGBChannelValue = (value: string, min = 0, max = 255) => {
   if (/^\d+$/.test(data.value)) {
     return null;
   }
    
   const parsedValue = parseInt(value, 10);

   if (isNaN(parsedValue)) {
     return null;
   }
   
   return clamp(parsedValue, min, max);
}

const onRgbChange: InputRgbFieldProps<'onChange'> = (event, data) => {
    const value = parseRGBChannelValue(data.value);
    
    // new value is not valid, we shouldn't update state
    if (value === null) {
      return;
    }
    
    // get color key value from the element attribute 
    const colorKey = event.target.name as RgbKey;

    // create new color
    const newColor = tinycolor({ ...rgb, [colorKey]: value });
    
    // update the new color in the component state
    if (newColor.isValid) {
      setColor(newColor.toHsv());
      setHex(newColor.toHex());
      setRgb(newColor.toRgb());
    }
}


// and then

<InputRgbField label="Red" value={rgb.r} name="r" onChange={onRgbChange} />
<InputRgbField label="Green" value={rgb.g} name="g" onChange={onRgbChange} />
<InputRgbField label="Blue" value={rgb.b} name="b" onChange={onRgbChange} />

Also, you can remove handleRgbKeyPress as it's not needed anymore, because we set to state only valid values in onChange

[ValentinaKozlova]

parseRGBChannelValue is not working. Probably, because SpinButton has value as number and displayValue as string. But I'll try to find a workaround to make it work

[dmytrokirpa]

is there a way to get the actual input value (string) in the onChange handler, probably 'event.target.value'?

[ValentinaKozlova]

I've tried it at the beginning. With event.target.value SpinButton stops working at all. I mean, it's possible to type digits but increase/decrease logic is not working

[dmytrokirpa]

is there any way to get rid of this handler? I still don't get it why can't we use the controlled input with onChange/onInput only, and don't use prevent default and keys whitelist, etc

[ValentinaKozlova]

I'm working on it. When I use restriction in onChange then SpinButton stops working from keyboard. Or if I put preventDefault to SpinButton onChange it also doesn't work