@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
349 lines (346 loc) • 14.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
ViewManager: true,
ViewManagerBase: true,
ViewManagerDecorator: true
};
exports["default"] = exports.ViewManagerDecorator = exports.ViewManagerBase = exports.ViewManager = void 0;
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _handle = _interopRequireWildcard(require("@enact/core/handle"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _ForwardRef = _interopRequireDefault(require("../ForwardRef"));
var _Arranger = require("./Arranger");
Object.keys(_Arranger).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Arranger[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Arranger[key];
}
});
});
var _TransitionGroup = _interopRequireDefault(require("./TransitionGroup"));
var _View = require("./View");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["arranger", "childProps", "children", "duration", "index", "noAnimation", "enteringDelay", "enteringProp", "rtl"];
var _Class;
/**
* A component that manages the transitions of views.
*
* @module ui/ViewManager
* @exports shape
* @exports SlideArranger
* @exports SlideBottomArranger
* @exports SlideLeftArranger
* @exports SlideRightArranger
* @exports SlideTopArranger
* @exports ViewManager
* @exports ViewManagerBase
* @exports ViewManagerDecorator
*/
/**
* The base `ViewManager` component, without
* {@link ui/ViewManager.ViewManagerDecorator|ViewManagerDecorator} applied.
*
* @class ViewManagerBase
* @memberof ui/ViewManager
* @ui
* @public
*/
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var ViewManagerBase = exports.ViewManagerBase = (_Class = /*#__PURE__*/function (_Component) {
function ViewManagerBase(props) {
var _this;
_classCallCheck(this, ViewManagerBase);
_this = _callSuper(this, ViewManagerBase, [props]);
_this.makeTransitionEvent = function () {
return {
index: _this.props.index,
previousIndex: _this.state.prevIndex
};
};
_this.handleTransition = (0, _handle["default"])((0, _handle.forwardCustom)('onTransition', _this.makeTransitionEvent)).bindAs(_this, 'handleTransition');
_this.handleWillTransition = (0, _handle["default"])((0, _handle.forwardCustom)('onWillTransition', _this.makeTransitionEvent)).bindAs(_this, 'handleWillTransition');
_this.state = {
prevIndex: null,
reverseTransition: null
};
return _this;
}
_inherits(ViewManagerBase, _Component);
return _createClass(ViewManagerBase, [{
key: "render",
value: function render() {
var _this$props = this.props,
arranger = _this$props.arranger,
childProps = _this$props.childProps,
children = _this$props.children,
duration = _this$props.duration,
index = _this$props.index,
noAnimation = _this$props.noAnimation,
enteringDelay = _this$props.enteringDelay,
enteringProp = _this$props.enteringProp,
rtl = _this$props.rtl,
rest = _objectWithoutProperties(_this$props, _excluded);
var _this$props2 = this.props,
_this$props2$end = _this$props2.end,
end = _this$props2$end === void 0 ? index : _this$props2$end,
_this$props2$start = _this$props2.start,
start = _this$props2$start === void 0 ? index : _this$props2$start;
var _this$state = this.state,
previousIndex = _this$state.prevIndex,
reverseTransition = _this$state.reverseTransition;
var childrenList = _react.Children.toArray(children);
if (index > end) end = index;
if (index < start) start = index;
var childCount = end - start + 1;
var size = noAnimation || !arranger ? childCount : childCount + 1;
var views = childrenList.slice(start, start + childCount);
var childFactory = (0, _View.wrapWithView)({
arranger: arranger,
duration: duration,
index: index,
noAnimation: noAnimation,
previousIndex: previousIndex,
reverseTransition: reverseTransition,
enteringDelay: enteringDelay,
enteringProp: enteringProp,
childProps: childProps,
rtl: Boolean(rtl)
});
delete rest.end;
delete rest.reverseTransition;
delete rest.start;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TransitionGroup["default"], _objectSpread(_objectSpread({}, rest), {}, {
childFactory: childFactory,
currentIndex: index,
onTransition: this.handleTransition,
onWillTransition: this.handleWillTransition,
size: size,
children: views
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
if (props.reverseTransition != null) {
return {
index: props.index,
prevIndex: state.index,
reverseTransition: !!props.reverseTransition
};
} else if (props.index !== state.index) {
return {
index: props.index,
prevIndex: state.index,
reverseTransition: state.index > props.index
};
}
return null;
}
}]);
}(_react.Component), _Class.displayName = 'ViewManager', _Class.propTypes = /** @lends ui/ViewManager.ViewManagerBase.prototype */{
/**
* Arranger to control the animation
*
* @type {Arranger}
*/
arranger: _Arranger.shape,
/**
* An object containing properties to be passed to each child.
*
* @type {Object}
* @public
*/
childProps: _propTypes2["default"].object,
/**
* Views to be managed.
*
* May be any renderable component including custom React components or primitive DOM nodes.
*
* @type {Node}
*/
children: _propTypes2["default"].node,
/**
* Type of component wrapping the children. May be a DOM node or a custom React component.
*
* @type {String|Component}
* @default 'div'
*/
component: _propTypes["default"].renderable,
/**
* Called with a reference to the root component.
*
* When using {@link ui/ViewManager.ViewManager}, the `ref` prop is forwarded to this
* component as `componentRef`.
*
* @type {Object|Function}
* @public
*/
componentRef: _propTypes["default"].ref,
/**
* Time in milliseconds to complete a transition
*
* @type {Number}
* @default 300
*/
duration: _propTypes2["default"].number,
/**
* Index of last visible view.
*
* Defaults to the current value of `index`.
*
* @type {Number}
* @default value of index
*/
end: _propTypes2["default"].number,
/**
* Time, in milliseconds, to wait after a view has entered to inform it by pass the
* `enteringProp` as false.
*
* @type {Number}
* @default 0
*/
enteringDelay: _propTypes2["default"].number,
/**
* Name of the property to pass to the wrapped view to indicate when it is entering the
* viewport.
*
* When `true`, the view has been created but has not transitioned into place.
* When `false`, the view has finished its transition.
*
* The notification can be delayed by setting `enteringDelay`. If not set, the view will not
* be notified of the change in transition.
*
* @type {String}
*/
enteringProp: _propTypes2["default"].string,
/**
* Index of active view
*
* @type {Number}
* @default 0
*/
index: _propTypes2["default"].number,
/**
* Indicates if the transition should be animated
*
* @type {Boolean}
* @default false
*/
noAnimation: _propTypes2["default"].bool,
/**
* Called when each view is rendered during initial construction.
*
* @type {Function}
*/
onAppear: _propTypes2["default"].func,
/**
* Called when each view completes its transition into the viewport.
*
* @type {Function}
*/
onEnter: _propTypes2["default"].func,
/**
* Called when each view completes its transition out of the viewport.
*
* @type {Function}
*/
onLeave: _propTypes2["default"].func,
/**
* Called when each view completes its transition within the viewport.
*
* @type {Function}
*/
onStay: _propTypes2["default"].func,
/**
* Called once when all views have completed their transition.
*
* @type {Function}
*/
onTransition: _propTypes2["default"].func,
/**
* Called once before views begin their transition.
*
* @type {Function}
*/
onWillTransition: _propTypes2["default"].func,
/**
* Explicitly sets the transition direction.
*
* If omitted, the direction is determined automatically based on the change of index or a
* string comparison of the first child's key.
*
* @type {Boolean}
*/
reverseTransition: _propTypes2["default"].bool,
/**
* Indicates the current locale uses right-to-left reading order.
*
* `rtl` is passed to the `arranger` in order to alter the animation (e.g. reversing the
* horizontal direction).
*
* @type {Boolean}
*/
rtl: _propTypes2["default"].bool,
/**
* Index of first visible view. Defaults to the current value of `index`.
*
* @type {Number}
* @default value of index
*/
start: _propTypes2["default"].number
}, _Class.defaultProps = {
component: 'div',
duration: 300,
index: 0
}, _Class);
/**
* Applies ViewManager behaviors.
*
* @hoc
* @memberof ui/ViewManager
* @mixes ui/ForwardRef.ForwardRef
* @public
*/
var ViewManagerDecorator = exports.ViewManagerDecorator = (0, _ForwardRef["default"])({
prop: 'componentRef'
});
/**
* A `ViewManager` controls the visibility of a configurable number of views, allowing for them to be
* transitioned on and off the viewport.
*
* @class ViewManager
* @memberof ui/ViewManager
* @extends ui/ViewManager.ViewManagerBase
* @mixes ui/ViewManager.ViewManagerDecorator
* @omit componentRef
* @ui
* @public
*/
var ViewManager = exports.ViewManager = ViewManagerDecorator(ViewManagerBase);
var _default = exports["default"] = ViewManager;