@enact/moonstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
235 lines (231 loc) • 11.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.PanelBase = exports.Panel = void 0;
var _handle = require("@enact/core/handle");
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SharedStateDecorator = _interopRequireDefault(require("../internal/SharedStateDecorator"));
var _PanelModule = _interopRequireDefault(require("./Panel.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["bodyClassName", "children", "header", "headerId", "spotOnRender"];
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 _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; }
var panelId = 0;
/**
* A Panel is the standard view container used inside a {@link moonstone/Panels.Panels|Panels} view
* manager instance.
*
* {@link moonstone/Panels.Panels|Panels} will typically contain several instances of these and
* transition between them.
*
* @class Panel
* @memberof moonstone/Panels
* @ui
* @public
*/
var PanelBase = exports.PanelBase = (0, _kind["default"])({
name: 'Panel',
propTypes: /** @lends moonstone/Panels.Panel.prototype */{
/**
* The "aria-label" for the Panel.
*
* By default, the panel will be labeled by its {@link moonstone/Panels.Header|Header}.
* When `aria-label` is set, it will be used instead to provide an accessibility label for
* the panel.
*
* @memberof moonstone/Panels.Panel.prototype
* @type {String}
* @public
*/
'aria-label': _propTypes["default"].string,
/**
* 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 moonstone/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>
* );
* ```
*
* @type {String}
* @default 'last-focused'
* @public
*/
autoFocus: _propTypes["default"].string,
/**
* Header for the panel.
*
* This is usually passed by the {@link ui/Slottable.Slottable|Slottable} API by using a
* {@link moonstone/Panels.Header|Header} component as a child of the Panel.
*
* @type {Header}
* @public
*/
header: _propTypes["default"].node,
/**
* Hides the body components.
*
* When a Panel is used within {@link moonstone/Panels.Panels|Panels},
* {@link moonstone/Panels.ActivityPanels|ActivityPanels}, or
* {@link moonstone/Panels.AlwaysViewingPanels|AlwaysViewingPanels},
* this property will be set automatically to `true` on render and `false` after animating
* into view.
*
* @type {Boolean}
* @default false
* @public
*/
hideChildren: _propTypes["default"].bool
},
defaultProps: {
autoFocus: 'last-focused',
hideChildren: false
},
styles: {
css: _PanelModule["default"],
className: 'panel'
},
handlers: {
onScroll: (0, _handle.handle)((0, _handle.forward)('onScroll'), function (_ref) {
var currentTarget = _ref.currentTarget;
currentTarget.scrollTop = 0;
currentTarget.scrollLeft = 0;
}),
spotOnRender: function spotOnRender(node, _ref2) {
var autoFocus = _ref2.autoFocus;
if (node && !_spotlight["default"].getCurrent()) {
var spotlightId = node.dataset.spotlightId;
var config = {
enterTo: 'last-focused'
};
if (autoFocus !== 'last-focused') {
config.enterTo = 'default-element';
if (autoFocus !== 'default-element') {
config.defaultElement = autoFocus;
}
}
_spotlight["default"].set(spotlightId, config);
_spotlight["default"].focus(spotlightId);
}
}
},
computed: {
spotOnRender: function spotOnRender(_ref3) {
var autoFocus = _ref3.autoFocus,
hideChildren = _ref3.hideChildren,
_spotOnRender = _ref3.spotOnRender;
// In order to spot the body components, we defer spotting until !hideChildren. If the
// Panel opts out of hideChildren support by explicitly setting it to false, it'll spot
// on first render.
if (hideChildren || autoFocus === 'none') {
return null;
}
return _spotOnRender;
},
children: function children(_ref4) {
var _children = _ref4.children,
hideChildren = _ref4.hideChildren;
return hideChildren ? null : _children;
},
bodyClassName: function bodyClassName(_ref5) {
var header = _ref5.header,
hideChildren = _ref5.hideChildren,
styler = _ref5.styler;
return styler.join({
body: true,
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)
headerId: function headerId(_ref6) {
var label = _ref6['aria-label'];
return label ? null : "panel_".concat(++panelId, "_header");
}
},
render: function render(_ref7) {
var bodyClassName = _ref7.bodyClassName,
children = _ref7.children,
header = _ref7.header,
headerId = _ref7.headerId,
spotOnRender = _ref7.spotOnRender,
rest = _objectWithoutProperties(_ref7, _excluded);
delete rest.autoFocus;
delete rest.hideChildren;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("article", _objectSpread(_objectSpread({
role: "region"
}, rest), {}, {
"aria-labelledby": headerId,
ref: spotOnRender,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _PanelModule["default"].header,
id: headerId,
children: header
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
className: bodyClassName,
children: children
})]
}));
}
});
/**
* 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 moonstone/Panels.Panel.prototype
*/
var Panel = exports.Panel = (0, _SharedStateDecorator["default"])({
idProp: 'data-index'
}, (0, _SpotlightContainerDecorator["default"])({
// prefer any spottable within the panel body for first render
continue5WayHold: true,
defaultElement: [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass), ".".concat(_PanelModule["default"].body, " *")],
enterTo: 'last-focused',
preserveId: true
}, (0, _Slottable["default"])({
slots: ['header']
}, PanelBase)));
var _default = exports["default"] = Panel;