kitchen-simulator 11.0.0-react.18 → 11.0.0

package/es/components/content.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Viewer2D from "./viewer2d/viewer2d";
 import Viewer3D from "./viewer3d/viewer3d";
@@ -12,7 +12,6 @@ export default function Content(_ref) {
     height = _ref.height,
     state = _ref.state,
     customContents = _ref.customContents,
-    match = _ref.match,
     setToolbar = _ref.setToolbar,
     replaceCabinet = _ref.replaceCabinet,
     keyDownEnable = _ref.keyDownEnable,
@@ -21,11 +20,23 @@ export default function Content(_ref) {
   var mode = state.get('mode');
 
   // Internal Event for unselect_all
+  var prevSelectedCountRef = useRef(null);
   useEffect(function () {
-    if (state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size < 1) onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-      type: constants.INTERNAL_EVENT_UNSELECT_ALL,
-      value: null
-    });
+    var selectedCount = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size;
+
+    // Skip the initial mount/hydration; only emit when selection transitions from non-empty -> empty.
+    if (prevSelectedCountRef.current === null) {
+      prevSelectedCountRef.current = selectedCount;
+      return;
+    }
+    var prevSelectedCount = prevSelectedCountRef.current;
+    prevSelectedCountRef.current = selectedCount;
+    if (prevSelectedCount > 0 && selectedCount < 1) {
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+        value: null
+      });
+    }
   }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
   switch (mode) {
     // this mode is when view elevation
@@ -132,4 +143,7 @@ Content.propTypes = {
   height: PropTypes.number.isRequired,
   replaceCabinet: PropTypes.func.isRequired,
   onInternalEvent: PropTypes.func.isRequired
+};
+Content.contextTypes = {
+  projectActions: PropTypes.object.isRequired
 };

package/es/components/export.js

@@ -1,9 +1,7 @@
 import Content from "./content";
 import Viewer2DComponents from "./viewer2d/export";
 import StyleComponents from "./style/export";
+
 export { Content, Viewer2DComponents, StyleComponents };
-export default {
-  Content: Content,
-  Viewer2DComponents: Viewer2DComponents,
-  StyleComponents: StyleComponents
-};
+
+export default { Content, Viewer2DComponents, StyleComponents };

package/es/components/style/export.js

@@ -1,31 +1,5 @@
-import Button from "./button";
-import CancelButton from "./cancel-button";
-import ContentContainer from "./content-container";
-import ContentTitle from "./content-title";
-import DeleteButton from "./delete-button";
-import FormBlock from "./form-block";
-import FormColorInput from "./form-color-input";
-import FormLabel from "./form-label";
 import FormNumberInput from "./form-number-input";
-import FormSelect from "./form-select";
-import FormSlider from "./form-slider";
-import FormSubmitButton from "./form-submit-button";
-import FormTextInput from "./form-text-input";
-import FormNumberInput2 from "./form-number-input_2";
-export { Button, CancelButton, ContentContainer, ContentTitle, DeleteButton, FormBlock, FormColorInput, FormLabel, FormNumberInput, FormSelect, FormSlider, FormSubmitButton, FormTextInput, FormNumberInput2 };
+export { FormNumberInput };
 export default {
-  Button: Button,
-  CancelButton: CancelButton,
-  ContentContainer: ContentContainer,
-  ContentTitle: ContentTitle,
-  DeleteButton: DeleteButton,
-  FormBlock: FormBlock,
-  FormColorInput: FormColorInput,
-  FormLabel: FormLabel,
-  FormNumberInput: FormNumberInput,
-  FormSelect: FormSelect,
-  FormSlider: FormSlider,
-  FormSubmitButton: FormSubmitButton,
-  FormTextInput: FormTextInput,
-  FormNumberInput2: FormNumberInput2
+  FormNumberInput: FormNumberInput
 };

package/es/components/style/form-number-input.js

@@ -3,7 +3,6 @@ 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";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -13,13 +12,12 @@ import PropTypes from 'prop-types';
 import { KEYBOARD_BUTTON_CODE, TEXT_COLOR_NEUTRAL_0, SECONDARY_PURPLE_COLOR, DEFAULT_FONT_FAMILY } from "../../constants";
 import styled from 'styled-components';
 import { isValidNumber } from "../../utils/helper";
-import AppContext from "../../AppContext";
 var StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  padding: 15px 25px 12px 0px;\n  width: 120px;\n  color: ", ";\n  background-color: rgb(255, 255, 255);\n  border: 2px solid;\n  text-align: right;\n  float: right;\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 17px;\n  border-radius: 5px;\n  outline: 0;\n  :focus {\n    border-color: ", ";\n  }\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR);
 var FormNumberInput = /*#__PURE__*/function (_Component) {
-  function FormNumberInput(props) {
+  function FormNumberInput(props, context) {
     var _this;
     _classCallCheck(this, FormNumberInput);
-    _this = _callSuper(this, FormNumberInput, [props]);
+    _this = _callSuper(this, FormNumberInput, [props, context]);
     _this.state = {
       focus: false,
       valid: true,
@@ -34,30 +32,27 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
   return _createClass(FormNumberInput, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.input.current && ['width', 'length'].includes((this.props.labelName || '').toLowerCase())) {
+      if (this.input.current && ['width', 'length'].includes(this.props.labelName.toLowerCase())) {
         this.input.current.focus();
         this.input.current.select();
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.value !== this.props.value || prevProps.focus !== this.props.focus) {
-        // avoid setState loop
-        if (this.state.showedValue !== this.props.value || this.state.focusOn !== this.props.focus) {
-          // eslint-disable-next-line react/no-did-update-set-state
-          this.setState({
-            showedValue: this.props.value,
-            focusOn: this.props.focus
-          });
-        }
+    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
+        });
       }
-
-      // keep your existing behavior
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, preprevState) {
       if (this.props.value !== prevProps.value && prevProps.labelName !== 'Ceiling Height') {
-        var _this$input$current, _this$input$current2;
-        (_this$input$current = this.input.current) === null || _this$input$current === void 0 || _this$input$current.focus();
-        (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 || _this$input$current2.select();
+        this.input.current.focus();
+        this.input.current.select();
       }
       var showedValue = this.state.showedValue;
       var _this$props = this.props,
@@ -66,17 +61,16 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         isCeiling = _this$props.isCeiling;
       if (!isCeiling) {
         if (isValidNumber(min) && showedValue < min) {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             showedValue: min
           });
         } else if (isValidNumber(max) && showedValue > max) {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             showedValue: max
           });
         }
       }
