kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
209 lines (207 loc) • 9.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
var _md = require("react-icons/md");
var _constants = require("../../constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
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 = exports["default"] = /*#__PURE__*/function (_Component) {
function FormNumberInput(props, context) {
var _this;
(0, _classCallCheck2["default"])(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;
}
(0, _inherits2["default"])(FormNumberInput, _Component);
return (0, _createClass2["default"])(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["default"].createElement("div", {
style: {
position: 'relative'
}
}, /*#__PURE__*/_react["default"].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 == _constants.KEYBOARD_BUTTON_CODE.ENTER || keyCode == _constants.KEYBOARD_BUTTON_CODE.TAB) {
saveFn(e);
_this2.Input.blur();
}
if (keyCode == _constants.KEYBOARD_BUTTON_CODE.ESC) {
_this2.context.projectActions.rollback();
}
},
placeholder: placeholder
}), /*#__PURE__*/_react["default"].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["default"].createElement(_md.MdUpdate, {
style: {
width: '100%',
height: '100%',
padding: '0.2em',
color: '#FFF'
}
})));
}
}]);
}(_react.Component);
FormNumberInput.propTypes = {
value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
style: _propTypes["default"].object,
onChange: _propTypes["default"].func.isRequired,
onValid: _propTypes["default"].func,
onInvalid: _propTypes["default"].func,
min: _propTypes["default"].number,
max: _propTypes["default"].number,
precision: _propTypes["default"].number,
placeholder: _propTypes["default"].string
};
FormNumberInput.contextTypes = {
translator: _propTypes["default"].object.isRequired,
projectActions: _propTypes["default"].object.isRequired
};
FormNumberInput.defaultProps = {
value: 0,
style: {},
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
precision: 2,
disabled: false
};
module.exports = exports.default;