@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
333 lines (327 loc) • 15.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.ThemeDecorator = void 0;
Object.defineProperty(exports, "getLastInputType", {
enumerable: true,
get: function get() {
return _SpotlightRootDecorator.getInputType;
}
});
var _dispatcher = require("@enact/core/dispatcher");
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _keymap = require("@enact/core/keymap");
var _I18nDecorator = _interopRequireDefault(require("@enact/i18n/I18nDecorator"));
var _SpotlightRootDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightRootDecorator"));
var _FloatingLayer = require("@enact/ui/FloatingLayer");
var _resolution = require("@enact/ui/resolution");
var _Touchable = require("@enact/ui/Touchable");
var _lastInputType = require("@enact/webos/lastInputType");
var _platform = _interopRequireDefault(require("@enact/webos/platform"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _AccessibilityDecorator = _interopRequireDefault(require("./AccessibilityDecorator"));
var _I18nFontDecorator = _interopRequireDefault(require("./I18nFontDecorator"));
var _screenTypes = _interopRequireDefault(require("./screenTypes.json"));
var _ThemeDecoratorModule = _interopRequireDefault(require("./ThemeDecorator.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["skin"];
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 _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 _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); }
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); } /**
* Exports the {@link sandstone/ThemeDecorator.ThemeDecorator} HOC
*
* @module sandstone/ThemeDecorator
* @exports ThemeDecorator
*/ /**
* Default config for `ThemeDecorator`.
*
* @memberof sandstone/ThemeDecorator.ThemeDecorator
* @hocconfig
*/
var defaultConfig = /** @lends sandstone/ThemeDecorator.ThemeDecorator.defaultConfig */{
/**
* Applies AccessibilityDecorator.
*
* If not applied, app will not support accessibility options.
*
* @type {Boolean}
* @default true
* @see {@link sandstone/ThemeDecorator.AccessibilityDecorator}
* @public
*/
accessible: true,
/**
* Disables use of full screen.
*
* @type {Boolean}
* @default false
* @public
*/
disableFullscreen: false,
/**
* Enables a floating layer for popup components.
*
* If not applied, app will be responsible for applying the decorator.
*
* @type {Boolean}
* @default true
* @see {@link ui/FloatingLayer.FloatingLayerDecorator}
* @public
*/
"float": true,
/**
* Options for I18nDecorator.
*
* May be `false` to prevent applying the decorator. If not applied, app will be responsible for
* applying the decorator.
*
* @type {Object|false}
* @default {sync: true}
* @see {@link i18n/I18nDecorator}
* @public
*/
i18n: {
sync: true
},
/**
* Disables setting spotlight focus on first render.
*
* @type {Boolean}
* @default false
* @public
*/
noAutoFocus: false,
/**
* Enables overlay mode (no background color will be applied).
*
* @type {Boolean}
* @default false
* @public
*/
overlay: false,
/**
* Override the resolution independence settings.
*
* @type {Object}
* @see {@link ui/resolution}
* @public
*/
ri: {
screenTypes: _screenTypes["default"]
},
/**
* Specifies the id of the React DOM tree root node
*
* @type {String}
* @default 'root'
* @public
*/
rootId: 'root',
/**
* Applies skinning support.
*
* @type {Boolean}
* @default true
* @see {@link sandstone/Skinnable}
* @public
*/
skin: true,
/**
* Applies spotlight decorator.
*
* If not applied, app will be responsible for applying the decorator.
*
* @type {Boolean}
* @default true
* @see {@link spotlight/SpotlightRootDecorator}
* @public
*/
spotlight: true
};
/**
* A higher-order component that applies Sandstone theming to an application.
*
* It also applies {@link ui/FloatingLayer.FloatingLayerDecorator|floating layer},
* {@link ui/resolution.ResolutionDecorator|resolution independence},
* {@link sandstone/Skinnable|skin support}, {@link spotlight.SpotlightRootDecorator|spotlight}, and
* {@link i18n/I18nDecorator.I18nDecorator|internationalization support}.
* It is meant to be applied to the root element of an app.
*
* {@link sandstone/Skinnable|Skins} provide a way to change the coloration of your app. The
* currently supported skins for Sandstone are "sandstone" (the default, dark skin) and
* "sandstone-light". Use the `skin` property to assign a skin. Ex: `<DecoratedApp skin="light" />`
*
* Note: This HoC passes `className` to the wrapped component. It must be passed to the main DOM
* node.
*
* @class ThemeDecorator
* @memberof sandstone/ThemeDecorator
* @mixes ui/FloatingLayer.FloatingLayerDecorator
* @mixes ui/resolution.ResolutionDecorator
* @mixes spotlight/SpotlightRootDecorator.SpotlightRootDecorator
* @mixes sandstone/Skinnable.Skinnable
* @mixes sandstone/ThemeDecorator.AccessibilityDecorator
* @hoc
* @public
*/
var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var _class;
var accessible = config.accessible,
ri = config.ri,
i18n = config.i18n,
spotlight = config.spotlight,
_float = config["float"],
noAutoFocus = config.noAutoFocus,
overlay = config.overlay,
skin = config.skin,
disableFullscreen = config.disableFullscreen,
rootId = config.rootId;
// Apply classes depending on screen type (overlay / fullscreen)
var bgClassName = (0, _classnames["default"])(_defineProperty({
'enact-fit': !disableFullscreen
}, _ThemeDecoratorModule["default"].bg, !overlay));
var requestInputType = null;
var App = Wrapped;
if (_float) App = (0, _FloatingLayer.FloatingLayerDecorator)({
wrappedClassName: bgClassName
}, App);
if (ri) App = (0, _resolution.ResolutionDecorator)(ri, App);
if (i18n) {
// Apply the @enact/i18n decorator around the font decorator so the latter will update the
// font stylesheet when the locale changes
App = (0, _I18nDecorator["default"])(_objectSpread(_objectSpread({}, i18n), {}, {
// We use the latin fonts (with non-Latin fallback) for these languages (even though
// their scripts are non-latin)
latinLanguageOverrides: ['ko', 'ha', 'el', 'bg', 'mk', 'mn', 'ru', 'uk', 'kk'],
// We use the non-latin fonts for these languages (even though their scripts are
// technically considered latin)
nonLatinLanguageOverrides: ['en-JP']
}), (0, _I18nFontDecorator["default"])(App));
}
if (spotlight) App = (0, _SpotlightRootDecorator["default"])({
noAutoFocus: noAutoFocus
}, App);
if (skin) App = (0, _Skinnable["default"])(App);
if (accessible) App = (0, _AccessibilityDecorator["default"])(App);
// add webOS-specific key maps
(0, _keymap.addAll)({
cancel: 461,
nonModal: [461, 415,
// play
19,
// pause
403,
// red
404,
// green
405,
// yellow
406,
// blue
33,
// channel up
34 // channel down
],
red: 403,
green: 404,
yellow: 405,
blue: 406,
play: 415,
pause: 19,
rewind: 412,
fastForward: 417,
pointerHide: 1537,
pointerShow: 1536
});
// configure the default hold time
(0, _Touchable.configure)({
hold: {
events: [{
name: 'hold',
time: 400
}]
}
});
// set the DOM node ID of the React DOM tree root
(0, _dispatcher.setDefaultTargetById)(rootId);
var Decorator = (_class = /*#__PURE__*/function (_Component) {
_inherits(Decorator, _Component);
var _super = _createSuper(Decorator);
function Decorator() {
_classCallCheck(this, Decorator);
return _super.apply(this, arguments);
}
_createClass(Decorator, [{
key: "componentDidMount",
value: function componentDidMount() {
if (spotlight && _platform["default"].tv) {
(0, _SpotlightRootDecorator.activateInputType)(true);
requestInputType = (0, _lastInputType.requestLastInputType)({
onSuccess: function onSuccess(res) {
if (res.lastInputType === 'key' || res.lastInputType === 'mouse' || res.lastInputType === 'touch') {
(0, _SpotlightRootDecorator.setInputType)(res.lastInputType);
} else {
(0, _SpotlightRootDecorator.activateInputType)(false);
}
},
onFailure: function onFailure() {
(0, _SpotlightRootDecorator.activateInputType)(false);
}
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (requestInputType) {
requestInputType.cancel();
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
skinProp = _this$props.skin,
rest = _objectWithoutProperties(_this$props, _excluded);
var skinName = skinProp || 'neutral';
var className = (0, _classnames["default"])(_ThemeDecoratorModule["default"].root, this.props.className, 'sandstone-theme', 'enact-unselectable', _defineProperty(_defineProperty({}, bgClassName, !_float), 'enact-fit', !disableFullscreen));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, rest), {}, {
skin: skinName,
className: className
}));
}
}]);
return Decorator;
}(_react.Component), _class.displayName = 'ThemeDecorator', _class.propTypes = /** @lends sandstone/ThemeDecorator.prototype */{
/**
* Assign a skin.
*
* @type {String}
* @private
*/
skin: _propTypes["default"].string
}, _class);
return Decorator;
});
var _default = exports["default"] = ThemeDecorator;