Skip to content

Commit be2a8bf

Browse files
hxf31891hxf31891
committed
hiding ui bug
1 parent 6fc0650 commit be2a8bf

19 files changed

+129
-64
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-best-gradient-color-picker",
3-
"version": "3.0.10",
3+
"version": "3.0.11-beta.4",
44
"description": "An easy to use color/gradient picker for React.js",
55
"type": "module",
66
"sideEffects": [

‎src/components/AdvancedControls.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,12 @@ const AdvBar = ({
6666
<div style={{ width: '100%', padding: '3px 0px 3px 0px' }}>
6767
<div
6868
onMouseMove={(e) => handleMove(e)}
69+
// className="rbgcp-advanced-bar-wrap"
6970
style={{ cursor: 'resize', position: 'relative' }}
7071
>
7172
<div
7273
style={{ left, top: handleTop, ...defaultStyles.rbgcpHandle }}
74+
// className="rbgcp-advanced-bar-handle"
7375
onMouseDown={handleDown}
7476
role="button"
7577
tabIndex={0}
@@ -88,6 +90,7 @@ const AdvBar = ({
8890
zIndex: 10,
8991
textShadow: '1px 1px 1px rgba(0,0,0,.6)',
9092
}}
93+
// className="rbgcp-advanced-bar-label"
9194
onMouseMove={(e) => handleMove(e)}
9295
onClick={(e) => handleClick(e)}
9396
tabIndex={0}
@@ -103,6 +106,7 @@ const AdvBar = ({
103106
height="14px"
104107
width={`${squareWidth}px`}
105108
onClick={(e) => handleClick(e)}
109+
// className="rbgcp-advanced-bar-canvas"
106110
style={{ position: 'relative', borderRadius: 14 }}
107111
/>
108112
</div>
@@ -147,6 +151,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
147151
width: '100%',
148152
transition: 'all 120ms linear',
149153
}}
154+
// className="rbgcp-advanced-controls-wrap"
150155
>
151156
<div
152157
style={{
@@ -158,6 +163,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
158163
overflow: 'hidden',
159164
transition: 'height 100ms linear',
160165
}}
166+
// className="rbgcp-advanced-controls-inner"
161167
>
162168
<AdvBar
163169
value={s}

‎src/components/ComparibleColors.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ const ComparibleColors = ({
2525
width: '100%',
2626
transition: 'all 120ms linear',
2727
}}
28+
// className="rbgcp-comparible-colors-wrap"
2829
>
2930
<div
3031
style={{
3132
paddingTop: 11,
3233
display: openComparibles ? '' : 'none',
3334
position: 'relative',
3435
}}
36+
// className="rbgcp-comparible-colors-inner"
3537
>
3638
<div
3739
style={{
@@ -43,6 +45,7 @@ const ComparibleColors = ({
4345
left: 2,
4446
...defaultStyles.rbgcpComparibleLabel,
4547
}}
48+
// className="rbgcp-comparible-colors-label"
4649
>
4750
Color Guide
4851
</div>
@@ -54,6 +57,7 @@ const ComparibleColors = ({
5457
marginTop: 3,
5558
...defaultStyles.rbgcpComparibleLabel,
5659
}}
60+
// className="rbgcp-comparible-colors-label"
5761
>
5862
Analogous
5963
</div>
@@ -74,6 +78,7 @@ const ComparibleColors = ({
7478
marginTop: 3,
7579
...defaultStyles.rbgcpComparibleLabel,
7680
}}
81+
// className="rbgcp-comparible-colors-label"
7782
>
7883
Monochromatic
7984
</div>
@@ -84,10 +89,12 @@ const ComparibleColors = ({
8489
display: 'flex',
8590
justifyContent: 'flex-end',
8691
}}
92+
// className="rbgcp-comparible-colors-colors"
8793
>
8894
{monochromatic?.map((c: any, key: number) => (
8995
<div
9096
key={key}
97+
// className="rbgcp-comparible-colors-color"
9198
style={{ width: '20%', height: 30, background: c.toHexString() }}
9299
onClick={() => handleClick(c)}
93100
/>
@@ -101,6 +108,7 @@ const ComparibleColors = ({
101108
marginTop: 3,
102109
...defaultStyles.rbgcpComparibleLabel,
103110
}}
111+
// className="rbgcp-comparible-colors-label"
104112
>
105113
Triad
106114
</div>
@@ -111,10 +119,12 @@ const ComparibleColors = ({
111119
display: 'flex',
112120
justifyContent: 'flex-end',
113121
}}
122+
// className="rbgcp-comparible-colors-colors"
114123
>
115124
{triad?.map((c: any, key: number) => (
116125
<div
117126
key={key}
127+
// className="rbgcp-comparible-colors-color"
118128
style={{
119129
width: 'calc(100% / 3)',
120130
height: 28,
@@ -132,6 +142,7 @@ const ComparibleColors = ({
132142
marginTop: 3,
133143
...defaultStyles.rbgcpComparibleLabel,
134144
}}
145+
// className="rbgcp-comparible-colors-label"
135146
>
136147
Tetrad
137148
</div>
@@ -142,10 +153,12 @@ const ComparibleColors = ({
142153
display: 'flex',
143154
justifyContent: 'flex-end',
144155
}}
156+
// className="rbgcp-comparible-colors-colors"
145157
>
146158
{tetrad?.map((c: any, key: number) => (
147159
<div
148160
key={key}
161+
// className="rbgcp-comparible-colors-color"
149162
style={{ width: '25%', height: 28, background: c.toHexString() }}
150163
onClick={() => handleClick(c)}
151164
/>

‎src/components/Controls.tsx‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,15 @@ const ColorTypeBtns = ({
4242
onClick={setSolid}
4343
id="rbgcp-solid-btn"
4444
style={colorTypeBtnStyles(!isGradient, defaultStyles)}
45+
// className="rbgcp-control-btn rbgcp-solid-btn"
4546
>
4647
{locales?.CONTROLS?.SOLID}
4748
</div>
4849
<div
4950
onClick={setGradient}
5051
id="rbgcp-gradient-btn"
51-
style={colorTypeBtnStyles(isGradient || false, defaultStyles)}
52+
style={colorTypeBtnStyles(isGradient ?? false, defaultStyles)}
53+
// className="rbgcp-control-btn rbgcp-gradient-btn"
5254
>
5355
{locales?.CONTROLS?.GRADIENT}
5456
</div>
@@ -85,6 +87,7 @@ const InputTypeDropdown = ({
8587

8688
return (
8789
<div
90+
// className="rbgcp-color-model-dropdown"
8891
style={{
8992
visibility: openInputType ? 'visible' : 'hidden',
9093
zIndex: openInputType ? '' : -100,
@@ -153,8 +156,8 @@ const Controls = ({
153156
const noTools =
154157
hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType
155158

156-
const solidColor = previous?.color || defaultColor
157-
const gradientColor = previous?.gradient || defaultGradient
159+
const solidColor = previous?.color ?? defaultColor
160+
const gradientColor = previous?.gradient ?? defaultGradient
158161

159162
const setSolid = () => {
160163
onChange(solidColor)
@@ -190,6 +193,7 @@ const Controls = ({
190193
alignItems: 'center',
191194
justifyContent: 'space-between',
192195
}}
196+
// className="rbgcp-controls-wrapper"
193197
>
194198
<ColorTypeBtns
195199
hideColorTypeBtns={hideColorTypeBtns}
@@ -205,42 +209,43 @@ const Controls = ({
205209
display: noTools ? 'none' : '',
206210
...defaultStyles.rbgcpControlBtnWrapper,
207211
}}
212+
// className="rbgcp-control-btn-wrapper"
208213
>
209214
{!hideEyeDrop && <EyeDropper onSelect={handleChange} />}
210-
<div
211-
id="rbgcp-advanced-btn"
212-
onClick={() => setOpenAdvanced(!openAdvanced)}
213-
style={{
214-
display: hideAdvancedSliders ? 'none' : 'flex',
215-
...controlBtnStyles(openAdvanced, defaultStyles),
216-
}}
217-
>
218-
<SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
219-
</div>
220-
<div
221-
id="rbgcp-comparibles-btn"
222-
style={{
223-
display: hideColorGuide ? 'none' : 'flex',
224-
...controlBtnStyles(openComparibles, defaultStyles),
225-
}}
226-
onClick={() => setOpenComparibles(!openComparibles)}
227-
>
228-
<PaletteIcon color={openComparibles ? '#568CF5' : ''} />
229-
</div>
230-
<div
231-
id="rbgcp-color-model-btn"
232-
onClick={() => setOpenInputType(!openInputType)}
233-
style={{
234-
display: hideInputType ? 'none' : 'flex',
235-
...controlBtnStyles(openInputType, defaultStyles),
236-
}}
237-
>
238-
<InputsIcon color={openInputType ? '#568CF5' : ''} />
239-
<InputTypeDropdown
240-
openInputType={openInputType}
241-
setOpenInputType={setOpenInputType}
242-
/>
243-
</div>
215+
{!hideAdvancedSliders && (
216+
<div
217+
id="rbgcp-advanced-btn"
218+
onClick={() => setOpenAdvanced(!openAdvanced)}
219+
// className="rbgcp-control-btn rbgcp-advanced-btn"
220+
style={controlBtnStyles(openAdvanced, defaultStyles)}
221+
>
222+
<SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
223+
</div>
224+
)}
225+
{!hideColorGuide && (
226+
<div
227+
style={controlBtnStyles(openComparibles, defaultStyles)}
228+
onClick={() => setOpenComparibles(!openComparibles)}
229+
// className="rbgcp-control-btn rbgcp-comparibles-btn"
230+
id="rbgcp-comparibles-btn"
231+
>
232+
<PaletteIcon color={openComparibles ? '#568CF5' : ''} />
233+
</div>
234+
)}
235+
{!hideInputType && (
236+
<div
237+
id="rbgcp-color-model-btn"
238+
onClick={() => setOpenInputType(!openInputType)}
239+
// className="rbgcp-control-btn rbgcp-color-model-btn"
240+
style={controlBtnStyles(openInputType, defaultStyles)}
241+
>
242+
<InputsIcon color={openInputType ? '#568CF5' : ''} />
243+
<InputTypeDropdown
244+
openInputType={openInputType}
245+
setOpenInputType={setOpenInputType}
246+
/>
247+
</div>
248+
)}
244249
</div>
245250
)}
246251
</div>

‎src/components/EyeDropper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { usePicker } from '../context.js'
99

1010
const DropperIcon = ({ color }: { color: string }) => {
1111
const { defaultStyles } = usePicker()
12-
const col = color || ''
12+
const col = color ?? ''
1313
return (
1414
<svg
1515
id="Layer_1"

‎src/components/GradientBar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,14 @@ export const Handle = ({
5656
// onFocus={handleFocus}
5757
id={`gradient-handle-${i}`}
5858
onMouseDown={(e) => handleDown(e)}
59+
// className="rbgcp-gradient-handle-wrap"
5960
style={{
6061
...defaultStyles.rbgcpGradientHandleWrap,
61-
left: (left || 0) * leftMultiplyer,
62+
left: (left ?? 0) * leftMultiplyer,
6263
}}
6364
>
6465
<div
66+
// className="rbgcp-gradient-handle"
6567
style={{
6668
...defaultStyles.rbgcpGradientHandle,
6769
...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
@@ -75,6 +77,7 @@ export const Handle = ({
7577
borderRadius: '50%',
7678
background: 'white',
7779
}}
80+
// className="rbgcp-gradient-handle-selected-dot"
7881
/>
7982
)}
8083
</div>
@@ -164,6 +167,7 @@ const GradientBar = () => {
164167
position: 'relative',
165168
}}
166169
id="gradient-bar"
170+
// className="rbgcp-gradient-bar"
167171
>
168172
<div
169173
style={{
@@ -174,6 +178,7 @@ const GradientBar = () => {
174178
}}
175179
onMouseDown={(e) => handleDown(e)}
176180
onMouseMove={(e) => handleMove(e)}
181+
// className="rbgcp-gradient-bar-canvas"
177182
/>
178183
{colors?.map((c: any, i) => (
179184
<Handle

0 commit comments

Comments
 (0)