react-science 0.19.1

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

@@ -0,0 +1,100 @@
+import lodashThrottle from 'lodash/throttle';
+import { useCallback, useRef } from 'react';
+
+import * as saturation from '../helpers/saturation';
+
+import { useOnChange } from './useOnChange';
+
+const styles = {
+  color: (hsl) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `hsl(${hsl.h},100%, 50%)`,
+    userDraggle: 'none',
+    userSelect: 'none',
+  }),
+  white: () => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(to right, #fff, rgba(255,255,255,0))`,
+  }),
+  black: () => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(to top, #000, rgba(0,0,0,0))`,
+  }),
+  pointer: (hsv) => ({
+    position: 'absolute',
+    top: `${-(hsv.v * 100) + 100}%`,
+    left: `${hsv.s * 100}%`,
+    cursor: 'default',
+  }),
+  circle: {
+    width: '4px',
+    height: '4px',
+    boxShadow: `0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
+          0 0 1px 2px rgba(0,0,0,.4)`,
+    borderRadius: '50%',
+    cursor: 'hand',
+    transform: 'translate(-2px, -2px)',
+  },
+};
+
+const Saturation = (props) => {
+  const { onChange, hsl, hsv, pointer } = props;
+
+  const throttle = useRef(
+    lodashThrottle((fn, data, e) => {
+      fn(data, e);
+    }, 50),
+  ).current;
+
+  const containerRef = useRef();
+
+  const handleChange = useCallback(
+    (e) => {
+      if (onChange && typeof onChange === 'function') {
+        throttle(
+          onChange,
+          saturation.calculateChange(e, hsl, containerRef.current),
+          e,
+        );
+      }
+    },
+    [hsl, onChange, throttle],
+  );
+
+  const handleMouseDown = useOnChange(handleChange);
+
+  return (
+    <div
+      style={styles.color(hsl)}
+      ref={containerRef}
+      onMouseDown={handleMouseDown}
+      onTouchMove={handleChange}
+      onTouchStart={handleChange}
+    >
+      <div style={styles.white()}>
+        <div style={styles.black()} />
+        <div style={styles.pointer(hsv)}>
+          {pointer ? (
+            <props.pointer {...props} />
+          ) : (
+            <div style={styles.circle} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Saturation;

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

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import CheckBoard from './CheckBoard';
+import { handleFocus } from './interaction';
+
+// interface SwatchProps {
+//   color: string;
+//   style: any;
+//   onClick: (color: string, event: MouseEvent<HTMLDivElement>) => void;
+//   onHover?: (color: string, event: Event) => void;
+//   title: string;
+//   focus: boolean;
+//   focusStyle: any;
+//   children: ReactNode;
+// }
+const styles = {
+  height: '100%',
+  width: '100%',
+  cursor: 'pointer',
+  position: 'relative',
+  outline: 'none',
+};
+
+export const Swatch = ({
+  color,
+  style,
+  onClick,
+  onHover,
+  title = color,
+  children,
+  focus,
+  focusStyle = {},
+}) => {
+  const transparent = color === 'transparent';
+
+  const handleClick = useCallback((e) => onClick?.(color, e), [color, onClick]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key.toLowerCase() === 'enter') {
+        onClick?.(color, e);
+      }
+    },
+    [color, onClick],
+  );
+  const handleHover = useCallback((e) => onHover?.(color, e), [color, onHover]);
+
+  const optionalEvents = {};
+  if (onHover) {
+    optionalEvents.onMouseOver = handleHover;
+  }
+
+  return (
+    <div
+      style={{
+        ...styles,
+        background: color,
+        ...style,
+        ...(focus ? focusStyle : {}),
+      }}
+      onClick={handleClick}
+      title={title}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      {...optionalEvents}
+    >
+      {children}
+      {transparent && (
+        <CheckBoard
+          borderRadius={style.borderRadius}
+          boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
+        />
+      )}
+    </div>
+  );
+};
+
+export default handleFocus(Swatch);

package/src/components/color-picker/react-color/common/index.js

@@ -0,0 +1,6 @@
+export { default as Alpha } from './Alpha';
+export { default as CheckBoard } from './CheckBoard';
+export { default as EditableInput } from './EditableInput';
+export { default as Saturation } from './Saturation';
+export { default as Hue } from './Hue';
+export { default as Swatch } from './Swatch';

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

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+
+export const handleFocus = (WrappedComponent, Span = 'span') =>
+  class Focus extends Component {
+    state = { focus: false };
+    handleFocus = () => this.setState({ focus: true });
+    handleBlur = () => this.setState({ focus: false });
+
+    render() {
+      return (
+        <Span onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <WrappedComponent {...this.props} {...this.state} />
+        </Span>
+      );
+    }
+  };

package/src/components/color-picker/react-color/common/useOnChange.tsx

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+export function useOnChange(
+  onChange: (event: Event) => void,
+): (event: Event) => void {
+  return useCallback(
+    (e) => {
+      onChange(e);
+
+      function handleMouseUp() {
+        window.removeEventListener('mousemove', onChange);
+        window.removeEventListener('mouseup', handleMouseUp);
+      }
+
+      window.addEventListener('mousemove', onChange);
+      window.addEventListener('mouseup', handleMouseUp);
+    },
+    [onChange],
+  );
+}

package/src/components/color-picker/react-color/helpers/alpha.js

@@ -0,0 +1,50 @@
+export function calculateChange(e, hsl, direction, initialA, container) {
+  const containerWidth = container.clientWidth;
+  const containerHeight = container.clientHeight;
+  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  const left =
+    x - (container.getBoundingClientRect().left + window.pageXOffset);
+  const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (direction === 'vertical') {
+    let a;
+    if (top < 0) {
+      a = 0;
+    } else if (top > containerHeight) {
+      a = 1;
+    } else {
+      a = Math.round((top * 100) / containerHeight) / 100;
+    }
+
+    if (hsl.a !== a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a,
+        source: 'rgb',
+      };
+    }
+  } else {
+    let a;
+    if (left < 0) {
+      a = 0;
+    } else if (left > containerWidth) {
+      a = 1;
+    } else {
+      a = Math.round((left * 100) / containerWidth) / 100;
+    }
+
+    if (initialA !== a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a,
+        source: 'rgb',
+      };
+    }
+  }
+  return null;
+}

