Hey, first of all this is a superb react component.
While trying to implement a custom picker, I noticed it only seemed to display the 'sketch' picker, so I had a look in the source in the render function I found this:
import React from 'react'
import ReactCSS, { Component } from 'react-color/node_modules/reactcss'
import { Alpha, Checkboard, EditableInput, Hue, Saturation } from 'react-color/lib/components/common'
import color from 'react-color/lib/helpers/color'
export default class ReactColorPreset extends Component {
classes() {
return {
'default': {
picker: {
width: '200px',
padding: '10px 10px 0',
boxSizing: 'initial',
background: '#fff',
borderRadius: '4px',
boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
},
saturation: {
width: '100%',
paddingBottom: '75%',
position: 'relative',
overflow: 'hidden',
},
Saturation: {
radius: '3px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
controls: {
display: 'flex',
},
sliders: {
padding: '4px 0',
flex: '1',
},
color: {
width: '24px',
height: '24px',
position: 'relative',
marginTop: '4px',
marginLeft: '4px',
borderRadius: '3px',
},
activeColor: {
Absolute: '0 0 0 0',
borderRadius: '2px',
background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
zIndex: '2',
},
hue: {
position: 'relative',
height: '10px',
overflow: 'hidden',
},
Hue: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
alpha: {
position: 'relative',
height: '10px',
marginTop: '4px',
overflow: 'hidden',
},
Alpha: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
fields: {
display: 'flex',
paddingTop: '4px',
},
single: {
flex: '1',
paddingLeft: '6px',
},
double: {
flex: '2',
},
Input: {
style: {
input: {
width: '80%',
padding: '4px 10% 3px',
border: 'none',
boxShadow: 'inset 0 0 0 1px #ccc',
fontSize: '11px',
},
label: {
display: 'block',
textAlign: 'center',
fontSize: '11px',
color: '#222',
paddingTop: '3px',
paddingBottom: '4px',
textTransform: 'capitalize',
},
},
},
},
};
}
handleChange(data) {
this.props.onChange(data);
}
handleInputChange(data) {
if (data.hex) {
color.isValidHex(data.hex) && this.props.onChange(data.hex);
} else if (data.r || data.g || data.b) {
this.props.onChange({
r: data.r || this.props.rgb.r,
g: data.g || this.props.rgb.g,
b: data.b || this.props.rgb.b,
a: this.props.rgb.a,
});
} else if (data.a) {
if (data.a < 0) {
data.a = 0;
} else if (data.a > 100) {
data.a = 100;
}
data.a = data.a / 100;
this.props.onChange({
h: this.props.hsl.h,
s: this.props.hsl.s,
l: this.props.hsl.l,
a: data.a,
});
}
}
render() {
return (
<div is="picker">
<div is="saturation">
<Saturation is="Saturation" {...this.props} onChange={ ::this.handleChange }/>
</div>
<div is="controls" className="flexbox-fix">
<div is="sliders">
<div is="hue">
<Hue is="Hue" {...this.props} onChange={ ::this.handleChange } />
</div>
</div>
<div is="color">
<div is="activeColor"/>
<Checkboard />
</div>
</div>
<div is="fields">
<div is="fields" className="flexbox-fix">
<div is="double">
<EditableInput is="Input" label="hex" value={ this.props.hex.replace('#', '') } onChange={ ::this.handleInputChange }/>
</div>
<div is="single">
<EditableInput is="Input" label="r" value={ this.props.rgb.r } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
</div>
<div is="single">
<EditableInput is="Input" label="g" value={ this.props.rgb.g } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
</div>
<div is="single">
<EditableInput is="Input" label="b" value={ this.props.rgb.b } onChange={ ::this.handleInputChange } dragLabel="true" dragMax="255"/>
</div>
</div>
</div>
</div>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
