@ozen-ui/kit
Version:
React component library
63 lines (62 loc) • 4.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = exports.cnSlider = void 0;
var tslib_1 = require("tslib");
require("./Slider.css");
var react_1 = tslib_1.__importStar(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var Tooltip_1 = require("../Tooltip");
var components_1 = require("./components");
var constants_1 = require("./constants");
var utils_1 = require("./utils");
exports.cnSlider = (0, classname_1.cn)('Slider');
exports.Slider = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Slider' }), _b = _a.size, size = _b === void 0 ? constants_1.SLIDER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.SLIDER_DEFAULT_DISABLED : _c, _d = _a.disableTooltip, disableTooltip = _d === void 0 ? constants_1.SLIDER_DEFAULT_DISABLE_TOOLTIP : _d, _e = _a.as, Tag = _e === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["size", "disabled", "disableTooltip", "as", "renderTooltipValue", "defaultValue", "value", "min", "max", "onChange", "step", "marks", "inputProps", "tooltipProps", "className", "style"]);
var anchorRef = (0, react_1.useRef)(null);
var inputRef = (0, react_1.useRef)(null);
var _f = tslib_1.__read((0, useControlled_1.useControlled)({
value: valueProp,
defaultValue: defaultValue || 0,
name: 'Slider',
state: 'value',
}), 2), value = _f[0], setValue = _f[1];
var update = (0, react_1.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 = (0, utils_1.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 = tslib_1.__rest(_a, ["value"]);
var markPos = (0, utils_1.getPositionOnRail)({ value: markValue, min: min, max: max });
var hideMark = markValue === max || markValue === min;
return (react_1.default.createElement(components_1.SliderMark, tslib_1.__assign({ key: markValue, hideMark: hideMark, position: markPos }, other)));
});
};
var renderTooltipDefaultValue = function (value) {
return value || 0;
};
var renderTooltipValue = renderTooltipValueProp || renderTooltipDefaultValue;
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnSlider)({ size: size, disabled: disabled, hasMarks: !!marksProp }, [
className,
]), style: tslib_1.__assign({ '--slider-position': "".concat(position, "%") }, style) }, other, { ref: ref }),
react_1.default.createElement("div", { className: (0, exports.cnSlider)('Container') },
react_1.default.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ size: "xs", placement: "top" }, tooltipProps, { label: renderTooltipValue(value), disabled: disableTooltip, anchorRef: anchorRef, setUpdate: setUpdate, ignoreClickOutsideRefs: [inputRef] }),
react_1.default.createElement("input", tslib_1.__assign({ min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, type: "range", ref: inputRef }, inputProps, { className: (0, exports.cnSlider)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
react_1.default.createElement("span", { className: (0, exports.cnSlider)('Range') },
react_1.default.createElement("span", { className: (0, exports.cnSlider)('Rail') }),
marks(),
react_1.default.createElement("span", { className: (0, exports.cnSlider)('Thumb'), ref: anchorRef })))));
});
exports.Slider.displayName = 'Slider';