@massds/mayflower-react/dist/InputSlider/index.mjs

React versions of Mayflower design system UI components

const _excluded = ["axis", "max", "min", "step", "ticks", "onChange", "onUpdate", "domain", "skipped", "displayValueFormat"];
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; }
/**
 * InputSlider module.
 * @module @massds/mayflower-react/InputSlider
 * @requires module:@massds/mayflower-assets/scss/01-atoms/01-atoms/helper-text
 */
import React from "react";
import PropTypes from "prop-types";
import Input from "../Input/index.mjs";
import CompoundSlider from "../CompoundSlider/index.mjs";
const InputSlider = props => {
  const 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);
  const sliderProps = {
    axis: axis,
    max: max,
    min: min,
    step: step,
    defaultValue: props.defaultValue,
    onChange: onChange,
    onUpdate: onUpdate,
    domain: domain,
    skipped: skipped,
    displayValueFormat: displayValueFormat
  };
  const id = inputProps.id,
    disabled = inputProps.disabled;
  sliderProps.id = id;
  sliderProps.ticks = new Map(ticks);
  sliderProps.disabled = disabled;
  return /*#__PURE__*/React.createElement(Input, inputProps, /*#__PURE__*/React.createElement(CompoundSlider, sliderProps));
};
InputSlider.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Whether the label should be hidden or not */
  hiddenLabel: PropTypes.bool,
  /** The label text for the input field */
  labelText: PropTypes.string.isRequired,
  /** The unique ID for the input field */
  id: PropTypes.string.isRequired,
  /** Custom change function */
  onChange: PropTypes.func,
  /** Custom change function */
  onUpdate: PropTypes.func,
  /** Default input text value */
  defaultValue: PropTypes.string,
  /** Max value for the field. */
  max: PropTypes.number.isRequired,
  /** Min value for the field. */
  min: PropTypes.number.isRequired,
  /** This controls how much sliding the handle increments/decrements the value of the slider. */
  step: PropTypes.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.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
  /** The direction for the slider, where x is horizontal and y is vertical. */
  axis: PropTypes.oneOf(['x', 'y']),
  /** Disables the slider if true. */
  disabled: PropTypes.bool,
  /** Whether input is required or not */
  required: PropTypes.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.arrayOf(PropTypes.number),
  /** Whether to skip the slider with keyboard interaction and hide the slider on screen readers. */
  skipped: PropTypes.bool,
  /** Display the value of the slider based. If null, don't display. If equals percentage, format the value in percentage. */
  displayValueFormat: PropTypes.oneOf(['percentage', 'value', null])
} : {};
InputSlider.defaultProps = {
  defaultValue: 0,
  disabled: false
};
export default InputSlider;