norma-library/dist/esm/components/RangerSlider.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __assign, __rest } from "tslib";
import React from 'react';
import { Box, Slider as MuiSlider, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
var RangerSliderStyled = styled(MuiSlider)(function (_a) {
    var theme = _a.theme;
    return ({
        height: 8,
        color: theme.palette.primary.main,
        '& .MuiSlider-track': {
            border: 'none',
        },
        '& .MuiSlider-thumb': {
            height: 18,
            width: 18,
            backgroundColor: '#FFF',
            border: "2px solid ".concat(theme.palette.primary.main),
            '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
                boxShadow: 'inherit',
            },
            '&:before': {
                width: '8px',
                height: '8px',
                position: 'absolute',
                display: 'block',
                background: theme.palette.primary.main,
            },
        },
        '& .MuiSlider-valueLabel': {
            fontSize: 12,
            fontWeight: 'normal',
            top: 48,
            position: 'absolute',
            transition: 'none',
            color: theme.palette.primary.main,
            '&:before': {
                bottom: 'inherit',
                top: '-8px',
            },
            '& *': {
                background: 'transparent',
                color: '#FFF',
            },
        },
        '& .MuiSlider-rail': {
            color: '#F0F2F8 ',
            opacity: 1,
            height: 10,
        },
    });
});
export var RangerSlider = function (_a) {
    var _b;
    var value = _a.value, defaultValue = _a.defaultValue, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.showValueInline, showValueInline = _d === void 0 ? false : _d, _e = _a.min, min = _e === void 0 ? 0 : _e, _f = _a.max, max = _f === void 0 ? 100 : _f, valueLabelFormat = _a.valueLabelFormat, props = __rest(_a, ["value", "defaultValue", "color", "showValueInline", "min", "max", "valueLabelFormat"]);
    var _g = React.useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : (Array.isArray(defaultValue) ? [min, max] : min)), currentValue = _g[0], setCurrentValue = _g[1];
    var handleChange = function (event, newValue) {
        var _a;
        setCurrentValue(newValue);
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event, newValue, Array.isArray(newValue) ? 1 : 0);
    };
    React.useEffect(function () {
        value !== undefined && setCurrentValue(value);
    }, [value]);
    var formatValue = function (val) {
        return Array.isArray(val)
            ? val[0] === val[1]
                ? valueLabelFormat && typeof valueLabelFormat === 'function'
                    ? valueLabelFormat(val[0], 0)
                    : val[0]
                : "".concat(valueLabelFormat && typeof valueLabelFormat === 'function' ? valueLabelFormat(val[0], 0) : val[0], " - ").concat(valueLabelFormat && typeof valueLabelFormat === 'function' ? valueLabelFormat(val[1], 1) : val[1])
            : valueLabelFormat && typeof valueLabelFormat === 'function'
                ? valueLabelFormat(val, 0)
                : val;
    };
    return (React.createElement(Box, { sx: { width: '100%' } },
        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
            React.createElement(Typography, { gutterBottom: true }, props.label),
            showValueInline && (React.createElement(Typography, { style: { display: 'flex', alignItems: 'center', fontSize: 12 } }, formatValue(currentValue)))),
        React.createElement(RangerSliderStyled, __assign({ value: currentValue, defaultValue: undefined, min: min, max: max, color: color, onChange: handleChange, valueLabelFormat: valueLabelFormat }, props))));
};
//# sourceMappingURL=RangerSlider.js.map