@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
87 lines (86 loc) • 4.08 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _index = _interopRequireDefault(require("../Input/index.js"));
var _index2 = _interopRequireDefault(require("../CompoundSlider/index.js"));
var _excluded = ["axis", "max", "min", "step", "ticks", "onChange", "onUpdate", "domain", "skipped", "displayValueFormat"];
/**
* InputSlider module.
* @module @massds/mayflower-react/InputSlider
* @requires module:@massds/mayflower-assets/scss/01-atoms/01-atoms/helper-text
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
var InputSlider = function InputSlider(props) {
var axis = props.axis,
max = props.max,
min = props.min,
step = props.step,
ticks = props.ticks,
onChange = props.onChange,
onUpdate = props.onUpdate,
domain = props.domain,
skipped = props.skipped,
displayValueFormat = props.displayValueFormat,
inputProps = _objectWithoutPropertiesLoose(props, _excluded);
var sliderProps = {
axis: axis,
max: max,
min: min,
step: step,
defaultValue: props.defaultValue,
onChange: onChange,
onUpdate: onUpdate,
domain: domain,
skipped: skipped,
displayValueFormat: displayValueFormat
};
var id = inputProps.id,
disabled = inputProps.disabled;
sliderProps.id = id;
sliderProps.ticks = new Map(ticks);
sliderProps.disabled = disabled;
return /*#__PURE__*/_react["default"].createElement(_index["default"], inputProps, /*#__PURE__*/_react["default"].createElement(_index2["default"], sliderProps));
};
InputSlider.propTypes = process.env.NODE_ENV !== "production" ? {
/** Whether the label should be hidden or not */
hiddenLabel: _propTypes["default"].bool,
/** The label text for the input field */
labelText: _propTypes["default"].string.isRequired,
/** The unique ID for the input field */
id: _propTypes["default"].string.isRequired,
/** Custom change function */
onChange: _propTypes["default"].func,
/** Custom change function */
onUpdate: _propTypes["default"].func,
/** Default input text value */
defaultValue: _propTypes["default"].string,
/** Max value for the field. */
max: _propTypes["default"].number.isRequired,
/** Min value for the field. */
min: _propTypes["default"].number.isRequired,
/** This controls how much sliding the handle increments/decrements the value of the slider. */
step: _propTypes["default"].number,
/** An array where each entry is an array of [key,value] pairs. The key (number inclusively between min and max) and value (label to display at the key) are used for displaying tick marks. */
ticks: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])),
/** The direction for the slider, where x is horizontal and y is vertical. */
axis: _propTypes["default"].oneOf(['x', 'y']),
/** Disables the slider if true. */
disabled: _propTypes["default"].bool,
/** Whether input is required or not */
required: _propTypes["default"].bool,
/** The range of numbers, inclusively, for the slider to fall between. First number is the min and second number is the max. */
domain: _propTypes["default"].arrayOf(_propTypes["default"].number),
/** Whether to skip the slider with keyboard interaction and hide the slider on screen readers. */
skipped: _propTypes["default"].bool,
/** Display the value of the slider based. If null, don't display. If equals percentage, format the value in percentage. */
displayValueFormat: _propTypes["default"].oneOf(['percentage', 'value', null])
} : {};
InputSlider.defaultProps = {
defaultValue: 0,
disabled: false
};
var _default = exports["default"] = InputSlider;
module.exports = exports.default;