@vtex/styleguide/lib/EXPERIMENTAL_Table/hooks/useTableMotion.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useTableMotion;

var _react = require("react");

var _throttle = require("lodash/throttle");

var _throttle2 = _interopRequireDefault(_throttle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || 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); }

var defaultTransition = [{
  prop: 'all',
  duration: 200,
  func: 'ease-in-out',
  delay: 0,
  optimize: false
}];

function useTableMotion(transitions) {
  if (transitions === void 0) {
    transitions = defaultTransition;
  }

  var reducedMotion = useReducedMotion();
  var motion = (0, _react.useMemo)(function () {
    if (reducedMotion) return {};
    var draftTransitions = transitions.reduce(function (acc, transition, index) {
      var prop = transition.prop,
          duration = transition.duration,
          func = transition.func,
          delay = transition.delay;
      var draftTransition = prop + " " + duration + "ms " + func + " " + delay + "ms";
      return index === 0 ? draftTransition : acc + ", " + draftTransition;
    }, '');
    var draftWillChange = transitions.reduce(function (acc, transition) {
      var prop = transition.prop,
          optimize = transition.optimize;
      var skip = !optimize || acc.props.includes(prop);
      var firstItem = acc.props.length === 0;
      return skip ? acc : {
        willChange: firstItem ? prop : acc.willChange + ", " + prop,
        props: [].concat(acc.props, [prop])
      };
    }, {
      willChange: '',
      props: []
    });
    var noOptimizations = draftWillChange.props.length === 0;
    var optimization = noOptimizations ? {} : {
      willChange: draftWillChange.willChange
    };
    return _extends({}, optimization, {
      transition: draftTransitions
    });
  }, [reducedMotion, transitions]);
  return motion;
}

function useReducedMotion(init) {
  if (init === void 0) {
    init = false;
  }

  var _useState = (0, _react.useState)(init),
      reduced = _useState[0],
      setReduced = _useState[1];

  (0, _react.useEffect)(function () {
    var mql = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduced(mql.matches);

    function listener(e) {
      if (e.type === 'change') {
        (0, _throttle2.default)(function () {
          return setReduced(mql.matches);
        }, 200);
      }
    }

    mql.addListener(listener);
    return function () {
      mql.removeListener(listener);
    };
  }, []);
  return reduced;
}