solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
108 lines (107 loc) • 4.14 kB
JSX
import merge from 'lodash-es/merge';
import { mergeProps } from 'solid-js';
import { Alpha, Checkboard, Hue, Saturation, useColorPicker, withColorPicker } from '../_common';
import ChromeFields from './ChromeFields';
import ChromePointer from './ChromePointer';
import ChromePointerCircle from './ChromePointerCircle';
export const Chrome = (_props) => {
const props = mergeProps({
width: 225,
disableAlpha: false,
styles: {},
className: '',
}, _props);
const { colors, changeColor } = useColorPicker();
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
return merge({
picker: {
width,
background: '#fff',
'border-radius': '2px',
'box-shadow': '0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)',
'box-sizing': 'initial',
'font-family': 'Menlo',
},
saturation: {
width: '100%',
'padding-bottom': '55%',
position: 'relative',
'border-radius': '2px 2px 0 0',
overflow: 'hidden',
},
Saturation: {
'border-radius': '2px 2px 0 0',
},
body: {
padding: '16px 16px 12px',
},
controls: {
display: 'flex',
},
color: {
width: props.disableAlpha ? '22px' : '32px',
},
swatch: {
'margin-top': props.disableAlpha ? '0px' : '6px',
width: props.disableAlpha ? '10px' : '16px',
height: props.disableAlpha ? '10px' : '16px',
'border-radius': '8px',
position: 'relative',
overflow: 'hidden',
},
active: {
position: 'absolute',
inset: '0px',
'border-radius': '8px',
'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.1)',
background: `rgba(${colors().rgb.r}, ${colors().rgb.g}, ${colors().rgb.b}, ${colors().rgb.a})`,
'z-index': 2,
},
toggles: {
flex: '1',
},
hue: {
height: '10px',
position: 'relative',
'margin-bottom': props.disableAlpha ? '0px' : '8px',
},
Hue: {
'border-radius': '2px',
},
alpha: {
height: '10px',
position: 'relative',
display: props.disableAlpha ? 'none' : undefined,
},
Alpha: {
'border-radius': '2px',
},
}, props.styles);
};
return (<div style={styles().picker} class={`chrome-picker ${props.className}`}>
<div style={styles().saturation}>
<Saturation styles={styles().Saturation} hsl={colors().hsl} hsv={colors().hsv} pointer={<ChromePointerCircle />} onChange={changeColor}/>
</div>
<div style={styles().body}>
<div style={styles().controls} class="flexbox-fix">
<div style={styles().color}>
<div style={styles().swatch}>
<div style={styles().active}/>
<Checkboard renderers={props.renderers}/>
</div>
</div>
<div style={styles().toggles}>
<div style={styles().hue}>
<Hue styles={styles().Hue} hsl={colors().hsl} pointer={ChromePointer} onChange={changeColor}/>
</div>
<div style={styles().alpha}>
<Alpha direction="horizontal" styles={styles().Alpha} rgb={colors().rgb} hsl={colors().hsl} pointer={ChromePointer} renderers={props.renderers} onChange={changeColor}/>
</div>
</div>
</div>
<ChromeFields rgb={colors().rgb} hsl={colors().hsl} hex={colors().hex} view={props.defaultView} onChange={changeColor}/>
</div>
</div>);
};
export default withColorPicker(Chrome);