kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
60 lines • 1.83 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "min", "max", "step"];
import React from 'react';
import FormTextInput from "./form-text-input";
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'
};
export default 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 = _objectWithoutProperties(_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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
style: sliderContainerStyle
}, /*#__PURE__*/React.createElement("input", _extends({
type: "range",
style: sliderStyle,
min: min,
max: max,
step: step,
value: value,
onChange: handleSliderChange
}, rest))), /*#__PURE__*/React.createElement("div", {
style: textContainerStyle
}, /*#__PURE__*/React.createElement(FormTextInput, {
value: value,
onChange: handleTextChange,
style: textStyle
})));
}