kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as SharedStyle from '../../shared-style';
+import styled from 'styled-components';
+import {
+  TEXT_COLOR_NEUTRAL_3,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR
+} from '../../constants';
+
+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 (
+    <StyledSelect type="text" style={style} {...rest}>
+      {children}
+    </StyledSelect>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactRange from '@mapbox/react-range';
+import FormTextInput from './form-text-input';
+
+const sliderContainerStyle = {
+  display: 'inline-block',
+  width: '80%',
+  marginRight: '5%'
+};
+const sliderStyle = { display: 'block', width: '100%', height: '30px' };
+const textContainerStyle = {
+  display: 'inline-block',
+  width: '15%',
+  float: 'right'
+};
+const textStyle = { height: '34px', textAlign: 'center' };
+
+export default function FormNumberInput({ value, onChange, ...rest }) {
+  return (
+    <div>
+      <div style={sliderContainerStyle}>
+        <ReactRange
+          type="range"
+          style={sliderStyle}
+          onChange={onChange}
+          value={value}
+          {...rest}
+        />
+      </div>
+
+      <div style={textContainerStyle}>
+        <FormTextInput value={value} onChange={onChange} style={textStyle} />
+      </div>
+    </div>
+  );
+}

package/src/components/style/form-submit-button.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from './button';
+import * as SharedStyle from '../../shared-style';
+
+const STYLE = {
+  borderColor: '#415375',
+  backgroundColor: '#415375',
+  color: SharedStyle.COLORS.white
+};
+
+const STYLE_HOVER = {
+  borderColor: '#1f3149',
+  backgroundColor: '#1f3149',
+  color: SharedStyle.COLORS.white
+};
+
+export default function FormSubmitButton({ children, ...rest }) {
+  return (
+    <Button type="submit" style={STYLE} styleHover={STYLE_HOVER} {...rest}>
+      {children}
+    </Button>
+  );
+}

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

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import * as SharedStyle from '../../shared-style';
+import {
+  PROJECT_NAME_LENGTH_LIMIT,
+  TEXT_COLOR_NEUTRAL_3,
+  BG_COLOR_0,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR
+} from '../../constants';
+import styled from 'styled-components';
+
+const StyledInput = styled.input`
+  display: block;
+  padding: 15px 10px 12px 0px;
+  width: 120px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  background-color: ${BG_COLOR_0};
+  border: 2px solid;
+  text-align: right;
+  float: right;
+  border-radius: 5px;
+  outline: 0;
+  :focus {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export default class FormTextInput extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { focus: false };
+    this.input = React.createRef(null);
+  }
+
+  componentDidMount() {
+    if (this.input.current) {
+      this.input.current.select();
+    }
+  }
+
+  render() {
+    let { style, ...rest } = this.props;
+
+    return (
+      <StyledInput
+        ref={this.input}
+        onFocus={e => this.setState({ focus: true })}
+        onBlur={e => this.setState({ focus: false })}
+        style={style}
+        // autoFocus
+        type="text"
+        {...rest}
+        maxLength={PROJECT_NAME_LENGTH_LIMIT}
+      />
+    );
+  }
+}
+
+FormTextInput.defaultProps = {
+  style: {}
+};

package/src/components/toolbar/button/ControlButton.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../../shared-style';
+import * as S from './styles';
+
+export default class ControlButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { hover: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    let overlayStyle = {};
+    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
+
+    return (
+      <S.Control
+        onMouseOver={event => this.setState({ hover: true })}
+        onMouseOut={event => this.setState({ hover: false })}
+        onClick={props.onClick}
+      >
+        {[
+          props.title !== undefined ? (
+            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
+          ) : null,
+          props.icon !== undefined ? (
+            <S.ControlIcon key={props.icon}>{props.icon}</S.ControlIcon>
+          ) : null
+        ]}
+      </S.Control>
+    );
+  }
+}
+
+ControlButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/toolbar/button/DirectionButton.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../../shared-style';
+import * as S from './styles';
+
+export default class DirectionButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let { props } = this;
+    let overlayStyle = {};
+    overlayStyle = props.active
+      ? { ...overlayStyle, background: SharedStyle.TOOLBAR_COLOR.active }
+      : { ...overlayStyle };
+    return (
+      <S.DirectionIcon
+        style={props.style}
+        onClick={props.onClick}
+        key={props.icon}
+      >
+        {props.icon}
+      </S.DirectionIcon>
+    );
+  }
+}
+
+DirectionButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/toolbar/button/RightButton.jsx

@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as S from './styles';
+
+export default class RightButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { hover: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    let overlayStyle = {};
+    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
+    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
+    return (
+      <S.rMain
+        onMouseOver={event => this.setState({ hover: true })}
+        onMouseOut={event => this.setState({ hover: false })}
+        onClick={props.onClick}
+      >
+        <S.rightIcon>{props.icon}</S.rightIcon>
+
+        <S.rOverlay style={{ ...overlayStyle }}>
+          <img width="40px" src={props.src} />
+          <S.rTitle>{props.title}</S.rTitle>
+        </S.rOverlay>
+        {/* {
+          state.active ?
+          <div style={STYLE_TOOLTIP}>
+            <span style={STYLE_TOOLTIP_PIN} />
+            {props.tooltip}
+          </div>
+          : null
+        } */}
+      </S.rMain>
+    );
+  }
+}
+
+RightButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  onClick: PropTypes.func
+};
+
+export class RightTextButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { hover: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    return (
+      <S.rMain
+        onMouseOver={event => this.setState({ hover: true })}
+        onMouseOut={event => this.setState({ hover: false })}
+        onClick={props.onClick}
+      >
+        <S.rightIcon>{props.icon}</S.rightIcon>
+
+        {state.hover ? (
+          <S.rOverlay style={{ display: 'block' }}>
+            <img width="40px" src={props.src} />
+            <S.rTitle
+              style={{ top: '20px', paddingTop: '7px', paddingBottom: '7px' }}
+            >
+              {props.title}
+            </S.rTitle>
+          </S.rOverlay>
+        ) : (
+          <S.rOverlay style={{ display: 'block' }}>
+            <S.rTitle
+              style={{
+                color: 'black',
+                top: '20px',
+                paddingTop: '7px',
+                paddingBottom: '7px'
+              }}
+            >
+              {props.title}
+            </S.rTitle>
+          </S.rOverlay>
+        )}
+        {/* {
+          state.active ?
+          <div style={STYLE_TOOLTIP}>
+            <span style={STYLE_TOOLTIP_PIN} />
+            {props.tooltip}
+          </div>
+          : null
+        } */}
+      </S.rMain>
+    );
+  }
+}
+
+RightTextButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  onClick: PropTypes.func
+};

package/src/components/toolbar/button/ToggleButton.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../../shared-style';
+import { MODE_IDLE_3D } from '../../../constants';
+import * as S from './styles';
+
+export default class ToggleButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let { props } = this;
+    let overlayStyle = {};
+    let activeStyle =
+      props.settingMode === MODE_IDLE_3D || props.active
+        ? { paddingRight: '30px', paddingBottom: '2px' }
+        : { paddingLeft: '30px', paddingBottom: '2px' };
+    return (
+      <S.Toggle style={{ ...overlayStyle }} onClick={props.onClick}>
+        {[
+          props.title !== undefined ? (
+            <S.ControlTitle key={props.title}>{props.title}</S.ControlTitle>
+          ) : null,
+          props.icon !== undefined ? (
+            <S.ToggleIcon style={{ ...activeStyle }} key={props.icon}>
+              {props.icon}
+            </S.ToggleIcon>
+          ) : null
+        ]}
+      </S.Toggle>
+    );
+  }
+}
+
+ToggleButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

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

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import * as S from './styles';
+
+//http://www.cssportal.com/css-tooltip-generator/
+
+export default class ToolbarButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { hover: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    const { active, onClick, children, src, title, ...otherProps } = props;
+    let overlayStyle = {};
+    if (state.hover) overlayStyle = { ...overlayStyle, display: 'block' };
+    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.focus }
+
+    if (props.active) overlayStyle = { ...overlayStyle, display: 'block' };
+    // overlayStyle = { ...overlayStyle, 'display': 'block', 'background': SharedStyle.TOOLBAR_COLOR.active }
+    return (
+      <S.Main
+        {...otherProps}
+        onMouseOver={event => this.setState({ hover: true })}
+        onMouseOut={event => this.setState({ hover: false })}
+        onClick={props.onClick}
+      >
+        <div>{props.children}</div>
+
+        <S.Overlay style={{ ...overlayStyle }}>
+          <img width="75px" src={props.src} />
+          <S.Title>{props.title}</S.Title>
+        </S.Overlay>
+        {/* {
+          state.active ?
+          <div style={STYLE_TOOLTIP}>
+            <span style={STYLE_TOOLTIP_PIN} />
+            {props.tooltip}
+          </div>
+          : null
+        } */}
+      </S.Main>
+    );
+  }
+}
+
+ToolbarButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  tooltip: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};

package/src/components/toolbar/button/styles.js

@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+
+export const Main = styled.div`
+  z-index: 6;
+  width: 75px;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0px;
+  position: relative;
+  cursor: pointer;
+  background: #d3e7e5;
+  box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    -1px -1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+`;
+export const rightIcon = styled.div`
+  img {
+    box-shadow: 3px 1px 3px 0px rgba(0, 0, 0, 0.2),
+      -1px -1px 1px 0px rgba(0, 0, 0, 0.14),
+      0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+    border-radius: 8%;
+  }
+`;
+export const Overlay = styled.div`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+`;
+export const Title = styled.span`
+  position: absolute;
+  top: 51%;
+  left: 0px;
+  width: 100%;
+  color: #fff;
+  text-transform: uppercase;
+  transform: translate(0%, -50%);
+  font-size: 11px;
+`;
+export const rMain = styled.div`
+  width: 40px;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  position: relative;
+  cursor: pointer;
+`;
+export const rOverlay = styled.div`
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  display: none;
+`;
+export const rTitle = styled.span`
+  position: absolute;
+  top: 45%;
+  left: 1px;
+  width: 100%;
+  color: #fff;
+  text-transform: uppercase;
+  transform: translate(0%, -50%);
+
+  @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;
+  }
+`;
+
+export const Toggle = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 36px;
+  margin-left: 20px;
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  :hover {
+    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+    border-radius: 18px;
+  }
+`;
+
+export const ToggleIcon = styled.div`
+  ${'' /* transition-duration: .3s; */}
+  position: absolute;
+  top: 0px;
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`;
+
+export const ControlTitle = styled.span`
+  margin: 10px;
+  font-size: 12px;
+`;

