@coreui/react-pro
Version:
UI Components Library for React.js
157 lines (154 loc) • 9.02 kB
JavaScript
import { __rest, __assign, __spreadArray } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import '@popperjs/core';
import isRTL from '../../utils/isRTL.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { getThumbSize, calculateMoveValue, updateValue, calculateTooltipPosition, updateGradient, calculateLabelPosition, getLabelValue, calculateClickValue, getNearestValueIndex, validateValue } from './utils.js';
var CRangeSlider = forwardRef(function (_a, ref) {
var className = _a.className, _b = _a.clickableLabels, clickableLabels = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.distance, distance = _d === void 0 ? 0 : _d, labels = _a.labels, _e = _a.min, min = _e === void 0 ? 0 : _e, _f = _a.max, max = _f === void 0 ? 100 : _f, name = _a.name, _g = _a.step, step = _g === void 0 ? 1 : _g, _h = _a.value, value = _h === void 0 ? [] : _h, onChange = _a.onChange, _j = _a.tooltips, tooltips = _j === void 0 ? true : _j, tooltipsFormat = _a.tooltipsFormat, _k = _a.track, track = _k === void 0 ? 'fill' : _k, _l = _a.vertical, vertical = _l === void 0 ? false : _l, rest = __rest(_a, ["className", "clickableLabels", "disabled", "distance", "labels", "min", "max", "name", "step", "value", "onChange", "tooltips", "tooltipsFormat", "track", "vertical"]);
var rangeSliderRef = useRef(null);
var forkedRef = useForkedRef(ref, rangeSliderRef);
var inputsRef = useRef([]);
var labelsContainerRef = useRef(null);
var labelsRef = useRef([]);
var trackRef = useRef(null);
var _m = useState(Array.isArray(value) ? value : [value]), currentValue = _m[0], setCurrentValue = _m[1];
var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
var _p = useState(false), _isRTL = _p[0], setIsRTL = _p[1];
var _q = useState(0), dragIndex = _q[0], setDragIndex = _q[1];
var _r = useState(), thumbSize = _r[0], setThumbSize = _r[1];
useEffect(function () {
setCurrentValue(Array.isArray(value) ? value : [value]);
}, [value]);
useEffect(function () {
if (rangeSliderRef.current) {
setIsRTL(isRTL(rangeSliderRef.current));
setThumbSize(getThumbSize(rangeSliderRef.current, vertical));
}
}, [rangeSliderRef]);
useEffect(function () {
var maxSize = Math.max.apply(Math, labelsRef.current.map(function (label) { return (vertical ? label.offsetWidth : label.offsetHeight); }));
if (labelsContainerRef.current) {
labelsContainerRef.current.style[vertical ? 'width' : 'height'] = "".concat(maxSize, "px");
}
}, [labelsRef]);
useEffect(function () {
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return function () {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [currentValue]);
var updateNearestValue = function (value) {
var nearestIndex = getNearestValueIndex(value, currentValue);
var newCurrentValue = __spreadArray([], currentValue, true);
newCurrentValue[nearestIndex] = validateValue(value, currentValue, distance, nearestIndex);
setTimeout(function () {
inputsRef.current[nearestIndex].focus();
});
setCurrentValue(newCurrentValue);
if (onChange) {
onChange(newCurrentValue);
}
};
var handleInputChange = function (event, index) {
setIsDragging(false);
var target = event.target;
var value = Number(target.value);
var newCurrentValue = updateValue(value, currentValue, distance, index);
setCurrentValue(newCurrentValue);
// Trigger change event if needed
if (onChange) {
onChange(newCurrentValue);
}
};
var handleInputsContainerMouseDown = function (event) {
if (trackRef.current === null || event.button !== 0 || disabled) {
return;
}
var target = event.target;
if (!(target instanceof HTMLInputElement) && target !== trackRef.current) {
return;
}
var clickValue = calculateClickValue(event, trackRef.current, min, max, step, vertical, _isRTL);
var index = getNearestValueIndex(clickValue, currentValue);
setIsDragging(true);
setDragIndex(index);
updateNearestValue(clickValue);
};
var handleLabelClick = function (event, value) {
if (!clickableLabels || disabled || event.button !== 0) {
return;
}
updateNearestValue(value);
};
var handleMouseMove = function (event) {
if (!isDragging || trackRef.current === null || disabled) {
return;
}
var moveValue = calculateMoveValue(event, trackRef.current, min, max, step, vertical, _isRTL);
var newCurrentValue = updateValue(moveValue, currentValue, distance, dragIndex);
setCurrentValue(newCurrentValue);
if (onChange) {
onChange(newCurrentValue);
}
};
var handleMouseUp = function () {
setIsDragging(false);
};
return (React.createElement("div", __assign({ className: classNames('range-slider', className, {
'range-slider-vertical': vertical,
disabled: disabled,
}) }, rest, { ref: forkedRef }),
React.createElement("div", { className: "range-slider-inputs-container", onMouseDown: handleInputsContainerMouseDown },
currentValue.map(function (value, index) { return (React.createElement(React.Fragment, { key: index },
React.createElement("input", { className: "range-slider-input", type: "range", min: min, max: max, step: step, value: value, name: Array.isArray(name) ? name[index] : "".concat(name || '', "-").concat(index, "}"), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": vertical ? 'vertical' : 'horizontal', disabled: disabled, onChange: function (event) { return handleInputChange(event, index); }, ref: function (el) {
inputsRef.current[index] = el;
} }),
tooltips && (React.createElement("div", __assign({ className: "range-slider-tooltip" }, (thumbSize && {
style: calculateTooltipPosition(min, max, value, thumbSize, vertical, _isRTL),
})),
React.createElement("div", { className: "range-slider-tooltip-inner" }, tooltipsFormat ? tooltipsFormat(value) : value),
React.createElement("div", { className: "range-slider-tooltip-arrow" }))))); }),
React.createElement("div", __assign({ className: "range-slider-track" }, (track && {
style: updateGradient(min, max, currentValue, vertical, _isRTL),
}), { ref: trackRef }))),
labels && (React.createElement("div", { className: "range-slider-labels-container", ref: labelsContainerRef }, Array.isArray(labels) &&
labels.map(function (label, index) {
var labelPosition = calculateLabelPosition(min, max, labels, label, index);
var labelValue = getLabelValue(min, max, labels, label, index);
var labelStyle = Object.assign(vertical
? { bottom: labelPosition }
: _isRTL
? { right: labelPosition }
: { left: labelPosition }, typeof label === 'object' && 'style' in label && label.style);
return (React.createElement("div", { className: classNames('range-slider-label', {
clickable: clickableLabels,
}, typeof label === 'object' && 'className' in label && label.className), style: labelStyle, onMouseDown: function (event) { return handleLabelClick(event, labelValue); }, key: index, ref: function (el) {
labelsRef.current[index] = el;
} }, typeof label === 'object' && 'label' in label ? label.label : label));
})))));
});
CRangeSlider.propTypes = {
clickableLabels: PropTypes.bool,
disabled: PropTypes.bool,
distance: PropTypes.number,
labels: PropTypes.any,
max: PropTypes.number,
min: PropTypes.number,
name: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
step: PropTypes.number,
tooltips: PropTypes.bool,
tooltipsFormat: PropTypes.func,
track: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['fill'])]),
value: PropTypes.oneOfType([PropTypes.array, PropTypes.number]),
vertical: PropTypes.bool,
};
CRangeSlider.displayName = 'CRangeSlider';
export { CRangeSlider };
//# sourceMappingURL=CRangeSlider.js.map