react-addressable-sliders
Version:
Multi-range slider made with react with addressable and identifiable ranges
297 lines (279 loc) • 11.3 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _utils = require("./utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var __assign = void 0 && (void 0).__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 styles = {
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: '16px'
},
containerVertical: {
transform: 'translateX(-100%) rotate(-90deg)',
transformOrigin: 'right center'
},
mainTrack: {
backgroundColor: '#ccc',
width: '100%',
zIndex: 1,
position: 'relative',
borderRadius: '3px',
height: '5px',
cursor: 'pointer',
'&:hover, &$focusVisible': {
boxShadow: '0 0 1px 1px #777'
}
},
sliderRange: {
position: 'absolute',
borderRadius: '3px',
height: '9px',
width: '100%',
marginTop: '-2px',
cursor: 'default'
},
sliderName: {
position: 'absolute',
fontWeight: 'bold',
color: 'black',
backgroundColor: 'white',
fontSize: '12px',
width: '100%',
minWidth: 10,
textAlign: 'center',
top: '-20px',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
zIndex: 1
},
sliderNamePopup: {
position: 'absolute',
fontWeight: 'bold',
fontSize: '12px',
color: 'black',
backgroundColor: 'white',
width: 'auto',
zIndex: 1500,
textAlign: 'center',
top: '-35px',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '10px',
visibility: 'hidden'
},
sliderValue: {
position: 'absolute',
fontSize: '12px',
color: 'black',
marginTop: '20px',
width: 'auto',
minWidth: '21px',
maxWidth: '200px',
textAlign: 'center',
visibility: 'hidden',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '10px',
zIndex: 1500
},
labelVertical: {
transform: 'translateY(30px) rotate(90deg)',
left: '50%',
transformOrigin: 'left',
overflow: 'visible',
textAlign: 'left'
},
labelPopupVertical: {
transform: 'rotate(90deg) translateX(67%)',
transformOrigin: 'center'
},
numberPopupVertical: {
transform: 'rotate(90deg) translate(50%, 100%)',
transformOrigin: 'right'
},
disabledThumb: {
backgroundColor: '#ccc!important',
cursor: 'not-allowed',
zIndex: 3,
'&::WebkitSliderThumb': {
backgroundColor: '#ccc!important'
},
'&::MozRangeThumb': {
backgroundColor: '#ccc!important'
}
},
thumb: {
pointerEvents: 'all',
cursor: 'pointer',
backgroundColor: 'black',
position: 'absolute',
height: '0',
width: '100%',
outline: 'none',
zIndex: 4,
'&::WebkitSliderThumb': {
border: 'none',
borderRadius: '50%',
backgroundColor: 'black',
boxShadow: '0 0 1px 1px #ced4da',
cursor: 'pointer',
height: '18px',
width: '18px',
marginTop: '4px',
pointerEvents: 'all',
position: 'relative'
},
'&::MozRangeThumb': {
border: 'none',
borderRadius: '50%',
backgroundColor: 'black',
boxShadow: '0 0 1px 1px #ced4da',
cursor: 'pointer',
height: '18px',
width: '18px',
marginTop: '4px',
pointerEvents: 'all',
position: 'relative'
}
}
};
var MultiRangeSlider = function MultiRangeSlider(_a) {
var ranges = _a.ranges,
options = _a.options,
emptySpaceCallback = _a.emptySpaceCallback,
labelFormatFun = _a.labelFormatFun,
extremes = _a.extremes,
emitChanges = _a.emitChanges,
checkContinuousChanges = _a.checkContinuousChanges;
var _b = (0, _react.useState)(extremes || (0, _utils.getMinAndMaxFromRanges)(ranges)),
localExtremes = _b[0],
setLocalExtremes = _b[1];
var _c = (0, _react.useState)((0, _utils.checkRanges)(ranges, options || {})),
localRanges = _c[0],
setLocalRanges = _c[1];
var rangesRef = (0, _react.useRef)({});
var labelsRef = (0, _react.useRef)({});
var namesRef = (0, _react.useRef)({});
(0, _react.useEffect)(function () {
if (extremes) {
setLocalExtremes(extremes);
}
}, [extremes]);
(0, _react.useEffect)(function () {
setLocalRanges((0, _utils.checkRanges)(ranges, options || {}));
if (!extremes) {
setLocalExtremes((0, _utils.getMinAndMaxFromRanges)(ranges));
}
}, [ranges]);
(0, _react.useEffect)(function () {
Object.values(localRanges).forEach(function (range) {
(0, _utils.updateRef)(range, localExtremes, rangesRef);
});
}, [localRanges]);
return /*#__PURE__*/_react.default.createElement("div", {
style: __assign(__assign({}, styles.container), (options === null || options === void 0 ? void 0 : options.isVertical) ? styles.containerVertical : {})
}, /*#__PURE__*/_react.default.createElement("div", {
style: styles.mainTrack,
onClick: function onClick(event) {
return emptySpaceCallback ? emptySpaceCallback((0, _utils.getClickedValueOnTrack)(event, localExtremes, localRanges)) : null;
}
}, Object.values(localRanges).map(function (range) {
return /*#__PURE__*/_react.default.createElement("div", {
key: range.id
}, [_utils.Thumb.MIN, _utils.Thumb.MAX].map(function (thumb) {
var thumbPosition = thumb === _utils.Thumb.MIN ? _utils.Direction.LEFT : 'right';
var disabled = !!(options && options.isImmovable && options.isImmovable(range) || range.immovable && range.immovable[thumbPosition]);
return /*#__PURE__*/_react.default.createElement("div", {
key: range.id + "_" + thumb,
onMouseEnter: function onMouseEnter() {
return (0, _utils.toggleTooltip)('show', range, thumb, labelsRef, localExtremes);
},
onMouseLeave: function onMouseLeave() {
return (0, _utils.toggleTooltip)('hide', range, thumb, labelsRef, localExtremes);
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: 'range',
min: localExtremes.min,
max: localExtremes.max,
disabled: disabled,
value: range[thumb],
onChange: function onChange(event) {
!disabled ? (0, _utils.onThumbValueChange)(event.target.value, thumb, range, localRanges, setLocalRanges, options || {}, checkContinuousChanges ? checkContinuousChanges : function () {}, labelsRef, localExtremes) : null;
},
onMouseUp: function onMouseUp(event) {
!disabled ? (0, _utils.onThumbValueChange)(event.target.value, thumb, range, localRanges, setLocalRanges, options || {}, emitChanges ? emitChanges : function () {}, labelsRef, localExtremes) : null;
},
onClick: function onClick(event) {
return event.stopPropagation();
},
style: !disabled ? __assign(__assign({}, styles.thumb), (options === null || options === void 0 ? void 0 : options.sliderThumbStyles) || {}) : __assign(__assign(__assign({}, styles.thumb), styles.disabledThumb), (options === null || options === void 0 ? void 0 : options.sliderThumbStyles) || {})
}), /*#__PURE__*/_react.default.createElement("span", {
style: __assign(__assign(__assign({}, styles.sliderValue), (options === null || options === void 0 ? void 0 : options.sliderValueStyles) || {}), (options === null || options === void 0 ? void 0 : options.isVertical) ? styles.numberPopupVertical : {}),
ref: function ref(el) {
if (labelsRef.current) {
labelsRef.current[range.id] = labelsRef.current[range.id] || {};
if (labelsRef.current[range.id] && el) {
labelsRef.current[range.id][thumbPosition] = el;
}
}
}
}, labelFormatFun ? labelFormatFun(range[thumb]) : range[thumb]));
}), /*#__PURE__*/_react.default.createElement("div", {
style: __assign(__assign({}, styles.sliderRange), {
backgroundColor: range.actualTrackColor || ''
}),
onClick: function onClick(event) {
return event.stopPropagation();
},
ref: function ref(el) {
if (rangesRef.current && el) {
rangesRef.current[range.id] = el;
}
},
onMouseEnter: function onMouseEnter() {
return (0, _utils.toggleNameTooltip)('show', range.id, namesRef);
},
onMouseLeave: function onMouseLeave() {
return (0, _utils.toggleNameTooltip)('hide', range.id, namesRef);
}
}, /*#__PURE__*/_react.default.createElement("span", {
style: __assign(__assign(__assign({}, styles.sliderNamePopup), (options === null || options === void 0 ? void 0 : options.sliderNamePopupStyles) || {}), (options === null || options === void 0 ? void 0 : options.isVertical) ? styles.labelPopupVertical : {}),
ref: function ref(el) {
if (namesRef.current && el) {
namesRef.current[range.id] = el;
}
}
}, range.name), /*#__PURE__*/_react.default.createElement("span", {
style: __assign(__assign(__assign({}, styles.sliderName), (options === null || options === void 0 ? void 0 : options.sliderNameStyles) || {}), (options === null || options === void 0 ? void 0 : options.isVertical) ? styles.labelVertical : {})
}, range.name)));
})));
};
MultiRangeSlider.defaultProps = {
ranges: {},
options: {}
};
var _default = MultiRangeSlider;
exports.default = _default;