From be2a8bf1b6b4bc5126462cb1e5f2062172ffb2b8 Mon Sep 17 00:00:00 2001 From: hxf31891 Date: Fri, 8 Nov 2024 03:02:20 -0600 Subject: [PATCH] hiding ui bug --- package.json | 2 +- src/components/AdvancedControls.tsx | 6 +++ src/components/ComparibleColors.tsx | 13 +++++ src/components/Controls.tsx | 79 +++++++++++++++-------------- src/components/EyeDropper.tsx | 2 +- src/components/GradientBar.tsx | 7 ++- src/components/GradientControls.tsx | 26 ++++++++-- src/components/Hue.tsx | 3 ++ src/components/Inputs.tsx | 1 + src/components/Opacity.tsx | 4 ++ src/components/Picker.tsx | 1 - src/components/Portal.tsx | 2 +- src/components/Presets.tsx | 4 ++ src/components/Square.tsx | 8 ++- src/components/icon.tsx | 12 ++--- src/components/index.tsx | 9 ++-- src/hooks/useColorPicker.ts | 8 +-- src/shared/types.ts | 1 + src/styles/styles.ts | 5 +- 19 files changed, 129 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index bc1db51..f621380 100644 --- 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 index 064301b..168a2e8 100644 --- a/src/components/AdvancedControls.tsx +++ b/src/components/AdvancedControls.tsx @@ -66,10 +66,12 @@ const AdvBar = ({
handleMove(e)} + // className="rbgcp-advanced-bar-wrap" style={{ cursor: 'resize', position: 'relative' }} >
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 }} />
@@ -147,6 +151,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => { width: '100%', transition: 'all 120ms linear', }} + // className="rbgcp-advanced-controls-wrap" >
{ overflow: 'hidden', transition: 'height 100ms linear', }} + // className="rbgcp-advanced-controls-inner" >
Color Guide
@@ -54,6 +57,7 @@ const ComparibleColors = ({ marginTop: 3, ...defaultStyles.rbgcpComparibleLabel, }} + // className="rbgcp-comparible-colors-label" > Analogous
@@ -74,6 +78,7 @@ const ComparibleColors = ({ marginTop: 3, ...defaultStyles.rbgcpComparibleLabel, }} + // className="rbgcp-comparible-colors-label" > Monochromatic
@@ -84,10 +89,12 @@ const ComparibleColors = ({ display: 'flex', justifyContent: 'flex-end', }} + // className="rbgcp-comparible-colors-colors" > {monochromatic?.map((c: any, key: number) => (
handleClick(c)} /> @@ -101,6 +108,7 @@ const ComparibleColors = ({ marginTop: 3, ...defaultStyles.rbgcpComparibleLabel, }} + // className="rbgcp-comparible-colors-label" > Triad
@@ -111,10 +119,12 @@ const ComparibleColors = ({ display: 'flex', justifyContent: 'flex-end', }} + // className="rbgcp-comparible-colors-colors" > {triad?.map((c: any, key: number) => (
Tetrad
@@ -142,10 +153,12 @@ const ComparibleColors = ({ display: 'flex', justifyContent: 'flex-end', }} + // className="rbgcp-comparible-colors-colors" > {tetrad?.map((c: any, key: number) => (
handleClick(c)} /> diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index beff4cf..dbc9f0e 100644 --- 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}
{locales?.CONTROLS?.GRADIENT}
@@ -85,6 +87,7 @@ const InputTypeDropdown = ({ return (
{ onChange(solidColor) @@ -190,6 +193,7 @@ const Controls = ({ alignItems: 'center', justifyContent: 'space-between', }} + // className="rbgcp-controls-wrapper" > {!hideEyeDrop && } -
setOpenAdvanced(!openAdvanced)} - style={{ - display: hideAdvancedSliders ? 'none' : 'flex', - ...controlBtnStyles(openAdvanced, defaultStyles), - }} - > - -
-
setOpenComparibles(!openComparibles)} - > - -
-
setOpenInputType(!openInputType)} - style={{ - display: hideInputType ? 'none' : 'flex', - ...controlBtnStyles(openInputType, defaultStyles), - }} - > - - -
+ {!hideAdvancedSliders && ( +
setOpenAdvanced(!openAdvanced)} + // className="rbgcp-control-btn rbgcp-advanced-btn" + style={controlBtnStyles(openAdvanced, defaultStyles)} + > + +
+ )} + {!hideColorGuide && ( +
setOpenComparibles(!openComparibles)} + // className="rbgcp-control-btn rbgcp-comparibles-btn" + id="rbgcp-comparibles-btn" + > + +
+ )} + {!hideInputType && ( +
setOpenInputType(!openInputType)} + // className="rbgcp-control-btn rbgcp-color-model-btn" + style={controlBtnStyles(openInputType, defaultStyles)} + > + + +
+ )}
)}
diff --git a/src/components/EyeDropper.tsx b/src/components/EyeDropper.tsx index b2bd11f..40b09e7 100644 --- 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 ( handleDown(e)} + // className="rbgcp-gradient-handle-wrap" style={{ ...defaultStyles.rbgcpGradientHandleWrap, - left: (left || 0) * leftMultiplyer, + left: (left ?? 0) * leftMultiplyer, }} >
)}
@@ -164,6 +167,7 @@ const GradientBar = () => { position: 'relative', }} id="gradient-bar" + // className="rbgcp-gradient-bar" >
{ }} onMouseDown={(e) => handleDown(e)} onMouseMove={(e) => handleMove(e)} + // className="rbgcp-gradient-bar-canvas" /> {colors?.map((c: any, i) => ( {
{ @@ -41,7 +45,11 @@ const GradientType = () => {
{ @@ -63,6 +71,7 @@ const StopPicker = () => { return (
{ value={currentLeft} id="rbgcp-stop-input" onChange={(e) => handleMove(e.target.value)} - style={{ ...defaultStyles.rbgcpControlInput, ...defaultStyles.rbgcpStopInput }} + style={{ + ...defaultStyles.rbgcpControlInput, + ...defaultStyles.rbgcpStopInput, + }} + // className="rbgcp-control-input rbgcp-stop-input" />
) @@ -87,11 +100,12 @@ const DegreePicker = () => { const handleDegrees = (e: any) => { const newValue = formatInputValues(e.target.value, 0, 360) const remaining = value.split(/,(.+)/)[1] - onChange(`linear-gradient(${newValue || 0}deg, ${remaining}`) + onChange(`linear-gradient(${newValue ?? 0}deg, ${remaining}`) } return (
{ value={degrees} id="rbgcp-degree-input" onChange={(e) => handleDegrees(e)} + // className="rbgcp-control-input rbgcp-degree-input" style={{ ...defaultStyles.rbgcpControlInput, ...defaultStyles.rbgcpDegreeInput, }} />
{ onClick={deletePoint} style={{ ...controlBtnStyles(false, defaultStyles), width: 28 }} id="rbgcp-point-delete-btn" + // className="rbgcp-control-btn rbgcp-point-delete-btn" tabIndex={0} role="button" onKeyDown={() => { @@ -176,6 +193,7 @@ const GradientControls = ({ paddingLeft: hideGradientType ? 4 : 0, }} id="rbgcp-gradient-controls-wrap" + // className="rbgcp-gradient-controls-wrap" > {!hideGradientType && }
diff --git a/src/components/Hue.tsx b/src/components/Hue.tsx index 6569f67..c0c5176 100644 --- a/src/components/Hue.tsx +++ b/src/components/Hue.tsx @@ -60,10 +60,12 @@ const Hue = () => { position: 'relative', }} onMouseMove={(e) => handleMove(e)} + // className="rbgcp-hue-wrap" >
{ handleClick(e)} style={{ position: 'relative', borderRadius: 14, verticalAlign: 'top' }} diff --git a/src/components/Inputs.tsx b/src/components/Inputs.tsx index c92c815..cd0e94a 100644 --- a/src/components/Inputs.tsx +++ b/src/components/Inputs.tsx @@ -36,6 +36,7 @@ const Input = ({ id="rbgcp-input" onChange={(e) => onChange(e)} style={{ ...defaultStyles.rbgcpInput }} + // className="rbgcp-input" />
{label}
diff --git a/src/components/Opacity.tsx b/src/components/Opacity.tsx index d27b110..559584f 100644 --- a/src/components/Opacity.tsx +++ b/src/components/Opacity.tsx @@ -60,15 +60,19 @@ const Opacity = () => { cursor: 'ew-resize', position: 'relative', }} + // className="rbgcp-opacity-wrap" >
handleClick(e)} /> diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx index 2ec65da..1f572b9 100644 --- a/src/components/Picker.tsx +++ b/src/components/Picker.tsx @@ -1,5 +1,4 @@ import React from 'react' - import Hue from './Hue.js' import Inputs from './Inputs.js' import Square from './Square.js' diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx index 41158ca..81483ec 100644 --- a/src/components/Portal.tsx +++ b/src/components/Portal.tsx @@ -4,7 +4,7 @@ import { createPortal } from 'react-dom' const Portal = ({ children }: { children: ReactNode }) => { const id = 'id' + Math.random().toString(16).slice(2) const el = useRef( - document.getElementById(id) || document.createElement('div') + document.getElementById(id) ?? document.createElement('div') ) const [dynamic] = useState(!el.current.parentElement) diff --git a/src/components/Presets.tsx b/src/components/Presets.tsx index b149e12..2c772e8 100644 --- a/src/components/Presets.tsx +++ b/src/components/Presets.tsx @@ -30,6 +30,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => { marginTop: 14, justifyContent: 'space-between', }} + // className="rbgcp-presets-wrap" >
{ borderRadius: 6, flexShrink: 0, }} + // className="rbgcp-preset-color-preview" />
{ width: squareWidth - 66, justifyContent: 'space-between', }} + // className="rbgcp-presets-list" > {getPresets().map((p: any, key: number) => (
{ marginBottom: 2, border: p === 'rgba(255,255,255, 1)' ? '1px solid #96959c' : '', }} + // className="rbgcp-preset-color" onClick={() => handlePresetClick(p)} /> ))} diff --git a/src/components/Square.tsx b/src/components/Square.tsx index 5b365b6..4d7f464 100644 --- a/src/components/Square.tsx +++ b/src/components/Square.tsx @@ -96,22 +96,26 @@ const Square = () => { onTouchStart={handleCanvasDown} onMouseMove={(e) => handleMove(e)} style={{ position: 'relative', cursor: 'ew-cross' }} + // className="rbgcp-square-wrap" >
handleClick(e)} > diff --git a/src/components/icon.tsx b/src/components/icon.tsx index 016fc11..b206948 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -35,7 +35,7 @@ export default TrashIcon export const LinearIcon = ({ color }: ColorProps) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const styles = { fill: 'none', strokeWidth: '1.8px', @@ -65,7 +65,7 @@ export const LinearIcon = ({ color }: ColorProps) => { export const RadialIcon = ({ color }: ColorProps) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const styles = { fill: 'none', strokeMiterlimit: 10, @@ -106,7 +106,7 @@ export const RadialIcon = ({ color }: ColorProps) => { export const SlidersIcon = ({ color }: ColorProps) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const style1 = { fill: 'none', strokeWidth: '1.8px', @@ -202,7 +202,7 @@ export const SlidersIcon = ({ color }: ColorProps) => { export const InputsIcon = ({ color }: ColorProps) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const style1 = { fill: 'none', strokeWidth: '1.8px', @@ -252,7 +252,7 @@ export const InputsIcon = ({ color }: ColorProps) => { export const PaletteIcon = ({ color }: ColorProps) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const style2 = { strokeMiterlimit: 10, strokeWidth: '0.5px', @@ -317,7 +317,7 @@ export const PaletteIcon = ({ color }: ColorProps) => { export const DegreesIcon = ({ color }: { color?: string }) => { const { defaultStyles } = usePicker() - const col = color || '' + const col = color ?? '' const style2 = { fill: 'none', strokeMiterlimit: 10, diff --git a/src/components/index.tsx b/src/components/index.tsx index 5304ab0..f2b62cd 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,5 @@ 'use client' -import React, { useRef } from 'react' +import React from 'react' import PickerContextWrapper from '../context.js' import Picker from './Picker.js' import { ColorPickerProps } from '../shared/types.js' @@ -31,14 +31,15 @@ export function ColorPicker({ style = {}, className, disableDarkMode = false, + disableLightMode = false, }: ColorPickerProps) { const safeValue = objectToString(value) - const contRef = useRef(null) - const defaultStyles = getStyles(disableDarkMode) + // const contRef = useRef(null) + const defaultStyles = getStyles(disableDarkMode, disableLightMode) return (
diff --git a/src/hooks/useColorPicker.ts b/src/hooks/useColorPicker.ts index 8255dd8..dc99816 100644 --- a/src/hooks/useColorPicker.ts +++ b/src/hooks/useColorPicker.ts @@ -85,12 +85,12 @@ export const useColorPicker = ( } const setSolid = (startingColor: string) => { - const newValue = startingColor || defaultColor + const newValue = startingColor ?? defaultColor onChange(newValue) } const setGradient = (startingGradiant: string) => { - const newValue = startingGradiant || defaultGradient + const newValue = startingGradiant ?? defaultGradient onChange(newValue) } @@ -107,7 +107,7 @@ export const useColorPicker = ( const handleGradient = (newColor: string, left?: number) => { const remaining = colors?.filter((c: ColorsProps) => !isUpperCase(c.value)) const newColors = [ - { value: newColor.toUpperCase(), left: left || currentLeft }, + { value: newColor.toUpperCase(), left: left ?? currentLeft }, ...remaining, ] createGradientStr(newColors) @@ -214,7 +214,7 @@ export const useColorPicker = ( const deletePoint = (index: number) => { if (colors?.length > 2) { - const pointToDelete = index || selectedColor + const pointToDelete = index ?? selectedColor const remaining = colors?.filter( (rc: ColorsProps, i: number) => i !== pointToDelete ) diff --git a/src/shared/types.ts b/src/shared/types.ts index 40a850c..ed444a1 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -22,6 +22,7 @@ export type ColorPickerProps = { className?: any locales?: LocalesProps disableDarkMode?: boolean + disableLightMode?: boolean } export type ColorsProps = { diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 916dd0c..9db90f0 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -92,6 +92,7 @@ const styles: Styles = { color: 'black', fontWeight: 400, textAlign: 'center', + background: 'transparent' }, rbgcpHandle: { position: 'absolute', @@ -178,9 +179,9 @@ const styles: Styles = { } }; -export const getStyles = (disableDarkMode: boolean) => { +export const getStyles = (disableDarkMode: boolean, disableLightMode: boolean) => { if (typeof window === 'undefined' || disableDarkMode) return styles; - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) { for (const key in darkStyles) { if (Object.prototype.hasOwnProperty.call(darkStyles, key)) { (styles as Record)[key] = {