|
|
@ -0,0 +1,108 @@ |
|
|
|
import React from 'react'; |
|
|
|
import { CustomPicker } from 'react-color'; |
|
|
|
|
|
|
|
const { Hue, Alpha } = require('react-color/lib/components/common'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const colors= ['#ffffff', '#ff0000','#ff8000','#ffff00','#80ff00','#00ff00','#00ff80','#00ffff', |
|
|
|
'#0080ff','#0000ff','#8000ff','#ff00ff','#ff0080'] |
|
|
|
|
|
|
|
const inlineStyles = { |
|
|
|
container: { |
|
|
|
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px', |
|
|
|
display: 'flex', |
|
|
|
flexDirection: 'column', |
|
|
|
height: 282, |
|
|
|
width: 200, |
|
|
|
}, |
|
|
|
pointer: { |
|
|
|
width: '18px', |
|
|
|
height: '18px', |
|
|
|
borderRadius: '50%', |
|
|
|
transform: 'translate(-9px, -1px)', |
|
|
|
backgroundColor: 'rgb(248, 248, 248)', |
|
|
|
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)', |
|
|
|
}, |
|
|
|
slider: { |
|
|
|
marginTop: '1px', |
|
|
|
width: '4px', |
|
|
|
borderRadius: '1px', |
|
|
|
height: '20px', |
|
|
|
boxShadow: '0 0 2px rgba(0, 0, 0, .6)', |
|
|
|
background: '#fff', |
|
|
|
transform: 'translateX(-2px)' |
|
|
|
}, |
|
|
|
saturation: { |
|
|
|
width: '100%', |
|
|
|
paddingBottom: '75%', |
|
|
|
position: 'relative', |
|
|
|
overflow: 'hidden', |
|
|
|
}, |
|
|
|
swatchSquare: { |
|
|
|
minWidth: 20, |
|
|
|
minHeight: 20, |
|
|
|
margin: '1px 2px', |
|
|
|
cursor: 'pointer', |
|
|
|
boxShadow: '0 0 2px rgba(0, 0, 0, .6)', |
|
|
|
}, |
|
|
|
preview: { |
|
|
|
minHeight: 50, |
|
|
|
minWidth: 100 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const CustomSlider = () => { |
|
|
|
return ( |
|
|
|
<div style={ inlineStyles.slider } /> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
class CustomColorPicker extends React.Component { |
|
|
|
|
|
|
|
|
|
|
|
displayColorSwatches = colors => { |
|
|
|
return colors.map(color => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
onClick={() => this.props.onChange(color)} |
|
|
|
key={color} |
|
|
|
style={{ ...inlineStyles.swatchSquare, backgroundColor: color, }} |
|
|
|
/> |
|
|
|
); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
return ( |
|
|
|
<div style={inlineStyles.container}> |
|
|
|
<div style={{ backgroundColor: this.props.colorHex, minHeight: 50 }}></div> |
|
|
|
|
|
|
|
<div style={{ minHeight: 20, position: 'relative', margin: 2 }}> |
|
|
|
<Hue |
|
|
|
hsl={this.props.colorHsl} |
|
|
|
pointer={CustomSlider} |
|
|
|
onChange={(color) => this.props.onChange(color)} |
|
|
|
direction={'horizontal'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ position: 'relative', minHeight:20}}> |
|
|
|
<Alpha |
|
|
|
hsl={this.props.colorHsl} |
|
|
|
rgb={this.props.colorRgb} |
|
|
|
pointer={CustomSlider} |
|
|
|
onChange={(color) => this.props.onChange(color)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', width: '100%', flexWrap: 'wrap', padding: 3 }}> |
|
|
|
{this.displayColorSwatches(colors) |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default CustomPicker(CustomColorPicker); |