@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
306 lines (299 loc) • 9.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var hooks = require('@mantine/hooks');
var getClientPosition = require('../utils/get-client-position/get-client-position.js');
var getPosition = require('../utils/get-position/get-position.js');
var getChangeValue = require('../utils/get-change-value/get-change-value.js');
var getDragEventsAssigner = require('../utils/get-drag-events-assigner/get-drag-events-assigner.js');
var Thumb = require('../Thumb/Thumb.js');
var Track = require('../Track/Track.js');
var SliderRoot = require('../SliderRoot/SliderRoot.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
function RangeSlider(_a) {
var _b = _a, {
themeOverride,
classNames,
styles,
color,
value,
onChange,
size = "md",
radius = "xl",
min = 0,
max = 100,
minRange = 10,
step = 1,
defaultValue,
name,
marks = [],
label = (f) => f,
labelTransition = "skew-down",
labelTransitionDuration = 150,
labelTransitionTimingFunction,
labelAlwaysOn = false,
thumbFromLabel = "",
thumbToLabel = ""
} = _b, others = __objRest(_b, [
"themeOverride",
"classNames",
"styles",
"color",
"value",
"onChange",
"size",
"radius",
"min",
"max",
"minRange",
"step",
"defaultValue",
"name",
"marks",
"label",
"labelTransition",
"labelTransitionDuration",
"labelTransitionTimingFunction",
"labelAlwaysOn",
"thumbFromLabel",
"thumbToLabel"
]);
const [dragging, setDragging] = React.useState(-1);
const [focused, setFocused] = React.useState(-1);
const [_value, setValue] = hooks.useUncontrolled({
value,
defaultValue,
finalValue: [min, max],
rule: (val) => Array.isArray(val),
onChange
});
const _valueRef = React.useRef(_value);
const container = React.useRef();
const thumbs = React.useRef([]);
const start = React.useRef();
const offset = React.useRef();
const positions = [
getPosition.getPosition({ value: _value[0], min, max }),
getPosition.getPosition({ value: _value[1], min, max })
];
const _setValue = (val) => {
setValue(val);
_valueRef.current = val;
};
const setRangedValue = (val, index) => {
const clone = [..._valueRef.current];
clone[index] = val;
if (index === 0) {
if (val > clone[1] - minRange) {
clone[1] = Math.min(val + minRange, max);
}
if (val > (max - minRange || min)) {
clone[index] = _valueRef.current[index];
}
}
if (index === 1) {
if (val < clone[0] + minRange) {
clone[0] = Math.max(val - minRange, min);
}
if (val < (minRange || min)) {
clone[index] = _valueRef.current[index];
}
}
_setValue(clone);
};
const handleChange = (val, index) => {
if (container.current) {
const containerWidth = container.current.getBoundingClientRect().width;
const nextValue = getChangeValue.getChangeValue({ value: val, containerWidth, min, max, step });
setRangedValue(nextValue, index);
}
};
const onDrag = (event) => {
container.current && container.current.focus();
handleChange(getClientPosition.getClientPosition(event) + start.current - offset.current, dragging);
};
const onDragEnd = () => {
setDragging(-1);
};
const { assignEvents, removeEvents } = getDragEventsAssigner.getDragEventsAssigner({
onDrag,
onDragEnd
});
React.useEffect(() => removeEvents, []);
function handleThumbMouseDown(event, index) {
if (event.cancelable) {
event.preventDefault();
event.stopPropagation();
}
start.current = thumbs.current[index].offsetLeft;
offset.current = getClientPosition.getClientPosition(event);
assignEvents();
}
const handleTrackMouseDown = (event) => {
if (event.cancelable) {
event.preventDefault();
}
const changePosition = getClientPosition.getClientPosition(event.nativeEvent);
const rect = container.current.getBoundingClientRect();
start.current = changePosition - rect.left;
offset.current = changePosition;
assignEvents();
handleChange(changePosition - rect.left, dragging);
};
const handleTrackMouseDownCapture = (event) => {
if (event.cancelable) {
event.preventDefault();
}
container.current.focus();
const rect = container.current.getBoundingClientRect();
const changePosition = getClientPosition.getClientPosition(event.nativeEvent);
const changeValue = getChangeValue.getChangeValue({
value: changePosition - rect.left,
max,
min,
step,
containerWidth: rect.width
});
const nearestHandle = Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;
setDragging(nearestHandle);
};
const getFocusedThumbIndex = () => {
if (focused !== 1 && focused !== 0) {
setFocused(0);
return 0;
}
return focused;
};
const handleTrackKeydownCapture = (event) => {
switch (event.nativeEvent.code) {
case "ArrowUp":
case "ArrowRight": {
event.preventDefault();
const focusedIndex = getFocusedThumbIndex();
thumbs.current[focusedIndex].focus();
setRangedValue(Math.min(Math.max(_valueRef.current[focusedIndex] + step, min), max), focusedIndex);
break;
}
case "ArrowDown":
case "ArrowLeft": {
event.preventDefault();
const focusedIndex = getFocusedThumbIndex();
thumbs.current[focusedIndex].focus();
setRangedValue(Math.min(Math.max(_valueRef.current[focusedIndex] - step, min), max), focusedIndex);
break;
}
}
};
const sharedThumbProps = {
max,
min,
color,
size,
labelTransition,
labelTransitionDuration,
labelTransitionTimingFunction,
labelAlwaysOn,
themeOverride,
onBlur: () => setFocused(-1),
classNames,
styles
};
return /* @__PURE__ */ React__default.createElement(SliderRoot.SliderRoot, __spreadProps(__spreadValues({}, others), {
size,
elementRef: container,
onTouchStart: handleTrackMouseDown,
onMouseDown: handleTrackMouseDown,
onTouchStartCapture: handleTrackMouseDownCapture,
onTouchEndCapture: () => setDragging(-1),
onMouseDownCapture: handleTrackMouseDownCapture,
onMouseUpCapture: () => setDragging(-1),
onKeyDownCapture: handleTrackKeydownCapture,
themeOverride,
styles,
classNames
}), /* @__PURE__ */ React__default.createElement(Track.Track, {
offset: positions[0],
filled: positions[1] - positions[0],
marks,
size,
radius,
color,
min,
max,
value: _value[1],
themeOverride,
styles,
classNames,
onChange: (val) => {
const nearestValue = Math.abs(_value[0] - val) > Math.abs(_value[1] - val) ? 1 : 0;
const clone = [..._value];
clone[nearestValue] = val;
_setValue(clone);
}
}, /* @__PURE__ */ React__default.createElement(Thumb.Thumb, __spreadProps(__spreadValues({}, sharedThumbProps), {
value: _value[0],
position: positions[0],
dragging: dragging === 0,
label: typeof label === "function" ? label(_value[0]) : label,
elementRef: (node) => {
thumbs.current[0] = node;
},
thumbLabel: thumbFromLabel,
onMouseDown: (event) => handleThumbMouseDown(event, 0),
onFocus: () => setFocused(0)
})), /* @__PURE__ */ React__default.createElement(Thumb.Thumb, __spreadProps(__spreadValues({}, sharedThumbProps), {
thumbLabel: thumbToLabel,
value: _value[1],
position: positions[1],
dragging: dragging === 1,
label: typeof label === "function" ? label(_value[1]) : label,
elementRef: (node) => {
thumbs.current[1] = node;
},
onMouseDown: (event) => handleThumbMouseDown(event, 1),
onFocus: () => setFocused(1)
}))), /* @__PURE__ */ React__default.createElement("input", {
type: "hidden",
name: `${name}_from`,
value: _value[0]
}), /* @__PURE__ */ React__default.createElement("input", {
type: "hidden",
name: `${name}_to`,
value: _value[1]
}));
}
RangeSlider.displayName = "@mantine/core/RangeSlider";
exports.RangeSlider = RangeSlider;
//# sourceMappingURL=RangeSlider.js.map