@ozen-ui/kit
Version:
React component library
60 lines (59 loc) • 4.23 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import './Slider.css';
import React, { useRef } from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { Tooltip } from '../Tooltip';
import { SliderMark } from './components';
import { SLIDER_DEFAULT_SIZE, SLIDER_DEFAULT_DISABLED, SLIDER_DEFAULT_DISABLE_TOOLTIP, SLIDER_DEFAULT_TAG, } from './constants';
import { getPositionOnRail } from './utils';
export var cnSlider = cn('Slider');
export var Slider = polymorphicComponentWithRef(function (inProps, ref) {
var _a = useThemeProps({ props: inProps, name: 'Slider' }), _b = _a.size, size = _b === void 0 ? SLIDER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? SLIDER_DEFAULT_DISABLED : _c, _d = _a.disableTooltip, disableTooltip = _d === void 0 ? SLIDER_DEFAULT_DISABLE_TOOLTIP : _d, _e = _a.as, Tag = _e === void 0 ? SLIDER_DEFAULT_TAG : _e, renderTooltipValueProp = _a.renderTooltipValue, defaultValue = _a.defaultValue, valueProp = _a.value, min = _a.min, max = _a.max, onChange = _a.onChange, step = _a.step, marksProp = _a.marks, inputProps = _a.inputProps, tooltipProps = _a.tooltipProps, className = _a.className, style = _a.style, other = __rest(_a, ["size", "disabled", "disableTooltip", "as", "renderTooltipValue", "defaultValue", "value", "min", "max", "onChange", "step", "marks", "inputProps", "tooltipProps", "className", "style"]);
var anchorRef = useRef(null);
var inputRef = useRef(null);
var _f = __read(useControlled({
value: valueProp,
defaultValue: defaultValue || 0,
name: 'Slider',
state: 'value',
}), 2), value = _f[0], setValue = _f[1];
var update = useRef();
var setUpdate = function (func) {
if (func) {
update.current = func;
}
};
var handleChange = function (event) {
var _a;
setValue(+event.target.value);
onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: +event.target.value });
(_a = update.current) === null || _a === void 0 ? void 0 : _a.call(update);
};
var position = getPositionOnRail({ value: value, min: min, max: max });
var marks = function () {
return marksProp === null || marksProp === void 0 ? void 0 : marksProp.map(function (_a) {
var markValue = _a.value, other = __rest(_a, ["value"]);
var markPos = getPositionOnRail({ value: markValue, min: min, max: max });
var hideMark = markValue === max || markValue === min;
return (React.createElement(SliderMark, __assign({ key: markValue, hideMark: hideMark, position: markPos }, other)));
});
};
var renderTooltipDefaultValue = function (value) {
return value || 0;
};
var renderTooltipValue = renderTooltipValueProp || renderTooltipDefaultValue;
return (React.createElement(Tag, __assign({ className: cnSlider({ size: size, disabled: disabled, hasMarks: !!marksProp }, [
className,
]), style: __assign({ '--slider-position': "".concat(position, "%") }, style) }, other, { ref: ref }),
React.createElement("div", { className: cnSlider('Container') },
React.createElement(Tooltip, __assign({ size: "xs", placement: "top" }, tooltipProps, { label: renderTooltipValue(value), disabled: disableTooltip, anchorRef: anchorRef, setUpdate: setUpdate, ignoreClickOutsideRefs: [inputRef] }),
React.createElement("input", __assign({ min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, type: "range", ref: inputRef }, inputProps, { className: cnSlider('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
React.createElement("span", { className: cnSlider('Range') },
React.createElement("span", { className: cnSlider('Rail') }),
marks(),
React.createElement("span", { className: cnSlider('Thumb'), ref: anchorRef })))));
});
Slider.displayName = 'Slider';