@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
287 lines (282 loc) • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.PopupDecorator = void 0;
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _util = require("@enact/core/util");
var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
var _invariant = _interopRequireDefault(require("invariant"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _Skinnable = _interopRequireDefault(require("../../Skinnable"));
var _Popup = _interopRequireDefault(require("../../Popup"));
var _CancelDecorator = _interopRequireDefault(require("./CancelDecorator"));
var _TransitionDecorator = _interopRequireDefault(require("./TransitionDecorator"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "className", "generateId", "id", "index", "noAnimation", "onBack", "onClose"]; // List all of the props from Popup that we want to move from this component's root onto Popup.
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 popupPropList = ['noAutoDismiss', 'onHide', 'onKeyDown', 'onShow', 'open', 'position', 'scrimType', 'spotlightId', 'spotlightRestrict'];
// TODO: Figure out how to document private sub-module members
/**
* Default config for {@link sandstone/Panels.PopupDecorator}
* @hocconfig
* @memberof sandstone/Panels.PopupDecorator
* @private
*/
var defaultConfig = {
/**
* Classes to be added to the root node
*
* @type {String}
* @default null
* @memberof sandstone/Panels.PopupDecorator.defaultConfig
*/
className: null,
/**
* Class name module map
*
* @type {Object}
* @default null
* @memberof sandstone/Panels.PopupDecorator.defaultConfig
*/
css: null,
/**
* Support accessibility options.
*
* If true, the aria-live and role in Popup are `null`.
*
* @type {Boolean}
* @default false
* @memberof sandstone/Panels.PopupDecorator.defaultConfig
*/
noAlertRole: false,
/**
* Disables the outline in high contrast mode.
*
* @type {Boolean}
* @default false
* @private
*/
noOutline: false,
/**
* Arranger for Panels
*
* @type {Object}
* @default null
* @memberof sandstone/Panels.PopupDecorator.defaultConfig
*/
panelArranger: null
};
/**
* A higher-order component that puts a Panels component into a Popup.
*
* @class PopupDecorator
* @type {Function}
* @hoc
* @private
* @memberof sandstone/Panels
*/
var PopupDecorator = exports.PopupDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var cfgClassName = config.className,
css = config.css,
noAlertRole = config.noAlertRole,
noOutline = config.noOutline,
panelArranger = config.panelArranger,
panelType = config.panelType;
var CancelableWrapped = (0, _CancelDecorator["default"])({
cancel: 'onBack'
}, Wrapped);
var Decorator = (0, _kind["default"])({
name: 'PopupDecorator',
propTypes: /** @lends sandstone/Panels.PopupDecorator.prototype */{
/**
* An object containing properties to be passed to each child.
*
* @type {Object}
* @public
*/
childProps: _propTypes["default"].object,
/**
* Panels to be rendered
*
* @type {Node}
*/
children: _propTypes["default"].node,
/**
* Instructs the Popup to fill the entire height of the screen.
*
* Normally, the popup will flex in height to match the size of the content until the
* screen bounds are met. Use this if you require a full-height popup but don't have
* enough content to fill the space or you want a component to stretch to the edges.
*
* @type {Boolean}
* @public
*/
fullHeight: _propTypes["default"].bool,
/**
* Function that generates unique identifiers for Panel instances
*
* @type {Function}
* @required
* @private
*/
generateId: _propTypes["default"].func,
/**
* Unique identifier for the Panels instance
*
* @type {String}
* @public
*/
id: _propTypes["default"].string,
/**
* Index of the active panel
*
* @type {Number}
* @default 0
* @public
*/
index: _propTypes["default"].number,
/**
* Disable transitions.
*
* @type {Boolean}
* @default false
* @public
*/
noAnimation: _propTypes["default"].bool,
/**
* Called with cancel/back key events.
*
* @type {Function}
* @public
*/
onBack: _propTypes["default"].func,
/**
* Called when closing this Panels instance.
*
* @type {Function}
* @public
*/
onClose: _propTypes["default"].func,
/**
* Position of the Popup on the screen.
*
* @type {('left'|'right')}
* @default 'right'
* @public
*/
// Intentionally excluded 'bottom', 'center', 'fullscreen', and 'top' as those aren't configured for this component at this time.
position: _propTypes["default"].oneOf(['left', 'right']),
/**
* Scrim type.
*
* @type {('transparent'|'translucent'|'none')}
* @default 'translucent'
* @public
*/
scrimType: _propTypes["default"].oneOf(['transparent', 'translucent', 'none']),
/**
* Restricts or prioritizes navigation when focus attempts to leave the popup.
*
* @type {('self-first'|'self-only')}
* @default 'self-only'
* @public
*/
spotlightRestrict: _propTypes["default"].oneOf(['self-first', 'self-only']),
/**
* Size of the popup.
*
* @type {('narrow'|'half')}
* @default 'narrow'
* @private
*/
width: _propTypes["default"].oneOf(['narrow', 'half'])
},
defaultProps: {
fullHeight: false,
index: 0,
noAnimation: false,
position: 'right',
scrimType: 'translucent',
spotlightRestrict: 'self-only',
width: 'narrow'
},
styles: {
css: css,
className: cfgClassName
},
computed: {
className: function className(_ref) {
var fullHeight = _ref.fullHeight,
scrimType = _ref.scrimType,
width = _ref.width,
styler = _ref.styler;
return styler.append("scrim".concat((0, _util.cap)(scrimType)), width, {
fullHeight: fullHeight
});
},
spotlightRestrict: function spotlightRestrict(_ref2) {
var scrimType = _ref2.scrimType,
_spotlightRestrict = _ref2.spotlightRestrict;
return scrimType !== 'none' ? 'self-only' : _spotlightRestrict;
}
},
render: function render(_ref3) {
var children = _ref3.children,
className = _ref3.className,
generateId = _ref3.generateId,
id = _ref3.id,
index = _ref3.index,
noAnimation = _ref3.noAnimation,
onBack = _ref3.onBack,
onClose = _ref3.onClose,
rest = _objectWithoutProperties(_ref3, _excluded);
var count = _react.Children.count(children);
!(index === 0 && count === 0 || index < count) ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, "Panels index, ".concat(index, ", is invalid for number of children, ").concat(count)) : (0, _invariant["default"])(false) : void 0;
// Extract all popup props
var popupProps = {};
for (var prop in rest) {
if (popupPropList.indexOf(prop) >= 0) {
popupProps[prop] = rest[prop];
delete rest[prop];
}
}
delete rest.fullHeight;
delete rest.width;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup["default"], _objectSpread(_objectSpread({}, popupProps), {}, {
className: className,
"data-index": index,
id: id,
css: css,
no5WayClose: true,
noAlertRole: noAlertRole,
noAnimation: noAnimation,
noOutline: noOutline,
onClose: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelableWrapped, _objectSpread(_objectSpread({}, rest), {}, {
arranger: panelArranger,
className: css.viewport,
generateId: generateId,
id: "".concat(id, "_panels"),
index: index,
noAnimation: noAnimation,
onBack: onBack,
onClose: onClose,
type: panelType,
children: children
}))
}));
}
});
return (0, _TransitionDecorator["default"])((0, _IdProvider["default"])((0, _Skinnable["default"])(Decorator)));
});
var _default = exports["default"] = PopupDecorator;