reanimated-color-picker/lib/commonjs/components/Sliders/HSB/BrightnessSlider.js

A Pure JavaScript Color Picker for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.BrightnessSlider = BrightnessSlider;
var _react = _interopRequireDefault(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _AppContext = _interopRequireDefault(require('../../../AppContext'));
var _SliderCore = require('../SliderCore');
var _Thumb = _interopRequireDefault(require('../../Thumb/Thumb'));
var _utils = require('../../../utils');
function _interopRequireWildcard(e, t) {
  if ('function' == typeof WeakMap)
    var r = new WeakMap(),
      n = new WeakMap();
  return (_interopRequireWildcard = function (e, t) {
    if (!t && e && e.__esModule) return e;
    var o,
      i,
      f = { __proto__: null, default: e };
    if (null === e || ('object' != typeof e && 'function' != typeof e)) return f;
    if ((o = t ? n : r)) {
      if (o.has(e)) return o.get(e);
      o.set(e, f);
    }
    for (const t in e)
      'default' !== t &&
        {}.hasOwnProperty.call(e, t) &&
        ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set)
          ? o(f, t, i)
          : (f[t] = e[t]));
    return f;
  })(e, t);
}
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : { default: e };
}
/** @see [BrightnessSlider](https://alabsi91.github.io/reanimated-color-picker/api/sliders/hsb/brightness-slider/) */
function BrightnessSlider({ gestures = [], style = {}, vertical = false, reverse = false, ...props }) {
  const { hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd, ...ctx } = (0, _AppContext.default)();
  const thumbShape = props.thumbShape ?? ctx.thumbShape;
  const thumbSize = props.thumbSize ?? ctx.thumbSize;
  const thumbColor = props.thumbColor ?? ctx.thumbColor;
  const boundedThumb = props.boundedThumb ?? ctx.boundedThumb;
  const renderThumb = props.renderThumb ?? ctx.renderThumb;
  const thumbStyle = props.thumbStyle ?? ctx.thumbStyle ?? {};
  const thumbInnerStyle = props.thumbInnerStyle ?? ctx.thumbInnerStyle ?? {};
  const thumbScaleAnimationValue = props.thumbScaleAnimationValue ?? ctx.thumbScaleAnimationValue;
  const thumbScaleAnimationDuration = props.thumbScaleAnimationDuration ?? ctx.thumbScaleAnimationDuration;
  const adaptSpectrum = props.adaptSpectrum ?? ctx.adaptSpectrum;
  const sliderThickness = props.sliderThickness ?? ctx.sliderThickness;
  const borderRadius = (0, _utils.getStyle)(style, 'borderRadius') ?? 5;
  const widthStyle = (0, _utils.getStyle)(style, 'width');
  const heightStyle = (0, _utils.getStyle)(style, 'height');
  const width = (0, _reactNativeReanimated.useSharedValue)(
    vertical ? sliderThickness : typeof widthStyle === 'number' ? widthStyle : 0,
  );
  const height = (0, _reactNativeReanimated.useSharedValue)(
    !vertical ? sliderThickness : typeof heightStyle === 'number' ? heightStyle : 0,
  );
  const handleScale = (0, _reactNativeReanimated.useSharedValue)(1);
  const thumbAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const length = (vertical ? height.value : width.value) - (boundedThumb ? thumbSize : 0);
    const percent = (brightnessValue.value / 100) * length;
    const pos = (reverse ? length - percent : percent) - (boundedThumb ? 0 : thumbSize / 2);
    const posY = vertical ? pos : height.value / 2 - thumbSize / 2;
    const posX = vertical ? width.value / 2 - thumbSize / 2 : pos;
    return {
      transform: [
        {
          translateY: posY,
        },
        {
          translateX: posX,
        },
        {
          scale: handleScale.value,
        },
      ],
    };
  }, [height, width, brightnessValue, handleScale, vertical, reverse, boundedThumb, thumbSize]);
  const activeColorStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      backgroundColor: (0, _utils.HSVA2HSLA_string)(hueValue.value, adaptSpectrum ? saturationValue.value : 100, 100),
    };
  }, [hueValue, saturationValue, adaptSpectrum]);
  const imageStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const imageRotate = vertical ? (reverse ? '270deg' : '90deg') : reverse ? '180deg' : '0deg';
    const imageTranslateY =
      ((height.value - width.value) / 2) * ((reverse && _utils.isRtl) || (!reverse && !_utils.isRtl) ? 1 : -1);
    return {
      width: vertical ? height.value : '100%',
      height: vertical ? width.value : '100%',
      transform: [
        {
          rotate: imageRotate,
        },
        {
          translateX: vertical ? ((height.value - width.value) / 2) * (reverse ? -1 : 1) : 0,
        },
        {
          translateY: vertical ? imageTranslateY : 0,
        },
      ],
    };
  }, [height, width, vertical, reverse]);
  const onBegin = () => {
    'worklet';

    handleScale.value = (0, _reactNativeReanimated.withTiming)(thumbScaleAnimationValue, {
      duration: thumbScaleAnimationDuration,
    });
  };
  const onUpdate = value => {
    'worklet';

    if (brightnessValue.value === value) {
      return;
    }
    brightnessValue.value = value;
    onGestureChange();
  };
  const onEnd = () => {
    'worklet';

    handleScale.value = (0, _reactNativeReanimated.withTiming)(1, {
      duration: thumbScaleAnimationDuration,
    });
    onGestureEnd();
  };
  const getAdaptiveColor = hsva => {
    'worklet';

    if (adaptSpectrum) {
      return hsva;
    }
    return {
      h: hsva.h,
      s: 100,
      v: hsva.v,
    };
  };
  return /*#__PURE__*/ _react.default.createElement(
    _SliderCore.SliderCore,
    {
      style: [
        style,
        {
          position: 'relative',
          borderRadius,
          borderWidth: 0,
          padding: 0,
        },
        activeColorStyle,
      ],
      label: props.accessibilityLabel ?? 'Brightness Slider',
      hint: props.accessibilityHint,
      currentValue: brightnessValue,
      width: width,
      height: height,
      thumbSize: thumbSize,
      boundedThumb: boundedThumb,
      sliderThickness: sliderThickness,
      gestures: gestures,
      vertical: vertical,
      reverse: reverse,
      onBegin: onBegin,
      onUpdate: onUpdate,
      onEnd: onEnd,
    },
    /*#__PURE__*/ _react.default.createElement(
      _reactNative.View,
      {
        style: {
          flex: 1,
          borderRadius,
          overflow: 'hidden',
        },
        'aria-hidden': true,
      },
      /*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.Image, {
        source: require('../../../assets/blackGradient.png'),
        style: imageStyle,
      }),
    ),
    /*#__PURE__*/ _react.default.createElement(_Thumb.default, {
      thumbShape: thumbShape,
      thumbSize: thumbSize,
      thumbColor: thumbColor,
      renderThumb: renderThumb,
      innerStyle: thumbInnerStyle,
      thumbAnimatedStyle: thumbAnimatedStyle,
      style: thumbStyle,
      vertical: vertical,
      getAdaptiveColor: getAdaptiveColor,
    }),
  );
}