@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
352 lines (349 loc) • 16.2 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var ViewManagerBase = exports.ViewManagerBase = (_class = /*#__PURE__*/function (_Component) {
_inherits(ViewManagerBase, _Component);
var _super = _createSuper(ViewManagerBase);
function ViewManagerBase(props) {
var _this;
_classCallCheck(this, ViewManagerBase);
_this = _super.call(this, 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(_assertThisInitialized(_this), 'handleTransition');
_this.handleWillTransition = (0, _handle["default"])((0, _handle.forwardCustom)('onWillTransition', _this.makeTransitionEvent)).bindAs(_assertThisInitialized(_this), 'handleWillTransition');
_this.state = {
prevIndex: null,
reverseTransition: null
};
return _this;
}
_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;
}
}]);
return ViewManagerBase;
}(_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;