atropos-passive-listeners/atropos-react.mjs

Fork-passive-listerners.

/**
 * Atropos React 2.0.2
 * Touch-friendly 3D parallax hover effects
 * https://atroposjs.com
 *
 * Copyright 2021-2023 
 *
 * Released under the MIT License
 *
 * Released on: August 28, 2023
 */

var _excluded = ["component", "children", "rootChildren", "scaleChildren", "rotateChildren", "className", "scaleClassName", "rotateClassName", "innerClassName"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useEffect, useRef } from 'react';
// eslint-disable-next-line
import AtroposCore from './atropos.mjs';
var paramsKeys = ['eventsEl', 'alwaysActive', 'activeOffset', 'shadowOffset', 'shadowScale', 'duration', 'rotate', 'rotateTouch', 'rotateXMax', 'rotateYMax', 'rotateXInvert', 'rotateYInvert', 'stretchX', 'stretchY', 'stretchZ', 'commonOrigin', 'shadow', 'highlight', 'onEnter', 'onLeave', 'onRotate'];
var removeParamsKeys = function removeParamsKeys(obj) {
  var result = {};
  Object.keys(obj).forEach(function (key) {
    if (!paramsKeys.includes(key)) result[key] = obj[key];
  });
  return result;
};
var extractParamsKeys = function extractParamsKeys(obj) {
  var result = {};
  Object.keys(obj).forEach(function (key) {
    if (paramsKeys.includes(key)) result[key] = obj[key];
  });
  return result;
};
function Atropos(props) {
  var _props$component = props.component,
    component = _props$component === void 0 ? 'div' : _props$component,
    children = props.children,
    rootChildren = props.rootChildren,
    scaleChildren = props.scaleChildren,
    rotateChildren = props.rotateChildren,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    _props$scaleClassName = props.scaleClassName,
    scaleClassName = _props$scaleClassName === void 0 ? '' : _props$scaleClassName,
    _props$rotateClassNam = props.rotateClassName,
    rotateClassName = _props$rotateClassNam === void 0 ? '' : _props$rotateClassNam,
    _props$innerClassName = props.innerClassName,
    innerClassName = _props$innerClassName === void 0 ? '' : _props$innerClassName,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  var elRef = useRef(null);
  var atroposRef = useRef(null);
  var Component = component;
  var cls = function cls() {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    return args.filter(function (c) {
      return !!c;
    }).join(' ');
  };
  var init = function init() {
    atroposRef.current = AtroposCore(_extends({
      el: elRef.current
    }, extractParamsKeys(props)));
  };
  var destroy = function destroy() {
    if (atroposRef.current) {
      atroposRef.current.destroy();
      atroposRef.current = null;
    }
  };
  useEffect(function () {
    if (elRef.current) {
      init();
    }
    return function () {
      destroy();
    };
  }, []);
  useEffect(function () {
    if (atroposRef.current) {
      atroposRef.current.params.onEnter = props.onEnter;
      atroposRef.current.params.onLeave = props.onLeave;
      atroposRef.current.params.onRotate = props.onRotate;
    }
    return function () {
      if (atroposRef.current) {
        atroposRef.current.params.onEnter = null;
        atroposRef.current.params.onLeave = null;
        atroposRef.current.params.onRotate = null;
      }
    };
  });
  return /*#__PURE__*/React.createElement(Component, _extends({
    className: cls('atropos', className)
  }, removeParamsKeys(rest), {
    ref: elRef
  }), /*#__PURE__*/React.createElement("span", {
    className: cls('atropos-scale', scaleClassName)
  }, /*#__PURE__*/React.createElement("span", {
    className: cls('atropos-rotate', rotateClassName)
  }, /*#__PURE__*/React.createElement("span", {
    className: cls('atropos-inner', innerClassName)
  }, children, (props.highlight || typeof props.highlight === 'undefined') && /*#__PURE__*/React.createElement("span", {
    className: "atropos-highlight"
  })), rotateChildren, (props.shadow || typeof props.shadow === 'undefined') && /*#__PURE__*/React.createElement("span", {
    className: "atropos-shadow"
  })), scaleChildren), rootChildren);
}
export default Atropos;
export { Atropos };