kitchen-simulator 5.0.0-test.7 → 5.0.0-test.8

package/src/components/toolbar/plugin-item.jsx

@@ -1,123 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-import { FaFolderOpen } from 'react-icons/fa';
-import { MdSettings, MdUndo, MdDirectionsRun } from 'react-icons/md';
-
-//http://www.cssportal.com/css-tooltip-generator/
-
-const STYLE = {
-  width: '30px',
-  height: '30px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBottom: '5px',
-  fontSize: '25px',
-  position: 'relative',
-  cursor: 'pointer'
-};
-
-const STYLE_TOOLTIP = {
-  position: 'absolute',
-  width: '140px',
-  color: SharedStyle.COLORS.white,
-  background: SharedStyle.COLORS.black,
-  height: '30px',
-  lineHeight: '30px',
-  textAlign: 'center',
-  visibility: 'visible',
-  borderRadius: '6px',
-  opacity: '0.8',
-  left: '100%',
-  top: '50%',
-  marginTop: '-15px',
-  marginLeft: '15px',
-  zIndex: '999',
-  fontSize: '12px'
-};
-
-const STYLE_TOOLTIP_PIN = {
-  position: 'absolute',
-  top: '50%',
-  right: '100%',
-  marginTop: '-8px',
-  width: '0',
-  height: '0',
-  borderRight: '8px solid #000000',
-  borderTop: '8px solid transparent',
-  borderBottom: '8px solid transparent'
-};
-
-const itemBtnStyle = {
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  float: 'left',
-  cursor: 'pointer',
-  margin: '5px',
-  padding: '4px',
-  borderColor: 'black'
-};
-
-const iconHoverStyle = {
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  float: 'left',
-  cursor: 'pointer',
-  margin: '5px',
-  padding: '4px',
-  borderColor: SharedStyle.MATERIAL_COLORS['500'].cyan
-};
-
-export default class PluginItem extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = { active: false };
-  }
-
-  render() {
-    let { state, props } = this;
-    let placeholder;
-    let url = this.props.url;
-    let pname;
-    if (props.name.length > 8) {
-      pname = props.name.slice(0, 5);
-      pname += '...';
-    } else {
-      pname = props.name;
-    }
-    if (url == 'before')
-      placeholder = (
-        <MdUndo
-          style={{ fontSize: '50px', color: SharedStyle.PRIMARY_COLOR.icon }}
-        />
-      );
-    if (url == 'dir')
-      placeholder = (
-        <FaFolderOpen
-          style={{ fontSize: '50px', color: SharedStyle.PRIMARY_COLOR.icon }}
-        />
-      );
-    if (url !== 'before' && url !== 'dir')
-      placeholder = (
-        <img
-          src={this.props.url}
-          style={{ width: '50px', height: '50px' }}
-        ></img>
-      );
-    return (
-      <div
-        title={props.name}
-        onClick={props.onClick.bind(this, props.url, props.name, props.gltfUrl)}
-        onMouseOut={event => this.setState({ active: false })}
-        onMouseOver={event => this.setState({ active: true })}
-        style={this.state.active ? iconHoverStyle : itemBtnStyle}
-      >
-        {placeholder}
-        <p style={{ margin: 0, textAlign: 'center', fontSize: '70%' }}>
-          {pname}
-        </p>
-      </div>
-    );
-  }
-}

