@catho/quantum
Version:
Catho react components
206 lines (205 loc) • 8.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = require("react");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Slider = _interopRequireDefault(require("@mui/material/Slider"));
var _theme = require("../shared/theme");
var _shared = require("../shared");
var _valueValidator = _interopRequireDefault(require("./valueValidator"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var SliderWrapper = _styledComponents["default"].div.withConfig({
displayName: "RangeSlider__SliderWrapper",
componentId: "sc-yjbvvq-0"
})(["width:auto;", ""], function (_ref) {
var large = _ref.theme.spacing.large;
return "\n padding: 0 ".concat(large / 2, "px;\n ");
});
var RangeSlider = function RangeSlider(_ref2) {
var _ref2$ariaLabelledby = _ref2['aria-labelledby'],
ariaLabelledby = _ref2$ariaLabelledby === void 0 ? undefined : _ref2$ariaLabelledby,
_ref2$defaultValue = _ref2.defaultValue,
defaultValue = _ref2$defaultValue === void 0 ? 30 : _ref2$defaultValue,
_ref2$disabled = _ref2.disabled,
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
_ref2$marks = _ref2.marks,
marks = _ref2$marks === void 0 ? undefined : _ref2$marks,
_ref2$max = _ref2.max,
max = _ref2$max === void 0 ? 100 : _ref2$max,
_ref2$min = _ref2.min,
min = _ref2$min === void 0 ? 0 : _ref2$min,
_ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
_ref2$onChangeCommitt = _ref2.onChangeCommitted,
onChangeCommitted = _ref2$onChangeCommitt === void 0 ? function () {} : _ref2$onChangeCommitt,
_ref2$step = _ref2.step,
step = _ref2$step === void 0 ? 1 : _ref2$step,
_ref2$theme = _ref2.theme,
theme = _ref2$theme === void 0 ? {
spacing: _theme.spacing,
colors: _theme.colors,
baseFontSize: _theme.baseFontSize
} : _ref2$theme,
_ref2$tipFormatter = _ref2.tipFormatter,
tipFormatter = _ref2$tipFormatter === void 0 ? function (value) {
return value.toString();
} : _ref2$tipFormatter,
_ref2$track = _ref2.track,
track = _ref2$track === void 0 ? 'normal' : _ref2$track,
_ref2$value = _ref2.value,
value = _ref2$value === void 0 ? undefined : _ref2$value,
_ref2$valueLabelDispl = _ref2.valueLabelDisplay,
valueLabelDisplay = _ref2$valueLabelDispl === void 0 ? 'auto' : _ref2$valueLabelDispl;
var _theme$colors = theme.colors,
neutral = _theme$colors.neutral,
primary = _theme$colors.primary,
_theme$spacing = theme.spacing,
xxsmall = _theme$spacing.xxsmall,
xsmall = _theme$spacing.xsmall,
small = _theme$spacing.small,
baseFontSize = theme.baseFontSize;
var arrowSize = xsmall - 1;
var halfMeasure = '50%';
var sliderStyles = {
'&.MuiSlider-root': {
height: 8
},
'& .MuiSlider-thumb': {
backgroundColor: disabled ? neutral[500] : primary[700],
border: 'none',
height: 24,
width: 24,
marginTop: 0,
'&:focus,&:hover': {
'& > *': {
transform: "scale(1) translateX(-".concat(halfMeasure, ") !important")
}
},
'&::before': {
boxShadow: 'none'
}
},
'& .MuiSlider-valueLabel': {
width: 'auto',
top: '-50px',
left: halfMeasure,
padding: 0,
backgroundColor: disabled ? neutral[500] : primary[700],
transform: valueLabelDisplay === 'on' ? "scale(1) translateX(-".concat(halfMeasure, ") !important") : 'scale(0)',
'&:focus,&:hover': {
transform: "scale(1) translateX(-".concat(halfMeasure, ")")
},
'&::before': {
display: "none"
},
'&::after': {
borderLeft: "".concat(arrowSize, "px solid transparent"),
borderRight: "".concat(arrowSize, "px solid transparent"),
borderTop: "".concat(arrowSize, "px solid ").concat(neutral[700]),
bottom: "-".concat(arrowSize, "px"),
content: "\" \"",
height: 0,
left: halfMeasure,
position: 'absolute',
transform: "translateX(-".concat(halfMeasure, ") !important"),
width: 0
},
'& > *': {
background: neutral[700],
color: neutral[0],
fontSize: baseFontSize,
padding: "".concat(xsmall, "px ").concat(small, "px"),
borderRadius: '4px',
height: 24,
transform: 'none',
width: 'auto',
whiteSpace: 'nowrap',
'& > *': {
width: 'auto',
transform: 'none'
}
}
},
'& .MuiSlider-mark': {
display: 'none'
},
'& .MuiSlider-markLabel': {
marginTop: "".concat(xxsmall, "px")
},
'& .MuiSlider-track': {
height: 8,
borderRadius: '4px',
border: 'none',
backgroundColor: (0, _shared.hexToRgba)(primary[700], 0.5)
},
'& .MuiSlider-rail': {
height: 8,
borderRadius: '4px',
color: disabled ? neutral[500] : primary[700]
}
};
var formatedValue = _typeof(value) === 'object' ? [value.from, value.to] : value;
var formatedDefaultValue = _typeof(defaultValue) === 'object' ? [defaultValue.from, defaultValue.to] : defaultValue;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderWrapper, {
theme: theme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
sx: sliderStyles,
"aria-labelledby": ariaLabelledby,
defaultValue: disabled ? 0 : formatedDefaultValue,
disabled: disabled,
getAriaLabel: tipFormatter,
getAriaValueText: tipFormatter,
marks: marks,
max: max,
min: min,
onChange: onChange,
onChangeCommitted: onChangeCommitted,
ref: /*#__PURE__*/(0, _react.createRef)(),
step: step,
track: track,
value: disabled ? 0 : formatedValue,
valueLabelDisplay: disabled ? 'off' : valueLabelDisplay,
valueLabelFormat: tipFormatter
})
});
};
SliderWrapper.displayName = 'RangeSliderWrapper';
RangeSlider.propTypes = {
/** The number that the slider will use as interval of each value */
step: _propTypes["default"].number,
/** The max value possible in slider */
max: _propTypes["default"].number,
/** The min value possible in slider */
min: _propTypes["default"].number,
disabled: _propTypes["default"].bool,
/** Trigger a function on value change, evict to use controlled values, because the component will re-render before change the value */
onChange: _propTypes["default"].func,
/** Trigger a function after value completely changes */
onChangeCommitted: _propTypes["default"].func,
/** The min value possible in slider */
marks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
label: _propTypes["default"].string
})),
/* *Set if the tooltip label is by default visible. 'auto' the value label will display when the thumb is hovered or focused. 'on' will display persistently. 'off' will never display. */
valueLabelDisplay: _propTypes["default"].oneOf(['auto', 'on', 'off']),
/** The track presentation:- normal the track will render a bar representing the slider value. - inverted the track will render a bar representing the remaining slider value. - false the track will render without a bar. */
track: _propTypes["default"].oneOf(['normal', false, 'inverted']),
'aria-labelledby': _propTypes["default"].string,
/** RangeSlider will pass its value to tipFormatter, display its value in Tooltip */
tipFormatter: _propTypes["default"].func,
/** It receives a Number to display a slider or an Object with from and to properties to display a range. Example: `value={10}` or `value={{ from: 20, to: 40 }}` */
value: _valueValidator["default"],
defaultValue: _valueValidator["default"],
theme: _propTypes["default"].shape({
spacing: _propTypes["default"].object,
colors: _propTypes["default"].object,
baseFontSize: _propTypes["default"].number
})
};
var _default = exports["default"] = RangeSlider;