package/src/components/color-picker/react-color/helpers/checkBoard.js

@@ -0,0 +1,35 @@
+const checkBoardCache = {};
+
+export function render(c1, c2, size, ServerCanvas) {
+  if (typeof document === 'undefined' && !ServerCanvas) {
+    return null;
+  }
+  const canvas = ServerCanvas
+    ? new ServerCanvas()
+    : document.createElement('canvas');
+  canvas.width = size * 2;
+  canvas.height = size * 2;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  } // If no context can be found, return early.
+  ctx.fillStyle = c1;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = c2;
+  ctx.fillRect(0, 0, size, size);
+  ctx.translate(size, size);
+  ctx.fillRect(0, 0, size, size);
+  return canvas.toDataURL();
+}
+
+export function get(c1, c2, size, ServerCanvas) {
+  const key = `${c1}-${c2}-${size}${ServerCanvas ? '-server' : ''}`;
+
+  if (checkBoardCache[key]) {
+    return checkBoardCache[key];
+  }
+
+  const checkBoard = render(c1, c2, size, ServerCanvas);
+  checkBoardCache[key] = checkBoard;
+  return checkBoard;
+}

package/src/components/color-picker/react-color/helpers/color.js

@@ -0,0 +1,89 @@
+import each from 'lodash/each';
+import tinycolor from 'tinycolor2';
+
+function simpleCheckForValidColor(data) {
+  const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
+  let checked = 0;
+  let passed = 0;
+  each(keysToCheck, (letter) => {
+    if (data[letter]) {
+      checked += 1;
+      if (!Number.isNaN(Number(data[letter]))) {
+        passed += 1;
+      }
+      if (letter === 's' || letter === 'l') {
+        const percentPatt = /^\d+%$/;
+        if (percentPatt.test(data[letter])) {
+          passed += 1;
+        }
+      }
+    }
+  });
+  return checked === passed ? data : false;
+}
+
+function toState(data, oldHue) {
+  const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
+  const hsl = color.toHsl();
+  const hsv = color.toHsv();
+  const rgb = color.toRgb();
+  const hex = color.toHex();
+  if (hsl.s === 0) {
+    hsl.h = oldHue || 0;
+    hsv.h = oldHue || 0;
+  }
+  const transparent = hex === '000000' && rgb.a === 0;
+
+  return {
+    hsl,
+    hex: transparent ? 'transparent' : `#${hex}`,
+    rgb,
+    hsv,
+    oldHue: data.h || oldHue || hsl.h,
+    source: data.source,
+  };
+}
+
+function isValidHex(hex) {
+  if (hex === 'transparent') {
+    return true;
+  }
+  // disable hex4 and hex8
+  const lh = String(hex).charAt(0) === '#' ? 1 : 0;
+  return (
+    hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid()
+  );
+}
+
+function getContrastingColor(data) {
+  if (!data) {
+    return '#fff';
+  }
+  const col = toState(data);
+  if (col.hex === 'transparent') {
+    return 'rgba(0,0,0,0.4)';
+  }
+  const yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
+  return yiq >= 128 ? '#000' : '#fff';
+}
+
+function isvalidColorString(string, type) {
+  const stringWithoutDegree = string.replace('°', '');
+  return tinycolor(`${type} (${stringWithoutDegree})`)._ok;
+}
+
+const red = {
+  hsl: { a: 1, h: 0, l: 0.5, s: 1 },
+  hex: '#ff0000',
+  rgb: { r: 255, g: 0, b: 0, a: 1 },
+  hsv: { h: 0, s: 1, v: 1, a: 1 },
+};
+
+export {
+  red,
+  isvalidColorString,
+  getContrastingColor,
+  isValidHex,
+  simpleCheckForValidColor,
+  toState,
+};