package/src/components/toolbar/popup/appliance/appliance-category/index.jsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import ToolbarPanel from '../../../../sidebar/toolbar-panel';
-import * as S from '../../styles';
-
-export const ApplianceCategory = ({
-  setStep,
-  action,
-  pData,
-  bFlag,
-  props,
-  doorExpand,
-  search,
-  onSearch,
-  mode
-}) => {
-  let result = [];
-  const [lastActiveName, setLastActiveName] = useState('');
-
-  for (let i = 0; i < pData.length; i++) {
-    let temp = [];
-    for (let j = 0; j < pData[i].items.length; j++) {
-      if (pData[i].items[j].type !== 'cabinet') {
-        var title = pData[i].items[j].name;
-        title = title.charAt(0).toUpperCase() + title.substr(1);
-
-        temp.push(
-          <S.ProductsRow
-            key={i.toString() + '-' + j.toString()}
-            style={{ width: '100%', padding: '8px 10px 8px' }}
-          >
-            <a
-              onClick={() => {
-                action(pData[i].items[j].name);
-              }}
-            >
-              <span>{title} </span>
-            </a>
-          </S.ProductsRow>
-        );
-      }
-    }
-    result.push(
-      <S.ItemWrapper key={i.toString()}>
-        <ToolbarPanel
-          lastActiveName={lastActiveName}
-          setLastActiveName={setLastActiveName}
-          onClose={() => {
-            action(-1);
-          }}
-          onOpen={() => {
-            action(pData[i].name);
-          }}
-          isUrl={true}
-          key={i.toString()}
-          name={pData[i].name}
-          url={pData[i].thumbnail}
-        >
-          {temp}
-        </ToolbarPanel>
-      </S.ItemWrapper>
-    );
-  }
-  let miHeight = 0;
-  let nonHeight = 495 - miHeight + 'px';
-  let height = window.innerHeight * 0.6 - miHeight + 'px';
-  return (
-    <S.CategoryContentWrapper
-      style={{ height: doorExpand ? height : nonHeight }}
-    >
-      {result}
-    </S.CategoryContentWrapper>
-  );
-};

package/src/components/toolbar/popup/appliance/choose-appliance/index.jsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-
-import { FaSearch, FaPlus, FaAngleLeft } from 'react-icons/fa';
-import * as S from '../../styles';
-
-import Appliance from '../../product/appliance';
-import {
-  API_SERVER,
-  MODE_IDLE,
-  MODE_3D_VIEW,
-  MODE_3D_FIRST_PERSON,
-  MODE_VIEWING_CATALOG,
-  MODE_CONFIGURING_PROJECT,
-  MODE_IDLE_3D,
-  MODE_ROTATING_ITEM_3D,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_2D_PAN,
-  MODE_DRAWING_ITEM_3D
-} from '../../../../../constants';
-
-export const ApplianceChooseProduct = ({
-  setStep,
-  action,
-  pData,
-  bFlag,
-  props,
-  doorExpand,
-  search,
-  dData,
-  onSearch,
-  mode,
-  isExpand,
-  closeAction
-}) => {
-  let applianceselect = name => {
-    select(props.catalog.elements[name]);
-  };
-
-  let select = element => {
-    props.projectActions.unselectAll();
-    switch (element.prototype) {
-      case 'lines':
-        props.linesActions.selectToolDrawingLine(element.name);
-        break;
-      case 'items':
-        [
-          MODE_IDLE_3D,
-          MODE_DRAWING_ITEM_3D,
-          MODE_DRAGGING_ITEM_3D,
-          MODE_ROTATING_ITEM_3D
-        ].includes(mode)
-          ? props.itemsActions.selectToolDrawingItem3D(element.name)
-          : props.itemsActions.selectToolDrawingItem(element.name);
-        break;
-      case 'holes':
-        props.holesActions.selectToolDrawingHole(element.name);
-        break;
-    }
-    props.itemsActions.updatePopupOpen(3);
-    props.projectActions.pushLastSelectedCatalogElementToHistory(element);
-    closeAction && closeAction();
-  };
-
-  let products = [];
-
-  if (pData.length > 0) {
-    for (let i = 0; i < pData.length; i++) {
-      products.push(
-        <S.ItemWrapper key={i.toString()} style={{ justifyContent: 'center' }}>
-          <Appliance
-            name={'appliance'}
-            onClick={() => {
-              applianceselect(pData[i].name);
-            }}
-            url={pData[i].thumbnail}
-            title={pData[i].name}
-            selected={pData[i].selected ? pData[i].selected : null}
-          />
-        </S.ItemWrapper>
-      );
-    }
-  }
-  let miHeight = bFlag ? 28 : 0;
-  let nonHeight = 495 - miHeight + 'px';
-  let height = window.innerHeight * 0.6 - miHeight + 'px';
-  return (
-    <S.ProductsContentWrapper
-      style={{
-        width: isExpand === 1 ? 400 : 220,
-        height: doorExpand ? height : nonHeight
-      }}
-    >
-      {isExpand === 1 ? (
-        <S.ItemWrapper style={{ flexWrap: 'wrap', border: 'none' }}>
-          {products}
-        </S.ItemWrapper>
-      ) : (
-        products
-      )}
-    </S.ProductsContentWrapper>
-  );
-};

