solid-color/dist/source/components/google/GoogleFields.jsx

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

import { createEffect, createSignal, mergeProps } from 'solid-js';
import * as color from '../../helpers/color';
import { EditableInput } from '../_common';
export default function GoogleFields(_props) {
    const props = mergeProps({}, _props);
    const [rgbValue, setRgbValue] = createSignal('');
    const [hslValue, setHslValue] = createSignal('');
    const [hsvValue, setHsvValue] = createSignal('');
    createEffect(() => {
        setRgbValue(`${props.rgb.r}, ${props.rgb.g}, ${props.rgb.b}`);
        setHslValue(`${Math.round(props.hsl.h)}°, ${Math.round(props.hsl.s * 100)}%, ${Math.round(props.hsl.l * 100)}%`);
        setHsvValue(`${Math.round(props.hsv.h)}°, ${Math.round(props.hsv.s * 100)}%, ${Math.round(props.hsv.v * 100)}%`);
    }, [props.rgb, props.hsl, props.hsv]);
    const handleChange = (data, e) => {
        if (data.hex) {
            color.isValidHex(data.hex) &&
                props.onChange({
                    hex: data.hex,
                    source: 'hex',
                }, e);
        }
        else if (data.rgb) {
            const values = data.rgb.split(',');
            color.isvalidColorString(data.rgb, 'rgb') &&
                props.onChange({
                    r: values[0],
                    g: values[1],
                    b: values[2],
                    a: 1,
                    source: 'rgb',
                }, e);
        }
        else if (data.hsv) {
            const values = data.hsv.split(',');
            if (color.isvalidColorString(data.hsv, 'hsv')) {
                values[2] = values[2].replace('%', '');
                values[1] = values[1].replace('%', '');
                values[0] = values[0].replace('°', '');
                if (values[1] == 1) {
                    values[1] = 0.01;
                }
                else if (values[2] == 1) {
                    values[2] = 0.01;
                }
                props.onChange({
                    h: Number(values[0]),
                    s: Number(values[1]),
                    v: Number(values[2]),
                    source: 'hsv',
                }, e);
            }
        }
        else if (data.hsl) {
            const values = data.hsl.split(',');
            if (color.isvalidColorString(data.hsl, 'hsl')) {
                values[2] = values[2].replace('%', '');
                values[1] = values[1].replace('%', '');
                values[0] = values[0].replace('°', '');
                // @ts-ignore
                if (props.hsvValue[1] == 1) {
                    // @ts-ignore
                    hsvValue[1] = 0.01;
                    // @ts-ignore
                }
                else if (hsvValue[2] == 1) {
                    // @ts-ignore
                    hsvValue[2] = 0.01;
                }
                props.onChange({
                    h: Number(values[0]),
                    s: Number(values[1]),
                    v: Number(values[2]),
                    source: 'hsl',
                }, e);
            }
        }
    };
    const styles = {
        wrap: {
            display: 'flex',
            height: '100px',
            'margin-top': '4px',
        },
        fields: {
            width: '100%',
        },
        column: {
            'padding-top': '10px',
            display: 'flex',
            'justify-content': 'space-between',
        },
        double: {
            padding: '0px 4.4px',
            'box-sizing': 'border-box',
        },
        input: {
            width: '100%',
            height: '38px',
            'box-sizing': 'border-box',
            padding: '4px 10% 3px',
            'text-align': 'center',
            border: '1px solid #dadce0',
            'font-size': '11px',
            'text-transform': 'lowercase',
            'border-radius': '5px',
            outline: 'none',
            'font-family': 'Roboto,Arial,sans-serif',
        },
        input2: {
            height: '38px',
            width: '100%',
            border: '1px solid #dadce0',
            'box-sizing': 'border-box',
            'font-size': '11px',
            'text-transform': 'lowercase',
            'border-radius': '5px',
            outline: 'none',
            'padding-left': '10px',
            'font-family': 'Roboto,Arial,sans-serif',
        },
        label: {
            'text-align': 'center',
            'font-size': '12px',
            background: '#fff',
            position: 'absolute',
            'text-transform': 'uppercase',
            color: '#3c4043',
            width: '35px',
            top: '-6px',
            left: '0',
            right: '0',
            'margin-left': 'auto',
            'margin-right': 'auto',
            'font-family': 'Roboto,Arial,sans-serif',
        },
        label2: {
            left: '10px',
            'text-align': 'center',
            'font-size': '12px',
            background: '#fff',
            position: 'absolute',
            'text-transform': 'uppercase',
            color: '#3c4043',
            width: '32px',
            top: '-6px',
            'font-family': 'Roboto,Arial,sans-serif',
        },
        single: {
            'flex-grow': 1,
            margin: '0px 4.4px',
        },
    };
    return (<div style={styles.wrap} class="flexbox-fix">
      <div style={styles.fields}>
        <div style={styles.double}>
          <EditableInput styles={{ input: styles.input, label: styles.label }} label="hex" value={props.hex} onChange={handleChange}/>
        </div>
        <div style={styles.column}>
          <div style={styles.single}>
            <EditableInput styles={{ input: styles.input2, label: styles.label2 }} label="rgb" value={rgbValue()} onChange={handleChange}/>
          </div>
          <div style={styles.single}>
            <EditableInput styles={{ input: styles.input2, label: styles.label2 }} label="hsv" value={hsvValue()} onChange={handleChange}/>
          </div>
          <div style={styles.single}>
            <EditableInput styles={{ input: styles.input2, label: styles.label2 }} label="hsl" value={hslValue()} onChange={handleChange}/>
          </div>
        </div>
      </div>
    </div>);
}