🦊 v3.0.5

hxf31891 · Feb 1, 2024 · 0867246 · 0867246
1 parent f8f84f9
commit 0867246
Show file tree

Hide file tree

Showing 23 changed files with 1,231 additions and 27,638 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [
@@ -58,6 +58,7 @@
     "html2canvas": "^1.4.1",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.0",
+    "react-jss": "^10.10.0",
     "tinycolor2": "1.4.2"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "@types/lodash.throttle": "*",
     "@types/node": "*",
     "@types/react": "*",
+    "@types/reactcss": "^1.2.11",
     "@types/tinycolor2": "^1.4.6",
     "cpy-cli": "^3.1.1",
     "eslint": "8.22.0",

diff --git a/src/components/AdvancedControls.tsx b/src/components/AdvancedControls.tsx
@@ -21,11 +21,10 @@ const AdvBar = ({
   openAdvanced: boolean
   label: string
 }) => {
-  const { squareSize } = usePicker()
+  const { squareWidth, classes } = usePicker()
   const [dragging, setDragging] = useState<boolean>(false)
   const [handleTop, setHandleTop] = useState<number>(2)
-  // const sliderId = `${label?.toLowerCase()}Handle`
-  const left = value * (squareSize - 18)
+  const left = value * (squareWidth - 18)
 
   useEffect(() => {
     setHandleTop(reffy?.current?.offsetTop - 2)
@@ -65,11 +64,14 @@ const AdvBar = ({
 
   return (
     <div style={{ width: '100%', padding: '3px 0px 3px 0px' }}>
-      <div className="c-resize ps-rl" onMouseMove={(e) => handleMove(e)}>
+      <div
+        onMouseMove={(e) => handleMove(e)}
+        className={`${classes.cResize} ${classes.psRl}`}
+      >
         <div
           style={{ left, top: handleTop }}
+          className={classes.rbgcpHandle}
           onMouseDown={handleDown}
-          className="rbgcp-handle"
           role="button"
           tabIndex={0}
         />
@@ -94,40 +96,44 @@ const AdvBar = ({
         </div>
         <canvas
           ref={reffy}
-          width={`${squareSize}px`}
           height="14px"
-          style={{ position: 'relative', borderRadius: 14 }}
+          width={`${squareWidth}px`}
           onClick={(e) => handleClick(e)}
+          style={{ position: 'relative', borderRadius: 14 }}
         />
       </div>
     </div>
   )
 }
 
 const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
-  const { tinyColor, hue, l, handleChange, s, opacity, squareSize } =
-    usePicker()
-  const { v, s: vs } = tinyColor.toHsv()
+  const { tinyColor, handleChange, squareWidth, hc } = usePicker()
+  const { s, l } = tinyColor.toHsl()
+
   const satRef = useRef(null)
   const lightRef = useRef(null)
   const brightRef = useRef(null)
-  usePaintSat(satRef, hue, l * 100, squareSize)
-  usePaintLight(lightRef, hue, s * 100, squareSize)
-  usePaintBright(brightRef, hue, s * 100, squareSize)
+  usePaintSat(satRef, hc?.h, l * 100, squareWidth)
+  usePaintLight(lightRef, hc?.h, s * 100, squareWidth)
+  usePaintBright(brightRef, hc?.h, s * 100, squareWidth)
 
   const satDesat = (value: number) => {
-    const { r, g, b } = tinycolor({ h: hue, s: value / 100, l }).toRgb()
-    handleChange(`rgba(${r},${g},${b},${opacity})`)
+    const { r, g, b } = tinycolor({ h: hc?.h, s: value / 100, l }).toRgb()
+    handleChange(`rgba(${r},${g},${b},${hc?.a})`)
   }
 
   const setLight = (value: number) => {
-    const { r, g, b } = tinycolor({ h: hue, s, l: value / 100 }).toRgb()
-    handleChange(`rgba(${r},${g},${b},${opacity})`)
+    const { r, g, b } = tinycolor({ h: hc?.h, s, l: value / 100 }).toRgb()
+    handleChange(`rgba(${r},${g},${b},${hc?.a})`)
   }
 
   const setBright = (value: number) => {
-    const { r, g, b } = tinycolor({ h: hue, s: vs * 100, v: value }).toRgb()
-    handleChange(`rgba(${r},${g},${b},${opacity})`)
+    const { r, g, b } = tinycolor({
+      h: hc?.h,
+      s: hc?.s * 100,
+      v: value,
+    }).toRgb()
+    handleChange(`rgba(${r},${g},${b},${hc?.a})`)
   }
 
   return (
@@ -164,7 +170,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
           openAdvanced={openAdvanced}
         />
         <AdvBar
-          value={v}
+          value={hc?.v}
           reffy={brightRef}
           label="Brightness"
           callback={setBright}

diff --git a/src/components/ComparibleColors.tsx b/src/components/ComparibleColors.tsx
@@ -6,7 +6,7 @@ const ComparibleColors = ({
 }: {
   openComparibles: boolean
 }) => {
-  const { tinyColor, handleChange } = usePicker()
+  const { tinyColor, handleChange, classes } = usePicker()
 
   const analogous = tinyColor.analogous()
   const monochromatic = tinyColor.monochromatic()
@@ -42,7 +42,7 @@ const ComparibleColors = ({
             top: 6.5,
             left: 2,
           }}
-          className="rbgcp-comparible-label"
+          className={classes.rbgcpComparibleLabel}
         >
           Color Guide
         </div>
@@ -53,7 +53,7 @@ const ComparibleColors = ({
             fontWeight: 500,
             marginTop: 3,
           }}
-          className="rbgcp-comparible-label"
+          className={classes.rbgcpComparibleLabel}
         >
           Analogous
         </div>
@@ -73,7 +73,7 @@ const ComparibleColors = ({
             fontWeight: 500,
             marginTop: 3,
           }}
-          className="rbgcp-comparible-label"
+          className={classes.rbgcpComparibleLabel}
         >
           Monochromatic
         </div>
@@ -100,7 +100,7 @@ const ComparibleColors = ({
             fontWeight: 500,
             marginTop: 3,
           }}
-          className="rbgcp-comparible-label"
+          className={classes.rbgcpComparibleLabel}
         >
           Triad
         </div>
@@ -131,7 +131,7 @@ const ComparibleColors = ({
             fontWeight: 500,
             marginTop: 3,
           }}
-          className="rbgcp-comparible-label"
+          className={classes.rbgcpComparibleLabel}
         >
           Tetrad
         </div>

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -33,28 +33,23 @@ const Controls = ({
   hideGradientAngle?: boolean
   hideGradientStop?: boolean
 }) => {
-  const {
-    isGradient,
-    internalOnChange,
-    previousColors,
-    previousGraidents,
-    handleChange,
-  } = usePicker()
-  const [openAdvanced, setOpenAdvanced] = useState(false)
+  const { onChange, isGradient, handleChange, classes, previous } = usePicker()
   const [openComparibles, setOpenComparibles] = useState(false)
   const [openInputType, setOpenInputType] = useState(false)
+  const [openAdvanced, setOpenAdvanced] = useState(false)
+
   const noTools =
     hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType
 
-  const solidColor = previousColors?.[0] || defaultColor
-  const gradientColor = previousGraidents?.[0] || defaultGradient
+  const solidColor = previous?.color || defaultColor
+  const gradientColor = previous?.gradient || defaultGradient
 
   const setSolid = () => {
-    internalOnChange(solidColor)
+    onChange(solidColor)
   }
 
   const setGradient = () => {
-    internalOnChange(gradientColor)
+    onChange(gradientColor)
   }
 
   const allRightControlsHidden =
@@ -76,7 +71,10 @@ const Controls = ({
   } else {
     return (
       <div style={{ paddingTop: 12, paddingBottom: 4 }}>
-        <div style={{ width: '100%' }} className="ac jsb">
+        <div
+          style={{ width: '100%' }}
+          className={`${classes.ac} ${classes.jsb}`}
+        >
           <ColorTypeBtns
             hideColorTypeBtns={hideColorTypeBtns}
             setGradient={setGradient}
@@ -88,36 +86,30 @@ const Controls = ({
           {!allRightControlsHidden && (
             <div
               style={{ display: noTools ? 'none' : '' }}
-              className="rbgcp-control-btn-wrapper"
+              className={classes.rbgcpControlBtnWrapper}
             >
               {!hideEyeDrop && <EyeDropper onSelect={handleChange} />}
               <div
-                style={{ display: hideAdvancedSliders ? 'none' : 'flex' }}
                 id="rbgcp-advanced-btn"
-                className={`rbgcp-control-icon-btn rbgcp-advanced-btn ${
-                  openAdvanced && 'rbgcp-control-btn-selected'
-                }`}
                 onClick={() => setOpenAdvanced(!openAdvanced)}
+                className={controlBtnStyles(openAdvanced, classes)}
+                style={{ display: hideAdvancedSliders ? 'none' : 'flex' }}
               >
                 <SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
               </div>
               <div
-                style={{ display: hideColorGuide ? 'none' : 'flex' }}
                 id="rbgcp-comparibles-btn"
-                className={`rbgcp-control-icon-btn rbgcp-comparibles-btn ${
-                  openComparibles && 'rbgcp-control-btn-selected'
-                }`}
+                style={{ display: hideColorGuide ? 'none' : 'flex' }}
                 onClick={() => setOpenComparibles(!openComparibles)}
+                className={controlBtnStyles(openComparibles, classes)}
               >
                 <PaletteIcon color={openComparibles ? '#568CF5' : ''} />
               </div>
               <div
-                style={{ display: hideInputType ? 'none' : 'flex' }}
                 id="rbgcp-color-model-btn"
-                className={`rbgcp-control-icon-btn rbgcp-color-model-btn ${
-                  openInputType && 'rbgcp-control-btn-selected'
-                }`}
                 onClick={() => setOpenInputType(!openInputType)}
+                className={controlBtnStyles(openInputType, classes)}
+                style={{ display: hideInputType ? 'none' : 'flex' }}
               >
                 <InputsIcon color={openInputType ? '#568CF5' : ''} />
                 <InputTypeDropdown
@@ -155,7 +147,7 @@ const InputTypeDropdown = ({
   openInputType?: boolean
   setOpenInputType: (arg0: boolean) => void
 }) => {
-  const { inputType, setInputType } = usePicker()
+  const { inputType, setInputType, classes } = usePicker()
   const vTrans = openInputType
     ? 'visibility 0ms linear'
     : 'visibility 100ms linear 150ms'
@@ -182,37 +174,29 @@ const InputTypeDropdown = ({
         opacity: openInputType ? 1 : 0,
         transition: `${oTrans}, ${vTrans}, ${zTrans}`,
       }}
-      className="rbgcp-color-model-dropdown"
+      className={classes.rbgcpColorModelDropdown}
     >
       <div
-        className={`rbgcp-control-btn rbgcp-color-model-dropdown-btn ${
-          inputType === 'rgb' && 'rbgcp-control-btn-selected'
-        }`}
         onClick={(e) => handleInputType(e, 'rgb')}
+        className={modalBtnStyles(inputType === 'rgb', classes)}
       >
         RGB
       </div>
       <div
-        className={`rbgcp-control-btn rbgcp-color-model-dropdown-btn ${
-          inputType === 'hsl' && 'rbgcp-control-btn-selected'
-        }`}
         onClick={(e) => handleInputType(e, 'hsl')}
+        className={modalBtnStyles(inputType === 'hsl', classes)}
       >
         HSL
       </div>
       <div
-        className={`rbgcp-control-btn rbgcp-color-model-dropdown-btn ${
-          inputType === 'hsv' && 'rbgcp-control-btn-selected'
-        }`}
         onClick={(e) => handleInputType(e, 'hsv')}
+        className={modalBtnStyles(inputType === 'hsv', classes)}
       >
         HSV
       </div>
       <div
-        className={`rbgcp-control-btn rbgcp-color-model-dropdown-btn ${
-          inputType === 'cmyk' && 'rbgcp-control-btn-selected'
-        }`}
         onClick={(e) => handleInputType(e, 'cmyk')}
+        className={modalBtnStyles(inputType === 'cmky', classes)}
       >
         CMYK
       </div>
@@ -233,26 +217,24 @@ const ColorTypeBtns = ({
   setGradient: () => void
   locales?: LocalesProps
 }) => {
+  const { classes } = usePicker()
+
   if (hideColorTypeBtns) {
     return <div style={{ width: 1 }} />
   } else {
     return (
-      <div className="rbgcp-control-btn-wrapper">
+      <div className={classes.rbgcpControlBtnWrapper}>
         <div
           onClick={setSolid}
           id="rbgcp-solid-btn"
-          className={`rbgcp-control-btn rbgcp-solid-btn ${
-            !isGradient && 'rbgcp-control-btn-selected'
-          }`}
+          className={colorTypeBtnStyles(!isGradient, classes)}
         >
           {locales?.CONTROLS?.SOLID}
         </div>
         <div
           onClick={setGradient}
           id="rbgcp-gradient-btn"
-          className={`rbgcp-control-btn rbgcp-gradient-btn ${
-            isGradient && 'rbgcp-control-btn-selected'
-          }`}
+          className={colorTypeBtnStyles(isGradient || false, classes)}
         >
           {locales?.CONTROLS?.GRADIENT}
         </div>
@@ -261,12 +243,26 @@ const ColorTypeBtns = ({
   }
 }
 
-export const controlBtnStyles = (selected: boolean) => {
-  return {
-    background: selected ? 'white' : 'rgba(255,255,255,0)',
-    color: selected ? '#568CF5' : '',
-    boxShadow: selected
-      ? '1px 1px 3px rgba(0,0,0,.2)'
-      : '1px 1px 3px rgba(0,0,0,0)',
+export const colorTypeBtnStyles = (selected: boolean, classes: any) => {
+  if (selected) {
+    return `${classes.rbgcpControlBtn} ${classes.rbgcpControlBtnSelected}`
+  } else {
+    return classes.rbgcpControlBtn
+  }
+}
+
+export const controlBtnStyles = (selected: boolean, classes: any) => {
+  if (selected) {
+    return `${classes.rbgcpControlIconBtn} ${classes.rbgcpControlBtnSelected}`
+  } else {
+    return classes.rbgcpControlIconBtn
+  }
+}
+
+export const modalBtnStyles = (selected: boolean, classes: any) => {
+  if (selected) {
+    return `${classes.rbgcpControlBtn} ${classes.rbgcpColorModelDropdownBtn} ${classes.rbgcpControlBtnSelected}`
+  } else {
+    return `${classes.rbgcpControlBtn} ${classes.rbgcpColorModelDropdownBtn}`
   }
 }