@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
430 lines (426 loc) • 18.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.PageViews = void 0;
var _handle = _interopRequireWildcard(require("@enact/core/handle"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _I18nDecorator = require("@enact/i18n/I18nDecorator");
var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
var _Layout = require("@enact/ui/Layout");
var _ViewManager = _interopRequireWildcard(require("@enact/ui/ViewManager"));
var _classnames = _interopRequireDefault(require("classnames"));
var _IString = _interopRequireDefault(require("ilib/lib/IString"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Button = _interopRequireDefault(require("../Button"));
var _$L = _interopRequireDefault(require("../internal/$L"));
var _Panels = require("../internal/Panels");
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _Steps = _interopRequireDefault(require("../Steps"));
var _PageViewsRouter = require("./PageViewsRouter");
var _PageViewsModule = _interopRequireDefault(require("./PageViews.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["aria-label", "componentRef", "fullContents", "index", "pageIndicatorType", "renderNextButton", "renderPrevButton", "renderViewManager", "steps"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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 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 _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 _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 _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); } /**
* A PageViews that has page indicator with corresponding pages.
*
* @example
* <PageViews>
* <PageViews.Page aria-label="This is a description for page">
* lorem ipsum ...
* </PageViews.Page>
* </PageViews>
*
* @class PageViewsBase
* @memberof sandstone/PageViews
* @ui
* @public
*/
var PageViewsBase = (0, _kind["default"])({
name: 'PageViews',
propTypes: /** @lends sandstone/PageViews.PageViewsBase.prototype */{
'aria-label': _propTypes2["default"].string,
/**
* Set of functions that control how the pages are transitioned into and out of the
* viewport.
*
* @see {@link ui/ViewManager.SlideArranger}
* @type {ui/ViewManager.Arranger}
* @default ui/ViewManager.SlideLeftArranger
* @private
*/
arranger: _ViewManager.shape,
/**
* {@link sandstone/PageViews.Page|Page} to be rendered.
*
* @type {Node}
* @public
*/
children: _propTypes2["default"].node,
/**
* Obtains a reference to the root node.
*
* @type {Function|Object}
* @public
*/
componentRef: _propTypes["default"].ref,
/**
* When `true`, maximize its contents area.
*
* @type {Boolean}
* @public
*/
fullContents: _propTypes2["default"].bool,
/**
* Index of the active page.
*
* @type {Number}
* @default 0
* @public
*/
index: _propTypes2["default"].number,
/**
* Offset to apply to the position of the navigation buttons.
*
* @type {Number}
* @private
*/
navigationButtonOffset: _propTypes2["default"].number,
/**
* Disables page transitions.
*
* @type {Boolean}
* @default false
* @public
*/
noAnimation: _propTypes2["default"].bool,
/**
* Called when a transition completes.
*
* @type {Function}
* @public
*/
onTransition: _propTypes2["default"].func,
/**
* Called before a transition begins.
*
* @type {Function}
* @public
*/
onWillTransition: _propTypes2["default"].func,
/**
* Type of page indicator.
*
* There are two types:
*
* * `dot` - Indicates pages by dots.
* * `number` - Indicates pages by current page number and total number of pages.
*
* @type {('dot'|'number')}
* @default 'dot'
* @public
*/
pageIndicatorType: _propTypes2["default"].oneOf(['dot', 'number']),
/**
* Explicitly sets the ViewManager transition direction.
*
* @type {Boolean}
* @private
*/
reverseTransition: _propTypes2["default"].bool,
/**
* The total number of pages.
*
* @type {Number}
* @private
*/
totalIndex: _propTypes2["default"].number
},
defaultProps: {
arranger: _Panels.BasicArranger,
pageIndicatorType: 'dot'
},
styles: {
css: _PageViewsModule["default"],
className: 'pageViews',
publicClassNames: true
},
handlers: {
onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref) {
var index = _ref.index,
onChange = _ref.onChange,
totalIndex = _ref.totalIndex;
if (onChange && index !== totalIndex) {
var nextIndex = index < totalIndex - 1 ? index + 1 : index;
onChange({
type: 'onChange',
index: nextIndex
});
}
}),
onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref2) {
var index = _ref2.index,
onChange = _ref2.onChange;
if (onChange && index !== 0) {
var prevIndex = index > 0 ? index - 1 : index;
onChange({
type: 'onChange',
index: prevIndex
});
}
}),
onTransition: function onTransition(ev, _ref3) {
var index = _ref3.index,
_onTransition = _ref3.onTransition;
if (_onTransition) {
_onTransition({
type: 'onTransition',
index: index
});
}
},
onWillTransition: function onWillTransition(ev, _ref4) {
var index = _ref4.index,
_onWillTransition = _ref4.onWillTransition;
if (_onWillTransition) {
_onWillTransition({
type: 'onWillTransition',
index: index
});
}
}
},
computed: {
'aria-label': function ariaLabel(_ref5) {
var _children$index;
var children = _ref5.children,
index = _ref5.index,
totalIndex = _ref5.totalIndex;
var pageHint = new _IString["default"]((0, _$L["default"])('Page {current} out of {total}')).format({
current: index + 1,
total: totalIndex
});
return "".concat(pageHint, " ").concat((children === null || children === void 0 || (_children$index = children[index]) === null || _children$index === void 0 ? void 0 : _children$index.props['aria-label']) || '');
},
className: function className(_ref6) {
var fullContents = _ref6.fullContents,
pageIndicatorType = _ref6.pageIndicatorType,
styler = _ref6.styler;
return styler.append({
fullContents: fullContents
}, pageIndicatorType);
},
renderNextButton: function renderNextButton(_ref7) {
var onNextClick = _ref7.onNextClick,
index = _ref7.index,
totalIndex = _ref7.totalIndex,
navigationButtonOffset = _ref7.navigationButtonOffset;
var isNextButtonVisible = index < totalIndex - 1;
var navigationButtonStyle = {
top: typeof navigationButtonOffset === 'number' ? navigationButtonOffset : null
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].navButton,
shrink: true,
children: isNextButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
"aria-label": (0, _$L["default"])('Next'),
icon: "arrowlargeright",
iconFlip: "auto",
id: "NextNavButton",
onClick: onNextClick,
size: "small",
style: navigationButtonStyle
}) : null
});
},
renderPrevButton: function renderPrevButton(_ref8) {
var index = _ref8.index,
onPrevClick = _ref8.onPrevClick,
navigationButtonOffset = _ref8.navigationButtonOffset;
var isPrevButtonVisible = index !== 0;
var navigationButtonStyle = {
top: typeof navigationButtonOffset === 'number' ? navigationButtonOffset : null
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].navButton,
shrink: true,
children: isPrevButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
"aria-label": (0, _$L["default"])('Previous'),
icon: "arrowlargeleft",
iconFlip: "auto",
id: "PrevNavButton",
onClick: onPrevClick,
size: "small",
style: navigationButtonStyle
}) : null
});
},
renderViewManager: function renderViewManager(_ref9) {
var arranger = _ref9.arranger,
index = _ref9.index,
noAnimation = _ref9.noAnimation,
onTransition = _ref9.onTransition,
onWillTransition = _ref9.onWillTransition,
reverseTransition = _ref9.reverseTransition,
children = _ref9.children;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
arranger: arranger,
className: _PageViewsModule["default"].viewManager,
component: _ViewManager["default"],
duration: 400,
index: index,
noAnimation: noAnimation,
onTransition: onTransition,
onWillTransition: onWillTransition,
reverseTransition: reverseTransition,
children: children
});
},
steps: function steps(_ref10) {
var index = _ref10.index,
onNextClick = _ref10.onNextClick,
onPrevClick = _ref10.onPrevClick,
pageIndicatorType = _ref10.pageIndicatorType,
totalIndex = _ref10.totalIndex;
var isPrevButtonVisible = index !== 0;
var isNextButtonVisible = index < totalIndex - 1;
var isStepVisible = totalIndex !== 1;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: pageIndicatorType !== 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
className: (0, _classnames["default"])(_PageViewsModule["default"].stepsRow, _defineProperty({}, _PageViewsModule["default"].hidden, !isStepVisible)),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps["default"], {
css: _PageViewsModule["default"],
current: index + 1,
highlightCurrentOnly: true,
total: totalIndex
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
className: _PageViewsModule["default"].stepsRow,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].navButton,
shrink: true,
children: isPrevButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
"aria-label": (0, _$L["default"])('Previous'),
icon: "arrowlargeleft",
iconFlip: "auto",
id: "PrevNavButton",
onClick: onPrevClick,
size: "small"
}) : null
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].pageNumber,
shrink: true,
children: index + 1
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].separator,
shrink: true,
children: "/"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].pageNumber,
shrink: true,
children: totalIndex
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
className: _PageViewsModule["default"].navButton,
shrink: true,
children: isNextButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
"aria-label": (0, _$L["default"])('Next'),
icon: "arrowlargeright",
iconFlip: "auto",
id: "NextNavButton",
onClick: onNextClick,
size: "small"
}) : null
})]
})
});
}
},
render: function render(_ref11) {
var ariaLabel = _ref11['aria-label'],
componentRef = _ref11.componentRef,
fullContents = _ref11.fullContents,
index = _ref11.index,
pageIndicatorType = _ref11.pageIndicatorType,
renderNextButton = _ref11.renderNextButton,
renderPrevButton = _ref11.renderPrevButton,
renderViewManager = _ref11.renderViewManager,
steps = _ref11.steps,
rest = _objectWithoutProperties(_ref11, _excluded);
delete rest.arranger;
delete rest.children;
delete rest.noAnimation;
delete rest.onTransition;
delete rest.onNextClick;
delete rest.onPrevClick;
delete rest.onWillTransition;
delete rest.reverseTransition;
delete rest.totalIndex;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
role: "region",
"aria-labelledby": "pageViews_index_".concat(index),
ref: componentRef
}, rest), {}, {
children: [!fullContents && pageIndicatorType === 'dot' ? steps : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Column, {
"aria-label": ariaLabel,
className: _PageViewsModule["default"].contentsArea,
id: "pageViews_index_".concat(index),
children: fullContents ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
className: _PageViewsModule["default"].horizontalLayout,
children: renderViewManager
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
className: _PageViewsModule["default"].navButtonContainer,
children: [pageIndicatorType === 'dot' ? renderPrevButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {}), pageIndicatorType === 'dot' ? renderNextButton : null]
}), steps]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
className: _PageViewsModule["default"].horizontalLayout,
children: [pageIndicatorType === 'dot' ? renderPrevButton : null, renderViewManager, pageIndicatorType === 'dot' ? renderNextButton : null]
})
}), !fullContents && pageIndicatorType === 'number' ? steps : null]
}));
}
});
/**
* Sets the strategy used to automatically focus an element within the PageViews upon render.
* When set to 'none', focus is not set only on the first render.
*
* @name autoFocus
* @type {('default-element'|'last-focused'|'none'|String)}
* @memberof sandstone/PageViews.PageViews.prototype
* @default 'last-focused'
* @public
*/
var PageViewsDecorator = (0, _compose["default"])((0, _Changeable["default"])({
prop: 'index'
}), (0, _SpotlightContainerDecorator["default"])({
continue5WayHold: true,
defaultElement: [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass), ".".concat(_PageViewsModule["default"].viewManager, " *"), ".".concat(_PageViewsModule["default"].navButton, " *")],
enterTo: 'last-focused'
}), (0, _I18nDecorator.I18nContextDecorator)({
rtlProp: 'rtl'
}), _PageViewsRouter.PageViewsRouter, _Skinnable["default"]);
/**
* A PageViews that can navigate through different pages.
* Expects {@link sandstone/PageViews.Page|Page} as children.
*
* @class PageViews
* @memberof sandstone/PageViews
* @extends sandstone/PageViews.PageViewsBase
* @mixes ui/Changeable.Changeable
* @ui
* @public
*/
var PageViews = exports.PageViews = PageViewsDecorator(PageViewsBase);
var _default = exports["default"] = PageViews;