@mapbox/mr-ui
Version:
UI components for Mapbox projects
143 lines (142 loc) • 6.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlRange;
var _react = _interopRequireWildcard(require("react"));
var SliderPrimitive = _interopRequireWildcard(require("@radix-ui/react-slider"));
var PopoverPrimitive = _interopRequireWildcard(require("@radix-ui/react-popover"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _controlLabel = _interopRequireDefault(require("../control-label"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
var _styles = require("../utils/styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const propNames = ['id', 'value', 'onChange', 'label', 'optional', 'aside', 'validationError', 'themeControlRange', 'themeControlRangeActive', 'themeControlWrapper', 'themeLabel', 'tooltip',
// Passed when used with the Form component
'initialValue', 'validator'];
function ControlRange(_ref) {
let {
id,
onChange,
value = [],
label,
optional = false,
aside,
tooltip,
validationError,
themeControlRange = 'range--s range--gray w-full h-full',
themeControlRangeActive,
themeControlTrack = '',
themeControlThumb = '',
themeControlWrapper,
themeLabel,
themeTooltipColoring = 'light',
...props
} = _ref;
const extraProps = (0, _omit.default)(props, propNames);
const [activeThumbIndex, setActiveThumbIndex] = (0, _react.useState)(null);
const rootProps = {
id,
name: id,
onValueChange: value => onChange(value, id),
value,
'aria-required': optional ? false : true,
'data-test': `${id}-input`,
...extraProps
};
if (validationError) {
rootProps['aria-invalid'] = true;
}
const renderThumb = (value, index) => {
if (tooltip) {
const {
background,
borderColor,
color,
fill,
shadowColor
} = (0, _styles.getTheme)(themeTooltipColoring);
const tooltipClasses = `${background} ${borderColor} ${color} border round txt-s px12 py6 wmax240`;
return /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Root, {
open: activeThumbIndex === index
}, /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Trigger, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(SliderPrimitive.Thumb, {
key: index,
className: `${themeControlThumb}`,
onMouseOver: () => setActiveThumbIndex(index),
onMouseOut: () => setActiveThumbIndex(null),
onPointerCancel: () => setActiveThumbIndex(null)
})), /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Content, {
side: "top",
align: "center",
sideOffset: 6,
className: tooltipClasses,
style: {
filter: `drop-shadow(0 0 4px ${shadowColor})`
}
}, value, /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Arrow, {
width: 12,
height: 6,
offset: 6,
fill: fill
})));
}
return /*#__PURE__*/_react.default.createElement(SliderPrimitive.Thumb, {
key: index,
className: `${themeControlThumb}`
});
};
return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
themeControlWrapper: themeControlWrapper,
id: id,
validationError: validationError
}, label && /*#__PURE__*/_react.default.createElement(_controlLabel.default, {
text: label,
id: id,
aside: aside,
optional: optional,
themeLabel: themeLabel
}), /*#__PURE__*/_react.default.createElement("div", {
className: `range ${themeControlRange}`
}, /*#__PURE__*/_react.default.createElement(SliderPrimitive.Root, rootProps, /*#__PURE__*/_react.default.createElement(SliderPrimitive.Track, {
className: `${themeControlTrack}`
}, /*#__PURE__*/_react.default.createElement(SliderPrimitive.Range, {
className: `absolute h-full ${themeControlRangeActive}`
})), value.map(renderThumb))));
}
ControlRange.propTypes = {
/** Identifying value for input element. */
id: _propTypes.default.string.isRequired,
/** Called during changes to the input element. */
onChange: _propTypes.default.func.isRequired,
/** Accepts an array of numbers, where each number matches a draggable thumb. */
value: _propTypes.default.array,
/** Value passed to the label element. Value can be string or ReactNode. */
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** If provided the text, "(optional)" is appended to the value of the label element. */
optional: _propTypes.default.bool,
/** Additional content inserted alongside the label element. */
aside: _propTypes.default.node,
/** Provide a tooltip for visual feedback on a range thumb value. */
tooltip: _propTypes.default.bool,
/** If provided, the value of this propery displays as an error message. */
validationError: _propTypes.default.node,
/** Assembly classes to apply to the range element */
themeControlRange: _propTypes.default.string,
/** Assembly classes to apply to the active part of the range track */
themeControlRangeActive: _propTypes.default.string,
/** Assembly classes to apply to the track element */
themeControlTrack: _propTypes.default.string,
/** Assembly classes to apply to the thumb element */
themeControlThumb: _propTypes.default.string,
/** Assembly classes to apply to the control wrapper */
themeControlWrapper: _propTypes.default.string,
/** Assembly classes to apply to the label element */
themeLabel: _propTypes.default.string,
/** `'light'`, `'dark'`, `'warning'`, or `'error'`. */
themeTooltipColoring: _propTypes.default.oneOf(['light', 'dark', 'warning', 'error'])
};