@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
348 lines (341 loc) • 17.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.PanelDecorator = exports.PanelBase = exports.Panel = void 0;
var _handle = require("@enact/core/handle");
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _SharedStateDecorator = _interopRequireDefault(require("../internal/SharedStateDecorator"));
var _Panels = require("../internal/Panels");
var _util = require("../internal/Panels/util");
var _PanelModule = _interopRequireDefault(require("./Panel.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["bodyClassName", "children", "componentRef", "css", "floatingLayerId", "header", "ids"];
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var panelId = 0;
/**
* A Panel is the standard view container used inside a {@link sandstone/Panels.Panels|Panels} view
* manager instance.
*
* {@link sandstone/Panels.Panels|Panels} will typically contain several instances of these and
* transition between them.
*
* @class Panel
* @memberof sandstone/Panels
* @ui
* @public
*/
var PanelBase = exports.PanelBase = (0, _kind["default"])({
name: 'Panel',
propTypes: /** @lends sandstone/Panels.Panel.prototype */{
/**
* The "aria-label" for the Panel.
*
* By default, the panel will be labeled by its {@link sandstone/Panels.Header|Header}.
* When `aria-label` is set, it will be used instead to provide an accessibility label for
* the panel.
*
* @memberof sandstone/Panels.Panel.prototype
* @type {String}
* @public
*/
'aria-label': _propTypes2["default"].string,
/**
* Obtains a reference to the root node.
*
* @type {Function|Object}
* @public
*/
componentRef: _propTypes["default"].ref,
/**
* Customizes the component by mapping the supplied collection of CSS class names to the
* corresponding internal elements and states of this component.
*
* The following classes are supported:
*
* * `panel` - The root class name
* * `body` - The node containing the panel's children
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* The floating layer id
*
* @type {String}
* @private
*/
floatingLayerId: _propTypes2["default"].string,
/**
* Header for the panel.
*
* This is usually passed by the {@link ui/Slottable.Slottable|Slottable} API by using a
* {@link sandstone/Panels.Header|Header} component as a child of the Panel.
*
* @type {Header}
* @public
*/
header: _propTypes2["default"].node,
/**
* Hides the body components.
*
* When a Panel is used within {@link sandstone/Panels.Panels|Panels} this property will
* be set automatically to `true` on render and `false` after animating into view.
*
* @type {Boolean}
* @default false
* @public
*/
hideChildren: _propTypes2["default"].bool,
/**
* Set the type of panel to be used.
*
* @type {('wizard')}
* @private
*/
panelType: _propTypes2["default"].oneOf(['wizard'])
},
defaultProps: {
hideChildren: false
},
styles: {
css: _PanelModule["default"],
className: 'panel',
publicClassNames: ['panel', 'body']
},
handlers: {
onScroll: (0, _handle.handle)((0, _handle.forward)('onScroll'), function (_ref) {
var currentTarget = _ref.currentTarget,
eventTarget = _ref.eventTarget;
if (currentTarget === eventTarget) {
currentTarget.scrollTop = 0;
currentTarget.scrollLeft = 0;
}
})
},
computed: {
children: function children(_ref2) {
var _children = _ref2.children,
hideChildren = _ref2.hideChildren;
return hideChildren ? null : _children;
},
bodyClassName: function bodyClassName(_ref3) {
var css = _ref3.css,
header = _ref3.header,
hideChildren = _ref3.hideChildren,
styler = _ref3.styler;
return styler.join(css.body, {
noHeader: !header,
visible: !hideChildren
});
},
// nulling headerId prevents the aria-labelledby relationship which is necessary to allow
// aria-label to take precedence
// (see https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)
ids: function ids(_ref4) {
var label = _ref4['aria-label'],
panelType = _ref4.panelType;
if (label) {
return {};
} else if (panelType === 'wizard') {
var id = "panel_".concat(++panelId, "_header");
return {
headerId: id,
labelledby: id
};
} else {
var labelledby = "panel_".concat(++panelId, "_title panel_").concat(panelId, "_subtitle");
var _labelledby$split = labelledby.split(' '),
_labelledby$split2 = _slicedToArray(_labelledby$split, 2),
titleId = _labelledby$split2[0],
subtitleId = _labelledby$split2[1];
return {
labelledby: labelledby,
subtitleId: subtitleId,
titleId: titleId
};
}
}
},
render: function render(_ref5) {
var bodyClassName = _ref5.bodyClassName,
children = _ref5.children,
componentRef = _ref5.componentRef,
css = _ref5.css,
floatingLayerId = _ref5.floatingLayerId,
header = _ref5.header,
_ref5$ids = _ref5.ids,
_ref5$ids$headerId = _ref5$ids.headerId,
headerId = _ref5$ids$headerId === void 0 ? null : _ref5$ids$headerId,
_ref5$ids$labelledby = _ref5$ids.labelledby,
labelledby = _ref5$ids$labelledby === void 0 ? null : _ref5$ids$labelledby,
_ref5$ids$subtitleId = _ref5$ids.subtitleId,
subtitleId = _ref5$ids$subtitleId === void 0 ? null : _ref5$ids$subtitleId,
_ref5$ids$titleId = _ref5$ids.titleId,
titleId = _ref5$ids$titleId === void 0 ? null : _ref5$ids$titleId,
rest = _objectWithoutProperties(_ref5, _excluded);
delete rest.hideChildren;
delete rest.panelType;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("article", _objectSpread(_objectSpread({
role: "region"
}, rest), {}, {
"aria-owns": floatingLayerId,
"aria-labelledby": labelledby,
ref: componentRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: css.header,
id: headerId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
component: header,
"data-index": rest['data-index'],
subtitleId: subtitleId,
titleId: titleId
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
className: bodyClassName,
children: children
})]
}));
}
});
/**
* Sets the strategy used to automatically focus an element within the panel upon render.
*
* * "none" - Automatic focus is disabled
* * "last-focused" - The element last focused in the panel with be restored
* * "default-element" - The first spottable component within the body will be focused
* * Custom Selector - A custom CSS selector may also be provided which will be used to find
* the target within the Panel
*
* When used within {@link sandstone/Panels.Panels|Panels}, this prop may be set by
* `Panels` to "default-element" when navigating "forward" to a higher index. This behavior
* may be overridden by setting `autoFocus` on the `Panel` instance as a child of `Panels`
* or by wrapping `Panel` with a custom component and overriding the value passed by
* `Panels`.
*
* ```
* // Panel within CustomPanel will always receive "last-focused"
* const CustomPanel = (props) => <Panel {...props} autoFocus="last-focused" />;
*
* // The first panel will always receive "last-focused". The second panel will receive
* // "default-element" when navigating from the first panel but `autoFocus` will be unset
* // when navigating from the third panel and as a result will default to "last-focused".
* const MyPanels = () => (
* <Panels>
* <Panel autoFocus="last-focused" />
* <Panel />
* <Panel />
* </Panels>
* );
* ```
*
* @name autoFocus
* @type {('default-element'|'last-focused'|'none'|String)}
* @memberof sandstone/Panels.Panel.prototype
* @default 'last-focused'
* @public
*/
/**
* Applies Sandstone specific behaviors to {@link sandstone/Panels.Panel.PanelBase|Panel} components.
*
* @hoc
* @memberof sandstone/Panels
* @mixes spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
* @mixes ui/Slottable.Slottable
* @mixes sandstone/Skinnable.Skinnable
* @public
*/
var PanelDecorator = exports.PanelDecorator = (0, _hoc["default"])({
defaultElement: ".".concat(_PanelModule["default"].body, " *")
}, function (config, Wrapped) {
var defaultElement = config.defaultElement;
defaultElement = [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass)].concat(_toConsumableArray(Array.isArray(defaultElement) ? defaultElement : [defaultElement]));
var Decorator = (0, _compose["default"])((0, _ForwardRef["default"])({
prop: 'componentRef'
}), _Panels.FloatingLayerIdProvider, _util.ContextAsDefaults, (0, _SharedStateDecorator["default"])({
idProp: 'data-index'
}), (0, _SpotlightContainerDecorator["default"])({
// prefer any spottable within the panel body for first render
continue5WayHold: true,
defaultElement: defaultElement,
enterTo: 'last-focused',
lastFocusedPersist: function lastFocusedPersist(node, all) {
var filtered = all.filter(function (element) {
var _element$dataset;
return element && !((_element$dataset = element.dataset) !== null && _element$dataset !== void 0 && _element$dataset.spotlightIgnoreRestore);
});
var container = typeof node === 'string';
return {
container: container,
element: !container,
key: container ? node : filtered.indexOf(node)
};
},
lastFocusedRestore: function lastFocusedRestore(_ref6, all) {
var container = _ref6.container,
key = _ref6.key;
var filtered = all.filter(function (element) {
var _element$dataset2;
return element && !((_element$dataset2 = element.dataset) !== null && _element$dataset2 !== void 0 && _element$dataset2.spotlightIgnoreRestore);
});
return container ? key : filtered[key];
},
preserveId: true
}), (0, _Slottable["default"])({
slots: ['header']
}), _Panels.AutoFocusDecorator, _Skinnable["default"]);
return Decorator(Wrapped);
});
/**
* Prevents the component from restoring any framework shared state.
*
* When `false`, the default, Panel will store state for some framework components in order to
* restore that state when returning to the Panel. Setting this prop to `true` will suppress that
* behavior and not store or retrieve any framework component state.
*
* @name noSharedState
* @type {Boolean}
* @default false
* @memberof sandstone/Panels.Panel.prototype
*/
/**
* The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
*
* When the `Panel` is used within {@link sandstone/Panels.Panels|Panels}, this prop will be
* generated by `Panels`. When using the panel alone, you need to specify this prop for restoring focus.
*
* @name spotlightId
* @type {String}
* @memberof sandstone/Panels.Panel.prototype
*/
var Panel = exports.Panel = PanelDecorator(PanelBase);
var _default = exports["default"] = Panel;