kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

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

@@ -1,60 +0,0 @@
-import React from 'react';
-
-// import { FaSearch, FaPlus } from 'react-icons/fa';
-
-// import * as S from '../styles';
-import { FloorCategory } from './floor-category';
-import { FloorChooseProduct } from './choose-floor';
-
-import { DoubleToolbarButtonWithPopup } from '../';
-
-const FloorplanToolbarButton = ({
-  props,
-  action,
-  drawAction,
-  dataSource,
-  subData,
-  trigger,
-  categoryCollapse,
-  productCollapse,
-  collapseAction,
-  mode,
-  closeAction,
-  isOpen
-}) => {
-  let content = (
-    <FloorCategory
-      props={props}
-      action={action}
-      dataSource={dataSource.categories}
-    ></FloorCategory>
-  );
-  let content1 = (
-    <FloorChooseProduct
-      drawAction={drawAction}
-      closeAction={closeAction}
-      props={props}
-      dataSource={subData}
-      isExpand={!productCollapse}
-      mode={mode}
-    ></FloorChooseProduct>
-  );
-  return (
-    <DoubleToolbarButtonWithPopup
-      closeAction={closeAction}
-      mode={mode}
-      order={0}
-      isDouble={subData.length || subData === -1 || subData === -2}
-      collapse1={categoryCollapse}
-      collapse2={productCollapse}
-      collapseAction={collapseAction}
-      trigger={trigger}
-      children1={content1}
-      isOpen={isOpen}
-    >
-      {content}
-    </DoubleToolbarButtonWithPopup>
-  );
-};
-
-export default FloorplanToolbarButton;

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

