@bianic-ui/slider/dist/cjs/slider.js

Accessible slider component for React that implements <input type=range>

"use strict";

exports.__esModule = true;
exports.SliderMark = exports.SliderFilledTrack = exports.SliderTrack = exports.SliderThumb = exports.Slider = exports.useSliderContext = exports.SliderProvider = void 0;

var _system = require("@bianic-ui/system");

var _utils = require("@bianic-ui/utils");

var React = _interopRequireWildcard(require("react"));

var _useSlider2 = require("./use-slider");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var _createContext = (0, _utils.createContext)({
  name: "SliderContext",
  errorMessage: "useSliderContext: `context` is undefined. Seems you forgot to wrap all slider components within <Slider />"
}),
    SliderProvider = _createContext[0],
    useSliderContext = _createContext[1];

exports.useSliderContext = useSliderContext;
exports.SliderProvider = SliderProvider;

/**
 * The Slider is used to allow users to make selections from a range of values.
 * It provides context and functionality for all slider components
 *
 * @see Docs     https://bianic-ui.com/components/slider
 * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices/#slider
 */
var Slider = /*#__PURE__*/(0, _system.forwardRef)(function Slider(props, ref) {
  var styles = (0, _system.useMultiStyleConfig)("Slider", props);
  var realProps = (0, _system.omitThemingProps)(props);

  var _useSlider = (0, _useSlider2.useSlider)(realProps),
      getInputProps = _useSlider.getInputProps,
      getRootProps = _useSlider.getRootProps,
      context = _objectWithoutPropertiesLoose(_useSlider, ["getInputProps", "getRootProps"]);

  var rootProps = getRootProps();
  var inputProps = getInputProps({}, ref);

  var rootStyles = _extends({
    display: "inline-block",
    position: "relative",
    cursor: "pointer"
  }, styles.container);

  return /*#__PURE__*/React.createElement(SliderProvider, {
    value: context
  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
    value: styles
  }, /*#__PURE__*/React.createElement(_system.bianic.div, _extends({}, rootProps, {
    className: "bianic-slider",
    __css: rootStyles
  }), props.children, /*#__PURE__*/React.createElement("input", inputProps))));
});
exports.Slider = Slider;
Slider.defaultProps = {
  orientation: "horizontal"
};

if (_utils.__DEV__) {
  Slider.displayName = "Slider";
} ///////////////////////////////////////////////////////////////////////////


/**
 * Slider component that acts as the handle used to select predefined
 * values by dragging its handle along the track
 */
var SliderThumb = /*#__PURE__*/(0, _system.forwardRef)(function SliderThumb(props, ref) {
  var _useSliderContext = useSliderContext(),
      getThumbProps = _useSliderContext.getThumbProps;

  var styles = (0, _system.useStyles)();

  var thumbStyles = _extends({
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "absolute",
    outline: 0
  }, styles.thumb);

  var thumbProps = getThumbProps(props, ref);
  return /*#__PURE__*/React.createElement(_system.bianic.div, _extends({}, thumbProps, {
    className: (0, _utils.cx)("bianic-slider__thumb", props.className),
    __css: thumbStyles
  }));
});
exports.SliderThumb = SliderThumb;

if (_utils.__DEV__) {
  SliderThumb.displayName = "SliderThumb";
} ///////////////////////////////////////////////////////////////////////////


var SliderTrack = /*#__PURE__*/(0, _system.forwardRef)(function SliderTrack(props, ref) {
  var _useSliderContext2 = useSliderContext(),
      getTrackProps = _useSliderContext2.getTrackProps;

  var styles = (0, _system.useStyles)();

  var trackStyles = _extends({
    overflow: "hidden"
  }, styles.track);

  var trackProps = getTrackProps(props, ref);
  return /*#__PURE__*/React.createElement(_system.bianic.div, _extends({}, trackProps, {
    className: (0, _utils.cx)("bianic-slider__track", props.className),
    __css: trackStyles
  }));
});
exports.SliderTrack = SliderTrack;

if (_utils.__DEV__) {
  SliderTrack.displayName = "SliderTrack";
} ///////////////////////////////////////////////////////////////////////////


var SliderFilledTrack = /*#__PURE__*/(0, _system.forwardRef)(function SliderFilledTrack(props, ref) {
  var _useSliderContext3 = useSliderContext(),
      getInnerTrackProps = _useSliderContext3.getInnerTrackProps;

  var styles = (0, _system.useStyles)();

  var trackStyles = _extends({
    width: "inherit",
    height: "inherit"
  }, styles.filledTrack);

  var trackProps = getInnerTrackProps(props, ref);
  return /*#__PURE__*/React.createElement(_system.bianic.div, _extends({}, trackProps, {
    className: "bianic-slider__filled-track",
    __css: trackStyles
  }));
});
exports.SliderFilledTrack = SliderFilledTrack;

if (_utils.__DEV__) {
  SliderFilledTrack.displayName = "SliderFilledTrack";
} ///////////////////////////////////////////////////////////////////////////


/**
 * SliderMark is used to provide names for specific Slider
 * values by defining labels or markers along the track.
 *
 * @see Docs https://bianic-ui.com/components/slider
 */
var SliderMark = /*#__PURE__*/(0, _system.forwardRef)(function SliderMark(props, ref) {
  var _useSliderContext4 = useSliderContext(),
      getMarkerProps = _useSliderContext4.getMarkerProps;

  var markProps = getMarkerProps(props, ref);
  return /*#__PURE__*/React.createElement(_system.bianic.div, _extends({}, markProps, {
    className: (0, _utils.cx)("bianic-slider__marker", props.className)
  }));
});
exports.SliderMark = SliderMark;

if (_utils.__DEV__) {
  SliderMark.displayName = "SliderMark";
}
//# sourceMappingURL=slider.js.map