norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
88 lines • 3.96 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { Box, Slider as MuiSlider, Typography } from '@mui/material';
import { palette } from '../helpers';
import { styled } from '@mui/material/styles';
var colorMap = {
inherit: palette.inherit,
primary: palette.primary,
secondary: palette.secondary,
error: palette.error,
warning: palette.warning,
info: palette.info,
success: palette.success,
};
var RangerSliderStyled = styled(MuiSlider)(function () { return ({
height: 8,
color: colorMap['primary'],
'& .MuiSlider-track': {
border: 'none',
},
'& .MuiSlider-thumb': {
height: 18,
width: 18,
backgroundColor: '#FFF',
border: "2px solid ".concat(colorMap['primary']),
'&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
boxShadow: 'inherit',
},
'&:before': {
width: '8px',
height: '8px',
position: 'absolute',
display: 'block',
background: colorMap['primary'],
},
},
'& .MuiSlider-valueLabel': {
fontSize: 12,
fontWeight: 'normal',
top: 48,
position: 'absolute',
transition: 'none',
color: colorMap['primary'],
'&: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