react-flip-toolkit/es/Flipped.js

Configurable FLIP animation helpers for React

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

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

import React, { Children, cloneElement } from "react";
import PropTypes from "prop-types";
import { FlipContext } from "./Flipper";

var propTypes = {
  children: PropTypes.node.isRequired,
  flipId: PropTypes.string,
  inverseFlipId: PropTypes.string,
  opacity: PropTypes.bool,
  translateX: PropTypes.bool,
  translateY: PropTypes.bool,
  translate: PropTypes.bool,
  scaleX: PropTypes.bool,
  scaleY: PropTypes.bool,
  scale: PropTypes.bool,
  transformOrigin: PropTypes.string,
  ease: PropTypes.string,
  duration: PropTypes.number,
  onStart: PropTypes.func,
  onComplete: PropTypes.func,
  componentIdFilter: PropTypes.string,
  componentId: PropTypes.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 = 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 React.createElement(
    FlipContext.Consumer,
    null,
    function (data) {
      data[flipId] = {
        onStart: onStart,
        onComplete: onComplete
      };
      return cloneElement(child, props);
    }
  );
}

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

export default Flipped;