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

package/src/components/style/content-container.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const STYLE = {
-  padding: '0 20px',
-  overflowY: 'auto'
-};
-
-export default function ContentContainer({
-  children,
-  width,
-  height,
-  style = {}
-}) {
-  return (
-    <div
-      style={{ width, height, ...STYLE, ...style }}
-      onWheel={event => event.stopPropagation()}
-    >
-      {children}
-    </div>
-  );
-}
-
-ContentContainer.propsType = {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  style: PropTypes.object
-};

package/src/components/style/content-title.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-
-const STYLE = {
-  color: SharedStyle.PRIMARY_COLOR.alt,
-  fontWeight: 300
-};
-
-export default function ContentTitle({ children, style = {}, ...rest }) {
-  return (
-    <h1 style={{ ...STYLE, ...style }} {...rest}>
-      {children}
-    </h1>
-  );
-}
-
-ContentTitle.propsType = {
-  style: PropTypes.object
-};

package/src/components/style/delete-button.jsx

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

package/src/components/style/export.jsx

@@ -1,48 +0,0 @@
-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 default {
-  Button,
-  CancelButton,
-  ContentContainer,
-  ContentTitle,
-  DeleteButton,
-  FormBlock,
-  FormColorInput,
-  FormLabel,
-  FormNumberInput,
-  FormSelect,
-  FormSlider,
-  FormSubmitButton,
-  FormTextInput,
-  FormNumberInput2
-};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const BASE_STYLE = {
-  marginBottom: '16px'
-};
-
-export default function FormBlock({ children, style, ...rest }) {
-  return (
-    <div style={{ ...BASE_STYLE, style }} {...rest}>
-      {children}
-    </div>
-  );
-}

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

@@ -1,191 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-import { MdUpdate } from 'react-icons/md';
-import { KEYBOARD_BUTTON_CODE } from '../../constants';
-
-const STYLE_INPUT = {
-  display: 'block',
-  width: '100%',
-  padding: '0 2px',
-  fontSize: '13px',
-  lineHeight: '1.25',
-  color: SharedStyle.PRIMARY_COLOR.input,
-  backgroundColor: SharedStyle.COLORS.white,
-  backgroundImage: 'none',
-  border: '1px solid rgba(0,0,0,.15)',
-  outline: 'none',
-  height: '30px'
-};
-
-const confirmStyle = {
-  position: 'absolute',
-  cursor: 'pointer',
-  width: '20px',
-  height: '20px',
-  right: '5px',
-  top: '5px',
-  backgroundColor: SharedStyle.SECONDARY_COLOR.main,
-  color: '#FFF',
-  transition: 'all 0.1s linear'
-};
-
-export default class FormNumberInput extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      focus: false,
-      valid: true,
-      showedValue: props.value,
-      disabled: props.disabled === true ? true : false,
-      focusOn: false
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.value !== nextProps.value ||
-      this.props.focus !== nextProps.focus
-    ) {
-      this.setState({ showedValue: nextProps.value, focusOn: nextProps.focus });
-    }
-    if (this.props.focus !== nextProps.focus) {
-      this.Input.focus();
-      this.Input.select();
-    }
-  }
-
-  render() {
-    let {
-      value,
-      min,
-      max,
-      precision,
-      onChange,
-      onValid,
-      onInvalid,
-      style,
-      placeholder
-    } = this.props;
-    let numericInputStyle = { ...STYLE_INPUT, ...style };
-    if (this.state.focusOn)
-      numericInputStyle.border = `1px solid ${SharedStyle.SECONDARY_COLOR.main}`;
-    let regexp = new RegExp(`^-?([0-9]+)?\\.?([0-9]{0,${precision}})?$`);
-
-    if (!isNaN(min) && isFinite(min) && this.state.showedValue < min)
-      this.setState({ showedValue: min }); // value = min;
-    if (!isNaN(max) && isFinite(max) && this.state.showedValue > max)
-      this.setState({ showedValue: max }); // value = max;
-
-    let currValue = regexp.test(this.state.showedValue)
-      ? this.state.showedValue
-      : parseFloat(this.state.showedValue).toFixed(precision);
-
-    let different =
-      parseFloat(this.props.value).toFixed(precision) !==
-      parseFloat(this.state.showedValue).toFixed(precision);
-
-    let saveFn = e => {
-      e.stopPropagation();
-
-      if (this.state.valid) {
-        let savedValue =
-          this.state.showedValue !== '' && this.state.showedValue !== '-'
-            ? parseFloat(this.state.showedValue)
-            : 0;
-
-        this.setState({ showedValue: savedValue });
-        onChange({ target: { value: savedValue } });
-      }
-    };
-
-    return (
-      <div style={{ position: 'relative' }}>
-        <input
-          autoFocus={this.state.focusOn}
-          readOnly={this.state.disabled}
-          type="text"
-          value={currValue}
-          style={numericInputStyle}
-          onChange={evt => {
-            let valid = regexp.test(evt.nativeEvent.target.value);
-
-            if (valid) {
-              this.setState({ showedValue: evt.nativeEvent.target.value });
-              if (onValid) onValid(evt.nativeEvent);
-            } else {
-              if (onInvalid) onInvalid(evt.nativeEvent);
-            }
-
-            this.setState({ valid });
-          }}
-          onFocus={e => this.setState({ focusOn: true })}
-          onBlur={e => this.setState({ focusOn: false })}
-          ref={ele => {
-            this.Input = ele;
-          }}
-          onKeyDown={e => {
-            var keyCode = e.keyCode || e.which;
-            if (
-              keyCode == KEYBOARD_BUTTON_CODE.ENTER ||
-              keyCode == KEYBOARD_BUTTON_CODE.TAB
-            ) {
-              saveFn(e);
-              this.Input.blur();
-            }
-            if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
-              this.context.projectActions.rollback();
-            }
-          }}
-          placeholder={placeholder}
-        />
-        <div
-          onClick={e => {
-            if (different) saveFn(e);
-          }}
-          title={this.context.translator.t('Confirm')}
-          style={{
-            ...confirmStyle,
-            visibility: different ? 'visible' : 'hidden',
-            opacity: different ? '1' : '0'
-          }}
-        >
-          <MdUpdate
-            style={{
-              width: '100%',
-              height: '100%',
-              padding: '0.2em',
-              color: '#FFF'
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-FormNumberInput.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  style: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onValid: PropTypes.func,
-  onInvalid: PropTypes.func,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  precision: PropTypes.number,
-  placeholder: PropTypes.string
-};
-
-FormNumberInput.contextTypes = {
-  translator: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};
-
-FormNumberInput.defaultProps = {
-  value: 0,
-  style: {},
-  min: Number.MIN_SAFE_INTEGER,
-  max: Number.MAX_SAFE_INTEGER,
-  precision: 2,
-  disabled: false
-};

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

@@ -1,36 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/toolbar/button/ControlButton.jsx

@@ -1,41 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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
-};