kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
200 lines (199 loc) • 7.79 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as SharedStyle from "../../shared-style";
import { MdUpdate } from 'react-icons/md';
import { KEYBOARD_BUTTON_CODE } from "../../constants";
var STYLE_INPUT = {
display: 'block',
width: '100%',
padding: '0 2px',
fontSize: '13px',
lineHeight: '1.25',
color: SharedStyle.PRIMARY_COLOR.input,
backgroundColor: SharedStyle.COLORS.white,
backgroundImage: 'none',
border: '1px solid rgba(0,0,0,.15)',
outline: 'none',
height: '30px'
};
var confirmStyle = {
position: 'absolute',
cursor: 'pointer',
width: '20px',
height: '20px',
right: '5px',
top: '5px',
backgroundColor: SharedStyle.SECONDARY_COLOR.main,
color: '#FFF',
transition: 'all 0.1s linear'
};
var FormNumberInput = /*#__PURE__*/function (_Component) {
function FormNumberInput(props, context) {
var _this;
_classCallCheck(this, FormNumberInput);
_this = _callSuper(this, FormNumberInput, [props, context]);
_this.state = {
focus: false,
valid: true,
showedValue: props.value,
disabled: props.disabled === true ? true : false,
focusOn: false
};
return _this;
}
_inherits(FormNumberInput, _Component);
return _createClass(FormNumberInput, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
this.setState({
showedValue: nextProps.value,
focusOn: nextProps.focus
});
}
if (this.props.focus !== nextProps.focus) {
this.Input.focus();
this.Input.select();
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
value = _this$props.value,
min = _this$props.min,
max = _this$props.max,
precision = _this$props.precision,
onChange = _this$props.onChange,
onValid = _this$props.onValid,
onInvalid = _this$props.onInvalid,
style = _this$props.style,
placeholder = _this$props.placeholder;
var numericInputStyle = _objectSpread(_objectSpread({}, STYLE_INPUT), style);
if (this.state.focusOn) numericInputStyle.border = "1px solid ".concat(SharedStyle.SECONDARY_COLOR.main);
var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,".concat(precision, "})?$"));
if (!isNaN(min) && isFinite(min) && this.state.showedValue < min) this.setState({
showedValue: min
}); // value = min;
if (!isNaN(max) && isFinite(max) && this.state.showedValue > max) this.setState({
showedValue: max
}); // value = max;
var currValue = regexp.test(this.state.showedValue) ? this.state.showedValue : parseFloat(this.state.showedValue).toFixed(precision);
var different = parseFloat(this.props.value).toFixed(precision) !== parseFloat(this.state.showedValue).toFixed(precision);
var saveFn = function saveFn(e) {
e.stopPropagation();
if (_this2.state.valid) {
var savedValue = _this2.state.showedValue !== '' && _this2.state.showedValue !== '-' ? parseFloat(_this2.state.showedValue) : 0;
_this2.setState({
showedValue: savedValue
});
onChange({
target: {
value: savedValue
}
});
}
};
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/React.createElement("input", {
autoFocus: this.state.focusOn,
readOnly: this.state.disabled,
type: "text",
value: currValue,
style: numericInputStyle,
onChange: function onChange(evt) {
var valid = regexp.test(evt.nativeEvent.target.value);
if (valid) {
_this2.setState({
showedValue: evt.nativeEvent.target.value
});
if (onValid) onValid(evt.nativeEvent);
} else {
if (onInvalid) onInvalid(evt.nativeEvent);
}
_this2.setState({
valid: valid
});
},
onFocus: function onFocus(e) {
return _this2.setState({
focusOn: true
});
},
onBlur: function onBlur(e) {
return _this2.setState({
focusOn: false
});
},
ref: function ref(ele) {
_this2.Input = ele;
},
onKeyDown: function onKeyDown(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == KEYBOARD_BUTTON_CODE.ENTER || keyCode == KEYBOARD_BUTTON_CODE.TAB) {
saveFn(e);
_this2.Input.blur();
}
if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
_this2.context.projectActions.rollback();
}
},
placeholder: placeholder
}), /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
if (different) saveFn(e);
},
title: this.context.translator.t('Confirm'),
style: _objectSpread(_objectSpread({}, confirmStyle), {}, {
visibility: different ? 'visible' : 'hidden',
opacity: different ? '1' : '0'
})
}, /*#__PURE__*/React.createElement(MdUpdate, {
style: {
width: '100%',
height: '100%',
padding: '0.2em',
color: '#FFF'
}
})));
}
}]);
}(Component);
export { FormNumberInput as default };
FormNumberInput.propTypes = {
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
style: PropTypes.object,
onChange: PropTypes.func.isRequired,
onValid: PropTypes.func,
onInvalid: PropTypes.func,
min: PropTypes.number,
max: PropTypes.number,
precision: PropTypes.number,
placeholder: PropTypes.string
};
FormNumberInput.contextTypes = {
translator: PropTypes.object.isRequired,
projectActions: PropTypes.object.isRequired
};
FormNumberInput.defaultProps = {
value: 0,
style: {},
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
precision: 2,
disabled: false
};