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

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

import { merge } from 'lodash-es';
import { mergeProps } from 'solid-js';
import { Alpha, Checkboard, Hue, Saturation, useColorPicker, withColorPicker } from '../_common';
import SketchFields from './SketchFields';
import SketchPresetColors from './SketchPresetColors';
export function Sketch(_props) {
    const props = mergeProps({
        width: 200,
        disableAlpha: false,
        presetColors: [
            '#D0021B',
            '#F5A623',
            '#F8E71C',
            '#8B572A',
            '#7ED321',
            '#417505',
            '#BD10E0',
            '#9013FE',
            '#4A90E2',
            '#50E3C2',
            '#B8E986',
            '#000000',
            '#4A4A4A',
            '#9B9B9B',
            '#FFFFFF',
        ],
        styles: {},
        className: '',
    }, _props);
    const { colors, changeColor } = useColorPicker();
    const styles = () => {
        const width = typeof props.width === 'number' ? `${props.width}px` : props.width;
        const rgb = colors().rgb;
        return merge({
            picker: {
                width,
                padding: '10px 10px 0',
                'box-sizing': 'initial',
                background: '#fff',
                'border-radius': '4px',
                'box-shadow': '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
            },
            saturation: {
                width: '100%',
                'padding-bottom': '75%',
                position: 'relative',
                overflow: 'hidden',
            },
            Saturation: {
                'border-radius': '3px',
                'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            controls: {
                display: 'flex',
            },
            sliders: {
                padding: '4px 0',
                flex: '1',
            },
            color: {
                width: '24px',
                height: props.disableAlpha ? '10px' : '24px',
                position: 'relative',
                'margin-top': '4px',
                'margin-left': '4px',
                'border-radius': '3px',
            },
            activeColor: {
                position: 'absolute',
                inset: '0px',
                'border-radius': '2px',
                background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
                'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            hue: {
                position: 'relative',
                height: '10px',
                overflow: 'hidden',
            },
            Hue: {
                'border-radius': '2px',
                'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            alpha: {
                position: 'relative',
                height: '10px',
                'margin-top': '4px',
                overflow: 'hidden',
                display: props.disableAlpha ? 'none' : undefined,
            },
            Alpha: {
                'border-radius': '2px',
                'box-shadow': 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            ...props.styles,
        }, props.styles);
    };
    return (<div style={styles().picker} class={`sketch-picker ${props.className}`}>
      <div style={styles().saturation}>
        <Saturation styles={styles().Saturation} hsl={colors().hsl} hsv={colors().hsv} onChange={changeColor}/>
      </div>
      <div style={styles().controls} class="flexbox-fix">
        <div style={styles().sliders}>
          <div style={styles().hue}>
            <Hue styles={styles().Hue} hsl={colors().hsl} onChange={changeColor}/>
          </div>
          <div style={styles().alpha}>
            <Alpha direction="horizontal" styles={styles().Alpha} rgb={colors().rgb} hsl={colors().hsl} renderers={props.renderers} onChange={changeColor}/>
          </div>
        </div>
        <div style={styles().color}>
          <Checkboard />
          <div style={styles().activeColor}/>
        </div>
      </div>

      <SketchFields rgb={colors().rgb} hsl={colors().hsl} hex={colors().hex} onChange={changeColor} disableAlpha={props.disableAlpha}/>
      <SketchPresetColors colors={props.presetColors} onClick={changeColor}/>
    </div>);
}
export default withColorPicker(Sketch);