@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
178 lines (177 loc) • 7.15 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["size", "visible", "progress", "onComplete", "callOnCompleteHandler", "title", "customColors", "customCircleWidth", "counterClockwise"],
_excluded2 = ["customColor", "customWidth", "className"];
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; }
import React, { useEffect, useRef, forwardRef } from 'react';
import classnames from 'classnames';
import { validateDOMAttributes } from '../../shared/component-helper';
import { IS_EDGE } from '../../shared/helpers';
function ProgressIndicatorCircular(props) {
const {
size,
visible,
progress,
onComplete,
callOnCompleteHandler,
title,
customColors,
customCircleWidth,
counterClockwise = false
} = props,
rest = _objectWithoutProperties(props, _excluded);
const keepAnimatingRef = useRef(true);
const visibleRef = useRef(false);
const useAnimationFrame = typeof onComplete === 'function' || IS_EDGE;
const _refDark = useRef(null);
const _refLight = useRef(null);
const _startupTimeout = useRef();
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);
}
};
}, []);
useEffect(() => {
visibleRef.current = visible;
}, [visible]);
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 (!visibleRef.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 (visibleRef.current && ms % 1e3 > 950) {
stopNextRound = false;
}
} else {
stopNextRound = !visibleRef.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 = validateDOMAttributes(props, _objectSpread({}, rest));
return React.createElement("span", _extends({
className: classnames('dnb-progress-indicator__circular', size && `dnb-progress-indicator__circular--${size}`, progressIsControlled && 'dnb-progress-indicator__circular--has-progress-value')
}, remainingDOMAttributes), React.createElement("span", {
className: "dnb-progress-indicator__circular__background-padding"
}, React.createElement("span", {
className: "dnb-progress-indicator__circular__background",
style: {
backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.background
}
})), React.createElement(Circle, {
className: "light paused",
customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
customWidth: customCircleWidth
}), React.createElement(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 && React.createElement(Circle, {
className: 'light' + (useAnimationFrame ? " paused" : ""),
customColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft,
customWidth: customCircleWidth,
ref: _refLight
}));
}
const Circle = forwardRef(function Circle(_ref, ref) {
let {
customColor,
customWidth,
className
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded2);
const correctedCustomWidth = correctPercentageStrokeWidth(customWidth);
return React.createElement("svg", _extends({
className: classnames('dnb-progress-indicator__circular__line', className),
shapeRendering: "geometricPrecision",
ref: ref
}, rest), React.createElement("circle", {
className: "dnb-progress-indicator__circular__circle",
fill: "none",
cx: "50%",
cy: "50%",
r: "50%",
style: _objectSpread({
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)}%`;
}
}
export default ProgressIndicatorCircular;
//# sourceMappingURL=ProgressIndicatorCircular.js.map