reanimated-color-picker/lib/module/components/Thumb/Thumb.js

A Pure JavaScript Color Picker for React Native

import React from 'react';
import { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
import colorKit from '../../colorKit/index';
import usePickerContext from '../../AppContext';
import { styles } from '../../styles';
import BuiltinThumbs from './BuiltinThumbs/index';
export default function Thumb({
  thumbAnimatedStyle,
  innerStyle,
  style,
  thumbColor,
  renderThumb: RenderThumb,
  thumbShape = 'ring',
  thumbSize,
  vertical = false,
  overrideHSV,
  getAdaptiveColor,
}) {
  const { width, height, borderRadius } = {
    width: thumbSize,
    height: thumbSize,
    borderRadius: thumbSize / 2,
  };
  const { hueValue, saturationValue, brightnessValue, alphaValue, value } = usePickerContext();
  const hue = (overrideHSV === null || overrideHSV === void 0 ? void 0 : overrideHSV.hue) ?? hueValue;
  const saturation = (overrideHSV === null || overrideHSV === void 0 ? void 0 : overrideHSV.saturation) ?? saturationValue;
  const brightness = (overrideHSV === null || overrideHSV === void 0 ? void 0 : overrideHSV.brightness) ?? brightnessValue;
  const alpha = (overrideHSV === null || overrideHSV === void 0 ? void 0 : overrideHSV.alpha) ?? alphaValue;
  const currentColor = useDerivedValue(() => {
    return colorKit.runOnUI().HEX({
      h: hue.value,
      s: saturation.value,
      v: brightness.value,
    });
  }, [hue, saturation, brightness]);
  const solidColor = useAnimatedStyle(
    () => ({
      backgroundColor: thumbColor ?? currentColor.value,
    }),
    [thumbColor, currentColor],
  );
  const adaptiveColor = useDerivedValue(() => {
    const currentcolor = {
      h: hue.value,
      s: saturation.value,
      v: brightness.value,
      a: alpha.value,
    };
    const compareColor =
      (getAdaptiveColor === null || getAdaptiveColor === void 0 ? void 0 : getAdaptiveColor(currentcolor)) || currentcolor;
    const isDark = colorKit.runOnUI().isDark(compareColor);
    return isDark ? '#ffffff' : '#000000';
  }, [hue, saturation, brightness, alpha, getAdaptiveColor]);
  const thumbProps = {
    width,
    height,
    borderRadius,
    vertical,
    solidColor,
    adaptiveColor,
    thumbAnimatedStyle,
    innerStyle,
    style,
    thumbColor,
  };

  // render a custom thumb
  if (RenderThumb) {
    return /*#__PURE__*/ React.createElement(RenderThumb, {
      positionStyle: [styles.handle, thumbAnimatedStyle],
      width: width,
      height: height,
      initialColor: value,
      currentColor: currentColor,
      adaptiveColor: adaptiveColor,
    });
  }

  // normalize 'thumbShape' string to match 'BuiltinThumbs' keys.
  const thumb_Shape = thumbShape.toLowerCase().charAt(0).toUpperCase() + thumbShape.slice(1);
  if (thumb_Shape in BuiltinThumbs) {
    const SelectedThumb = BuiltinThumbs[thumb_Shape];
    return /*#__PURE__*/ React.createElement(SelectedThumb, thumbProps);
  }

  // default to the 'Ring' thumb
  return /*#__PURE__*/ React.createElement(BuiltinThumbs.Ring, thumbProps);
}