@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
267 lines (265 loc) • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactCompilerRuntime = require("react-compiler-runtime");
var _react = _interopRequireWildcard(require("react"));
var _uuid = require("../../hooks/uuid");
var _ProgressBar = require("./ProgressBar.styles");
var _popup = require("../../types/popup");
var _styledComponents = require("styled-components");
var _Popup = _interopRequireDefault(require("../popup/Popup"));
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 ProgressBar = t0 => {
"use memo";
const $ = (0, _reactCompilerRuntime.c)(39);
const {
percentage,
label,
shouldHideProgress: t1,
shouldShowLabelInline: t2,
steps,
colors,
thumbLabel,
showShine: t3,
height
} = t0;
const shouldHideProgress = t1 === undefined ? false : t1;
const shouldShowLabelInline = t2 === undefined ? false : t2;
const showShine = t3 === undefined ? false : t3;
const uuid = (0, _uuid.useUuid)();
const [coordinates, setCoordinates] = (0, _react.useState)();
const popupRef = (0, _react.useRef)(null);
const [hostContainer, setHostContainer] = (0, _react.useState)(null);
const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
let t4;
bb0: {
if (!showShine || percentage === undefined) {
t4 = null;
break bb0;
}
const t = percentage / 100;
const shineCount = Math.ceil(6 * t);
const speed = 1 + 4 * t;
let t5;
if ($[0] !== shineCount) {
t5 = Array.from({
length: shineCount
});
$[0] = shineCount;
$[1] = t5;
} else {
t5 = $[1];
}
let t6;
if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
t6 = t5.map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine, {
key: `progress-bar-shine__${shineCount}__${index}`,
$speed: speed,
$delay: -(speed / shineCount) * index
}));
$[2] = shineCount;
$[3] = speed;
$[4] = t5;
$[5] = t6;
} else {
t6 = $[5];
}
t4 = t6;
}
const shineEffect = t4;
let t5;
let t6;
if ($[6] !== hostContainer || $[7] !== thumbLabel) {
t5 = () => {
if (thumbLabel) {
setCoordinates(hostContainer === null || hostContainer === void 0 ? void 0 : hostContainer.getBoundingClientRect());
}
};
t6 = [hostContainer, thumbLabel];
$[6] = hostContainer;
$[7] = thumbLabel;
$[8] = t5;
$[9] = t6;
} else {
t5 = $[8];
t6 = $[9];
}
(0, _react.useLayoutEffect)(t5, t6);
let t7;
let t8;
if ($[10] !== coordinates) {
t7 = () => {
if (coordinates) {
var _popupRef$current;
(_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.show();
}
};
t8 = [coordinates];
$[10] = coordinates;
$[11] = t7;
$[12] = t8;
} else {
t7 = $[11];
t8 = $[12];
}
(0, _react.useEffect)(t7, t8);
let t9;
if ($[13] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[14] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[15] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[16] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[17] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[18] !== (colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor) || $[19] !== height || $[20] !== hostContainer || $[21] !== label || $[22] !== percentage || $[23] !== shineEffect || $[24] !== shouldHideProgress || $[25] !== shouldShowLabelInline || $[26] !== showShine || $[27] !== steps || $[28] !== theme || $[29] !== thumbLabel || $[30] !== uuid) {
colors === null || colors === void 0 || colors.backgroundColor;
colors === null || colors === void 0 || colors.primaryTextColor;
colors === null || colors === void 0 || colors.progressColor;
colors === null || colors === void 0 || colors.secondaryTextColor;
colors === null || colors === void 0 || colors.stepColor;
colors === null || colors === void 0 || colors.thumbLabelColor;
t9 = (() => {
if (shouldHideProgress) {
return null;
}
if (percentage === undefined) {
return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
key: `progress-bar-loop__${uuid}`,
$color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
initial: {
width: "200px",
left: "-200px"
},
animate: {
width: "200px",
left: "100%"
},
exit: {
width: "200px",
left: "100%"
},
transition: {
type: "tween",
repeat: Infinity,
repeatDelay: 0,
duration: 1
}
}), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
$color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
}));
}
return /*#__PURE__*/_react.default.createElement("div", {
ref: instance => setHostContainer(instance),
style: {
border: 0,
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
$isBig: shouldShowLabelInline,
$height: height
}, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
$position: step,
key: `progress-step-${step}`,
$color: colors === null || colors === void 0 ? void 0 : colors.stepColor
}))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
$height: height,
$color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
key: `progress-bar__${uuid}`,
initial: {
width: "0%"
},
animate: {
width: `${percentage}%`
},
exit: {
width: "0%"
},
transition: {
type: "tween"
},
onUpdate: () => {
var _popupRef$current2;
return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
},
onAnimationComplete: () => {
var _popupRef$current3;
return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
}
}, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
$height: height,
onClick: _temp
}, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
theme: {
"000": (colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor) ?? (theme === null || theme === void 0 ? void 0 : theme["104"]),
text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme["300"])
}
}, /*#__PURE__*/_react.default.createElement(_Popup.default, {
ref: popupRef,
content: thumbLabel,
alignment: _popup.PopupAlignment.TopCenter,
onHide: () => {
var _popupRef$current4;
return (_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.show();
},
container: hostContainer ?? undefined,
shouldBeOpen: true,
shouldScrollWithContent: true,
yOffset: -12
})))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
$shouldShowLabelInline: shouldShowLabelInline,
$primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
$secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
$colorSplitPosition: percentage
}, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
$color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
})));
})();
$[13] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
$[14] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
$[15] = colors === null || colors === void 0 ? void 0 : colors.progressColor;
$[16] = colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor;
$[17] = colors === null || colors === void 0 ? void 0 : colors.stepColor;
$[18] = colors === null || colors === void 0 ? void 0 : colors.thumbLabelColor;
$[19] = height;
$[20] = hostContainer;
$[21] = label;
$[22] = percentage;
$[23] = shineEffect;
$[24] = shouldHideProgress;
$[25] = shouldShowLabelInline;
$[26] = showShine;
$[27] = steps;
$[28] = theme;
$[29] = thumbLabel;
$[30] = uuid;
$[31] = t9;
} else {
t9 = $[31];
}
const progressBar = t9;
colors === null || colors === void 0 || colors.primaryTextColor;
let t10;
if ($[32] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[33] !== label || $[34] !== shouldShowLabelInline) {
t10 = label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
$primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
}, label);
$[32] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
$[33] = label;
$[34] = shouldShowLabelInline;
$[35] = t10;
} else {
t10 = $[35];
}
let t11;
if ($[36] !== progressBar || $[37] !== t10) {
t11 = /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, t10);
$[36] = progressBar;
$[37] = t10;
$[38] = t11;
} else {
t11 = $[38];
}
return t11;
};
ProgressBar.displayName = 'ProgressBar';
var _default = exports.default = ProgressBar;
function _temp(event) {
return event.stopPropagation();
}
//# sourceMappingURL=ProgressBar.js.map