@razorpay/blade
Version:
The Design System that powers Razorpay
92 lines (89 loc) • 4.41 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { dimensions } from './spinnerTokens.js';
import SpinnerIcon from './SpinnerIcon.js';
import { SpinningBox } from './SpinningBox.web.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import '../../BladeProvider/index.js';
import '../../Box/styledProps/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../Box/BaseBox/index.js';
import '../../Typography/index.js';
import '../../../utils/makeSize/index.js';
import '../../../utils/makeAccessible/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../../BladeProvider/useTheme.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import { Text } from '../../Typography/Text/Text.js';
var _excluded = ["label", "labelPosition", "accessibilityLabel", "color", "size", "testID"];
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; }
var getColor = function getColor(_ref) {
var color = _ref.color,
theme = _ref.theme;
if (color && color === 'white') {
return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');
}
if (color && color !== 'neutral') {
return getIn(theme.colors, "interactive.icon.".concat(color, ".subtle"));
}
return getIn(theme.colors, 'interactive.icon.gray.subtle');
};
var _BaseSpinner = function _BaseSpinner(_ref2, ref) {
var label = _ref2.label,
_ref2$labelPosition = _ref2.labelPosition,
labelPosition = _ref2$labelPosition === void 0 ? 'right' : _ref2$labelPosition,
accessibilityLabel = _ref2.accessibilityLabel,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'medium' : _ref2$size,
testID = _ref2.testID,
styledProps = _objectWithoutProperties(_ref2, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
ref: ref
}, metaAttribute({
name: MetaConstants.Spinner,
testID: testID
})), getStyledProps(styledProps)), {}, {
children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
display: "flex",
alignItems: "center",
flexDirection: labelPosition === 'right' ? 'row' : 'column'
}, makeAccessible({
label: accessibilityLabel,
role: 'progressbar'
})), {}, {
children: [/*#__PURE__*/jsx(SpinningBox, {
children: /*#__PURE__*/jsx(SpinnerIcon, {
dimensions: makeSize(dimensions[size]),
color: getColor({
color: color,
theme: theme
})
})
}), label && label.trim().length > 0 ? /*#__PURE__*/jsx(BaseBox, {
marginLeft: labelPosition === 'right' ? 'spacing.3' : 'spacing.0',
marginTop: labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0',
children: /*#__PURE__*/jsx(Text, {
variant: "body",
weight: "regular",
size: "small",
color: "surface.text.gray.muted",
children: label
})
}) : null]
}))
}));
};
var BaseSpinner = /*#__PURE__*/React__default.forwardRef(_BaseSpinner);
export { BaseSpinner };
//# sourceMappingURL=BaseSpinner.js.map