@react-awesome-query-builder/fluent/cjs/widgets/value/FluentUISlider.js

User-friendly query builder for React. Fluent 8 widgets

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@fluentui/react");
var _excluded = ["width"];
var _default = exports["default"] = function _default(props) {
  var config = props.config,
    placeholder = props.placeholder,
    customProps = props.customProps,
    value = props.value,
    setValue = props.setValue,
    min = props.min,
    max = props.max,
    step = props.step,
    marks = props.marks,
    readonly = props.readonly;
  var defaultSliderWidth = config.settings.defaultSliderWidth;
  var _ref = customProps || {},
    width = _ref.width,
    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var customInputProps = rest.input || {};
  var customSliderProps = rest.slider || rest;
  var onSliderChange = function onSliderChange(newValue) {
    if (newValue === "" || newValue === null) newValue = undefined;else newValue = Number(newValue);
    setValue(newValue);
  };
  var onInputChange = function onInputChange(e, newValue) {
    if (newValue === "" || newValue === null) newValue = undefined;else newValue = Number(newValue);
    setValue(newValue);
  };
  var InputCmp = /*#__PURE__*/_react["default"].createElement(_react2.TextField, (0, _extends2["default"])({
    type: "number",
    style: {
      width: "auto"
    },
    value: value,
    min: min,
    max: max,
    step: step,
    placeholder: placeholder,
    disabled: readonly,
    onChange: onInputChange
  }, customInputProps));
  var SliderCmp = /*#__PURE__*/_react["default"].createElement(_react2.Slider, (0, _extends2["default"])({
    min: min,
    max: max,
    step: step,
    value: value,
    disabled: readonly,
    marks: marks,
    showValue: false,
    onChange: onSliderChange
  }, customSliderProps));
  var stylesWrapper = {
    display: "flex",
    flexDirection: "row"
  };
  var stylesSliderWrapper = {
    width: width || defaultSliderWidth
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: stylesWrapper
  }, InputCmp, /*#__PURE__*/_react["default"].createElement("div", {
    style: stylesSliderWrapper
  }, SliderCmp));
};