solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
125 lines (124 loc) • 4.55 kB
JSX
import merge from 'lodash-es/merge';
import { For, mergeProps } from 'solid-js';
import * as color from '../../helpers/color';
import { EditableInput, Swatch, useColorPicker, withColorPicker } from '../_common';
export const Twitter = (_props) => {
const props = mergeProps({
colors: [
'#FF6900',
'#FCB900',
'#7BDCB5',
'#00D084',
'#8ED1FC',
'#0693E3',
'#ABB8C3',
'#EB144C',
'#F78DA7',
'#9900EF',
],
width: 276,
triangle: 'top-left',
styles: {},
className: '',
}, _props);
const { colors: currentColors, changeColor } = useColorPicker();
const styles = () => {
const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
const { triangle } = props;
return merge({
card: {
width,
background: '#fff',
border: '0 solid rgba(0,0,0,0.25)',
'box-shadow': '0 1px 4px rgba(0,0,0,0.25)',
'border-radius': '4px',
position: 'relative',
},
body: {
padding: '15px 9px 9px 15px',
},
label: {
'font-size': '18px',
color: '#fff',
},
triangle: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 9px 10px 9px',
'border-color': 'transparent transparent #fff transparent',
position: 'absolute',
display: triangle === 'hide' ? 'none' : undefined,
top: triangle === 'top-left' || triangle === 'top-right' ? '-10px' : undefined,
left: triangle === 'top-left' || triangle === 'top-right' ? '12px' : undefined,
},
triangleShadow: {
width: '0px',
height: '0px',
'border-style': 'solid',
'border-width': '0 9px 10px 9px',
'border-color': 'transparent transparent rgba(0,0,0,.1) transparent',
position: 'absolute',
display: triangle === 'hide' ? 'none' : undefined,
top: triangle === 'top-left' || triangle === 'top-right' ? '-11px' : undefined,
left: triangle === 'top-left' || triangle === 'top-right' ? '12px' : undefined,
},
hash: {
background: '#F0F0F0',
height: '30px',
width: '30px',
'border-radius': '4px 0 0 4px',
float: 'left',
color: '#98A1A4',
display: 'flex',
'align-items': 'center',
'justify-content': 'center',
},
input: {
width: '100px',
'font-size': '14px',
color: '#666',
border: '0px',
outline: 'none',
height: '28px',
'box-shadow': 'inset 0 0 0 1px #F0F0F0',
'box-sizing': 'content-box',
'border-radius': '0 4px 4px 0',
float: 'left',
'padding-left': '8px',
},
swatch: {
width: '30px',
height: '30px',
float: 'left',
'border-radius': '4px',
margin: '0 6px 6px 0',
},
clear: {
clear: 'both',
},
}, props.styles);
};
const handleChange = (hexcode, e) => {
color.isValidHex(hexcode) &&
changeColor({
hex: hexcode,
source: 'hex',
}, e);
};
return (<div style={styles().card} class={`twitter-picker ${props.className}`}>
<div style={styles().triangleShadow}/>
<div style={styles().triangle}/>
<div style={styles().body}>
<For each={props.colors}>
{(c) => (<Swatch color={c} styles={styles().swatch} onClick={handleChange} focusStyle={{
'box-shadow': `0 0 4px ${c}`,
}}/>)}
</For>
<div style={styles().hash}>#</div>
<EditableInput label={''} styles={{ input: styles().input }} value={currentColors().hex.replace('#', '')} onChange={handleChange}/>
<div style={styles().clear}/>
</div>
</div>);
};
export default withColorPicker(Twitter);