react-flip-toolkit/lib/Flipped.js

Configurable FLIP animation helpers for React

"use strict";

exports.__esModule = true;

var _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; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Flipper = require("./Flipper");

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var propTypes = {
  children: _propTypes2.default.node.isRequired,
  flipId: _propTypes2.default.string,
  inverseFlipId: _propTypes2.default.string,
  opacity: _propTypes2.default.bool,
  translateX: _propTypes2.default.bool,
  translateY: _propTypes2.default.bool,
  translate: _propTypes2.default.bool,
  scaleX: _propTypes2.default.bool,
  scaleY: _propTypes2.default.bool,
  scale: _propTypes2.default.bool,
  transformOrigin: _propTypes2.default.string,
  ease: _propTypes2.default.string,
  duration: _propTypes2.default.number,
  onStart: _propTypes2.default.func,
  onComplete: _propTypes2.default.func,
  componentIdFilter: _propTypes2.default.string,
  componentId: _propTypes2.default.string
  // This wrapper creates child components for the main Flipper component
};function Flipped(_ref) {
  var children = _ref.children,
      flipId = _ref.flipId,
      onStart = _ref.onStart,
      onComplete = _ref.onComplete,
      rest = _objectWithoutProperties(_ref, ["children", "flipId", "onStart", "onComplete"]);

  var child = void 0;
  try {
    child = _react.Children.only(children);
  } catch (e) {
    throw new Error("Each Flipped element must wrap a single child");
  }
  // if nothing is being transformed, assume everything is being animated
  if (!rest.scale && !rest.translate && !rest.translateX && !rest.translateY && !rest.scaleX && !rest.opacity && !rest.scaleY) {
    rest.all = true;
  }
  // allow some shorthands for convenience
  if (rest.all) {
    delete rest.all;
    Object.assign(rest, {
      translateX: true,
      translateY: true,
      scaleX: true,
      scaleY: true,
      opacity: true
    });
  } else if (rest.scale) {
    delete rest.scale;
    Object.assign(rest, {
      scaleX: true,
      scaleY: true
    });
  } else if (rest.translate) {
    delete rest.translate;
    Object.assign(rest, {
      translateX: true,
      translateY: true
    });
  }
  // turn props into DOM data attributes
  var props = Object.entries(rest).map(function (r) {
    return [r[0].replace("translate", "data-translate-").replace("scale", "data-scale-").replace("opacity", "data-opacity").replace("inverseFlipId", "data-inverse-flip-id").replace("transformOrigin", "data-transform-origin").replace("componentIdFilter", "data-flip-component-id-filter").replace("componentId", "data-flip-component-id").replace("ease", "data-flip-ease").replace("duration", "data-flip-duration").toLowerCase(), r[1]];
  }).reduce(function (acc, curr) {
    var _extends2;

    return _extends({}, acc, (_extends2 = {}, _extends2[curr[0]] = curr[1], _extends2));
  }, {});

  if (flipId) props["data-flip-id"] = flipId;

  return _react2.default.createElement(
    _Flipper.FlipContext.Consumer,
    null,
    function (data) {
      data[flipId] = {
        onStart: onStart,
        onComplete: onComplete
      };
      return (0, _react.cloneElement)(child, props);
    }
  );
}

Flipped.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

exports.default = Flipped;
module.exports = exports["default"];