@enact/ui/ViewManager/Arranger.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.shape = exports.arrange = exports.SlideTopArranger = exports.SlideRightArranger = exports.SlideLeftArranger = exports.SlideBottomArranger = exports.SlideArranger = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
 * Exports a number of pre-defined arrangers for use with {@link ui/ViewManager}.
 * note: not jsdoc on purpose
 */
var slideInOut = function slideInOut(direction, total, orientation) {
  var p = direction === 'out' ? total : -total;
  return orientation === 'top' && 'translateY(' + -p + '%)' || orientation === 'bottom' && 'translateY(' + p + '%)' || orientation === 'left' && 'translateX(' + -p + '%)' || orientation === 'right' && 'translateX(' + p + '%)';
};
var arrange = exports.arrange = function arrange(_ref, keyframes, options) {
  var duration = _ref.duration,
    node = _ref.node,
    reverse = _ref.reverse;
  return node.animate(keyframes, _objectSpread({
    duration: duration,
    direction: reverse ? 'reverse' : 'normal',
    fill: 'forwards'
  }, options));
};

/**
 * A function that generates an animation for a given transition configuration
 *
 * @callback ArrangerCallback
 * @param {Object} config                                      - Animation configuration object.
 * @param {Number} config.duration                             - Duration of the animation in ms.
 * @param {('forwards'|'backwards'|'both'|'none')} config.fill - Animation effect should be
 *                                                               reflected by previous state or
 *                                                               retained after animation.
 * @param {Number} config.from                                 - Index from which the ViewManager is
 *                                                               transitioning.
 * @param {Node} config.node                                   - DOM node to be animated.
 * @param {Boolean} config.reverse                             - `true` when the animation should be
 *                                                               reversed.
 * @param {Boolean} config.rtl                                 - `true` when the ViewManager was
 *                                                                configured with `rtl` for locales
 *                                                                that use right-to-left reading
 *                                                                order.
 * @param {Number} config.to                                   - Index to which the ViewManager is
 *                                                               transitioning.
 * @returns {Animation} An `Animation`-compatible object
 * @public
 * @memberof ui/ViewManager
 */

/**
 * An object with callback functions to arrange views within {@link ui/ViewManager.ViewManager}.
 *
 * @typedef {Object} Arranger
 * @property {ArrangerCallback} enter  - Returns an array of keyframes describing the animation when
 *                                       a view is entering the viewport.
 * @property {ArrangerCallback} leave  - Returns an array of keyframes describing the animation when
 *                                       a view is leaving the viewport.
 * @property {ArrangerCallback} [stay] - Returns an array of keyframes describing the animation when
 *                                       a view is remaining in the viewport.
 * @public
 * @memberof ui/ViewManager
 */

/**
 * A basic arranger factory that must be configured with `direction` and optionally an `amount`.
 *
 * @function
 * @memberof ui/ViewManager
 * @param {Object}                          config              - Configuration object.
 * @param {Object}                          [config.amount=100] - Amount, as a whole number, to
 *                                                                "slide" where 100 is the entire
 *                                                                size of the node along the axis of
 *                                                                the `direction`.
 * @param {('bottom'|'left'|'right'|'top')} config.direction    - Direction from which the view will
 *                                                                transition.
 * @returns {Arranger}            An arranger
 * @public
 */
var SlideArranger = exports.SlideArranger = function SlideArranger(_ref2) {
  var _ref2$amount = _ref2.amount,
    amount = _ref2$amount === void 0 ? 100 : _ref2$amount,
    direction = _ref2.direction;
  return {
    enter: function enter(config) {
      return arrange(config, [{
        transform: slideInOut('in', amount, direction)
      }, {
        transform: slideInOut('in', 0, direction)
      }]);
    },
    leave: function leave(config) {
      return arrange(config, [{
        transform: slideInOut('out', 0, direction)
      }, {
        transform: slideInOut('out', amount, direction)
      }]);
    },
    stay: function stay(config) {
      return arrange(config, [{
        transform: slideInOut('in', 0, direction)
      }, {
        transform: slideInOut('in', 0, direction)
      }]);
    }
  };
};

/**
 * An arranger that enters from the left and leaves to the right.
 *
 * @type {Arranger}
 * @memberof ui/ViewManager
 * @public
 */
var SlideRightArranger = exports.SlideRightArranger = SlideArranger({
  direction: 'right'
});

/**
 * An arranger that enters from the right and leaves to the left.
 *
 * @type {Arranger}
 * @memberof ui/ViewManager
 * @public
 */
var SlideLeftArranger = exports.SlideLeftArranger = SlideArranger({
  direction: 'left'
});

/**
 * An arranger that enters from the bottom and leaves to the top.
 *
 * @type {Arranger}
 * @memberof ui/ViewManager
 * @public
 */
var SlideTopArranger = exports.SlideTopArranger = SlideArranger({
  direction: 'top'
});

/**
 * An arranger that enters from the top and leaves to the bottom.
 *
 * @type {Arranger}
 * @memberof ui/ViewManager
 * @public
 */
var SlideBottomArranger = exports.SlideBottomArranger = SlideArranger({
  direction: 'bottom'
});

/**
 * propType validation for Arranger transitions
 * @memberof ui/ViewManager
 * @private
 */
var shape = exports.shape = _propTypes["default"].shape({
  enter: _propTypes["default"].func,
  leave: _propTypes["default"].func
});