kitchen-simulator 5.0.0-test.65 → 5.0.0-test.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.65",
+  "version": "5.0.0-test.66",
   "description": "It is a kitchen simulator.",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/catalog/properties/property-checkbox.jsx

@@ -1,65 +1,58 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
-import styled from 'styled-components';
 import {
   DEFAULT_FONT_FAMILY,
   SECONDARY_PURPLE_COLOR,
   TEXT_COLOR_NEUTRAL_0
 } from '../../constants';
 
-const FlipWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 15px 0;
-  justify-content: space-between;
-`;
-
-const FlipTitle = styled.span`
-  margin-right: auto;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: left;
-`;
-const FlipDescription = styled.span`
-  margin-right: auto;
-  color: ${TEXT_COLOR_NEUTRAL_0};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-`;
-const FlipInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const FlipToggle = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-`;
-
-const FlipToggleIcon = styled.div`
-  top: 0;
-  position: absolute;
-  ${'' /* transition-duration: .3s; */}
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
+const styles = {
+  flipWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '15px 0',
+    justifyContent: 'space-between'
+  },
+  flipTitle: {
+    marginRight: 'auto',
+    color: SECONDARY_PURPLE_COLOR,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipDescription: {
+    marginRight: 'auto',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: '13px',
+    fontWeight: 400,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipInfoWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  flipToggle: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '14px',
+    cursor: 'pointer',
+    WebkitUserSelect: 'none',
+    MozUserSelect: 'none',
+    msUserSelect: 'none',
+    userSelect: 'none',
+    color: 'black'
+  },
+  flipToggleIcon: {
+    top: 0,
+    position: 'absolute'
   }
-`;
+};
 
 export default function PropertyCheckbox({
   value,
@@ -77,37 +70,42 @@ export default function PropertyCheckbox({
           return onUpdate(_val);
         });
     }
-
     return onUpdate(val);
   };
 
   let activeStyle = value == 0 ? { left: 0 } : { right: 0 };
 
   return (
-    <FlipWrapper>
-      <FlipInfoWrapper>
-        <FlipTitle>{configs.label}</FlipTitle>
+    <div style={styles.flipWrapper}>
+      <div style={styles.flipInfoWrapper}>
+        <span style={styles.flipTitle}>{configs.label}</span>
         {configs.description && (
-          <FlipDescription>{configs.description}</FlipDescription>
+          <span style={styles.flipDescription}>{configs.description}</span>
         )}
-      </FlipInfoWrapper>
-      <FlipToggle style={{ color: 'black' }} onClick={e => update(!value)}>
+      </div>
+      <div style={styles.flipToggle} onClick={e => update(!value)}>
         <img
           src={`/assets/img/svg/bottombar/${
             value != 0 ? '2d3d_toggle_active.svg' : '2d3d_toggle.svg'
           }`}
           style={{ width: '55px', height: '30px' }}
         />
-        <FlipToggleIcon style={{ ...activeStyle }}>
+        <div style={{ ...styles.flipToggleIcon, ...activeStyle }}>
           <img
             src={`/assets/img/svg/bottombar/${
               value != 0 ? '2d3d_button_active.svg' : '2d3d_button.svg'
             }`}
-            style={{ width: '30px', height: '30px' }}
+            style={{
+              width: '30px',
+              height: '30px',
+              fontSize: '1.4rem',
+              boxSizing: 'border-box',
+              borderRadius: '50%'
+            }}
           />
-        </FlipToggleIcon>
-      </FlipToggle>
-    </FlipWrapper>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/catalog/properties/property-enum.jsx

@@ -2,43 +2,32 @@ import React from 'react';
 import * as PropTypes from 'prop-types';
 import { Seq } from 'immutable';
 import { FormLabel, FormSelect } from '../../components/style/export';
-import styled from 'styled-components';
 import { TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY } from '../../constants';
 
-const EnumWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 3px;
-`;
-
-const EnumTitle = styled.span`
-  margin-right: auto;
-  width: 110px;
-  color: ${TEXT_COLOR_NEUTRAL_0};
-  font-family: ${DEFAULT_FONT_FAMILY};
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
+const styles = {
+  enumWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '3px'
+  },
+  enumTitle: {
+    marginRight: 'auto',
+    width: '110px',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontWeight: 400,
+    lineHeight: '15px',
+    textAlign: 'left',
+    fontSize: '11px'
   }
-  font-weight: 400;
-  line-height: 15px;
-  text-align: left;
-`;
+};
+
+// Responsive font size adjustment
+function getFontSize() {
+  if (window.innerWidth >= 1440) return '16px';
+  if (window.innerWidth >= 1366) return '13px';
+  return '11px';
+}
 
 export default function PropertyEnum({
   value,
@@ -48,6 +37,16 @@ export default function PropertyEnum({
   internalState,
   state
 }) {
+  const [fontSize, setFontSize] = React.useState(getFontSize());
+
+  React.useEffect(() => {
+    function handleResize() {
+      setFontSize(getFontSize());
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   let update = val => {
     if (configs.hook) {
       return configs
@@ -56,13 +55,12 @@ export default function PropertyEnum({
           return onUpdate(_val);
         });
     }
-
     return onUpdate(val);
   };
 
   return (
-    <EnumWrapper>
-      <EnumTitle>{configs.label}</EnumTitle>
+    <div style={styles.enumWrapper}>
+      <span style={{ ...styles.enumTitle, fontSize }}>{configs.label}</span>
       <FormSelect value={value} onChange={event => update(event.target.value)}>
         {Seq(configs.values)
           .entrySeq()
@@ -72,7 +70,7 @@ export default function PropertyEnum({
             </option>
           ))}
       </FormSelect>
-    </EnumWrapper>
+    </div>
   );
 }
 

package/src/catalog/properties/property-length-measure.jsx

@@ -17,48 +17,45 @@ import {
 } from '../../components/style/export';
 import { Map } from 'immutable';
 import { toFixedFloat } from '../../utils/math';
-import styled from 'styled-components';
 
-const DistanceFloorWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 3px;
-`;
-
-const DistanceFloorTitle = styled.span`
-  margin-right: auto;
-  width: 110px;
-  color: ${TEXT_COLOR_NEUTRAL_0};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-
-  @media screen and (min-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (max-width: 1024) {
-    font-size: 11px;
-  }
-  @media screen and (min-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (max-width: 1366) {
-    font-size: 13px;
-  }
-  @media screen and (min-width: 1440) {
-    font-size: 16px;
-  }
-  @media screen and (max-width: 1440) {
-    font-size: 16px;
+const styles = {
+  distanceFloorWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '3px'
+  },
+  distanceFloorTitle: {
+    marginRight: 'auto',
+    width: '110px',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontWeight: 400,
+    lineHeight: '15px',
+    textAlign: 'left'
   }
-  font-weight: 400;
-  line-height: 15px;
-  text-align: left;
-`;
+};
+
+// Responsive font size adjustment
+function getFontSize() {
+  if (window.innerWidth >= 1440) return '16px';
+  if (window.innerWidth >= 1366) return '13px';
+  return '11px';
+}
 
 export default function PropertyLengthMeasure(
   { value, onUpdate, onValid, configs, sourceElement, internalState, state },
   { catalog }
 ) {
+  const [fontSize, setFontSize] = React.useState(getFontSize());
+
+  React.useEffect(() => {
+    function handleResize() {
+      setFontSize(getFontSize());
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   let _unit = value.get('_unit');
   let unit = state.getIn([
     'scene',
@@ -99,8 +96,8 @@ export default function PropertyLengthMeasure(
   };
 
   return (
-    <DistanceFloorWrapper>
-      <DistanceFloorTitle>{label}</DistanceFloorTitle>
+    <div style={styles.distanceFloorWrapper}>
+      <span style={{ ...styles.distanceFloorTitle, fontSize }}>{label}</span>
       <FormNumberInput
         disabled={type === TALL_CABINET_LAYOUTPOS}
         value={convert(_length).from('in').to(unit)}
@@ -110,7 +107,7 @@ export default function PropertyLengthMeasure(
         style={{ paddingRight: '40px' }}
         {...configRest}
       />
-    </DistanceFloorWrapper>
+    </div>
   );
 }
 

package/src/components/style/form-number-input.jsx

@@ -1,34 +1,8 @@
 import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
-import {
-  KEYBOARD_BUTTON_CODE,
-  TEXT_COLOR_NEUTRAL_0,
-  SECONDARY_PURPLE_COLOR,
-  DEFAULT_FONT_FAMILY
-} from '../../constants';
+import { KEYBOARD_BUTTON_CODE } from '../../constants';
 import { isValidNumber } from '../../utils/helper';
 
-// import styled from 'styled-components';
-// const StyledInput = styled.input`
-//   display: block;
-//   padding: 15px 25px 12px 0px;
-//   width: 120px;
-//   color: ${TEXT_COLOR_NEUTRAL_0};
-//   background-color: rgb(255, 255, 255);
-//   border: 2px solid;
-//   text-align: right;
-//   float: right;
-//   font-family: ${DEFAULT_FONT_FAMILY};
-//   font-size: 16px;
-//   font-weight: 600;
-//   line-height: 17px;
-//   border-radius: 5px;
-//   outline: 0;
-//   :focus {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-// `;
-
 export default class FormNumberInput extends Component {
   constructor(props, context) {
     super(props, context);

package/src/components/style/form-select.jsx

@@ -1,32 +1,4 @@
 import React from 'react';
-import {
-  TEXT_COLOR_NEUTRAL_3,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR
-} from '../../constants';
-
-// import styled from 'styled-components';
-// const StyledSelect = styled.select`
-//   display: block;
-//   width: 120px;
-//   float: right;
-//   padding: 15px 10px 12px 0px;
-//   color: ${TEXT_COLOR_NEUTRAL_3};
-//   border: 2px solid;
-//   font-family: ${DEFAULT_FONT_FAMILY};
-//   font-size: 12px;
-//   font-weight: 600;
-//   line-height: 17px;
-//   text-align: right;
-//   outline: none;
-//   border-radius: 5px;
-//   :hover {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-//   :focus {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-// `;
 
 export default function FormSelect({ children, style, ...rest }) {
   return (