Skip to content

Commit db53e9a

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
authored
Merge pull request #50 from Soare-Robert-Daniel/main
Change Color Picker component
2 parents 7bd350b + b4bea66 commit db53e9a

File tree

3 files changed

+119
-34
lines changed

3 files changed

+119
-34
lines changed

‎src/assets/styles/Creator/select-colors.scss

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,20 @@
77
font-size: 16px;
88
line-height: 22px;
99
font-weight: 400;
10-
margin: 0 0 15px;
10+
margin: 0 0 0px;
11+
font-family: $noto;
12+
}
13+
14+
span {
15+
color: #939393;
16+
font-size: 12px;
17+
font-weight: 400;
18+
line-height: 19px;
19+
font-family: $noto;
1120
}
1221

1322
p {
23+
font-family: $noto;
1424
font-size: 14px;
1525
font-weight: 600;
1626
line-height: 19px;
@@ -22,6 +32,7 @@
2232
width: 100%;
2333
flex-direction: column;
2434

35+
2536
.input-field {
2637
width: 100%;
2738
display: inline-flex;
@@ -49,6 +60,7 @@
4960
}
5061

5162
input {
63+
width: 100%;
5264
margin-left: 10px;
5365
color: $black;
5466
font-weight: 500;
@@ -63,5 +75,10 @@
6375
}
6476
}
6577
}
78+
79+
.color-picker-component {
80+
margin-top: 8px;
81+
padding-left: 5px;
82+
}
6683
}
6784
}

‎src/components/ui/SelectColors.tsx

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from "react"
2-
import { SketchPicker } from "react-color"
2+
import { SliderPicker } from "react-color"
33
import UIStore from "../../stores/UIStore"
4-
import presetColors from "../../assets/colors/index"
4+
// import presetColors from "../../assets/colors/index"
55
import classnames from "classnames"
6-
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"
6+
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock"
7+
import ColorPicker from "./common/ColorPicker"
78

89
/**
910
* This function will generate the `Select Coloros Meniu` from design
@@ -145,18 +146,22 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
145146
}
146147
}
147148

149+
/**
150+
* Clear all the lock when the component is destroyed.
151+
*/
148152
React.useEffect(() => {
149-
const colorPickers = document.querySelectorAll(".sketch-picker")
150-
151-
colorPickers.forEach((picker) => {
152-
picker.addEventListener("touchstart", () => disableBodyScroll(picker as HTMLElement))
153-
picker.addEventListener("touchend", () => enableBodyScroll(picker as HTMLElement))
154-
})
155-
}, [isColorEditorOpen])
153+
return () => {
154+
console.log('Clear All Locks')
155+
clearAllBodyScrollLocks()
156+
}
157+
}, [])
156158