package/src/components/toolbar/popup/appliance/index.jsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-
-import { DoubleToolbarButtonWithPopup } from '../';
-
-import { ApplianceChooseProduct } from './choose-appliance/';
-import { ApplianceCategory } from './appliance-category';
-
-import { STEP_CABINET_CHOOSE_PRODUCT } from '../../../../constants';
-
-const ApplianceToolbarButton = ({
-  trigger,
-  action,
-  dataSource,
-  subData,
-  bFlag,
-  props,
-  dData,
-  isExpand,
-  expandAction,
-  closeAction,
-  cabinetCollapse,
-  doorCollapse,
-  doorExpand,
-  collapseAction,
-  searchCabinet,
-  search,
-  mode,
-  isOpen
-}) => {
-  const [step, setStep] = useState(STEP_CABINET_CHOOSE_PRODUCT);
-  let content = <div />;
-  let content1 = <div />;
-  content1 = (
-    <ApplianceChooseProduct
-      action={action}
-      pData={subData}
-      dData={dData}
-      bFlag={0}
-      doorExpand={doorExpand}
-      props={props}
-      setStep={setStep}
-      search={searchCabinet}
-      onSearch={search}
-      mode={mode}
-      isExpand={isExpand}
-      closeAction={closeAction}
-    ></ApplianceChooseProduct>
-  );
-  content = (
-    <ApplianceCategory
-      action={action}
-      pData={dataSource}
-      bFlag={bFlag}
-      doorExpand={doorExpand}
-      props={props}
-      setStep={setStep}
-      search={searchCabinet}
-      onSearch={search}
-      mode={mode}
-    ></ApplianceCategory>
-  );
-  return (
-    <DoubleToolbarButtonWithPopup
-      closeAction={closeAction}
-      isOpen={isOpen}
-      mode={mode}
-      isExpand={isExpand}
-      expandAction={expandAction}
-      style={{ minWidth: step >= 1 && isExpand == 1 ? '800px' : '600px' }}
-      order={3}
-      isDouble={subData.length}
-      collapse1={cabinetCollapse}
-      collapse2={doorCollapse}
-      collapseAction={collapseAction}
-      trigger={trigger}
-      children1={content1}
-    >
-      {content}
-    </DoubleToolbarButtonWithPopup>
-  );
-};
-
-export default ApplianceToolbarButton;

package/src/components/toolbar/popup/autosaveprompt/index.jsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-import Dialog from '@material-ui/core/Dialog';
-import { withStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-import {
-  TEXT_COLOR_NEUTRAL_2,
-  SECONDARY_PURPLE_COLOR,
-  DEFAULT_FONT_FAMILY,
-  TEXT_COLOR_NEUTRAL_1
-} from '../../../../constants';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-    padding: 32px;
-    width: 480px;
-  }
-`;
-
-const StyledMuiCheckbox = withStyles({
-  root: {
-    color: TEXT_COLOR_NEUTRAL_2,
-    '&$checked': {
-      color: SECONDARY_PURPLE_COLOR
-    }
-  },
-  checked: {}
-})(props => <Checkbox color="default" {...props} />);
-
-const DialogContents = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 0px;
-
-  @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;
-  }
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-`;
-class AutosavePromptPopup extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { visible, isLeaving } = this.props;
-    if (isLeaving) {
-      return (
-        <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
-          <S.DialogTitle>Leaving already?</S.DialogTitle>
-          <S.DialogContent>
-            <div>
-              <span>
-                <b>Let’s save your work so it’s here when you return.</b>
-              </span>
-            </div>
-            <br />
-            <div>
-              <span>
-                We’ll email you a link so you can easily pick up where you left
-                off.
-              </span>
-            </div>
-          </S.DialogContent>
-          <S.DialogAction>
-            <S.Button
-              onClick={() => {
-                this.props.handleClose();
-              }}
-            >
-              Cancel
-            </S.Button>
-            <S.Button
-              onClick={() => {
-                this.props.handleOk(true);
-              }}
-            >
-              Save
-            </S.Button>
-          </S.DialogAction>
-        </StyledDialog>
-      );
-    }
-
-    return (
-      <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
-        <S.DialogTitle>Save Now?</S.DialogTitle>
-        <S.DialogContent>
-          <div>
-            <span>
-              <b>Looks like you’re making great progress!</b>
-            </span>
-          </div>
-          <br />
-          <div
-            style={{
-              marginBottom: '0.5rem'
-            }}
-          >
-            <span>Want to save your design so far?</span>
-          </div>
-          <div>
-            <span>
-              We’ll email you a link so you can easily pick up where you left
-              off.
-            </span>
-          </div>
-        </S.DialogContent>
-        <S.DialogAction>
-          <S.Button
-            onClick={() => {
-              this.props.handleClose();
-            }}
-          >
-            Cancel
-          </S.Button>
-          <S.Button
-            onClick={() => {
-              this.props.handleOk(true);
-            }}
-          >
-            Save
-          </S.Button>
-        </S.DialogAction>
-      </StyledDialog>
-    );
-  }
-}
-
-export default AutosavePromptPopup;

