solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
106 lines (105 loc) • 3.32 kB
JSX
import { mergeProps } from 'solid-js';
import { EditableInput } from '../_common';
export default function CompactFields(_props) {
const props = mergeProps({}, _props);
const styles = () => {
const hex = props.hex;
return {
fields: {
display: 'flex',
'padding-bottom': '6px',
'padding-right': '5px',
position: 'relative',
},
active: {
position: 'absolute',
top: '6px',
left: '5px',
height: '9px',
width: '9px',
background: hex,
},
hexWrap: {
flex: '6',
position: 'relative',
},
hexInput: {
width: '80%',
padding: '0px',
'padding-left': '20%',
border: 'none',
outline: 'none',
background: 'none',
'font-size': '12px',
color: '#333',
height: '16px',
},
hexLabel: {
display: 'none',
},
rgbWrap: {
flex: '3',
position: 'relative',
},
rgbInput: {
width: '70%',
padding: '0px',
'padding-left': '30%',
border: 'none',
outline: 'none',
background: 'none',
'font-size': '12px',
color: '#333',
height: '16px',
},
rgbLabel: {
position: 'absolute',
top: '3px',
left: '0px',
'line-height': '16px',
'text-transform': 'uppercase',
'font-size': '12px',
color: '#999',
},
};
};
const handleChange = (data, e) => {
if (data.r || data.g || data.b) {
props.onChange({
r: data.r || props.rgb.r,
g: data.g || props.rgb.g,
b: data.b || props.rgb.b,
source: 'rgb',
}, e);
}
else {
props.onChange({
hex: data.hex,
source: 'hex',
}, e);
}
};
return (<div style={styles().fields} class="flexbox-fix">
<div style={styles().active}/>
<EditableInput styles={{
wrap: styles().hexWrap,
input: styles().hexInput,
label: styles().hexLabel,
}} label="hex" value={props.hex} onChange={handleChange}/>
<EditableInput styles={{
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel,
}} label="r" value={props.rgb.r} onChange={handleChange}/>
<EditableInput styles={{
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel,
}} label="g" value={props.rgb.g} onChange={handleChange}/>
<EditableInput styles={{
wrap: styles().rgbWrap,
input: styles().rgbInput,
label: styles().rgbLabel,
}} label="b" value={props.rgb.b} onChange={handleChange}/>
</div>);
}