@smitch/fluid
Version:
A Next/React ui-component libray.
45 lines (44 loc) • 3.49 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { Input, Label } from '..';
var thumbnailShapes = {
circle: '[&&::-webkit-slider-thumb]:rounded-full',
square: '[&&::-webkit-slider-thumb]:rounded-none',
};
var RangeInput = function (_a) {
var _b = _a.name, name = _b === void 0 ? 'range' : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 100 : _d, _e = _a.defaultValue, defaultValue = _e === void 0 ? 50 : _e, _f = _a.step, step = _f === void 0 ? '1' : _f, label = _a.label, labelIsBold = _a.labelIsBold, _g = _a.size, size = _g === void 0 ? 'md' : _g, _h = _a.layout, layout = _h === void 0 ? 'col' : _h, _j = _a.title, title = _j === void 0 ? 'Current value:' : _j, _k = _a.hint, hint = _k === void 0 ? true : _k, _l = _a.required, required = _l === void 0 ? false : _l, _m = _a.rangeActive, rangeActive = _m === void 0 ? '#f59e0b' : _m, _o = _a.rangeBackground, rangeBackground = _o === void 0 ? '#9e9e9e' : _o, _p = _a.thumbnailColor, thumbnailColor = _p === void 0 ? '#f59e0b' : _p, _q = _a.thumbnailActiveColor, thumbnailActiveColor = _q === void 0 ? '#ff0000' : _q, _r = _a.thumbnailShape, thumbnailShape = _r === void 0 ? 'circle' : _r, _s = _a.rounded, rounded = _s === void 0 ? true : _s, style = _a.style, _t = _a.className, className = _t === void 0 ? '' : _t, onChange = _a.onChange;
var _u = useState(defaultValue), value = _u[0], setValue = _u[1];
var _v = useState(defaultValue), scrubRange = _v[0], setScrubRange = _v[1];
var _w = useState(1), modifier = _w[0], setModifier = _w[1];
var _x = useState(false), isFocused = _x[0], setIsFocused = _x[1];
var _y = useState('right'), position = _y[0], setPosition = _y[1];
useEffect(function () {
setModifier(100 / max);
}, [max]);
useEffect(function () {
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
isRTL ? setPosition('left') : setPosition('right');
}, []);
var shapeClasses = useMemo(function () { return thumbnailShapes[thumbnailShape]; }, [thumbnailShape]);
var handleChange = function (e) {
var newValue = Number(e.target.value);
setValue(newValue);
setScrubRange(Number(newValue));
if (onChange)
onChange(newValue);
};
var handleFocus = function () {
setIsFocused(true);
};
var handleBlur = function () {
setIsFocused(false);
};
var scrubStyle = {
backgroundImage: "linear-gradient(to ".concat(position, ", ").concat(rangeActive, " 0%, ").concat(rangeActive, " ").concat(scrubRange * modifier, "%, ").concat(rangeBackground, " ").concat(scrubRange * modifier, "%, ").concat(rangeBackground, " 100%)"),
color: "".concat(isFocused ? thumbnailActiveColor : thumbnailColor),
};
return (_jsx(Label, { label: label, size: size, layout: layout, isBold: labelIsBold, required: required, type: 'range', className: twMerge("range-label items-baseline", className), style: style, children: _jsx(Input, { name: name, type: 'range', value: value, min: min, max: max, step: step, hint: hint, title: "".concat(title, " ").concat(value), onChange: handleChange, onInput: handleChange, onFocus: handleFocus, onBlur: handleBlur, size: size, rounded: "".concat(rounded ? 'md' : 'none'), className: "".concat(shapeClasses), style: scrubStyle }) }));
};
export default RangeInput;