react-common-use-components
Version:
A React mobile commonly used component library
117 lines (116 loc) • 4.96 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const SlideBlockIcon_1 = __importDefault(require("../../assets/svgs/SlideBlockIcon"));
const ProgressBar = ({ percent, min = 0, max = 100, barWidth, barHeight, barBgColor, trackBgColor, onChange, isOpenSlideBlock = true, }) => {
const [sliderValue, setSliderValue] = (0, react_1.useState)(percent);
const trackRef = (0, react_1.useRef)(null);
const [isFollowing, setIsFollowing] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
setSliderValue(percent);
}, [percent]);
const handleTouchMove = (event) => {
if (isFollowing && trackRef.current) {
const trackDom = trackRef.current;
const touch = event.touches[0];
const track = trackDom.getBoundingClientRect();
const position = touch.clientX - track.left;
const targetValue = getValueByPosition(position);
setPercent(targetValue);
}
};
const handleTouchStart = () => {
setIsFollowing(true);
};
const handleTouchEnd = () => {
setIsFollowing(false);
};
(0, react_1.useEffect)(() => {
const track = trackRef.current;
if (track && isOpenSlideBlock) {
track.addEventListener('touchmove', handleTouchMove);
track.addEventListener('touchstart', handleTouchStart);
track.addEventListener('touchend', handleTouchEnd);
return () => {
track.removeEventListener('touchmove', handleTouchMove);
track.removeEventListener('touchstart', handleTouchStart);
track.removeEventListener('touchend', handleTouchEnd);
};
}
}, [isFollowing]);
const setPercent = (newPercent) => {
const clampedPercent = Math.max(min || 0, Math.min(newPercent, max || 100));
setSliderValue(clampedPercent);
if (onChange)
onChange(clampedPercent);
};
const getValueByPosition = (position) => {
var _a, _b;
return Math.round((position / ((_b = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 1)) * (max - min)) + min;
};
const onTrackClick = (event) => {
if (!isOpenSlideBlock)
return;
event.stopPropagation();
const track = trackRef.current;
if (!track)
return;
const sliderOffsetLeft = track.getBoundingClientRect().left;
const position = event.clientX - sliderOffsetLeft;
const targetValue = getValueByPosition(position);
setPercent(targetValue);
};
return (<div ref={trackRef} style={{
background: barBgColor || "#eee",
width: barWidth || "100%",
height: barHeight || "16px",
borderRadius: "0.5rem",
position: "relative",
// cursor: "pointer"
}} onClick={onTrackClick}>
<div style={{
background: trackBgColor || "#1677ff",
width: `${((sliderValue - min) / (max - min)) * 100}%`,
height: "100%",
borderRadius: "0.5rem",
transition: !isOpenSlideBlock ? "width 0.25s ease-out" : "",
}}>
{isOpenSlideBlock &&
<SlideBlockIcon_1.default style={{
position: "absolute",
left: `${((sliderValue - min) / (max - min)) * 100}%`,
transform: 'translateX(-50%)',
cursor: "grab",
width: barHeight || "1rem",
height: barHeight || "1rem",
}}/>}
</div>
</div>);
};
exports.default = ProgressBar;