@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
187 lines (186 loc) • 6.92 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _jsxRuntime = require("react/jsx-runtime");
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); }
function ProgressIndicatorCircular(props) {
const {
size,
show,
progress,
onComplete,
callOnCompleteHandler,
title,
customColors,
customCircleWidth,
counterClockwise = false,
...rest
} = props;
const keepAnimatingRef = (0, _react.useRef)(true);
const showRef = (0, _react.useRef)(false);
const useAnimationFrame = typeof onComplete === 'function';
const _refDark = (0, _react.useRef)(null);
const _refLight = (0, _react.useRef)(null);
const _startupTimeout = (0, _react.useRef)(undefined);
(0, _react.useEffect)(() => {
if (useAnimationFrame) {
_startupTimeout.current = setTimeout(() => {
if (_refDark.current) {
doAnimation(_refDark.current, true, callOnCompleteHandler);
}
if (_refLight.current) {
doAnimation(_refLight.current, false);
}
}, 300);
}
return () => {
keepAnimatingRef.current = false;
if (_startupTimeout.current) {
clearTimeout(_startupTimeout.current);
}
};
}, []);
(0, _react.useEffect)(() => {
showRef.current = show;
}, [show]);
const doAnimation = (element, animateOnStart = true, callback = null) => {
const min = 1;
const max = Math.PI * 100;
let start = 0,
ms = 0,
prog = max,
setProg = animateOnStart,
animate1 = true,
completeCalled = false,
stopNextRound = false;
const step = timestamp => {
if (!start) {
start = timestamp;
}
ms = timestamp - start;
if (animate1) {
if (!showRef.current && prog < 20) {
prog = min;
}
if (setProg) {
element.style['stroke-dashoffset'] = `${prog}%`;
} else if (!animateOnStart) {
element.style['stroke-dashoffset'] = `${max}%`;
}
}
if (stopNextRound) {
animate1 = false;
if (!completeCalled) {
completeCalled = true;
if (animateOnStart && typeof callback === 'function') {
callback();
}
} else if (showRef.current && ms % 1e3 > 950) {
stopNextRound = false;
}
} else {
stopNextRound = !showRef.current && prog === min;
animate1 = true;
completeCalled = false;
}
prog = Math.round(max - max / 1e3 * (ms % 1e3));
setProg = animateOnStart ? Math.ceil(ms / 1e3) % 2 === 1 || ms === 0 : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0;
if (keepAnimatingRef.current) {
window.requestAnimationFrame(step);
}
};
if (typeof window !== 'undefined' && window.requestAnimationFrame) {
window.requestAnimationFrame(step);
}
};
const progressIsControlled = progress > -1;
if (progressIsControlled) {
rest.role = 'progressbar';
rest['aria-label'] = title;
rest['title'] = title;
} else {
rest.role = 'alert';
rest['aria-busy'] = true;
}
const remainingDOMAttributes = (0, _componentHelper.validateDOMAttributes)(props, {
...rest
});
return (0, _jsxRuntime.jsxs)("span", {
className: (0, _clsx.default)('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, progressIsControlled && 'dnb-progress-indicator__circular--has-progress-value'),
...remainingDOMAttributes,
children: [(0, _jsxRuntime.jsx)("span", {
className: "dnb-progress-indicator__circular__background-padding",
children: (0, _jsxRuntime.jsx)("span", {
className: "dnb-progress-indicator__circular__background",
style: {
backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.background
}
})
}), (0, _jsxRuntime.jsx)(Circle, {
className: "light paused",
customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
customWidth: customCircleWidth
}), (0, _jsxRuntime.jsx)(Circle, {
className: "dark dark" + (progressIsControlled || useAnimationFrame ? " paused" : ""),
style: progressIsControlled ? {
strokeDashoffset: getOffset(progress, counterClockwise)
} : {},
customColor: customColors === null || customColors === void 0 ? void 0 : customColors.line,
customWidth: customCircleWidth,
ref: _refDark
}), !progressIsControlled && (0, _jsxRuntime.jsx)(Circle, {
className: 'light' + (useAnimationFrame ? " paused" : ""),
customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
customWidth: customCircleWidth,
ref: _refLight
})]
});
}
function Circle({
customColor,
customWidth,
className,
ref,
...rest
}) {
const correctedCustomWidth = correctPercentageStrokeWidth(customWidth);
return (0, _jsxRuntime.jsx)("svg", {
className: (0, _clsx.default)('dnb-progress-indicator__circular__line', className),
shapeRendering: "geometricPrecision",
ref: ref,
...rest,
children: (0, _jsxRuntime.jsx)("circle", {
className: "dnb-progress-indicator__circular__circle",
fill: "none",
cx: "50%",
cy: "50%",
r: "50%",
style: {
stroke: customColor,
...(correctedCustomWidth ? {
'--progress-indicator-circular-stroke-width': correctedCustomWidth
} : undefined)
}
})
});
}
function getOffset(progress, counterClockwise = false) {
const offset = Math.PI * (100 - progress);
return `${counterClockwise ? -offset : offset}%`;
}
function correctPercentageStrokeWidth(strokeWidth) {
if (typeof strokeWidth === 'string' && strokeWidth.endsWith('%')) {
const number = parseFloat(strokeWidth.slice(0, strokeWidth.length - 1));
return `${100 * number / (100 - number)}%`;
}
return undefined;
}
var _default = exports.default = ProgressIndicatorCircular;
//# sourceMappingURL=ProgressIndicatorCircular.js.map