package/src/components/toolbar/components/DoorStyleMenu.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  selectRoot: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    color: 'rgb(76, 18, 161)',
+    fontWeight: 600,
+    fontSize: '14px'
+  },
+  inputLabel: {
+    color: 'black'
+  }
+});
+
+const DoorStyleMenu = ({
+  selected,
+  data,
+  onChange,
+  getValue,
+  placeholder,
+  iconStyle
+}) => {
+  const classes = useStyles();
+
+  if (!data || !data.length) return null;
+
+  return (
+    <FormControl fullWidth variant="outlined">
+      {placeholder && (
+        <InputLabel className={classes.inputLabel}>{placeholder}</InputLabel>
+      )}
+      <Select
+        value={selected}
+        onChange={e => onChange(e.target.value)}
+        label={placeholder}
+        classes={{ root: classes.selectRoot }}
+        renderValue={value => {
+          if (!value) {
+            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
+          }
+          const selectedItem = data.find(item => getValue(item) === value.name);
+          if (!selectedItem)
+            return <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>;
+          return (
+            <span
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                width: '100%'
+              }}
+            >
+              <span>{selectedItem.name}</span>
+              <img
+                style={
+                  iconStyle && {
+                    ...iconStyle
+                  }
+                }
+                height="20"
+                src={selectedItem.thumbnail}
+                alt=""
+              />
+            </span>
+          );
+        }}
+      >
+        <MenuItem value={''}>
+          <span style={{ color: 'rgba(86, 95, 119, 1)' }}>Any</span>
+        </MenuItem>
+        {data.map((item, key) => (
+          <MenuItem
+            classes={{ root: classes.selectRoot }}
+            key={key}
+            value={getValue(item)}
+          >
+            <font size="2">{item.name}</font>
+            <img
+              style={
+                iconStyle && {
+                  ...iconStyle
+                }
+              }
+              height="20"
+              src={item.thumbnail}
+              alt=""
+            />
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+DoorStyleMenu.defaultProps = {
+  getValue: it => it.name
+};
+
+export default DoorStyleMenu;