@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
327 lines (324 loc) • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _chaynsApi = require("chayns-api");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = require("styled-components");
var _element = require("../../hooks/element");
var _slider = require("../../utils/slider");
var _Slider = require("./Slider.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Slider = ({
maxValue,
minValue,
value,
onSelect,
onChange,
interval,
isDisabled,
thumbLabelFormatter,
shouldShowThumbLabel = false,
steps = 1
}) => {
const [fromValue, setFromValue] = (0, _react.useState)(0);
const [toValue, setToValue] = (0, _react.useState)(maxValue);
const [thumbWidth, setThumbWidth] = (0, _react.useState)(20);
const [isBigSlider, setIsBigSlider] = (0, _react.useState)(false);
const fromSliderRef = (0, _react.useRef)(null);
const toSliderRef = (0, _react.useRef)(null);
const fromSliderThumbRef = (0, _react.useRef)(null);
const toSliderThumbRef = (0, _react.useRef)(null);
const fromSliderThumbContentRef = (0, _react.useRef)(null);
const toSliderThumbContentRef = (0, _react.useRef)(null);
const sliderWrapperRef = (0, _react.useRef)(null);
const sliderWrapperSize = (0, _element.useElementSize)(sliderWrapperRef);
const theme = (0, _styledComponents.useTheme)();
(0, _react.useEffect)(() => {
if (shouldShowThumbLabel) {
setThumbWidth((0, _slider.getThumbMaxWidth)({
maxNumber: maxValue,
thumbLabelFormatter
}));
}
}, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);
/**
* This function sets the value
*/
(0, _react.useEffect)(() => {
if (typeof value !== 'number') {
return;
}
if (value >= minValue && value <= maxValue) {
setFromValue(value);
}
}, [maxValue, minValue, value]);
(0, _react.useEffect)(() => {
if (fromValue > toValue) {
setFromValue(toValue);
}
if (toValue < fromValue) {
setToValue(fromValue);
}
}, [fromValue, toValue]);
const handleMouseUp = (0, _react.useCallback)(() => {
var _fromSliderRef$curren, _toSliderRef$current;
if (isDisabled) {
return;
}
const from = Number((_fromSliderRef$curren = fromSliderRef.current) === null || _fromSliderRef$curren === void 0 ? void 0 : _fromSliderRef$curren.value);
const to = Number((_toSliderRef$current = toSliderRef.current) === null || _toSliderRef$current === void 0 ? void 0 : _toSliderRef$current.value);
if (typeof onSelect === 'function') {
onSelect(interval ? undefined : from, interval ? {
maxValue: to,
minValue: from
} : undefined);
}
}, [interval, isDisabled, onSelect]);
const handleControlFromSlider = (0, _react.useCallback)(event => {
if (!fromSliderRef.current || !toSliderRef.current) {
return;
}
let newValue = Number(event.target.value);
if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
newValue = maxValue;
} else if (newValue < minValue) {
newValue = minValue;
} else {
newValue = Math.round(newValue / steps) * steps;
}
setFromValue(newValue);
const to = Number(toSliderRef.current.value);
if (typeof onChange === 'function') {
onChange(undefined, {
maxValue: to,
minValue: newValue
});
}
(0, _slider.fillSlider)({
toSlider: toSliderRef.current,
fromSlider: fromSliderRef.current,
fromValue: newValue,
theme
});
if (newValue > to) {
fromSliderRef.current.value = String(to);
} else {
fromSliderRef.current.value = String(newValue);
}
}, [maxValue, minValue, onChange, steps, theme]);
const handleControlToSlider = (0, _react.useCallback)(event => {
if (isDisabled) {
return;
}
if (!fromSliderRef.current || !toSliderRef.current) {
return;
}
let newValue = Number(event.target.value);
if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
newValue = maxValue;
} else if (newValue < minValue) {
newValue = minValue;
} else {
newValue = Math.round(newValue / steps) * steps;
}
setToValue(newValue);
const from = Number(fromSliderRef.current.value);
if (typeof onChange === 'function') {
onChange(undefined, {
maxValue: newValue,
minValue: from
});
}
(0, _slider.fillSlider)({
toSlider: toSliderRef.current,
fromSlider: fromSliderRef.current,
toValue: newValue,
theme
});
if (from <= newValue) {
toSliderRef.current.value = String(newValue);
} else {
toSliderRef.current.value = String(from);
}
}, [isDisabled, maxValue, minValue, onChange, steps, theme]);
(0, _react.useEffect)(() => {
if (!fromSliderRef.current || !toSliderRef.current || !interval) {
return;
}
setFromValue(interval.minValue);
setToValue(interval.maxValue);
fromSliderRef.current.value = String(interval.minValue);
toSliderRef.current.value = String(interval.maxValue);
(0, _slider.fillSlider)({
fromSlider: fromSliderRef.current,
toSlider: toSliderRef.current,
theme
});
// Note: interval can´t be in the deps because of rerender
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [theme]);
/**
* This function updates the value
*/
const handleInputChange = (0, _react.useCallback)(event => {
if (isDisabled) {
return;
}
let newValue = Number(event.target.value);
if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
newValue = maxValue;
} else if (newValue < minValue) {
newValue = minValue;
} else {
newValue = Math.round(newValue / steps) * steps;
}
if (interval) {
handleControlFromSlider(event);
return;
}
setFromValue(newValue);
if (onChange) {
onChange(newValue);
}
}, [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps]);
const fromSliderThumbPosition = (0, _react.useMemo)(() => {
if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
return (0, _slider.calculateGradientOffset)({
max: maxValue,
min: minValue,
value: fromValue,
thumbWidth: 20,
containerWidth: fromSliderRef.current.offsetWidth
});
}
return 0;
}, [fromValue, maxValue, minValue, sliderWrapperSize]);
const toSliderThumbPosition = (0, _react.useMemo)(() => {
if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {
return (0, _slider.calculateGradientOffset)({
max: maxValue,
min: minValue,
value: toValue,
thumbWidth: 20,
containerWidth: toSliderRef.current.offsetWidth
});
}
return 0;
}, [toValue, minValue, maxValue, sliderWrapperSize]);
const toSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
min: minValue,
max: maxValue,
sliderValue: toValue,
popupWidth: thumbWidth
}), [maxValue, minValue, thumbWidth, toValue]);
const fromSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
min: minValue,
max: maxValue,
sliderValue: fromValue,
popupWidth: thumbWidth
}), [fromValue, maxValue, minValue, thumbWidth]);
const handleTouchStart = (0, _react.useCallback)(() => {
if (isDisabled) {
return;
}
void (0, _chaynsApi.setRefreshScrollEnabled)(false);
if (shouldShowThumbLabel) {
setIsBigSlider(true);
}
}, [isDisabled, shouldShowThumbLabel]);
const handleTouchEnd = (0, _react.useCallback)(() => {
var _fromSliderRef$curren2, _toSliderRef$current2;
if (isDisabled) {
return;
}
void (0, _chaynsApi.setRefreshScrollEnabled)(true);
const from = Number((_fromSliderRef$curren2 = fromSliderRef.current) === null || _fromSliderRef$curren2 === void 0 ? void 0 : _fromSliderRef$curren2.value);
const to = Number((_toSliderRef$current2 = toSliderRef.current) === null || _toSliderRef$current2 === void 0 ? void 0 : _toSliderRef$current2.value);
if (typeof onSelect === 'function') {
onSelect(interval ? undefined : from, interval ? {
maxValue: to,
minValue: from
} : undefined);
}
if (shouldShowThumbLabel) {
setIsBigSlider(false);
}
}, [interval, isDisabled, onSelect, shouldShowThumbLabel]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Slider.StyledSlider, {
ref: sliderWrapperRef,
$isDisabled: isDisabled
}, /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
animate: {
height: isBigSlider ? 30 : 10
},
initial: {
height: 10
},
exit: {
height: 10
},
$thumbWidth: 40,
ref: fromSliderRef,
$isInterval: !!interval,
type: "range",
value: fromValue,
step: 0.01,
max: maxValue,
min: minValue,
onTouchStart: handleTouchStart,
onTouchEnd: handleTouchEnd,
onChange: handleInputChange,
onMouseUp: handleMouseUp,
$max: maxValue,
$min: minValue,
$value: fromValue
}), /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
ref: fromSliderThumbRef,
$position: fromSliderThumbPosition,
$isBigSlider: isBigSlider
}, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
$width: thumbWidth,
$isBigSlider: isBigSlider,
$position: fromSliderThumbContentPosition,
ref: fromSliderThumbContentRef
}, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
ref: toSliderThumbRef,
$position: toSliderThumbPosition,
$isBigSlider: isBigSlider
}, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
$width: thumbWidth,
$isBigSlider: isBigSlider,
$position: toSliderThumbContentPosition,
ref: toSliderThumbContentRef
}, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
animate: {
height: isBigSlider ? 30 : 10
},
initial: {
height: 10
},
exit: {
height: 10
},
$thumbWidth: 40,
$max: maxValue,
$min: minValue,
$value: toValue,
ref: toSliderRef,
$isInterval: !!interval,
type: "range",
value: toValue,
step: 0.01,
max: maxValue,
min: minValue,
onTouchStart: handleTouchStart,
onTouchEnd: handleTouchEnd,
onChange: handleControlToSlider,
onMouseUp: handleMouseUp
})), [isDisabled, isBigSlider, interval, fromValue, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
};
Slider.displayName = 'Slider';
var _default = exports.default = Slider;
//# sourceMappingURL=Slider.js.map