hiding ui bug

hxf31891 · Nov 8, 2024 · be2a8bf · be2a8bf
1 parent 6fc0650
commit be2a8bf
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.10",
+  "version": "3.0.11-beta.4",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [

diff --git a/src/components/AdvancedControls.tsx b/src/components/AdvancedControls.tsx
@@ -66,10 +66,12 @@ const AdvBar = ({
     <div style={{ width: '100%', padding: '3px 0px 3px 0px' }}>
       <div
         onMouseMove={(e) => handleMove(e)}
+        // className="rbgcp-advanced-bar-wrap"
         style={{ cursor: 'resize', position: 'relative' }}
       >
         <div
           style={{ left, top: handleTop, ...defaultStyles.rbgcpHandle }}
+          // className="rbgcp-advanced-bar-handle"
           onMouseDown={handleDown}
           role="button"
           tabIndex={0}
@@ -88,6 +90,7 @@ const AdvBar = ({
             zIndex: 10,
             textShadow: '1px 1px 1px rgba(0,0,0,.6)',
           }}
+          // className="rbgcp-advanced-bar-label"
           onMouseMove={(e) => handleMove(e)}
           onClick={(e) => handleClick(e)}
           tabIndex={0}
@@ -103,6 +106,7 @@ const AdvBar = ({
           height="14px"
           width={`${squareWidth}px`}
           onClick={(e) => handleClick(e)}
+          // className="rbgcp-advanced-bar-canvas"
           style={{ position: 'relative', borderRadius: 14 }}
         />
       </div>
@@ -147,6 +151,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
         width: '100%',
         transition: 'all 120ms linear',
       }}
+      // className="rbgcp-advanced-controls-wrap"
     >
       <div
         style={{
@@ -158,6 +163,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
           overflow: 'hidden',
           transition: 'height 100ms linear',
         }}
+        // className="rbgcp-advanced-controls-inner"
       >
         <AdvBar
           value={s}

diff --git a/src/components/ComparibleColors.tsx b/src/components/ComparibleColors.tsx
@@ -25,13 +25,15 @@ const ComparibleColors = ({
         width: '100%',
         transition: 'all 120ms linear',
       }}
+      // className="rbgcp-comparible-colors-wrap"
     >
       <div
         style={{
           paddingTop: 11,
           display: openComparibles ? '' : 'none',
           position: 'relative',
         }}
+        // className="rbgcp-comparible-colors-inner"
       >
         <div
           style={{
@@ -43,6 +45,7 @@ const ComparibleColors = ({
             left: 2,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Color Guide
         </div>
@@ -54,6 +57,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Analogous
         </div>
@@ -74,6 +78,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Monochromatic
         </div>
@@ -84,10 +89,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {monochromatic?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{ width: '20%', height: 30, background: c.toHexString() }}
               onClick={() => handleClick(c)}
             />
@@ -101,6 +108,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Triad
         </div>
@@ -111,10 +119,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {triad?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{
                 width: 'calc(100% / 3)',
                 height: 28,
@@ -132,6 +142,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Tetrad
         </div>
@@ -142,10 +153,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {tetrad?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{ width: '25%', height: 28, background: c.toHexString() }}
               onClick={() => handleClick(c)}
             />

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -42,13 +42,15 @@ const ColorTypeBtns = ({
           onClick={setSolid}
           id="rbgcp-solid-btn"
           style={colorTypeBtnStyles(!isGradient, defaultStyles)}
+          // className="rbgcp-control-btn rbgcp-solid-btn"
         >
           {locales?.CONTROLS?.SOLID}
         </div>
         <div
           onClick={setGradient}
           id="rbgcp-gradient-btn"
-          style={colorTypeBtnStyles(isGradient || false, defaultStyles)}
+          style={colorTypeBtnStyles(isGradient ?? false, defaultStyles)}
+          // className="rbgcp-control-btn rbgcp-gradient-btn"
         >
           {locales?.CONTROLS?.GRADIENT}
         </div>
@@ -85,6 +87,7 @@ const InputTypeDropdown = ({
 
   return (
     <div
+      // className="rbgcp-color-model-dropdown"
       style={{
         visibility: openInputType ? 'visible' : 'hidden',
         zIndex: openInputType ? '' : -100,
@@ -153,8 +156,8 @@ const Controls = ({
   const noTools =
     hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType
 
-  const solidColor = previous?.color || defaultColor
-  const gradientColor = previous?.gradient || defaultGradient
+  const solidColor = previous?.color ?? defaultColor
+  const gradientColor = previous?.gradient ?? defaultGradient
 
   const setSolid = () => {
     onChange(solidColor)
@@ -190,6 +193,7 @@ const Controls = ({
             alignItems: 'center',
             justifyContent: 'space-between',
           }}
+          // className="rbgcp-controls-wrapper"
         >
           <ColorTypeBtns
             hideColorTypeBtns={hideColorTypeBtns}
@@ -205,42 +209,43 @@ const Controls = ({
                 display: noTools ? 'none' : '',
                 ...defaultStyles.rbgcpControlBtnWrapper,
               }}
+              // className="rbgcp-control-btn-wrapper"
             >
               {!hideEyeDrop && <EyeDropper onSelect={handleChange} />}
-              <div
-                id="rbgcp-advanced-btn"
-                onClick={() => setOpenAdvanced(!openAdvanced)}
-                style={{
-                  display: hideAdvancedSliders ? 'none' : 'flex',
-                  ...controlBtnStyles(openAdvanced, defaultStyles),
-                }}
-              >
-                <SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
-              </div>
-              <div
-                id="rbgcp-comparibles-btn"
-                style={{
-                  display: hideColorGuide ? 'none' : 'flex',
-                  ...controlBtnStyles(openComparibles, defaultStyles),
-                }}
-                onClick={() => setOpenComparibles(!openComparibles)}
-              >
-                <PaletteIcon color={openComparibles ? '#568CF5' : ''} />
-              </div>
-              <div
-                id="rbgcp-color-model-btn"
-                onClick={() => setOpenInputType(!openInputType)}
-                style={{
-                  display: hideInputType ? 'none' : 'flex',
-                  ...controlBtnStyles(openInputType, defaultStyles),
-                }}
-              >
-                <InputsIcon color={openInputType ? '#568CF5' : ''} />
-                <InputTypeDropdown
-                  openInputType={openInputType}
-                  setOpenInputType={setOpenInputType}
-                />
-              </div>
+              {!hideAdvancedSliders && (
+                <div
+                  id="rbgcp-advanced-btn"
+                  onClick={() => setOpenAdvanced(!openAdvanced)}
+                  // className="rbgcp-control-btn rbgcp-advanced-btn"
+                  style={controlBtnStyles(openAdvanced, defaultStyles)}
+                >
+                  <SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
+                </div>
+              )}
+              {!hideColorGuide && (
+                <div
+                  style={controlBtnStyles(openComparibles, defaultStyles)}
+                  onClick={() => setOpenComparibles(!openComparibles)}
+                  // className="rbgcp-control-btn rbgcp-comparibles-btn"
+                  id="rbgcp-comparibles-btn"
+                >
+                  <PaletteIcon color={openComparibles ? '#568CF5' : ''} />
+                </div>
+              )}
+              {!hideInputType && (
+                <div
+                  id="rbgcp-color-model-btn"
+                  onClick={() => setOpenInputType(!openInputType)}
+                  // className="rbgcp-control-btn rbgcp-color-model-btn"
+                  style={controlBtnStyles(openInputType, defaultStyles)}
+                >
+                  <InputsIcon color={openInputType ? '#568CF5' : ''} />
+                  <InputTypeDropdown
+                    openInputType={openInputType}
+                    setOpenInputType={setOpenInputType}
+                  />
+                </div>
+              )}
             </div>
           )}
         </div>

diff --git a/src/components/EyeDropper.tsx b/src/components/EyeDropper.tsx
@@ -9,7 +9,7 @@ import { usePicker } from '../context.js'
 
 const DropperIcon = ({ color }: { color: string }) => {
   const { defaultStyles } = usePicker()
-  const col = color || ''
+  const col = color ?? ''
   return (
     <svg
       id="Layer_1"

diff --git a/src/components/GradientBar.tsx b/src/components/GradientBar.tsx
@@ -56,12 +56,14 @@ export const Handle = ({
       // onFocus={handleFocus}
       id={`gradient-handle-${i}`}
       onMouseDown={(e) => handleDown(e)}
+      // className="rbgcp-gradient-handle-wrap"
       style={{
         ...defaultStyles.rbgcpGradientHandleWrap,
-        left: (left || 0) * leftMultiplyer,
+        left: (left ?? 0) * leftMultiplyer,
       }}
     >
       <div
+        // className="rbgcp-gradient-handle"
         style={{
           ...defaultStyles.rbgcpGradientHandle,
           ...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
@@ -75,6 +77,7 @@ export const Handle = ({
               borderRadius: '50%',
               background: 'white',
             }}
+            // className="rbgcp-gradient-handle-selected-dot"
           />
         )}
       </div>
@@ -164,6 +167,7 @@ const GradientBar = () => {
         position: 'relative',
       }}
       id="gradient-bar"
+      // className="rbgcp-gradient-bar"
     >
       <div
         style={{
@@ -174,6 +178,7 @@ const GradientBar = () => {
         }}
         onMouseDown={(e) => handleDown(e)}
         onMouseMove={(e) => handleMove(e)}
+        // className="rbgcp-gradient-bar-canvas"
       />
       {colors?.map((c: any, i) => (
         <Handle