pouncejs/dist/cjs/components/FadeIn/FadeIn.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

var _Box = _interopRequireDefault(require("../Box"));

var _utils = require("./utils");

/**
 * A wrapper component to allow fading-in of children components, allowing a smooth enter into the
 * viewport
 */
var FadeIn = function FadeIn(_ref) {
  var as = _ref.as,
      _ref$from = _ref.from,
      from = _ref$from === void 0 ? 'center' : _ref$from,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 300 : _ref$duration,
      _ref$delay = _ref.delay,
      delay = _ref$delay === void 0 ? 0 : _ref$delay,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? 25 : _ref$offset,
      children = _ref.children,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "from", "duration", "delay", "offset", "children"]);

  var keyframes = _react.default.useMemo(function () {
    return (0, _utils.generateKeyframes)(from, offset);
  }, [from, offset]);

  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    as: as,
    willChange: "opacity" + (from !== 'center' ? ', transform' : ''),
    animation: keyframes + " " + duration + "ms " + delay + "ms ease-in-out both"
  }, rest), children);
};

var _default = FadeIn;
exports.default = _default;