gdp-color-picker 1.0.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gdp-color-picker",
+  "version": "1.0.0",
+  "author": "Gap-L <13620238719@163.com>",
+  "private": false,
+  "description": "A custom color picker component compatible with React 16.8",
+  "source": "src/lib/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "files": [
+    "dist",
+    "src/lib",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "react-scripts start",
+    "build:demo": "react-scripts build",
+    "build": "microbundle --jsx React.createElement --jsxFragment React.Fragment --globals react=React",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.7.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.23",
+    "microbundle": "^0.15.1",
+    "postcss": "^8.5.6",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-scripts": "3.4.0"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/src/lib/ColorBoard.js

@@ -0,0 +1,70 @@
+
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { clamp } from './utils/color';
+
+const ColorBoard = ({ hue, saturation, value, onChange }) => {
+  const containerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleChange = useCallback((e) => {
+    if (!containerRef.current) return;
+    const { width, height, left, top } = containerRef.current.getBoundingClientRect();
+    const x = clamp(e.clientX - left, 0, width);
+    const y = clamp(e.clientY - top, 0, height);
+
+    const newSaturation = x / width;
+    const newValue = 1 - y / height;
+
+    onChange(newSaturation, newValue);
+  }, [onChange]);
+
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    handleChange(e);
+  };
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isDragging) {
+        handleChange(e);
+      }
+    };
+
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, handleChange, handleMouseUp]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="color-board"
+      style={{
+        backgroundColor: `hsl(${hue}, 100%, 50%)`,
+      }}
+      onMouseDown={handleMouseDown}
+    >
+      <div className="color-board-white" />
+      <div className="color-board-black" />
+      <div
+        className="color-board-handler"
+        style={{
+          left: `${saturation * 100}%`,
+          top: `${(1 - value) * 100}%`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default ColorBoard;

package/src/lib/ColorInput.js

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { rgbToHex, hexToRgb, hsvToRgb, rgbToHsv, rgbToHsl, hslToRgb } from './utils/color';
+
+const ColorInput = ({ hue, saturation, value, alpha, onChange }) => {
+  const [mode, setMode] = useState('HEX');
+  const [localValue, setLocalValue] = useState({});
+  const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const getRgb = useCallback(() => hsvToRgb(hue, saturation, value), [hue, saturation, value]);
+
+  useEffect(() => {
+    const rgb = getRgb();
+    if (mode === 'HEX') {
+      setLocalValue({ hex: rgbToHex(rgb.r, rgb.g, rgb.b) });
+    } else if (mode === 'RGB') {
+      setLocalValue({ r: rgb.r, g: rgb.g, b: rgb.b });
+    } else if (mode === 'HSL') {
+      const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+      setLocalValue({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
+    }
+  }, [hue, saturation, value, mode, getRgb]);
+
+  const handleHexChange = (e) => {
+    const val = e.target.value;
+    setLocalValue({ ...localValue, hex: val });
+    if (/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)) {
+      const rgb = hexToRgb(val);
+      if (rgb) {
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        onChange({ ...hsv, a: alpha });
+      }
+    }
+  };
+
+  const handleRgbChange = (key, val) => {
+    const newValue = { ...localValue, [key]: val };
+    setLocalValue(newValue);
+    const r = parseInt(newValue.r, 10);
+    const g = parseInt(newValue.g, 10);
+    const b = parseInt(newValue.b, 10);
+    if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+       const hsv = rgbToHsv(Math.min(255, Math.max(0, r)), Math.min(255, Math.max(0, g)), Math.min(255, Math.max(0, b)));
+       onChange({ ...hsv, a: alpha });
+    }
+  };
+
+  const handleHslChange = (key, val) => {
+     const newValue = { ...localValue, [key]: val };
+     setLocalValue(newValue);
+     const h = parseInt(newValue.h, 10);
+     const s = parseInt(newValue.s, 10);
+     const l = parseInt(newValue.l, 10);
+     if (!isNaN(h) && !isNaN(s) && !isNaN(l)) {
+        const rgb = hslToRgb(Math.min(360, Math.max(0, h)), Math.min(100, Math.max(0, s)) / 100, Math.min(100, Math.max(0, l)) / 100);
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        onChange({ ...hsv, a: alpha });
+     }
+  };
+
+  const openEyeDropper = async () => {
+    if (!window.EyeDropper) return;
+    const eyeDropper = new window.EyeDropper();
+    try {
+      const result = await eyeDropper.open();
+      const rgb = hexToRgb(result.sRGBHex);
+      if (rgb) {
+        const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+        onChange({ ...hsv, a: alpha });
+      }
+    } catch (e) {
+      // User canceled
+    }
+  };
+
+  return (
+    <div className="color-input-container">
+      <div className="color-input-row">
+         <div className="mode-selector" ref={dropdownRef} onClick={() => setShowDropdown(!showDropdown)}>
+            <span>{mode}</span>
+            <span className="arrow" style={{ fontSize: '10px', marginLeft: '4px', transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block', transition: 'transform 0.2s' }}>▼</span>
+            {showDropdown && (
+              <div className="mode-dropdown">
+                <div className="mode-option" onClick={(e) => { e.stopPropagation(); setMode('HEX'); setShowDropdown(false); }}>HEX</div>
+                <div className="mode-option" onClick={(e) => { e.stopPropagation(); setMode('RGB'); setShowDropdown(false); }}>RGB</div>
+                <div className="mode-option" onClick={(e) => { e.stopPropagation(); setMode('HSL'); setShowDropdown(false); }}>HSL</div>
+              </div>
+            )}
+         </div>
+         
+         {window.EyeDropper && (
+           <div className="eyedropper-icon" onClick={openEyeDropper} title="Pick Color">
+             <svg viewBox="0 0 24 24" width="16" height="16">
+               <path fill="currentColor" d="M17.5,1.5c-0.8,0-1.5,0.3-2.1,0.9l-8,8c-0.6,0.6-0.9,1.3-0.9,2.1v2.5l-4,4l1.5,1.5l4-4h2.5c0.8,0,1.5-0.3,2.1-0.9l8-8c0.6-0.6,0.9-1.3,0.9-2.1s-0.3-1.5-0.9-2.1S18.3,1.5,17.5,1.5z M17.5,10l-8-8l8,8z M6.5,12.5v2.5h-2.5L2,17l2,2l2-2v-2.5h2.5l8-8L10,5L6.5,8.5V12.5z"/>
+               <path d="M19.3 8.9L15.1 4.7 17.5 2.3c.4-.4 1-.4 1.4 0l2.7 2.7c.4.4.4 1 0 1.4L19.3 8.9zM13.7 6.1L4 15.8V20h4.2l9.7-9.7-4.2-4.2z" fill="currentColor"/>
+             </svg>
+           </div>
+         )}
+      </div>
+
+      <div className="color-input-fields">
+          {mode === 'HEX' && (
+             <input className="color-input" value={localValue.hex || ''} onChange={handleHexChange} />
+          )}
+          {mode === 'RGB' && (
+             <>
+               <input className="color-input" type="number" placeholder="R" value={localValue.r !== undefined ? localValue.r : ''} onChange={(e) => handleRgbChange('r', e.target.value)} />
+               <input className="color-input" type="number" placeholder="G" value={localValue.g !== undefined ? localValue.g : ''} onChange={(e) => handleRgbChange('g', e.target.value)} />
+               <input className="color-input" type="number" placeholder="B" value={localValue.b !== undefined ? localValue.b : ''} onChange={(e) => handleRgbChange('b', e.target.value)} />
+             </>
+          )}
+          {mode === 'HSL' && (
+             <>
+               <input className="color-input" type="number" placeholder="H" value={localValue.h !== undefined ? localValue.h : ''} onChange={(e) => handleHslChange('h', e.target.value)} />
+               <input className="color-input" type="number" placeholder="S" value={localValue.s !== undefined ? localValue.s : ''} onChange={(e) => handleHslChange('s', e.target.value)} />
+               <input className="color-input" type="number" placeholder="L" value={localValue.l !== undefined ? localValue.l : ''} onChange={(e) => handleHslChange('l', e.target.value)} />
+             </>
+          )}
+          <div className="color-input alpha-display">
+            {Math.round(alpha * 100)}%
+          </div>
+      </div>
+    </div>
+  );
+};
+
+export default ColorInput;

package/src/lib/Sliders.js

@@ -0,0 +1,86 @@
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { clamp } from './utils/color';
+
+const Slider = ({ value, max, onChange, className, style, children }) => {
+  const containerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleChange = useCallback((e) => {
+    if (!containerRef.current) return;
+    const { width, left } = containerRef.current.getBoundingClientRect();
+    const x = clamp(e.clientX - left, 0, width);
+    const newValue = (x / width) * max;
+    onChange(newValue);
+  }, [max, onChange]);
+
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    handleChange(e);
+  };
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isDragging) {
+        handleChange(e);
+      }
+    };
+
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, handleChange, handleMouseUp]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`color-slider ${className || ''}`}
+      style={style}
+      onMouseDown={handleMouseDown}
+    >
+      <div
+        className="color-slider-handler"
+        style={{
+          left: `${(value / max) * 100}%`,
+        }}
+      />
+      {children}
+    </div>
+  );
+};
+
+export const HueSlider = ({ hue, onChange }) => {
+  return (
+    <Slider
+      value={hue}
+      max={360}
+      onChange={onChange}
+      className="hue-slider"
+    />
+  );
+};
+
+export const AlphaSlider = ({ alpha, color, onChange }) => {
+  const { r, g, b } = color;
+  return (
+    <Slider
+      value={alpha}
+      max={1}
+      onChange={onChange}
+      className="alpha-slider-bg"
+      style={{
+        background: `linear-gradient(to right, rgba(${r},${g},${b},0) 0%, rgba(${r},${g},${b},1) 100%)`
+      }}
+    />
+  );
+};