@@ -1,241 +0,0 @@
-import React, { useState } from 'react';
-import { Popup as BasePopup } from 'reactjs-popup';
-import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
-import {
-  FaAngleDoubleLeft,
-  FaTimes,
-  FaTrash,
-  FaCopy,
-  FaExpand
-} from 'react-icons/fa';
-import {
-  // API_SERVER,
-  ARRAY_3D_MODES
-} from '../../../constants';
-
-import MaterialEdit from './finishingtouch/material-edit';
-import * as S from './styles';
-
-const Popup = ({
-  mode,
-  trigger,
-  children,
-  collapse,
-  collapseAction,
-  order,
-  isOpened,
-  closeAction
-}) => {
-  let title = trigger.props.title;
-  return (
-    <BasePopup
-      onClose={closeAction}
-      open={isOpened}
-      closeOnDocumentClick
-      trigger={<div>{trigger}</div>}
-      position="right top"
-      offsetX={!ARRAY_3D_MODES.includes(mode) ? 99 : 10}
-      offsetY={-90.15 * order}
-      on={['click']}
-      mouseLeaveDelay={100}
-      arrow={false}
-    >
-      {closePopup => (
-        <S.Wrapper style={{ background: '#3e3e3f' }}>
-          <S.TitleBar>
-            <S.Title>{title}</S.Title>
-            <S.TitleBarIconButton onClick={closePopup}>
-              <S.IconButton>
-                <FaTimes />
-              </S.IconButton>
-            </S.TitleBarIconButton>
-          </S.TitleBar>
-          <S.ContentWrapper>{children}</S.ContentWrapper>
-        </S.Wrapper>
-      )}
-    </BasePopup>
-  );
-};
-
-const DoublePopup = ({
-  mode,
-  isDouble,
-  trigger,
-  children,
-  children1,
-  collapse1,
-  collapse2,
-  order,
-  isExpand,
-  expandAction,
-  isOpen,
-  closeAction,
-  applyMaterial
-}) => {
-  function capitalize(s) {
-    return s.toLowerCase().replace(/\b./g, function (a) {
-      return a.toUpperCase();
-    });
-  }
-  let pathTitle1 = trigger.props.title1;
-  let pathTitle2 = trigger.props.title2;
-  let title1 = trigger.props.title;
-  let title2 = trigger.props.title;
-  if (pathTitle1.length > 0 && collapse1) {
-    title1 = '';
-    for (let i = 0; i < pathTitle1.length; i++) {
-      pathTitle1[i] = capitalize(pathTitle1[i]);
-      title1 += pathTitle1[i];
-      title1 += '/';
-    }
-  }
-  if (pathTitle2.length > 0 && collapse2) {
-    title2 = '';
-    for (let i = 0; i < pathTitle2.length; i++) {
-      title2 += pathTitle2[i];
-      title2 += '/';
-    }
-  }
-
-  return (
-    <BasePopup
-      closeOnDocumentClick
-      trigger={<div>{trigger}</div>}
-      position="right top"
-      offsetX={!ARRAY_3D_MODES.includes(mode) ? 99 : 10}
-      offsetY={-90.15 * order}
-      on={['click']}
-      mouseLeaveDelay={100}
-      arrow={false}
-      contentStyle={{ top: '110px!important' }}
-      open={isOpen}
-      onClose={closeAction}
-    >
-      {closePopup => (
-        <S.Wrapper>
-          <S.TitlesRow>
-            <S.TitleBar>
-              <S.Title>{title1}</S.Title>
-              <S.TitleBarIconButton
-                className={'popup-exit'}
-                onClick={closePopup}
-              >
-                <S.IconButton>
-                  <FaTimes />
-                </S.IconButton>
-              </S.TitleBarIconButton>
-              {isExpand > -1 && (
-                <S.TitleBarIconButton>
-                  <S.IconButton onClick={() => expandAction()}>
-                    {title1 === 'Select Door Style' ? (
-                      isExpand === 1 ? (
-                        <ZoomOutOutlined style={{ fontSize: '14px' }} />
-                      ) : (
-                        <ZoomInOutlined style={{ fontSize: '14px' }} />
-                      )
-                    ) : (
-                      <FaAngleDoubleLeft
-                        style={{
-                          transform:
-                            isExpand === 1 ? 'rotate(0deg)' : 'rotate(180deg)'
-                        }}
-                      />
-                    )}
-                  </S.IconButton>
-                </S.TitleBarIconButton>
-              )}
-            </S.TitleBar>
-            <div style={{ display: 'grid', gridAutoFlow: 'column' }}>
-              <section>
-                <div style={{ backgroundColor: '#3e3e3f' }}>
-                  {collapse2 ? children : ''}
-                  <S.ClearFix />
-                </div>
-              </section>
-              <section style={{ display: isDouble ? 'block' : 'none' }}>
-                <div
-                  style={{
-                    backgroundColor: '#3e3e3f',
-                    display: !collapse2 ? 'none' : 'block'
-                  }}
-                >
-                  {collapse2 ? children1 : ''}
-                  <S.ClearFix />
-                  {(title1.includes('Finishing Touch') ||
-                    title1.includes('Appliance')) &&
-                  process.env.MODE == 'staging' ? (
-                    <MaterialEdit applyMaterial={applyMaterial} />
-                  ) : null}
-                </div>
-              </section>
-            </div>
-          </S.TitlesRow>
-        </S.Wrapper>
-      )}
-    </BasePopup>
-  );
-};
-
-export const ToolbarButtonWithPopup = ({
-  mode,
-  order,
-  trigger,
-  children,
-  props,
-  collapseFlag,
-  collapseAction,
-  isOpened,
-  closeAction
-}) => {
-  return (
-    <Popup
-      closeAction={closeAction}
-      mode={mode}
-      trigger={trigger}
-      props={props}
-      collapse1={collapseFlag}
-      collapseAction={collapseAction}
-      order={order}
-      isOpened={isOpened}
-    >
-      {children}
-    </Popup>
-  );
-};
-
-export const DoubleToolbarButtonWithPopup = ({
-  mode,
-  isOpen,
-  isExpand,
-  expandAction,
-  trigger,
-  children,
-  children1,
-  collapse1,
-  collapse2,
-  collapseAction,
-  isDouble,
-  order,
-  closeAction,
-  applyMaterial
-}) => {
-  return (
-    <DoublePopup
-      closeAction={closeAction}
-      mode={mode}
-      isOpen={isOpen}
-      isExpand={isExpand}
-      expandAction={expandAction}
-      isDouble={isDouble}
-      trigger={trigger}
-      children1={children1}
-      collapse1={collapse1}
-      collapse2={collapse2}
-      collapseAction={collapseAction}
-      order={order}
-      applyMaterial={applyMaterial}
-    >
-      {children}
-    </DoublePopup>
-  );
-};

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-import Dialog from '@material-ui/core/Dialog';
-import styled from 'styled-components';
-
-const StyledDialog = styled(Dialog)`
-  .MuiDialog-paperWidthSm {
-    border-radius: 10px;
-  }
-`;
-class NewProjectPopup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      asking: sessionStorage.getItem('asking')
-        ? sessionStorage.getItem('asking')
-        : false
-    };
-  }
-
-  _submit() {
-    if (this.state.asking) sessionStorage.setItem('asking', true);
-    this.props.newProject();
-    this.closePanel();
-  }
-  closePanel() {
-    this.props.handleNewProject(false);
-  }
-
-  render() {
-    let { visible } = this.props;
-
-    return (
-      <StyledDialog open={visible} onClose={() => this.closePanel()}>
-        <S.DialogTitle>New Project</S.DialogTitle>
-        <S.DialogContent>
-          Would you like to <strong>start a new project</strong>?
-          {!this.props.isSaved && this.props.areas.size > 0 && (
-            <div>
-              <br />
-              <div>
-                <span>
-                  It seems you have unsaved changes which will be lost if you
-                  start a new project.
-                </span>
-              </div>
-            </div>
-          )}
-        </S.DialogContent>
-        <S.DialogAction>
-          <S.Button onClick={() => this.closePanel()}>Cancel</S.Button>
-          <S.Button onClick={() => this._submit()}>OK</S.Button>
-        </S.DialogAction>
-      </StyledDialog>
-    );
-  }
-}
-
-export default NewProjectPopup;

