solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
122 lines (120 loc) • 4.42 kB
JSX
import merge from 'lodash-es/merge';
import { mergeProps } from 'solid-js';
import { Alpha, Checkboard, Hue, Saturation, useColorPicker, withColorPicker } from '../_common';
import SketchFields from './SketchFields';
import SketchPresetColors from './SketchPresetColors';
export function Sketch(_props) {
const props = mergeProps({
width: 200,
disableAlpha: false,
presetColors: [
'#D0021B',
'#F5A623',
'#F8E71C',
'#8B572A',
'#7ED321',
'#417505',
'#BD10E0',
'#9013FE',
'#4A90E2',
'#50E3C2',
'#B8E986',
'#000000',
'#4A4A4A',
'#9B9B9B',
'#FFFFFF',
],
styles: {},
className: '',
}, _props);
const { colors, changeColor } = useColorPicker();
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
const rgb = colors().rgb;
return merge({
picker: {
width,
padding: '10px 10px 0',
'box-sizing': 'initial',
background: '#fff',
'border-radius': '4px',
'box-shadow': '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
},
saturation: {
width: '100%',
'padding-bottom': '75%',
position: 'relative',
overflow: 'hidden',
},
Saturation: {
'border-radius': '3px',
'box-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: props.disableAlpha ? '10px' : '24px',
position: 'relative',
'margin-top': '4px',
'margin-left': '4px',
'border-radius': '3px',
},
activeColor: {
position: 'absolute',
inset: '0px',
'border-radius': '2px',
background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
hue: {
position: 'relative',
height: '10px',
overflow: 'hidden',
},
Hue: {
'border-radius': '2px',
'box-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',
'margin-top': '4px',
overflow: 'hidden',
display: props.disableAlpha ? 'none' : undefined,
},
Alpha: {
'border-radius': '2px',
'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
...props.styles,
}, props.styles);
};
return (<div style={styles().picker} class={`sketch-picker ${props.className}`}>
<div style={styles().saturation}>
<Saturation styles={styles().Saturation} hsl={colors().hsl} hsv={colors().hsv} onChange={changeColor}/>
</div>
<div style={styles().controls} class="flexbox-fix">
<div style={styles().sliders}>
<div style={styles().hue}>
<Hue styles={styles().Hue} hsl={colors().hsl} onChange={changeColor}/>
</div>
<div style={styles().alpha}>
<Alpha direction="horizontal" styles={styles().Alpha} rgb={colors().rgb} hsl={colors().hsl} renderers={props.renderers} onChange={changeColor}/>
</div>
</div>
<div style={styles().color}>
<Checkboard />
<div style={styles().activeColor}/>
</div>
</div>
<SketchFields rgb={colors().rgb} hsl={colors().hsl} hex={colors().hex} onChange={changeColor} disableAlpha={props.disableAlpha}/>
<SketchPresetColors colors={props.presetColors} onClick={changeColor}/>
</div>);
}
export default withColorPicker(Sketch);