@enact/moonstone/Skinnable/Skinnable.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Skinnable = void 0;
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _Skinnable = _interopRequireDefault(require("@enact/ui/Skinnable"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
 * Exports the {@link moonstone/Skinnable.Skinnable|Skinnable} higher-order component (HOC).
 *
 * @module moonstone/Skinnable
 * @exports Skinnable
 * @public
 */

var defaultConfig = {
  skins: {
    dark: 'moonstone',
    light: 'moonstone-light'
  },
  defaultVariants: ['highContrast'],
  allowedVariants: ['highContrast', 'largeText', 'grayscale']
};

/**
 * This higher-order component is based on {@link ui/Skinnable.Skinnable|ui/Skinnable}.
 *
 * `Skinnable` comes pre-configured for Moonstone's supported skins: "dark" (default) and "light".
 * It is used to apply the relevant skinning classes to each component and has been used to
 * pre-select specific skins for some components.
 *
 * Note: This HoC passes `className` to the wrapped component. It must be passed to the main DOM
 * node.
 *
 * @class Skinnable
 * @memberof moonstone/Skinnable
 * @extends ui/Skinnable.Skinnable
 * @hoc
 * @public
 */
var Skinnable = exports.Skinnable = (0, _hoc["default"])(defaultConfig, _Skinnable["default"]);

/**
 * Select a skin by name by specifying this property.
 *
 * Available Moonstone skins are `"dark"` (default) and `"light"`. This may be changed at runtime.
 * All components already use their defaults, but a skin may be changed via this prop or by using
 * `Skinnable` directly and a config object.
 *
 * Example:
 * ```
 * <Button skin="light">
 * ```
 *
 * @name skin
 * @type {String}
 * @default 'dark'
 * @memberof moonstone/Skinnable.Skinnable
 * @instance
 * @public
 */
var _default = exports["default"] = Skinnable;