solid-color/dist/source/components/sketch/SketchFields.jsx

<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>

import { mergeProps } from 'solid-js';
import * as color from '../../helpers/color';
import { EditableInput } from '../_common';
export const SketchFields = (_props) => {
    const props = mergeProps({
        onChange: () => { },
    }, _props);
    const styles = () => {
        return {
            fields: {
                display: 'flex',
                'padding-top': '4px',
            },
            single: {
                flex: '1',
                'padding-left': '6px',
            },
            alpha: {
                flex: '1',
                'padding-left': '6px',
                display: props.disableAlpha ? 'none' : undefined,
            },
            double: {
                flex: '2',
            },
            input: {
                width: '80%',
                padding: '4px 10% 3px',
                border: 'none',
                'box-shadow': 'inset 0 0 0 1px #ccc',
                'font-size': '11px',
            },
            label: {
                display: 'block',
                'text-align': 'center',
                'font-size': '11px',
                color: '#222',
                'padding-top': '3px',
                'padding-bottom': '4px',
                'text-transform': 'capitalize',
            },
        };
    };
    const handleChange = (data, e) => {
        if (typeof data !== 'string' && 'hex' in data) {
            color.isValidHex(data.hex) &&
                props.onChange({
                    hex: data.hex,
                    source: 'hex',
                }, e);
        }
        else if (typeof data !== 'string' && ('r' in data || 'g' in data || 'b' in data)) {
            props.onChange({
                r: data.r || props.rgb.r,
                g: data.g || props.rgb.g,
                b: data.b || props.rgb.b,
                a: props.rgb.a,
                source: 'rgb',
            }, e);
        }
        else if (typeof data !== 'string' && data.a) {
            if (data.a < 0) {
                data.a = 0;
            }
            else if (data.a > 100) {
                data.a = 100;
            }
            data.a /= 100;
            props.onChange({
                h: props.hsl.h,
                s: props.hsl.s,
                l: props.hsl.l,
                a: data.a,
                source: 'rgb',
            }, e);
        }
    };
    return (<div style={styles().fields} class="flexbox-fix">
      <div style={styles().double}>
        <EditableInput styles={{ input: styles().input, label: styles().label }} label="hex" value={props.hex.replace('#', '')} onChange={handleChange}/>
      </div>
      <div style={styles().single}>
        <EditableInput styles={{ input: styles().input, label: styles().label }} label="r" value={props.rgb.r} onChange={handleChange} dragLabel={true} dragMax={255}/>
      </div>
      <div style={styles().single}>
        <EditableInput styles={{ input: styles().input, label: styles().label }} label="g" value={props.rgb.g} onChange={handleChange} dragLabel={true} dragMax={255}/>
      </div>
      <div style={styles().single}>
        <EditableInput styles={{ input: styles().input, label: styles().label }} label="b" value={props.rgb.b} onChange={handleChange} dragLabel={true} dragMax={255}/>
      </div>
      <div style={styles().alpha}>
        <EditableInput styles={{ input: styles().input, label: styles().label }} label="a" value={Math.round((props.rgb.a ?? 1) * 100)} onChange={handleChange} dragLabel={true} dragMax={100}/>
      </div>
    </div>);
};
export default SketchFields;