solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
101 lines (99 loc) • 3.67 kB
JSX
import { merge } from 'lodash-es';
import { createSignal, mergeProps } from 'solid-js';
import { Hue, Saturation, useColorPicker, withColorPicker } from '../_common';
import PhotoshopButton from './PhotoshopButton';
import PhotoshopFields from './PhotoshopFields';
import PhotoshopPointer from './PhotoshopPointer';
import PhotoshopPointerCircle from './PhotoshopPointerCircle';
import PhotoshopPreviews from './PhotoshopPreviews';
function Photoshop(_props) {
const props = mergeProps({
header: 'Color Picker',
styles: {},
className: '',
}, _props);
const { colors, changeColor } = useColorPicker();
const [currentColor, setCurrentColor] = createSignal(colors().hex);
const styles = merge({
picker: {
background: '#DCDCDC',
'border-radius': '4px',
'box-shadow': '0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)',
'box-sizing': 'initial',
width: '513px',
},
head: {
'background-image': 'linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)',
'border-bottom': '1px solid #B1B1B1',
'box-shadow': 'inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)',
height: '23px',
'line-height': '24px',
'border-radius': '4px 4px 0 0',
'font-size': '13px',
color: '#4D4D4D',
'text-align': 'center',
},
body: {
padding: '15px 15px 0',
display: 'flex',
},
saturation: {
width: '256px',
height: '256px',
position: 'relative',
border: '2px solid #B3B3B3',
'border-bottom': '2px solid #F0F0F0',
overflow: 'hidden',
},
hue: {
position: 'relative',
height: '256px',
width: '19px',
'margin-left': '10px',
border: '2px solid #B3B3B3',
'border-bottom': '2px solid #F0F0F0',
},
controls: {
width: '180px',
'margin-left': '10px',
},
top: {
display: 'flex',
},
previews: {
width: '60px',
},
actions: {
flex: '1',
'margin-left': '20px',
},
}, props.styles);
function handleAccept() {
props.onAccept && props.onAccept();
setCurrentColor(colors().hex);
}
return (<div style={styles.picker} class={`photoshop-picker ${props.className}`}>
<div style={styles.head}>{props.header}</div>
<div style={styles.body} class="flexbox-fix">
<div style={styles.saturation}>
<Saturation hsl={colors().hsl} hsv={colors().hsv} pointer={<PhotoshopPointerCircle hsl={colors().hsl}/>} onChange={changeColor}/>
</div>
<div style={styles.hue}>
<Hue direction="vertical" hsl={colors().hsl} pointer={PhotoshopPointer} onChange={changeColor}/>
</div>
<div style={styles.controls}>
<div style={styles.top} class="flexbox-fix">
<div style={styles.previews}>
<PhotoshopPreviews rgb={colors().rgb} currentColor={currentColor()}/>
</div>
<div style={styles.actions}>
<PhotoshopButton label="OK" onClick={handleAccept} active/>
<PhotoshopButton label="Cancel" onClick={props.onCancel}/>
<PhotoshopFields onChange={changeColor} rgb={colors().rgb} hsv={colors().hsv} hex={colors().hex}/>
</div>
</div>
</div>
</div>
</div>);
}
export default withColorPicker(Photoshop);