@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
247 lines (244 loc) • 9.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.SpinnerDecorator = exports.SpinnerBase = exports.Spinner = void 0;
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _FloatingLayer = _interopRequireDefault(require("../FloatingLayer"));
var _ForwardRef = _interopRequireDefault(require("../ForwardRef"));
var _SpinnerModule = _interopRequireDefault(require("./Spinner.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["blockClickOn", "component", "componentRef", "scrimClassName", "scrimType", "spinnerContainerClassName"];
/**
* An unstyled indeterminate progress indicator (Spinner) component to be customized by a
* theme or application.
*
* Basically, this positions your `Spinner` component where you want it on the
* screen, and hooks into the interaction blocking code and scrim management.
*
* The theme using this component must supply a `component` element which follows the requirements
* listed by the {@link ui/Spinner.Spinner.component|component} prop documentation.
*
* @module ui/Spinner
* @exports Spinner
* @exports SpinnerBase
* @exports SpinnerDecorator
*/
/**
* A minimally styled component that controls `Spinner` positioning and interaction states, without
* [SpinnerDecorator](ui/Spinner.SpinnerDecorator) applied.
*
* @class SpinnerBase
* @memberof ui/Spinner
* @ui
* @public
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : 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(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var SpinnerBase = exports.SpinnerBase = (0, _kind["default"])({
name: 'ui:Spinner',
propTypes: /** @lends ui/Spinner.SpinnerBase.prototype */{
/**
* A theme-supplied component that performs the animation.
*
* Theme authors can use the `css.running` class to attach the animation CSS.
* This element should accept a `children` prop which takes the form of an optional message
* for the user.
*
* Unlike most other components, this does *not* represent the root rendered element, and
* instead refers to the "spinner" part of this component. The presence of `blockClickOn`
* changes the rendering tree and where this is used.
*
* @type {String|Component}
* @required
* @public
*/
component: _propTypes["default"].renderable.isRequired,
/**
* Determines how far the click-blocking should extend.
*
* * `null` does not block clicking
* * 'screen' blocks entire screen
* * 'container' blocks up to the nearest ancestor with absolute or relative positioning
*
* When `blockClickOn` is either `'screen'` or `'container'`, a translucent scrim can be added
* by setting {@link ui/Spinner.SpinnerBase.scrim|scrim} prop to `true`.
*
* @type {String|null}
* @public
*/
blockClickOn: _propTypes2["default"].oneOf(['screen', 'container', null]),
/**
* Centers the spinner horizontally and vertically relative to its containing component.
*
* @type {Boolean}
* @default false
* @public
*/
centered: _propTypes2["default"].bool,
/**
* Called with a reference to the root component.
*
* When using {@link ui/Spinner.Spinner}, the `ref` prop is forwarded to this component
* as `componentRef`.
*
* @type {Object|Function}
* @public
*/
componentRef: _propTypes["default"].ref,
/**
* 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:
*
* * `spinner` - The root `component` class
* * `spinnerContainer` - Added as a parent in the case of `blockOnClick="container"
* * `blockClickOn` - Applied if interaction should be blocked
* * `centered` - Applied if the `centered` prop is present
* * `running` - Always applied to `component`. Attach animation name property to this class.
* * `scrim` - The blocking layer behind the Spinner
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* Halts the animation of the spinner
*
* @type {Boolean}
* @default false
* @public
*/
paused: _propTypes2["default"].bool,
/**
* Sets a scrim behind the spinner with the `css.scrim` class applied.
*
* Only has an effect when `blockClickOn` is `'screen'` or `'container'` and has no effect
* by default or when blockClickOn is `null`.
*
* @type {Boolean}
* @default false
* @public
*/
scrim: _propTypes2["default"].bool
},
defaultProps: {
centered: false,
paused: false,
scrim: false
},
styles: {
css: _SpinnerModule["default"],
className: 'spinner',
publicClassNames: true
},
computed: {
className: function className(_ref) {
var centered = _ref.centered,
paused = _ref.paused,
styler = _ref.styler;
return styler.append({
centered: centered,
running: !paused
});
},
scrimClassName: function scrimClassName(_ref2) {
var blockClickOn = _ref2.blockClickOn,
scrim = _ref2.scrim,
styler = _ref2.styler;
return styler.join({
blockClickOn: blockClickOn,
scrim: scrim
});
},
scrimType: function scrimType(_ref3) {
var scrim = _ref3.scrim;
return scrim ? 'translucent' : 'transparent';
},
spinnerContainerClassName: function spinnerContainerClassName(_ref4) {
var blockClickOn = _ref4.blockClickOn,
centered = _ref4.centered,
styler = _ref4.styler;
return styler.join({
centered: centered,
spinnerContainer: blockClickOn
});
}
},
render: function render(_ref5) {
var blockClickOn = _ref5.blockClickOn,
Component = _ref5.component,
componentRef = _ref5.componentRef,
scrimClassName = _ref5.scrimClassName,
scrimType = _ref5.scrimType,
spinnerContainerClassName = _ref5.spinnerContainerClassName,
rest = _objectWithoutProperties(_ref5, _excluded);
delete rest.centered;
delete rest.paused;
delete rest.scrim;
switch (blockClickOn) {
case 'screen':
{
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer["default"], {
noAutoDismiss: true,
open: true,
scrimType: scrimType,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
ref: componentRef
}, rest))
});
}
case 'container':
{
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: spinnerContainerClassName,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: scrimClassName
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
ref: componentRef
}, rest))]
});
}
default:
{
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
ref: componentRef
}, rest));
}
}
}
});
/**
* Applies Spinner behaviors
*
* @class SpinnerDecorator
* @memberof ui/Spinner
* @mixes ui/ForwardRef.ForwardRef
* @hoc
* @public
*/
var SpinnerDecorator = exports.SpinnerDecorator = (0, _ForwardRef["default"])({
prop: 'componentRef'
});
/**
* A minimally styled component that controls `Spinner` positioning and interaction states.
*
* @class Spinner
* @memberof ui/Spinner
* @extends ui/Spinner.SpinnerBase
* @mixes ui/Spinner.SpinnerDecorator
* @omit componentRef
* @ui
* @public
*/
var Spinner = exports.Spinner = SpinnerDecorator(SpinnerBase);
var _default = exports["default"] = Spinner;