@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
223 lines (220 loc) • 9.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProgressBarDecorator = exports.ProgressBarBase = exports.ProgressBar = void 0;
Object.defineProperty(exports, "ProgressBarTooltip", {
enumerable: true,
get: function get() {
return _ProgressBarTooltip.ProgressBarTooltip;
}
});
exports["default"] = void 0;
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
var _ProgressBar = _interopRequireDefault(require("@enact/ui/ProgressBar"));
var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _ProgressBarTooltip = require("./ProgressBarTooltip");
var _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["css", "orientation", "progress", "tooltip"];
/**
* Provides Sandstone-themed progress bar component.
*
* @example
* <ProgressBar progress={0.5} backgroundProgress={0.75} />
*
* @module sandstone/ProgressBar
* @exports ProgressBar
* @exports ProgressBarBase
* @exports ProgressBarDecorator
* @exports ProgressBarTooltip
*/
/**
* Renders a sandstone-styled progress bar.
*
* @class ProgressBarBase
* @memberof sandstone/ProgressBar
* @ui
* @public
*/
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 ProgressBarBase = exports.ProgressBarBase = (0, _kind["default"])({
name: 'ProgressBar',
propTypes: /** @lends sandstone/ProgressBar.ProgressBarBase.prototype */{
/**
* The proportion of the loaded portion of the progress bar.
*
* * Valid values are between `0` and `1`.
*
* @type {Number}
* @default 0
* @public
*/
backgroundProgress: _propTypes["default"].number,
/**
* 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:
*
* * `progressBar` - The root component class
* * `radial` - Applied when `orientation` is `'radial'`
*
* @type {Object}
* @public
*/
// `'bar` and `fill'` were intentionally excluded from the above documented
// exported classes as they do not appear to provide value to the end-developer, but are
// needed by ProgressButton internally for its design guidelines.
css: _propTypes["default"].object,
/**
* Highlights the filled portion.
*
* @type {Boolean}
* @public
*/
highlighted: _propTypes["default"].bool,
/**
* The orientation of the slider.
*
* @type {('horizontal'|'vertical'|'radial')}
* @default 'horizontal'
* @public
*/
orientation: _propTypes["default"].oneOf(['horizontal', 'vertical', 'radial']),
/**
* A number between `0` and `1` indicating the proportion of the filled portion of the bar.
*
* @type {Number}
* @default 0
* @public
*/
progress: _propTypes["default"].number,
/**
* Displays an anchor at `progressAnchor`.
*
* @type {Boolean}
* @public
*/
showAnchor: _propTypes["default"].bool,
/**
* Enables the built-in tooltip.
*
* To customize the tooltip, pass either a custom tooltip component or an instance of
* {@link sandstone/ProgressBar.ProgressBarTooltip|ProgressBarTooltip} with additional
* props configured.
*
* The provided component will receive the following props from `ProgressBar`:
*
* * `orientation` - The value of `orientation`
* * `percent` - Always `true` indicating the value should be presented as a percentage
* rather than an absolute value
* * `progress` - The `value` as a proportion between `min` and `max`
* * `visible` - Always `true` indicating that the tooltip should be visible
*
* Usage:
* ```
* <ProgressBar
* tooltip={
* <ProgressBarTooltip position="after" />
* }
* />
* ```
*
* The tooltip may also be passed as a child via the `"tooltip"` slot. See
* {@link ui/Slottable|Slottable} for more information on how slots can be used.
*
* Usage:
* ```
* <ProgressBar>
* <ProgressBarTooltip position="after" />
* </ProgressBar>
* ```
*
* @type {Boolean|Component|Element}
* @public
*/
tooltip: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].element, _propTypes["default"].func])
},
defaultProps: {
backgroundProgress: 0,
orientation: 'horizontal',
progress: 0
},
styles: {
css: _ProgressBarModule["default"],
publicClassNames: ['progressBar', 'radial', 'bar', 'fill']
},
computed: {
className: function className(_ref) {
var highlighted = _ref.highlighted,
showAnchor = _ref.showAnchor,
styler = _ref.styler;
return styler.append({
highlighted: highlighted,
showAnchor: showAnchor
});
},
tooltip: function tooltip(_ref2) {
var _tooltip = _ref2.tooltip;
return _tooltip === true ? _ProgressBarTooltip.ProgressBarTooltip : _tooltip;
}
},
render: function render(_ref3) {
var css = _ref3.css,
orientation = _ref3.orientation,
progress = _ref3.progress,
tooltip = _ref3.tooltip,
rest = _objectWithoutProperties(_ref3, _excluded);
delete rest.tooltip;
delete rest.highlighted;
delete rest.showAnchor;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], _objectSpread(_objectSpread({}, rest), {}, {
orientation: orientation,
progress: progress,
css: css,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
component: tooltip,
orientation: orientation,
percent: true,
proportion: progress,
visible: true
})
}));
}
});
/**
* Sandstone-specific behaviors to apply to {@link sandstone/ProgressBar.ProgressBarBase|ProgressBar}.
*
* @hoc
* @memberof sandstone/ProgressBar
* @mixes sandstone/Skinnable.Skinnable
* @public
*/
var ProgressBarDecorator = exports.ProgressBarDecorator = (0, _compose["default"])(_Pure["default"], (0, _Slottable["default"])({
slots: ['tooltip']
}), _Skinnable["default"]);
/**
* The ready-to-use Sandstone-styled ProgressBar.
*
* @class ProgressBar
* @memberof sandstone/ProgressBar
* @extends sandstone/ProgressBar.ProgressBarBase
* @mixes sandstone/ProgressBar.ProgressBarDecorator
* @ui
* @public
*/
var ProgressBar = exports.ProgressBar = ProgressBarDecorator(ProgressBarBase);
var _default = exports["default"] = ProgressBar;