uiwjs / react-color

🎨 Is a tiny color picker widget component for React apps.
https://uiwjs.github.io/react-color
MIT License
274 stars 92 forks source link

Shade slider (white color) #115

Closed MarcinFilipek closed 1 year ago

MarcinFilipek commented 1 year ago

In my opinion the shade slider is not working properly. For the color #ffffff, the range is always from red to black. It seems to me that the saturation should not be permanently 100. Correction suggestion:

import { hsvaToHslaString } from '@uiw/color-convert'
import Alpha, { AlphaProps } from '@uiw/react-color-alpha'
import React from 'react'

export interface ShadeSliderProps extends Omit<AlphaProps, 'onChange'> {
  onChange?: (newShade: { v: number }) => void
}

export const ShadeSlider = React.forwardRef<HTMLDivElement, ShadeSliderProps>(
  (props, ref) => {
    const {
      prefixCls = 'w-color-saturation',
      className,
      onChange,
      direction = 'horizontal',
      hsva,
      ...other
    } = props
    const colorFrom = hsvaToHslaString({ ...hsva, a: 1, v: 100 })
    return (
      <Alpha
        ref={ref}
        {...other}
        className={`${prefixCls} ${className || ''}`}
        hsva={{ h: hsva.h, s: hsva.s, v: hsva.v, a: 1 - hsva.v / 100 }}
        direction={direction}
        background={`linear-gradient(to ${
          direction === 'horizontal' ? 'right' : 'bottom'
        }, ${colorFrom}, rgb(0, 0, 0))`}
        onChange={(_, interaction) => {
          onChange &&
            onChange({
              v:
                direction === 'horizontal'
                  ? 100 - interaction.left * 100
                  : 100 - interaction.top * 100,
            })
        }}
      />
    )
  },
)
Zrzut ekranu 2023-05-12 o 10 29 22
jaywcjlove commented 1 year ago

@MarcinFilipek Upgrade v1.2.2