package/src/components/color-picker/react-color/helpers/hue.js

@@ -0,0 +1,52 @@
+export function calculateChange(e, direction, hsl, container) {
+  const containerWidth = container.clientWidth;
+  const containerHeight = container.clientHeight;
+  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  const left =
+    x - (container.getBoundingClientRect().left + window.pageXOffset);
+  const top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (direction === 'vertical') {
+    let h;
+    if (top < 0) {
+      h = 359;
+    } else if (top > containerHeight) {
+      h = 0;
+    } else {
+      const percent = -((top * 100) / containerHeight) + 100;
+      h = (360 * percent) / 100;
+    }
+
+    if (hsl.h !== h) {
+      return {
+        h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl',
+      };
+    }
+  } else {
+    let h;
+    if (left < 0) {
+      h = 0;
+    } else if (left > containerWidth) {
+      h = 359;
+    } else {
+      const percent = (left * 100) / containerWidth;
+      h = (360 * percent) / 100;
+    }
+
+    if (hsl.h !== h) {
+      return {
+        h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl',
+      };
+    }
+  }
+  return null;
+}

package/src/components/color-picker/react-color/helpers/saturation.js

@@ -0,0 +1,31 @@
+export function calculateChange(e, hsl, container) {
+  const { width: containerWidth, height: containerHeight } =
+    container.getBoundingClientRect();
+  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (left < 0) {
+    left = 0;
+  } else if (left > containerWidth) {
+    left = containerWidth;
+  }
+
+  if (top < 0) {
+    top = 0;
+  } else if (top > containerHeight) {
+    top = containerHeight;
+  }
+
+  const saturation = left / containerWidth;
+  const bright = 1 - top / containerHeight;
+
+  return {
+    h: hsl.h,
+    s: saturation,
+    v: bright,
+    a: hsl.a,
+    source: 'hsv',
+  };
+}

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -0,0 +1,166 @@
+import { CSSProperties, useCallback } from 'react';
+
+import type { HSL, RGB } from '../ColorPicker';
+import { EditableInput } from '../common';
+import * as color from '../helpers/color';
+
+interface SketchFieldsProps {
+  onChange: (
+    data: (RGB | HSL | { hex: string }) & { source: string },
+    e: Event,
+  ) => void;
+  hsl: HSL;
+  hex: string;
+  rgb: RGB;
+  disableAlpha: boolean;
+}
+
+const styles: Record<
+  'fields' | 'single' | 'double' | 'input' | 'label',
+  CSSProperties
+> &
+  Record<'alpha', (disableAlpha: boolean) => CSSProperties> = {
+  fields: {
+    display: 'flex',
+    paddingTop: '4px',
+  },
+  single: {
+    flex: '1',
+    paddingLeft: '6px',
+  },
+  alpha: (disableAlpha: boolean) => ({
+    flex: '1',
+    paddingLeft: '6px',
+    ...(disableAlpha && { display: 'none' }),
+  }),
+  double: {
+    flex: '2',
+  },
+  input: {
+    width: '100%',
+    padding: '4px 10% 3px',
+    border: 'none',
+    boxShadow: 'inset 0 0 0 1px #ccc',
+    fontSize: '1em',
+    textAlign: 'center',
+    borderRadius: '3px',
+  },
+  label: {
+    display: 'block',
+    textAlign: 'center',
+    fontSize: '1em',
+    color: '#222',
+    paddingTop: '3px',
+    paddingBottom: '4px',
+    textTransform: 'capitalize',
+  },
+};
+
+const SketchFields = ({
+  onChange,
+  rgb,
+  hsl,
+  hex,
+  disableAlpha,
+}: SketchFieldsProps) => {
+  const handleChange = useCallback(
+    (data: any, e: any) => {
+      if (data.hex) {
+        if (color.isValidHex(data.hex)) {
+          onChange(
+            {
+              hex: data.hex,
+              source: 'hex',
+            },
+            e,
+          );
+        }
+      } else if (data.r || data.g || data.b) {
+        onChange(
+          {
+            r: data.r || rgb.r,
+            g: data.g || rgb.g,
+            b: data.b || rgb.b,
+            a: rgb.a,
+            source: 'rgb',
+          },
+          e,
+        );
+      } else if (data.a) {
+        if (data.a < 0) {
+          data.a = 0;
+        } else if (data.a > 100) {
+          data.a = 100;
+        }
+
+        data.a /= 100;
+        onChange(
+          {
+            h: hsl.h,
+            s: hsl.s,
+            l: hsl.l,
+            a: data.a,
+            source: 'rgb',
+          },
+          e,
+        );
+      }
+    },
+    [hsl.h, hsl.l, hsl.s, onChange, rgb.a, rgb.b, rgb.g, rgb.r],
+  );
+
+  return (
+    <div style={styles.fields}>
+      <div style={styles.double}>
+        <EditableInput
+          style={{ input: styles.input, label: styles.label }}
+          label="hex"
+          value={hex.replace('#', '')}
+          onChange={handleChange}
+        />
+      </div>
+      <div style={styles.single}>
+        <EditableInput
+          style={{ input: styles.input, label: styles.label }}
+          label="r"
+          value={rgb.r}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </div>
+      <div style={styles.single}>
+        <EditableInput
+          style={{ input: styles.input, label: styles.label }}
+          label="g"
+          value={rgb.g}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </div>
+      <div style={styles.single}>
+        <EditableInput
+          style={{ input: styles.input, label: styles.label }}
+          label="b"
+          value={rgb.b}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </div>
+      <div style={styles.alpha(disableAlpha)}>
+        <EditableInput
+          style={{ input: styles.input, label: styles.label }}
+          label="a"
+          value={Math.round(rgb.a * 100)}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="100"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SketchFields;