157159
return (
158160
<div className="select-colors">
159161
<h1>COLOR PALETTE</h1>
162+
<span>
163+
Press on the square to toggle the color picker.
164+
</span>
160165
<p>Background Color</p>
161166
<div className="container">
162167
<div className="input-field">
@@ -174,14 +179,26 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
174179
/>
175180
</div>
176181
{isColorEditorOpen.background && (
177-
<SketchPicker
182+
// <SliderPicker
183+
// color={colors.background}
184+
// // presetColors={presetColors}
185+
// onChange={(c, event) => {
186+
// event.stopPropagation()
187+
// onInputChangeFor("background", c.hex)
188+
// disableBodyScroll(document.body)
189+
// }}
190+
// onChangeComplete={(c, event) => {
191+
// event.stopPropagation()
192+
// enableBodyScroll(document.body)
193+
// }}
194+
195+
// // disableAlpha={true}
196+
// />
197+
<ColorPicker
178198
color={colors.background}
179-
presetColors={presetColors}
180-
onChange={(c, event) => {
181-
event.stopPropagation()
199+
onChange={(c) => {
182200
onInputChangeFor("background", c.hex)
183201
}}
184-
disableAlpha={true}
185202
/>
186203
)}
187204
</div>
@@ -203,14 +220,25 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
203220
/>
204221
</div>
205222
{isColorEditorOpen.logo && (
206-
<SketchPicker
223+
// <SliderPicker
224+
// color={colors.logo}
225+
// // presetColors={presetColors}
226+
// onChange={(c, event) => {
227+
// event.stopPropagation()
228+
// onInputChangeFor("logo", c.hex)
229+
// disableBodyScroll(document.body)
230+
// }}
231+
// onChangeComplete={(c, event) => {
232+
// event.stopPropagation()
233+
// enableBodyScroll(document.body)
234+
// }}
235+
// // disableAlpha={true}
236+
// />
237+
<ColorPicker
207238
color={colors.logo}
208-
presetColors={presetColors}
209-
onChange={(c, event) => {
210-
event.preventDefault()
239+
onChange={(c) => {
211240
onInputChangeFor("logo", c.hex)
212241
}}
213-
disableAlpha={true}
214242
/>
215243
)}
216244
</div>
@@ -234,14 +262,25 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
234262
/>
235263
</div>
236264
{isColorEditorOpen.title && (
237-
<SketchPicker
265+
// <SliderPicker
266+
// color={colors.title}
267+
// // presetColors={presetColors}
268+
// onChange={(c, event) => {
269+
// event.stopPropagation()
270+
// onInputChangeFor("title", c.hex)
271+
// disableBodyScroll(document.body)
272+
// }}
273+
// onChangeComplete={(c, event) => {
274+
// event.stopPropagation()
275+
// enableBodyScroll(document.body)
276+
// }}
277+
// // disableAlpha={true}
278+
// />
279+
<ColorPicker
238280
color={colors.title}
239-
presetColors={presetColors}
240-
onChange={(c, event) => {
241-
event.stopPropagation()
281+
onChange={(c) => {
242282
onInputChangeFor("title", c.hex)
243283
}}
244-
disableAlpha={true}
245284
/>
246285
)}
247286
</div>
@@ -263,17 +302,28 @@ const SelectColor: React.FunctionComponent<unknown> = () => {
263302
/>
264303
</div>
265304
{isColorEditorOpen.slogan && (
266-
<SketchPicker
267-
onSwatchHover={(c, event) => {
268-
event.preventDefault()
269-
}}
305+
// <SliderPicker
306+
// // onSwatchHover={(c, event) => {
307+
// // event.stopPropagation()
308+
// // }}
309+
// color={colors.slogan}
310+
// // presetColors={presetColors}
311+
// onChange={(c, event) => {
312+
// event.stopPropagation()
313+
// onInputChangeFor("slogan", c.hex)
314+
// disableBodyScroll(document.body)
315+
// }}
316+
// onChangeComplete={(c, event) => {
317+
// event.stopPropagation()
318+
// enableBodyScroll(document.body)
319+
// }}
320+
// // disableAlpha={true}
321+
// />
322+
<ColorPicker
270323
color={colors.slogan}
271-
presetColors={presetColors}
272-
onChange={(c, event) => {
273-
event.stopPropagation()
324+
onChange={(c) => {
274325
onInputChangeFor("slogan", c.hex)
275326
}}
276-
disableAlpha={true}
277327
/>
278328
)}
279329
</div>

‎src/components/ui/common/ColorPicker.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from 'react'
2+
import { Color, ColorChangeHandler, HuePicker } from 'react-color'
3+
4+
type ColorPickerProps = {
5+
color: Color
6+
onChange: ColorChangeHandler
7+
onChangeComplet?: ColorChangeHandler
8+
}
9+
10+
const ColorPicker: React.FunctionComponent<ColorPickerProps> = (props: ColorPickerProps) => {
11+
return (
12+
<div className="color-picker-component">
13+
<HuePicker color={props.color} onChange={props.onChange} onChangeComplete={props?.onChangeComplet} />
14+
</div>
15+
)
16+
}
17+
18+
export default ColorPicker

0 commit comments

Comments
 (0)