react-native-reanimated-player/lib/commonjs/components/ripple.js

A react-native video player that interacts like Youtube player, built upon Reanimted v2 & react-native-gesture-handle

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Ripple = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const _Ripple = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  let {
    children,
    containerStyle,
    duration = 600,
    backgroundColor = 'rgba(255,255,255,.3)',
    onAnimationEnd,
    overflow,
    style
  } = _ref;
  const scale = (0, _reactNativeReanimated.useSharedValue)(0);
  const centerX = (0, _reactNativeReanimated.useSharedValue)(0);
  const centerY = (0, _reactNativeReanimated.useSharedValue)(0);
  const isFinished = (0, _reactNativeReanimated.useSharedValue)(false);
  const rippleOpacity = (0, _reactNativeReanimated.useSharedValue)(1);
  const [radius, setRadius] = (0, _react.useState)(-1);
  const rStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const translateX = centerX.value - radius;
    const translateY = centerY.value - radius;
    return {
      opacity: rippleOpacity.value,
      transform: [{
        translateX
      }, {
        translateY
      }, {
        scale: scale.value
      }]
    };
  }, [radius]);
  (0, _react.useImperativeHandle)(ref, () => ({
    onPress: _ref2 => {
      'worklet';

      let {
        x,
        y
      } = _ref2;
      centerX.value = x;
      centerY.value = y;
      rippleOpacity.value = 1;
      scale.value = 0;
      scale.value = (0, _reactNativeReanimated.withTiming)(1, {
        duration
      }, finised => {
        if (finised) {
          isFinished.value = true;
          scale.value = (0, _reactNativeReanimated.withTiming)(0, {
            duration: 0
          });

          if (onAnimationEnd) {
            (0, _reactNativeReanimated.runOnJS)(onAnimationEnd)();
          }
        }
      });
    }
  }));
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    onLayout: _ref3 => {
      let {
        nativeEvent: {
          layout: {
            width,
            height
          }
        }
      } = _ref3;
      setRadius(Math.sqrt(width ** 2 + height ** 2));
    },
    style: [style],
    pointerEvents: "none"
  }, radius > -1 && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: [style, containerStyle, {
      overflow: !overflow ? 'hidden' : 'visible'
    }]
  }, children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: [{
      backgroundColor,
      position: 'absolute',
      top: 0,
      left: 0,
      width: radius * 2,
      height: radius * 2,
      borderRadius: radius,
      zIndex: 1121
    }, rStyle]
  })));
});

const Ripple = /*#__PURE__*/_react.default.memo(_Ripple);

exports.Ripple = Ripple;
//# sourceMappingURL=ripple.js.map