solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
102 lines (99 loc) • 3.47 kB
JSX
import * as color from '../../helpers/color';
import { Checkboard, EditableInput, useColorPicker, withColorPicker } from '../_common';
import BlockSwatches from './BlockSwatches';
import { mergeProps } from 'solid-js';
import { merge } from 'lodash-es';
export const Block = (_props) => {
const props = mergeProps({
colors: [
'#D9E3F0',
'#F47373',
'#697689',
'#37D67A',
'#2CCCE4',
'#555555',
'#dce775',
'#ff8a65',
'#ba68c8',
],
width: 170,
triangle: 'top',
styles: {},
className: '',
}, _props);
const { colors: currentColors, changeColor } = useColorPicker();
const transparent = currentColors().hex === 'transparent';
const handleChange = (hexCode, e) => {
color.isValidHex(hexCode) &&
changeColor({
hex: hexCode,
source: 'hex',
}, e);
};
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
const { triangle, styles } = props;
return merge({
card: {
width,
background: '#fff',
'box-shadow': '0 1px rgba(0,0,0,.1)',
'border-radius': '6px',
position: 'relative',
},
head: {
height: '110px',
background: currentColors().hex,
'border-radius': '6px 6px 0 0',
display: 'flex',
'align-items': 'center',
'justify-content': 'center',
position: 'relative',
},
body: {
padding: '10px',
},
label: {
'font-size': '18px',
color: color.getContrastingColor(currentColors().hex),
position: 'relative',
},
triangle: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 10px 10px 10px',
'border-color': `transparent transparent ${currentColors().hex} transparent`,
position: 'absolute',
top: '-10px',
left: '50%',
'margin-left': '-10px',
display: triangle === 'hide' ? 'none' : undefined,
},
input: {
width: '100%',
'font-size': '12px',
color: '#666',
border: '0px',
outline: 'none',
height: '22px',
'box-shadow': 'inset 0 0 0 1px #ddd',
'border-radius': '4px',
padding: '0 7px',
'box-sizing': 'border-box',
},
}, styles);
};
return (<div style={styles().card} class={`block-picker ${props.className}`}>
<div style={styles().triangle}/>
<div style={styles().head}>
{transparent && <Checkboard borderRadius="6px 6px 0 0"/>}
<div style={styles().label}>{currentColors().hex}</div>
</div>
<div style={styles().body}>
<BlockSwatches colors={props.colors} onClick={handleChange}/>
<EditableInput styles={{ input: styles().input }} value={currentColors().hex} onChange={handleChange}/>
</div>
</div>);
};
export default withColorPicker(Block);