package/src/components/toolbar/popup/newproject/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/newproject/styles.js

@@ -1,41 +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;
-  padding: 25px 30px;
-`;
-
-export const DialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 30px;
-`;
-
-export const DialogAction = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 15px 30px 25px;
-`;
-
-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/product/appliance.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import * as S from './styles';
-import * as MS from '../styles';
-
-const lineWrapperStyle = {
-  padding: '5px 15px 8px'
-};
-
-const lineImageStyle = {
-  maxWidth: '100%'
-};
-
-const msButtonTitleStyle = {
-  top: '39%',
-  fontSize: '12'
-};
-
-export default function Appliance({ url, title, selected, onClick, name }) {
-  title = title.charAt(0).toUpperCase() + title.substr(1);
-  let isUrl = true;
-  if (url !== undefined && url.charAt(0) === '#') isUrl = false;
-  return (
-    <S.LineWrapper style={{ ...lineWrapperStyle }}>
-      <S.Control onClick={onClick}>
-        <S.LineImage>
-          {isUrl && (
-            <img
-              name={name}
-              src={url}
-              style={{ width: 75, height: 75, ...lineImageStyle }}
-            />
-          )}
-          {!isUrl && (
-            <div style={{ width: 75, height: 75, backgroundColor: url }}></div>
-          )}
-        </S.LineImage>
-        <div style={{ display: 'grid', marginLeft: '10px' }}>
-          <h4 style={{ width: 104 }}>{title}</h4>
-          <S.ControlIcon key={name}>
-            <img
-              width={'72px'}
-              name={name}
-              src={'/assets/img/svg/toolbar/use_button.svg'}
-            />
-            <MS.ButtonTitle style={{ ...msButtonTitleStyle }}>
-              {selected ? 'APPLIED' : 'USE'}
-            </MS.ButtonTitle>
-          </S.ControlIcon>
-        </div>
-      </S.Control>
-    </S.LineWrapper>
-  );
-}

package/src/components/toolbar/popup/product/cabinetproduct.jsx

@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-
-export default function Product({ url, title, onClick, name }) {
-  const [newstate, setNewstate] = useState(false);
-  return (
-    <S.CabinetWrapper onClick={onClick}>
-      <div>
-        <img name={name} src={url} />
-      </div>
-      <S.Title>{title}</S.Title>
-    </S.CabinetWrapper>
-  );
-}

package/src/components/toolbar/popup/product/doorstyle.jsx

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import * as S from './styles';
-import * as SharedStyle from '../../../../shared-style';
-
-const StyledSpan = styled.span`
-  color: ${props =>
-    props.idx === props.selOption && props.selSubOption === props.subOptionIdx
-      ? SharedStyle.SECONDARY_COLOR.main
-      : '#fff'};
-  margin-left: 23px;
-  font-size: 12px;
-`;
-
-export default function DoorStyle({
-  idx,
-  url,
-  onClick,
-  name,
-  selOption,
-  selSubOption,
-  subOptionIdx
-}) {
-  name = name.charAt(0).toUpperCase() + name.substr(1);
-
-  return (
-    <S.PrimayDoorStyleLineWrapper
-      style={{
-        padding: '5px 5px 5px 20px',
-        borderBottom: '1px solid #2f2f2f',
-        height: 90
-      }}
-      onClick={onClick}
-    >
-      <div style={{ width: '100%', marginLeft: '10px', marginTop: '10px' }}>
-        <h4
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            marginTop: '3px',
-            marginBottom: '9px'
-          }}
-        >
-          <img height={'50'} name={name} src={url} />
-          <StyledSpan
-            idx={idx}
-            selOption={selOption}
-            subOptionIdx={subOptionIdx}
-            selSubOption={selSubOption}
-          >
-            {name}
-          </StyledSpan>
-        </h4>
-      </div>
-    </S.PrimayDoorStyleLineWrapper>
-  );
-}

package/src/components/toolbar/popup/product/doorstyleproduct.jsx

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-import * as MS from '../styles';
-
-export default function DoorStyleProduct({
-  url,
-  onClick,
-  name,
-  doorId,
-  isExpand,
-  selected,
-  currentTexture
-}) {
-  name = name.charAt(0).toUpperCase() + name.substr(1);
-
-  return (
-    <S.PrimayDoorStyleLineWrapper style={{ padding: '5px 15px 5px' }}>
-      <S.Control onClick={onClick}>
-        <div
-          style={{
-            width: '100%',
-            display: 'grid',
-            justifyItems: isExpand === 1 ? 'center' : 'left'
-          }}
-        >
-          <S.LineImage>
-            <img width={isExpand === 1 ? 196 : 85} name={name} src={url} />
-          </S.LineImage>
-          <h4 style={{ marginTop: '4px', marginBottom: '4px' }}>
-            <span style={{ fontSize: isExpand === 1 ? 18 : 10 }}>{name}</span>
-          </h4>
-          <S.ControlIcon key={name}>
-            <img
-              width={isExpand === 1 ? 100 : 72}
-              name={name}
-              src={'/assets/img/svg/toolbar/apply_button.svg'}
-            />
-            <MS.ButtonTitle style={{ top: '37%', fontSize: 10.5 }}>
-              {selected(doorId) ? 'APPLIED' : 'USE'}
-            </MS.ButtonTitle>
-          </S.ControlIcon>
-        </div>
-      </S.Control>
-    </S.PrimayDoorStyleLineWrapper>
-  );
-}

package/src/components/toolbar/popup/product/floor.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-
-import * as S from './styles';
-
-const STYLE_TITLE = {
-  fontSize: '12px',
-  color: '#fff',
-  padding: '10px',
-  // backgroundColor: '#3e3e3f',
-  margin: '0px',
-  cursor: 'pointer',
-  display: 'flex',
-  height: '85px',
-  justifyContent: 'start',
-  alignItems: 'center'
-};
-// const STYLE_CONTENT = {
-//   fontSize: '10px',
-//   color: 'rgba(222, 222, 222, 1)',
-//   padding: '0px',
-//   backgroundColor: '#28292d',
-// };
-// const STYLE_ARROW = {
-//   float: 'right'
-// };
-
-export default function Floor({ url, title, onClick, name }) {
-  return (
-    <S.PlanWraper onClick={onClick}>
-      <h3 style={{ ...STYLE_TITLE, paddingLeft: url ? 15 : 0 }}>
-        {url !== null && <img name={name} src={url} height={48} />}
-        <span style={{ marginLeft: 23 }}> {title} </span>
-      </h3>
-    </S.PlanWraper>
-  );
-}