fix(Slider): Added support for Black & White colors, plus new customColorShades prop (#182)

* added support for black and white, removing hsl conversion and instead using rgba, plus new customColorShades prop

* added support for black and white, removing hsl conversion and instead using rgba, plus new customColorShades prop

* added support for black and white, removing hsl conversion and instead using rgba, plus new customColorShades prop -- fixed hsva match bug

Author: kzroo

packages/color-slider/src/index.tsx

@@ -3,50 +3,101 @@ import {
   ColorResult,
   color as handleColor,
   hexToHsva,
-  hsvaToHsla,
-  hsvaToHslString,
+  hsvaToRgbaString,
   validHex,
+  hsvaToRgba,
   HsvaColor,
-  hslStringToHsva,
+  rgbaStringToHsva,
 } from '@uiw/color-convert';
 
 export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   lightness?: number[];
+  customColorShades?: { color: string | HsvaColor; lightness: number[] }[];
   onChange?: (color: ColorResult, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
+const hsvaCheck = (color?: string | HsvaColor): HsvaColor => {
+  return (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {}) as HsvaColor;
+};
+
+// Check if values are within specified units of each other
+const withinRange = (val1: number, val2: number, tolerance: number = 2): boolean => Math.abs(val1 - val2) <= tolerance;
+
+const hsvaEqual = (c1: HsvaColor, c2: HsvaColor, lightnessArray?: number[]): boolean => {
+  // Check for match within 2 units of all properties
+  const baseMatch = withinRange(c1.h, c2.h) && withinRange(c1.s, c2.s) && withinRange(c1.a, c2.a);
+  const exactMatch = baseMatch && withinRange(c1.v, c2.v);
+
+  // If there's a match within range, return true
+  if (exactMatch) return true;
+
+  // If no exact match and a lightness array exists,
+  // check if value is within range of any of the lightness array values
+  if (lightnessArray) {
+    return baseMatch && lightnessArray.some((lightness) => withinRange(c2.v, lightness));
+  }
+
+  return false;
+};
+
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
-  const { prefixCls = 'w-color-slider', className, style, onChange, color, lightness = [80, 65, 50, 35, 20], ...other } = props;
-  const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {}) as HsvaColor;
-  const handleClick = (hslStr: string, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    onChange && onChange(handleColor(hslStringToHsva(hslStr)), evn);
+  const {
+    prefixCls = 'w-color-slider',
+    className,
+    style,
+    onChange,
+    color,
+    customColorShades = [
+      { color: '#000000', lightness: [50, 40, 30, 20, 10] },
+      { color: '#ffffff', lightness: [95, 90, 80, 70, 60] },
+    ],
+    lightness = [80, 65, 50, 35, 20],
+    ...other
+  } = props;
+  const hsva = hsvaCheck(color);
+
+  // Find matching custom color and its lightness array
+  const matchingCustomColor = customColorShades.find((shade) => {
+    const customHsva = hsvaCheck(shade.color);
+    const isMatch = hsvaEqual(customHsva, hsva, shade.lightness);
+    return isMatch;
+  });
+
+  // Determine which lightness array to use
+  const activeLightness = matchingCustomColor ? matchingCustomColor.lightness : lightness;
+
+  const handleClick = (rgbaStr: string, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const newHsva = rgbaStringToHsva(rgbaStr);
+    onChange && onChange(handleColor(newHsva), evn);
   };
+
   return (
     <div
       ref={ref}
       style={{ display: 'flex', ...style }}
       className={[prefixCls, className || ''].filter(Boolean).join(' ')}
       {...other}
     >
-      {lightness.map((num, idx) => {
-        const hsl = hsvaToHsla(hsva);
-        const hslStr = `hsl(${hsl.h}, 50%, ${num}%)`;
-        const checked = hslStr === hsvaToHslString(hsva);
+      {activeLightness.map((num: number, idx: number) => {
+        const newHsva = { ...hsva, v: num };
+        const rgba = hsvaToRgba(newHsva);
+        const rgbaStr = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+        const checked = rgbaStr === hsvaToRgbaString(hsva);
         return (
           <div
             key={idx}
             style={{
               paddingLeft: 1,
-              width: `${100 / lightness.length}%`,
+              width: `${100 / activeLightness.length}%`,
               boxSizing: 'border-box',
             }}
           >
             <div
-              onClick={(evn) => handleClick(hslStr, evn)}
+              onClick={(evn) => handleClick(rgbaStr, evn)}
               style={{
-                backgroundColor: hslStr,
+                backgroundColor: rgbaStr,
                 height: 12,
                 cursor: 'pointer',
                 ...(checked