-
Notifications
You must be signed in to change notification settings - Fork 914
/
ColorWrap.js
78 lines (66 loc) · 1.87 KB
/
ColorWrap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, { Component, PureComponent } from 'react'
import debounce from 'lodash/debounce'
import color from '../../helpers/color'
export const ColorWrap = (Picker) => {
class ColorPicker extends (PureComponent || Component) {
constructor(props) {
super()
this.state = {
...color.toState(props.color, 0),
}
this.debounce = debounce((fn, data, event) => {
fn(data, event)
}, 100)
}
componentWillReceiveProps(nextProps) {
this.setState({
...color.toState(nextProps.color, this.state.oldHue),
})
}
handleChange = (data, event) => {
const isValidColor = color.simpleCheckForValidColor(data)
if (isValidColor) {
const colors = color.toState(data, data.h || this.state.oldHue)
this.setState(colors)
this.props.onChangeComplete && this.debounce(this.props.onChangeComplete, colors, event)
this.props.onChange && this.props.onChange(colors, event)
}
}
handleSwatchHover = (data, event) => {
const isValidColor = color.simpleCheckForValidColor(data)
if (isValidColor) {
const colors = color.toState(data, data.h || this.state.oldHue)
this.setState(colors)
this.props.onSwatchHover && this.props.onSwatchHover(colors, event)
}
}
render() {
const optionalEvents = {}
if (this.props.onSwatchHover) {
optionalEvents.onSwatchHover = this.handleSwatchHover
}
return (
<Picker
{ ...this.props }
{ ...this.state }
onChange={ this.handleChange }
{ ...optionalEvents }
/>
)
}
}
ColorPicker.propTypes = {
...Picker.propTypes,
}
ColorPicker.defaultProps = {
...Picker.defaultProps,
color: {
h: 250,
s: 0.50,
l: 0.20,
a: 1,
},
}
return ColorPicker
}
export default ColorWrap