+      return null;
     }
   }, {
     key: "render",
@@ -95,6 +89,7 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         isCeiling = _this$props2.isCeiling;
       var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,".concat(precision, "})?$"));
       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) {
@@ -117,29 +112,27 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         value: currValue,
         style: style,
         onChange: function onChange(evt) {
-          var _this2$context, _projectActions$copyP;
-          var projectActions = (_this2$context = _this2.context) === null || _this2$context === void 0 ? void 0 : _this2$context.projectActions;
-          projectActions === null || projectActions === void 0 || (_projectActions$copyP = projectActions.copyProperties) === null || _projectActions$copyP === void 0 || _projectActions$copyP.call(projectActions, 'ddddd');
+          _this2.context.projectActions.copyProperties('ddddd');
           var valid = regexp.test(evt.nativeEvent.target.value);
           if (valid) {
             _this2.setState({
               showedValue: evt.nativeEvent.target.value,
               flag: false
             });
-            onValid === null || onValid === void 0 || onValid(evt.nativeEvent);
+            if (onValid) onValid(evt.nativeEvent);
           } else {
-            onInvalid === null || onInvalid === void 0 || onInvalid(evt.nativeEvent);
+            if (onInvalid) onInvalid(evt.nativeEvent);
           }
           _this2.setState({
             valid: valid
           });
         },
-        onFocus: function onFocus() {
+        onFocus: function onFocus(e) {
           return _this2.setState({
             focusOn: true
           });
         },
-        onBlur: function onBlur() {
+        onBlur: function onBlur(e) {
           return _this2.setState({
             focusOn: false
           });
@@ -147,15 +140,12 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         ref: this.input,
         onKeyDown: function onKeyDown(e) {
           var keyCode = e.keyCode || e.which;
-          if (keyCode === KEYBOARD_BUTTON_CODE.ENTER || keyCode === KEYBOARD_BUTTON_CODE.TAB) {
-            var _this2$input$current;
+          if (keyCode == KEYBOARD_BUTTON_CODE.ENTER || keyCode == KEYBOARD_BUTTON_CODE.TAB) {
             saveFn(e);
-            (_this2$input$current = _this2.input.current) === null || _this2$input$current === void 0 || _this2$input$current.blur();
+            _this2.input.current.blur();
           }
-          if (keyCode === KEYBOARD_BUTTON_CODE.ESC) {
-            var _this2$context2, _projectActions$rollb;
-            var projectActions = (_this2$context2 = _this2.context) === null || _this2$context2 === void 0 ? void 0 : _this2$context2.projectActions;
-            projectActions === null || projectActions === void 0 || (_projectActions$rollb = projectActions.rollback) === null || _projectActions$rollb === void 0 || _projectActions$rollb.call(projectActions);
+          if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
+            _this2.context.projectActions.rollback();
           }
         },
         placeholder: placeholder
@@ -163,7 +153,6 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
-_defineProperty(FormNumberInput, "contextType", AppContext);
 export { FormNumberInput as default };
 FormNumberInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -176,9 +165,12 @@ FormNumberInput.propTypes = {
   precision: PropTypes.number,
   placeholder: PropTypes.string,
   labelName: PropTypes.string,
-  isCeiling: PropTypes.string,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool
+  isCeiling: PropTypes.string
+};
+FormNumberInput.contextTypes = {
+  translator: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired
 };
 FormNumberInput.defaultProps = {
   value: 0,
@@ -187,6 +179,5 @@ FormNumberInput.defaultProps = {
   max: Number.MAX_SAFE_INTEGER,
   precision: 2,
   disabled: false,
-  labelName: 'default',
-  focus: false
+  labelName: 'default'
 };

package/es/components/viewer2d/group.js

@@ -1,8 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import If from "../../utils/react-if";
 import * as sharedStyles from "../../shared-style";
-import AppContext from "../../AppContext";
 var cx = 0;
 var cy = 0;
 var radius = 5;
@@ -11,11 +10,12 @@ var STYLE_CIRCLE = {
   stroke: sharedStyles.MATERIAL_COLORS[500].orange,
   cursor: 'default'
 };
-export default function Group(_ref) {
+export default function Group(_ref, _ref2) {
   var layer = _ref.layer,
-    group = _ref.group;
-  var _useContext = useContext(AppContext),
-    translator = _useContext.translator;
+    group = _ref.group,
+    scene = _ref.scene,
+    catalog = _ref.catalog;
+  var translator = _ref2.translator;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": group.prototype,
@@ -44,5 +44,10 @@ export default function Group(_ref) {
 }
 Group.propTypes = {
   group: PropTypes.object.isRequired,
-  layer: PropTypes.object.isRequired
+  layer: PropTypes.object.isRequired,
+  scene: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};
+Group.contextTypes = {
+  translator: PropTypes.object.isRequired
 };