kitchen-simulator/lib/components/style/form-slider.js

It is a kitchen simulator (self-contained micro-frontend).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = FormNumberInput;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _formTextInput = _interopRequireDefault(require("./form-text-input"));
var _excluded = ["value", "onChange", "min", "max", "step"];
var sliderContainerStyle = {
  display: 'inline-block',
  width: '80%',
  marginRight: '5%'
};
var sliderStyle = {
  display: 'block',
  width: '100%',
  height: '30px'
};
var textContainerStyle = {
  display: 'inline-block',
  width: '15%',
  "float": 'right'
};
var textStyle = {
  height: '34px',
  textAlign: 'center'
};
function FormNumberInput(_ref) {
  var value = _ref.value,
    onChange = _ref.onChange,
    _ref$min = _ref.min,
    min = _ref$min === void 0 ? 0 : _ref$min,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? 100 : _ref$max,
    _ref$step = _ref.step,
    step = _ref$step === void 0 ? 1 : _ref$step,
    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  // Handle both slider and text input changes
  var handleSliderChange = function handleSliderChange(e) {
    onChange(Number(e.target.value));
  };
  var handleTextChange = function handleTextChange(e) {
    var val = e.target.value === '' ? '' : Number(e.target.value);
    onChange(val);
  };
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    style: sliderContainerStyle
  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
    type: "range",
    style: sliderStyle,
    min: min,
    max: max,
    step: step,
    value: value,
    onChange: handleSliderChange
  }, rest))), /*#__PURE__*/_react["default"].createElement("div", {
    style: textContainerStyle
  }, /*#__PURE__*/_react["default"].createElement(_formTextInput["default"], {
    value: value,
    onChange: handleTextChange,
    style: textStyle
  })));
}
module.exports = exports.default;