package/src/lib/index.css

@@ -0,0 +1,198 @@
+
+.color-picker-panel {
+  width: 200px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  user-select: none;
+}
+
+/* ColorBoard */
+.color-board {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  border-radius: 2px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.color-board-white {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.color-board-black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+
+.color-board-handler {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+/* Sliders */
+.color-slider {
+  position: relative;
+  width: 100%;
+  height: 10px;
+  margin-top: 8px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.color-slider-handler {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  border: 1px solid rgba(0,0,0,0.1);
+}
+
+.hue-slider {
+  background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, magenta 83%, red 100%);
+}
+
+.alpha-slider-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCzekwMjDjZ1IxjJwApDkHN9Fi7xwAAAABJRU5ErkJggg==');
+}
+
+/* Inputs */
+.color-input-container {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.color-input-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mode-selector {
+  position: relative;
+  cursor: pointer;
+  font-size: 12px;
+  color: #333;
+  padding: 2px 4px;
+  border-radius: 2px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+.mode-selector:hover {
+  background-color: #f5f5f5;
+}
+
+.mode-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  min-width: 60px;
+}
+
+.mode-option {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.mode-option:hover {
+  background: #e6f7ff;
+}
+
+.eyedropper-icon {
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 2px;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+
+.eyedropper-icon:hover {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.color-input-fields {
+  display: flex;
+  gap: 4px;
+}
+
+.color-input {
+  width: 100%;
+  padding: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+/* Chrome, Safari, Edge, Opera - hide spin buttons */
+.color-input::-webkit-outer-spin-button,
+.color-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.color-input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.alpha-display {
+  width: 40px;
+  text-align: center;
+  background-color: #f5f5f5;
+  color: #666;
+  border: 1px solid #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Trigger */
+.color-picker-trigger {
+  display: inline-block;
+  padding: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #fff;
+}
+
+.color-block {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}

package/src/lib/index.js

@@ -0,0 +1,113 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import ColorBoard from './ColorBoard';
+import { HueSlider, AlphaSlider } from './Sliders';
+import ColorInput from './ColorInput';
+import { hsvToRgb, rgbToHex, parseColor } from './utils/color';
+import './index.css';
+
+const ColorPicker = ({ value, defaultValue, onChange }) => {
+  // Initialize state
+  const [isOpen, setIsOpen] = useState(false);
+  
+  // Internal state for color components
+  const [color, setColor] = useState(() => {
+    const initColor = value || defaultValue || '#1677ff';
+    return parseColor(initColor);
+  });
+
+  const containerRef = useRef(null);
+
+  // Sync with prop value if controlled
+  useEffect(() => {
+    if (value !== undefined) {
+      setColor(parseColor(value));
+    }
+  }, [value]);
+
+  const handleChange = (newColor) => {
+    const nextColor = { ...color, ...newColor };
+    setColor(nextColor);
+    
+    if (onChange) {
+      const rgb = hsvToRgb(nextColor.h, nextColor.s, nextColor.v);
+      const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+      // Return a rich object or just hex string? 
+      // AntD returns an object, but simple string is often easier. 
+      // Let's return the hex string and the object as second arg just in case.
+      onChange(hex, { ...rgb, a: nextColor.a });
+    }
+  };
+
+  // Click outside to close
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const rgb = hsvToRgb(color.h, color.s, color.v);
+  const displayColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a})`;
+
+  return (
+    <div className="color-picker-container" ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>
+      <div 
+        className="color-picker-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div 
+          className="color-block" 
+          style={{ backgroundColor: displayColor }} 
+        />
+      </div>
+
+      {isOpen && (
+        <div 
+          className="color-picker-panel" 
+          style={{ 
+            position: 'absolute', 
+            top: '100%', 
+            left: 0, 
+            zIndex: 1000, 
+            marginTop: 4 
+          }}
+        >
+          <ColorBoard
+            hue={color.h}
+            saturation={color.s}
+            value={color.v}
+            onChange={(s, v) => handleChange({ s, v })}
+          />
+          <HueSlider
+            hue={color.h}
+            onChange={(h) => handleChange({ h })}
+          />
+          <AlphaSlider
+            alpha={color.a}
+            color={rgb}
+            onChange={(a) => handleChange({ a })}
+          />
+          <ColorInput
+            hue={color.h}
+            saturation={color.s}
+            value={color.v}
+            alpha={color.a}
+            onChange={(newHsv) => handleChange(newHsv)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ColorPicker;