react-science 0.19.1

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -0,0 +1,236 @@
+import lodashDebounce from 'lodash/debounce';
+import { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
+
+import { defaultColorPalette } from '../palette';
+
+import { Saturation, Hue, Alpha, CheckBoard } from './common';
+import * as colorHelper from './helpers/color';
+import SketchFields from './sketch/SketchFields';
+import SketchPresetColors from './sketch/SketchPresetColors';
+
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+export interface HSL {
+  h: number;
+  l: number;
+  s: number;
+  a: number;
+}
+export interface HSV {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+}
+
+interface ChangeCallbackProps {
+  hex: string;
+  hsl: HSL;
+  hsv: HSV;
+  oldHue: number;
+  rgb: RGB;
+  source: 'hsv' | 'hsl' | 'rgb' | 'hex';
+}
+
+export interface ColorPickerProps {
+  width?: string | number;
+  className?: string;
+  presetColors?: string[];
+  color?:
+    | {
+        hex: string;
+      }
+    | RGB
+    | HSL
+    | HSV;
+  disableAlpha?: boolean;
+  onChange?: (props: ChangeCallbackProps, event?: Event) => void;
+  onChangeComplete?: (props: ChangeCallbackProps, event?: Event) => void;
+  onSwatchHover?: (props: ChangeCallbackProps, event?: Event) => void;
+  style?: CSSProperties;
+}
+
+const defaultColor = {
+  h: 250,
+  s: 0.5,
+  l: 0.2,
+  a: 1,
+};
+
+const styles: Record<
+  | 'controls'
+  | 'sliders'
+  | 'saturationContainer'
+  | 'hueContainer'
+  | 'hueElement'
+  | 'alphaElement',
+  CSSProperties
+> &
+  Record<
+    'picker' | 'color' | 'activeColor' | 'alphaContainer',
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (...args: any) => CSSProperties
+  > = {
+  picker: (width: number | string) => ({
+    width: typeof width === 'string' ? width : `${width}px`,
+    padding: '10px 10px 0',
+    boxSizing: 'initial',
+    background: '#fff',
+    borderRadius: '4px',
+    boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
+  }),
+  controls: {
+    display: 'flex',
+  },
+  sliders: {
+    padding: '4px 0',
+    flex: '1',
+  },
+  color: (disableAlpha: boolean) => ({
+    width: '24px',
+    height: disableAlpha ? '10px' : '24px',
+    position: 'relative',
+    marginTop: '4px',
+    marginLeft: '4px',
+    borderRadius: '3px',
+  }),
+  activeColor: (rgb: RGB) => ({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: '2px',
+    background: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`,
+    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+  }),
+
+  saturationContainer: {
+    width: '100%',
+    paddingBottom: '75%',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+
+  hueContainer: {
+    position: 'relative',
+    height: '10px',
+    overflow: 'hidden',
+  },
+  hueElement: {
+    borderRadius: '2px',
+    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+  },
+  alphaContainer: (disableAlpha: boolean) => ({
+    position: 'relative',
+    height: '10px',
+    marginTop: '4px',
+    overflow: 'hidden',
+    ...(disableAlpha && { display: 'none' }),
+  }),
+  alphaElement: {
+    borderRadius: '2px',
+    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+  },
+};
+
+export function ColorPicker(props: ColorPickerProps) {
+  const {
+    width = 200,
+    onChange,
+    onSwatchHover,
+    disableAlpha = false,
+    presetColors = defaultColorPalette,
+    className = '',
+    color = defaultColor,
+    onChangeComplete,
+    style = {},
+  } = props;
+
+  const [state, setState] = useState(colorHelper.toState(color, 0));
+
+  const debounce = useRef(
+    lodashDebounce((fn: any, data: ChangeCallbackProps, event: Event) => {
+      fn(data, event);
+    }, 100),
+  ).current;
+
+  useEffect(() => {
+    setState((prevState) => colorHelper.toState(color, prevState.oldHue));
+  }, [color]);
+
+  const handleChange = useCallback(
+    (data: any, event: any) => {
+      const isValidColor = colorHelper.simpleCheckForValidColor(data);
+      if (isValidColor) {
+        const colors = colorHelper.toState(data, data.h || state.oldHue);
+        setState(colors);
+        if (onChangeComplete) {
+          debounce(onChangeComplete, colors, event);
+        }
+        if (onChange) {
+          onChange(colors, event);
+        }
+      }
+    },
+    [debounce, onChange, onChangeComplete, state.oldHue],
+  );
+
+  const handleSwatchHover = useCallback(
+    (data: any, event: any) => {
+      const isValidColor = colorHelper.simpleCheckForValidColor(data);
+      if (isValidColor) {
+        const colors = colorHelper.toState(data, data.h || state.oldHue);
+        if (onSwatchHover) {
+          onSwatchHover(colors, event);
+        }
+      }
+    },
+    [onSwatchHover, state.oldHue],
+  );
+  const { rgb, hex, hsv, hsl } = state;
+
+  return (
+    <div style={{ ...styles.picker(width), ...style }} className={className}>
+      <div style={styles.saturationContainer}>
+        <Saturation hsl={hsl} hsv={hsv} onChange={handleChange} />
+      </div>
+      <div style={styles.controls}>
+        <div style={styles.sliders}>
+          <div style={styles.hueContainer}>
+            <Hue style={styles.hueElement} hsl={hsl} onChange={handleChange} />
+          </div>
+          <div style={styles.alphaContainer(disableAlpha)}>
+            <Alpha
+              style={styles.alphaElement}
+              rgb={rgb}
+              hsl={hsl}
+              onChange={handleChange}
+            />
+          </div>
+        </div>
+        <div style={styles.color(disableAlpha)}>
+          <CheckBoard />
+          <div style={styles.activeColor(rgb)} />
+        </div>
+      </div>
+
+      <SketchFields
+        hsl={hsl}
+        hex={hex}
+        rgb={rgb}
+        onChange={handleChange}
+        disableAlpha={disableAlpha}
+      />
+      <SketchPresetColors
+        colors={presetColors}
+        onClick={(data, e) => handleChange?.(data as ChangeCallbackProps, e)}
+        onSwatchHover={handleSwatchHover}
+      />
+    </div>
+  );
+}

package/src/components/color-picker/react-color/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Case Sandberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/components/color-picker/react-color/common/Alpha.jsx

@@ -0,0 +1,120 @@
+import { useCallback, useRef } from 'react';
+
+import * as alpha from '../helpers/alpha';
+
+import CheckBoard from './CheckBoard';
+import { useOnChange } from './useOnChange';
+
+const styles = {
+  alpha: (borderRadius) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius,
+  }),
+  checkerboard: (borderRadius) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    borderRadius,
+  }),
+  gradient: (direction, boxShadow, borderRadius, rgb) => {
+    let gradientDirection = 'right';
+
+    if (direction === 'vertical') {
+      gradientDirection = 'bottom';
+    }
+
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      boxShadow,
+      borderRadius,
+      background: `linear-gradient(to ${gradientDirection}, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
+      rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
+    };
+  },
+  container: {
+    position: 'relative',
+    height: '100%',
+    margin: '0 3px',
+  },
+  pointer: (direction, rgb) => {
+    if (direction === 'vertical') {
+      return {
+        position: 'absolute',
+        left: 0,
+        top: `${rgb.a * 100}%`,
+      };
+    }
+
+    return {
+      position: 'absolute',
+      left: `${rgb.a * 100}%`,
+    };
+  },
+  slider: {
+    width: '4px',
+    borderRadius: '1px',
+    height: '8px',
+    boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+    background: '#fff',
+    marginTop: '1px',
+    transform: 'translateX(-2px)',
+  },
+};
+
+const Alpha = (props) => {
+  const containerRef = useRef();
+  const handleChange = useCallback(
+    (e) => {
+      const change = alpha.calculateChange(
+        e,
+        props.hsl,
+        props.direction,
+        props.a,
+        containerRef.current,
+      );
+      if (change && typeof props.onChange === 'function') {
+        props.onChange(change, e);
+      }
+    },
+    [props],
+  );
+  const mouseDownHandler = useOnChange(handleChange);
+  const rgb = props.rgb;
+  const { borderRadius, boxShadow, direction } = props.style;
+  return (
+    <div style={styles.alpha(borderRadius)}>
+      <div style={styles.checkerboard(borderRadius)}>
+        <CheckBoard renderers={props.renderers} />
+      </div>
+      <div style={styles.gradient(direction, boxShadow, borderRadius, rgb)} />
+      <div
+        style={styles.container}
+        ref={containerRef}
+        onMouseDown={mouseDownHandler}
+        onTouchMove={handleChange}
+        onTouchStart={handleChange}
+      >
+        <div style={styles.pointer(direction, rgb)}>
+          {props.pointer ? (
+            <props.pointer {...props} />
+          ) : (
+            <div style={styles.slider} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Alpha;

package/src/components/color-picker/react-color/common/CheckBoard.jsx

@@ -0,0 +1,47 @@
+import { cloneElement, isValidElement } from 'react';
+
+import * as checkBoard from '../helpers/checkBoard';
+
+const styles = {
+  grid: (props) => {
+    const {
+      size = 8,
+      white = 'transparent',
+      grey = 'rgba(0,0,0,.08)',
+      renderers = {},
+      borderRadius,
+      boxShadow,
+    } = props;
+
+    return {
+      borderRadius,
+      boxShadow,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `url(${checkBoard.get(
+        white,
+        grey,
+        size,
+        renderers.canvas,
+      )}) center left`,
+    };
+  },
+};
+
+const CheckBoard = (props) => {
+  const { children } = props;
+
+  if (!isValidElement(children)) {
+    return <div style={styles.grid(props)} />;
+  }
+
+  return cloneElement(children, {
+    ...children.props,
+    style: { ...children.props.style, ...styles.grid(props) },
+  });
+};
+
+export default CheckBoard;

package/src/components/color-picker/react-color/common/EditableInput.jsx

@@ -0,0 +1,160 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const DEFAULT_ARROW_OFFSET = 1;
+
+const UP_KEY_CODE = 38;
+const DOWN_KEY_CODE = 40;
+const VALID_KEY_CODES = new Set([UP_KEY_CODE, DOWN_KEY_CODE]);
+const isValidKeyCode = (keyCode) => VALID_KEY_CODES.has(keyCode);
+const getNumberValue = (value) => Number(String(value).replace(/%/g, ''));
+
+let idCounter = 1;
+
+const styles = {
+  wrap: {
+    position: 'relative',
+  },
+};
+
+const EditableInput = (props) => {
+  const [state, setState] = useState({
+    value: String(props.value).toUpperCase(),
+    blurValue: String(props.value).toUpperCase(),
+  });
+  const inputRef = useRef();
+  const valueRef = useRef(props.value);
+
+  const inputId = useRef(`rc-editable-input-${idCounter++}`).current;
+
+  useEffect(() => {
+    valueRef.current = props.value;
+    if (inputRef.current === document.activeElement) {
+      setState({ blurValue: String(props.value).toUpperCase() });
+    } else {
+      setState((prevState) => ({
+        value: String(props.value).toUpperCase(),
+        blurValue: !prevState.blurValue && String(props.value).toUpperCase(),
+      }));
+    }
+  }, [props.value]);
+
+  const getValueObjectWithLabel = useCallback(
+    (value) => {
+      return {
+        [props.label]: value,
+      };
+    },
+    [props.label],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (state.blurValue) {
+      setState({ value: state.blurValue, blurValue: null });
+    }
+  }, [state.blurValue]);
+
+  const setUpdatedValue = useCallback(
+    (value, e) => {
+      const onChangeValue = props.label
+        ? getValueObjectWithLabel(value)
+        : value;
+      if (props.onChange) {
+        props.onChange(onChangeValue, e);
+      }
+
+      setState({ value });
+    },
+    [getValueObjectWithLabel, props],
+  );
+  const handleChange = useCallback(
+    (e) => {
+      setUpdatedValue(e.target.value, e);
+    },
+    [setUpdatedValue],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      // In case `e.target.value` is a percentage remove the `%` character
+      // and update accordingly with a percentage
+      // https://github.com/casesandberg/react-color/issues/383
+      const value = getNumberValue(e.target.value);
+      const offset = props.arrowOffset || DEFAULT_ARROW_OFFSET;
+      if (!Number.isNaN(value) && isValidKeyCode(e.keyCode)) {
+        const updatedValue =
+          e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
+
+        setUpdatedValue(updatedValue, e);
+      }
+    },
+    [props.arrowOffset, setUpdatedValue],
+  );
+
+  const handleDrag = useCallback(
+    (e) => {
+      if (props.dragLabel) {
+        const newValue = Math.round(valueRef.current + e.movementX);
+        if (newValue >= 0 && newValue <= props.dragMax) {
+          valueRef.current = newValue;
+
+          if (props.onChange) {
+            props.onChange(getValueObjectWithLabel(newValue), e);
+          }
+        }
+      }
+    },
+    [props, getValueObjectWithLabel],
+  );
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      function mouseUp() {
+        window.removeEventListener('mousemove', handleDrag);
+        window.removeEventListener('mouseup', mouseUp);
+      }
+
+      if (props.dragLabel) {
+        e.preventDefault();
+        handleDrag(e);
+        window.addEventListener('mousemove', handleDrag);
+        window.addEventListener('mouseup', mouseUp);
+      }
+    },
+    [handleDrag, props.dragLabel],
+  );
+
+  const { wrap = {}, input = {}, label = {} } = props.style || {};
+
+  return (
+    <div style={{ ...styles.wrap, ...wrap }}>
+      <input
+        id={inputId}
+        style={input}
+        ref={inputRef}
+        value={state.value}
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        placeholder={props.placeholder}
+        spellCheck="false"
+      />
+      {props.label && !props.hideLabel ? (
+        <label
+          htmlFor={inputId}
+          style={{
+            ...label,
+            ...(props.dragLabel === 'true' && {
+              cursor: 'ew-resize',
+              userSelect: 'none',
+            }),
+          }}
+          onMouseDown={handleMouseDown}
+        >
+          {props.label}
+        </label>
+      ) : null}
+    </div>
+  );
+};
+
+export default EditableInput;

package/src/components/color-picker/react-color/common/Hue.jsx

@@ -0,0 +1,102 @@
+import { useCallback, useRef } from 'react';
+
+import * as hue from '../helpers/hue';
+
+import { useOnChange } from './useOnChange';
+
+const styles = {
+  hue: (borderRadius, boxShadow) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius,
+    boxShadow,
+  }),
+  container: (direction, borderRadius) => {
+    let gradientDirection = 'right';
+
+    if (direction === 'vertical') {
+      gradientDirection = 'bottom';
+    }
+    return {
+      padding: '0 2px',
+      position: 'relative',
+      height: '100%',
+      borderRadius,
+      background: `linear-gradient(to ${gradientDirection}, #f00 0%, #ff0 17%, #0f0
+      33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)`,
+    };
+  },
+  pointer: (direction, hsl) => {
+    if (direction === 'vertical') {
+      return {
+        position: 'absolute',
+        left: 0,
+        top: `${-((hsl.h * 100) / 360) + 100}%`,
+      };
+    }
+
+    return {
+      position: 'absolute',
+      left: `${(hsl.h * 100) / 360}%`,
+    };
+  },
+
+  slider: {
+    marginTop: '1px',
+    width: '4px',
+    borderRadius: '1px',
+    height: '8px',
+    boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+    background: '#fff',
+    transform: 'translateX(-2px)',
+  },
+};
+
+const Hue = (props) => {
+  const containerRef = useRef();
+
+  const handleChange = useCallback(
+    (e) => {
+      const change = hue.calculateChange(
+        e,
+        props.direction,
+        props.hsl,
+        containerRef.current,
+      );
+      if (change && typeof props.onChange === 'function') {
+        props.onChange(change, e);
+      }
+    },
+    [props],
+  );
+
+  const handleMouseDown = useOnChange(handleChange);
+
+  const { direction = 'horizontal', hsl, style, pointer } = props;
+  const { borderRadius, boxShadow } = style;
+
+  return (
+    <div style={styles.hue(borderRadius, boxShadow)}>
+      <div
+        style={styles.container(direction, borderRadius)}
+        ref={containerRef}
+        onMouseDown={handleMouseDown}
+        onTouchMove={handleChange}
+        onTouchStart={handleChange}
+      >
+        <div style={styles.pointer(direction, hsl)}>
+          {pointer ? (
+            <props.pointer {...props} />
+          ) : (
+            <div style={styles.slider} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hue;