@bytedance/mona-client-web
Version:
web for mona
60 lines • 3.15 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.module.less';
import { useHandlers } from '../hooks';
function format(percent) {
return percent < 0 ? 0 : percent > 100 ? 100 : percent;
}
var Progress = function (props) {
var _a = props.percent, percent = _a === void 0 ? 0 : _a, _b = props.strokeWidth, strokeWidth = _b === void 0 ? 6 : _b, _c = props.color, color = _c === void 0 ? '#F85959' : _c, _d = props.activeColor, activeColor = _d === void 0 ? '#F85959' : _d, _e = props.backgroundColor, backgroundColor = _e === void 0 ? '#ebebeb' : _e, _f = props.active, active = _f === void 0 ? false : _f, _g = props.activeMode, activeMode = _g === void 0 ? 'backwards' : _g, _h = props.style, style = _h === void 0 ? {} : _h, restProps = __rest(props, ["percent", "strokeWidth", "color", "activeColor", "backgroundColor", "active", "activeMode", "style"]);
var eleRef = useRef(null);
var gapRef = useRef(0);
var prevRef = useRef(0);
var _j = useState(0), p = _j[0], setP = _j[1];
useEffect(function () {
if (activeMode === 'forwards') {
gapRef.current = Math.abs(format(percent) - prevRef.current);
setP(format(percent));
}
else {
gapRef.current = 0;
setP(0);
setTimeout(function () {
gapRef.current = format(percent);
setP(format(percent));
}, 0);
}
prevRef.current = format(percent);
}, [percent]);
var _k = useHandlers(restProps), handleClassName = _k.handleClassName, handleProps = __rest(_k, ["handleClassName"]);
// const gap = percent - prevRef.current;
return (React.createElement("div", __assign({ className: handleClassName(styles.progress), style: __assign(__assign({}, style), { backgroundColor: backgroundColor, height: strokeWidth }) }, handleProps),
React.createElement("div", { ref: eleRef, className: "".concat(styles.inner, " ").concat(active ? styles.active : ''), style: {
width: "".concat(p, "%"),
backgroundColor: activeColor || color,
transitionDuration: "".concat(gapRef.current * 30, "ms"),
} })));
};
export default Progress;
//# sourceMappingURL=index.js.map