@parkassist/pa-ui-library
Version:
INX Platform elements
53 lines • 1.76 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';
import styledEmotions from '@emotion/styled';
import { Row } from '../Flexbox/Flexbox';
import { FontStyles, Palette } from '../../index';
const StyledInputRange = styled(Slider)(({
inputColor = Palette.BLACK
}) => ({
color: inputColor,
'& .MuiSlider-thumb': {
backgroundColor: inputColor,
'&:hover, &.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px ${inputColor}29`
}
},
'& .MuiSlider-rail': {
color: inputColor
}
}));
const ExtremeValueLabel = styledEmotions.p`
font: ${FontStyles.BODY2_FONT};
color: ${Palette.BLACK};
margin: 8px 0;
`;
function InputRange(_a) {
var {
showExtremes = false,
minLabel,
maxLabel
} = _a,
props = __rest(_a, ["showExtremes", "minLabel", "maxLabel"]);
return _jsxs(_Fragment, {
children: [_jsx(StyledInputRange, Object.assign({}, props)), showExtremes && _jsxs(Row, {
justifyContent: 'space-between',
children: [minLabel && _jsx(ExtremeValueLabel, {
children: minLabel
}), maxLabel && _jsx(ExtremeValueLabel, {
children: maxLabel
})]
})]
});
}
export default InputRange;