package/src/components/toolbar/popup/autosaveprompt/styles.css

@@ -1,64 +0,0 @@
-.container {
-  width: 60px;
-  position: relative;
-  padding-left: 20px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-/* Hide the browser's default checkbox */
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 13px;
-  width: 13px;
-  background-color: #eee;
-}
-
-/* On mouse-over, add a grey background color */
-.container:hover input ~ .checkmark {
-  background-color: #ccc;
-}
-
-/* When the checkbox is checked, add a blue background */
-.container input:checked ~ .checkmark {
-  background-color: #2196f3;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.container .checkmark:after {
-  left: 4px;
-  top: 1px;
-  width: 3px;
-  height: 7px;
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}

package/src/components/toolbar/popup/autosaveprompt/styles.js

@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-import {
-  BG_COLOR_HOVER,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR,
-  TEXT_COLOR_NEUTRAL_1
-} from '../../../../constants';
-
-export const DialogTitle = styled.span`
-  font-weight: bold;
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 26px;
-  margin-bottom: 1rem;
-`;
-
-export const DialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  margin-bottom: 32px;
-`;
-
-export const DialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const Button = styled.div`
-  padding: 10px 20px;
-  cursor: pointer;
-  margin-right: 10px;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-weight: bold;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  border-radius: 20px;
-  :hover {
-    background-color: ${BG_COLOR_HOVER};
-  }
-`;

package/src/components/toolbar/popup/cabinet/cabinet-category/index.jsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import ToolbarPanel from '../../../../sidebar/toolbar-panel';
-import * as S from '../../styles';
-
-export const CabinetCategory = ({
-  setStep,
-  action,
-  pData,
-  bFlag,
-  props,
-  doorExpand,
-  search,
-  onSearch,
-  mode
-}) => {
-  let result = [];
-  const [lastActiveName, setLastActiveName] = useState('');
-
-  for (let i = 0; i < pData.length; i++) {
-    let temp = [];
-    for (let j = 0; j < pData[i].items.length; j++) {
-      if (pData[i].items[j].type !== 'cabinet') {
-        var title = pData[i].items[j].name;
-        title = title.charAt(0).toUpperCase() + title.substr(1);
-
-        temp.push(
-          <S.ProductsRow
-            key={i.toString() + '-' + j.toString()}
-            style={{ width: '100%', padding: '8px 10px 8px' }}
-          >
-            <a
-              onClick={() => {
-                action(pData[i].items[j].name);
-              }}
-            >
-              <span>{title} </span>
-            </a>
-          </S.ProductsRow>
-        );
-      }
-    }
-    result.push(
-      <S.ItemWrapper key={i.toString()}>
-        <ToolbarPanel
-          lastActiveName={lastActiveName}
-          setLastActiveName={setLastActiveName}
-          onClose={() => {
-            action(-1);
-          }}
-          onOpen={() => {
-            action(pData[i].name);
-          }}
-          isUrl={true}
-          key={i.toString()}
-          name={pData[i].name}
-          url={pData[i].thumbnail}
-        >
-          {temp}
-        </ToolbarPanel>
-      </S.ItemWrapper>
-    );
-  }
-  let miHeight = 0;
-  let nonHeight = 495 - miHeight + 'px';
-  let height = window.innerHeight * 0.6 - miHeight + 'px';
-  return (
-    <S.CategoryContentWrapper
-      style={{ height: doorExpand ? height : nonHeight }}
-    >
-      {result}
-    </S.CategoryContentWrapper>
-  );
-};