reanimated-color-picker/lib/commonjs/components/Panels/Panel1.js

A Pure JavaScript Color Picker for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.Panel1 = Panel1;
var _react = _interopRequireDefault(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _AppContext = _interopRequireDefault(require('../../AppContext'));
var _PanelCore = require('./PanelCore');
var _styles = require('../../styles');
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 [Panel1](https://alabsi91.github.io/reanimated-color-picker/api/panels/panel1/) */
function Panel1({ gestures = [], style = {}, ...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 thumbScaleAnimationValue = props.thumbScaleUpValue ?? ctx.thumbScaleAnimationValue;
  const thumbScaleAnimationDuration = props.thumbScaleUpDuration ?? ctx.thumbScaleAnimationDuration;
  const thumbInnerStyle = props.thumbInnerStyle ?? ctx.thumbInnerStyle ?? {};
  const borderRadius = (0, _utils.getStyle)(style, 'borderRadius') ?? 5;
  const heightStyle = (0, _utils.getStyle)(style, 'height') ?? 200;
  const width = (0, _reactNativeReanimated.useSharedValue)(0);
  const height = (0, _reactNativeReanimated.useSharedValue)(0);
  const handleScale = (0, _reactNativeReanimated.useSharedValue)(1);
  const thumbAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const length = {
      x: width.value - (boundedThumb ? thumbSize : 0),
      y: height.value - (boundedThumb ? thumbSize : 0),
    };
    const percentX = (saturationValue.value / 100) * length.x;
    const posX = percentX - (boundedThumb ? 0 : thumbSize / 2);
    const percentY = (brightnessValue.value / 100) * length.y;
    const posY = length.y - percentY - (boundedThumb ? 0 : thumbSize / 2);
    return {
      transform: [
        {
          translateX: posX,
        },
        {
          translateY: posY,
        },
        {
          scale: handleScale.value,
        },
      ],
    };
  }, [handleScale, saturationValue, brightnessValue, width, height, boundedThumb, thumbSize]);
  const activeColorStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      backgroundColor: `hsl(${hueValue.value}, 100%, 50%)`,
    };
  }, [hueValue]);
  const brightnessImageStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      // Width and height are intentionally swapped to correct dimensions after the 270° rotation
      width: height.value,
      height: width.value,
      transform: [
        {
          rotate: '270deg',
        },
        {
          translateX: (width.value - height.value) / 2,
        },
        {
          translateY: ((width.value - height.value) / 2) * (_utils.isRtl ? -1 : 1),
        },
      ],
    };
  }, [width, height]);
  const onBegin = () => {
    'worklet';

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

    if (saturationValue.value === newXValue && brightnessValue.value === newYValue) {
      return;
    }
    saturationValue.value = newXValue;
    brightnessValue.value = newYValue;
    onGestureChange();
  };
  const onGestureUpdate = ({ x, y }) => {
    'worklet';

    const lengthX = width.value - (boundedThumb ? thumbSize : 0);
    const lengthY = height.value - (boundedThumb ? thumbSize : 0);
    const posX = (0, _utils.clamp)(x - (boundedThumb ? thumbSize / 2 : 0), lengthX);
    const posY = (0, _utils.clamp)(y - (boundedThumb ? thumbSize / 2 : 0), lengthY);
    const valueX = (posX / lengthX) * 100;
    const valueY = (posY / lengthY) * 100;
    const newXValue = valueX;
    const newYValue = 100 - valueY;
    onUpdate(newXValue, newYValue);
  };
  const onEnd = () => {
    'worklet';

    handleScale.value = (0, _reactNativeReanimated.withTiming)(1, {
      duration: thumbScaleAnimationDuration,
    });
    onGestureEnd();
  };
  return /*#__PURE__*/ _react.default.createElement(
    _PanelCore.PanelCore,
    {
      style: [
        _styles.styles.panelContainer,
        style,
        {
          position: 'relative',
          height: heightStyle,
          borderWidth: 0,
          padding: 0,
        },
        activeColorStyle,
      ],
      label: props.accessibilityLabel ?? 'Saturation and brightness 2D slider',
      hint: props.accessibilityHint ?? 'Double tap to switch between brightness and saturation',
      labelX: 'Saturation',
      labelY: 'Brightness',
      currentXValue: saturationValue,
      currentYValue: brightnessValue,
      width: width,
      height: height,
      gestures: gestures,
      onGestureUpdate: onGestureUpdate,
      onBegin: onBegin,
      onUpdate: onUpdate,
      onEnd: onEnd,
    },
    /*#__PURE__*/ _react.default.createElement(
      _reactNative.View,
      {
        style: [
          _styles.styles.panelImage,
          {
            borderRadius,
          },
        ],
        'aria-hidden': true,
      },
      /*#__PURE__*/ _react.default.createElement(_reactNative.Image, {
        source: require('../../assets/blackGradient.png'),
        style: _styles.styles.panelImage,
        tintColor: '#fff',
        resizeMode: 'stretch',
      }),
      /*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.Image, {
        source: require('../../assets/blackGradient.png'),
        style: [_styles.styles.panelImage, brightnessImageStyle],
        resizeMode: 'stretch',
      }),
    ),
    /*#__PURE__*/ _react.default.createElement(_Thumb.default, {
      thumbShape: thumbShape,
      thumbSize: thumbSize,
      thumbColor: thumbColor,
      renderThumb: renderThumb,
      innerStyle: thumbInnerStyle,
      thumbAnimatedStyle: thumbAnimatedStyle,
      style: thumbStyle,
    }),
  );
}