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

A Pure JavaScript Color Picker for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.default = Thumb;
var _react = _interopRequireDefault(require('react'));
var _reactNativeReanimated = require('react-native-reanimated');
var _index = _interopRequireDefault(require('../../colorKit/index'));
var _AppContext = _interopRequireDefault(require('../../AppContext'));
var _styles = require('../../styles');
var _index2 = _interopRequireDefault(require('./BuiltinThumbs/index'));
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : { default: e };
}
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 } = (0, _AppContext.default)();
  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 = (0, _reactNativeReanimated.useDerivedValue)(() => {
    return _index.default.runOnUI().HEX({
      h: hue.value,
      s: saturation.value,
      v: brightness.value,
    });
  }, [hue, saturation, brightness]);
  const solidColor = (0, _reactNativeReanimated.useAnimatedStyle)(
    () => ({
      backgroundColor: thumbColor ?? currentColor.value,
    }),
    [thumbColor, currentColor],
  );
  const adaptiveColor = (0, _reactNativeReanimated.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 = _index.default.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.default.createElement(RenderThumb, {
      positionStyle: [_styles.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 _index2.default) {
    const SelectedThumb = _index2.default[thumb_Shape];
    return /*#__PURE__*/ _react.default.createElement(SelectedThumb, thumbProps);
  }

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