@spaced-out/ui-design-system
Version:
Sense UI components library
101 lines (100 loc) • 4.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ShimmerWrapper = exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
var React = _interopRequireWildcard(require("react"));
var _border = require("../../styles/variables/_border");
var _size = require("../../styles/variables/_size");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _string = require("../../utils/string");
var _ShimmerModule = _interopRequireDefault(require("./Shimmer.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SHIMMER_TYPES = exports.SHIMMER_TYPES = Object.freeze({
text: 'text',
rounded: 'rounded',
circular: 'circular',
rectangular: 'rectangular'
});
const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
text: _border.borderRadiusXSmall,
rounded: _border.borderRadiusMedium,
circular: _border.borderRadiusCircle,
rectangular: _border.borderRadiusNone
});
/**
* Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
* This solves a very annoying problem with out text components where the display prop is set to flex.
* Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
* where text wraps across multiple lines, we need to wrap the shimmer in a span element.
* to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
* This would ensure the layout remains same even when you toggle the shimmer to show your actual content
* @param {React.Node} children - The children to be rendered
*/
const ShimmerWrapper = _ref => {
let {
children
} = _ref;
return /*#__PURE__*/React.createElement("span", null, children);
};
exports.ShimmerWrapper = ShimmerWrapper;
const Shimmer = exports.Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
classNames,
show = true,
type = SHIMMER_TYPES.text,
children,
width = _size.size40,
height = _size.sizeFluid,
borderRadius
} = _ref2;
if (!show) {
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
}
const borderRadiusValue = borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
return /*#__PURE__*/React.createElement("span", {
ref: ref,
"data-testid": "Shimmer",
className: (0, _classify.default)(_ShimmerModule.default.wrapper, _ShimmerModule.default[type], classNames?.wrapper),
style: {
'--width': (0, _string.appendPx)(width),
'--height': (0, _string.appendPx)(height),
'--border-radius': (0, _string.appendPx)(borderRadiusValue)
}
});
});
const KPIShimmer = _ref3 => {
let {
textWidth = 150,
hasBottomContent = true,
hasIcon = true,
hasTopContent = true,
hasMiddleContent = true,
classNames
} = _ref3;
return /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_ShimmerModule.default.kpiBox, classNames?.wrapper)
}, hasIcon && /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_ShimmerModule.default.section, _ShimmerModule.default.iconSection, classNames?.icon)
}, /*#__PURE__*/React.createElement(Shimmer, {
type: "rounded",
width: 60,
height: 60
})), /*#__PURE__*/React.createElement("div", {
className: (0, _classify.default)(_ShimmerModule.default.section, classNames?.text)
}, hasTopContent && /*#__PURE__*/React.createElement(Shimmer, {
type: "text",
width: textWidth,
height: 15
}), hasMiddleContent && /*#__PURE__*/React.createElement(Shimmer, {
type: "text",
width: textWidth,
height: 25
}), hasBottomContent && /*#__PURE__*/React.createElement(Shimmer, {
type: "text",
width: textWidth,
height: 15
})));
};
exports.KPIShimmer = KPIShimmer;