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

package/src/components/style/button.jsx

@@ -1,95 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as SharedStyle from '../../shared-style';
-
-const BASE_STYLE = {
-  display: 'inline-block',
-  fontWeight: '400',
-  lineHeight: '1.25',
-  textAlign: 'center',
-  whiteSpace: 'nowrap',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-  WebkitUserSelect: 'none',
-  MozUserSelect: 'none',
-  MsUserSelect: 'none',
-  userSelect: 'none',
-  padding: '5px 14px',
-  fontSize: '14px',
-  color: SharedStyle.COLORS.black,
-  fonWeight: '400px',
-  transition: 'background-color 175ms ease, border 175ms ease',
-  outline: 'none',
-  borderRadius: '2px',
-  borderWidth: '1px',
-  borderType: 'solid',
-  width: '100%'
-};
-
-const BASE_STYLE_SIZE = {
-  small: {
-    fontSize: '12px',
-    padding: '3px 8px'
-  },
-  normal: {},
-  large: {
-    padding: '8px 20px'
-  }
-};
-
-export default class Button extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hover: false };
-  }
-
-  render() {
-    let { hover } = this.state;
-    let {
-      type,
-      style: customStyle,
-      styleHover: customStyleHover,
-      children,
-      size,
-      ...rest
-    } = this.props;
-    let styleMerged = Object.assign(
-      {},
-      BASE_STYLE,
-      BASE_STYLE_SIZE[size],
-      hover ? customStyleHover : customStyle
-    );
-
-    return (
-      <button
-        type={type}
-        onMouseEnter={e => this.setState({ hover: true })}
-        onMouseLeave={e => this.setState({ hover: false })}
-        style={styleMerged}
-        {...rest}
-      >
-        {children}
-      </button>
-    );
-  }
-}
-
-Button.defaultProps = {
-  type: 'button',
-  size: 'normal',
-  style: {
-    backgroundColor: '#e6e6e6',
-    borderColor: '#adadad'
-  },
-  styleHover: {
-    backgroundColor: '#d4d4d4',
-    borderColor: '#8c8c8c'
-  }
-};
-
-Button.propTypes = {
-  type: PropTypes.string,
-  style: PropTypes.object,
-  styleHover: PropTypes.object,
-  size: PropTypes.oneOf(['large', 'normal', 'small'])
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import Button from './button';
-
-const STYLE = {
-  borderColor: '#adadad',
-  backgroundColor: '#e6e6e6'
-};
-
-const STYLE_HOVER = {
-  backgroundColor: '#d4d4d4',
-  borderColor: '#8c8c8c'
-};
-
-export default function CancelButton({ children, ...rest }) {
-  return (
-    <Button style={STYLE} styleHover={STYLE_HOVER} {...rest}>
-      {children}
-    </Button>
-  );
-}

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-color-input.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import FormTextInput from './form-text-input';
-
-const STYLE = {
-  padding: 0,
-  border: 0
-};
-const EREG_NUMBER = /^.*$/;
-
-export default function FormColorInput({ onChange, ...rest }) {
-  let onChangeCustom = event => {
-    let value = event.target.value;
-    if (EREG_NUMBER.test(value)) {
-      onChange(event);
-    }
-  };
-
-  return (
-    <FormTextInput
-      type="color"
-      style={STYLE}
-      onChange={onChangeCustom}
-      autoComplete="off"
-      {...rest}
-    />
-  );
-}

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

@@ -1,15 +0,0 @@
-import React from 'react';
-
-const BASE_STYLE = {
-  display: 'block',
-  marginBottom: '2px',
-  fontSize: '12px'
-};
-
-export default function FormLabel({ children, style, ...rest }) {
-  return (
-    <label style={{ ...BASE_STYLE, style }} {...rest}>
-      {children}
-    </label>
-  );
-}

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

@@ -1,196 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  KEYBOARD_BUTTON_CODE,
-  TEXT_COLOR_NEUTRAL_0,
-  SECONDARY_PURPLE_COLOR,
-  DEFAULT_FONT_FAMILY
-} from '../../constants';
-import styled from 'styled-components';
-import { isValidNumber } from '../../utils/helper';
-
-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);
-    this.state = {
-      focus: false,
-      valid: true,
-      showedValue: props.value,
-      focusOn: false,
-      flag: true
-    };
-    this.input = React.createRef(null);
-  }
-
-  componentDidMount() {
-    if (
-      this.input.current &&
-      ['width', 'length'].includes(this.props.labelName.toLowerCase())
-    ) {
-      this.input.current.focus();
-      this.input.current.select();
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.value !== nextProps.value ||
-      this.props.focus !== nextProps.focus
-    ) {
-      this.setState({ showedValue: nextProps.value, focusOn: nextProps.focus });
-    }
-  }
-
-  componentDidUpdate(prevProps, preprevState) {
-    if (
-      this.props.value !== prevProps.value &&
-      prevProps.labelName !== 'Ceiling Height'
-    ) {
-      this.input.current.focus();
-      this.input.current.select();
-    }
-
-    const { showedValue } = this.state;
-    const { min, max, isCeiling } = this.props;
-
-    if (!isCeiling) {
-      if (isValidNumber(min) && showedValue < min) {
-        this.setState({ showedValue: min });
-      } else if (isValidNumber(max) && showedValue > max) {
-        this.setState({ showedValue: max });
-      }
-    }
-    return null;
-  }
-
-  render() {
-    let {
-      value,
-      min,
-      max,
-      precision,
-      onChange,
-      onValid,
-      onInvalid,
-      style,
-      placeholder,
-      isCeiling
-    } = this.props;
-    let regexp = new RegExp(`^-?([0-9]+)?\\.?([0-9]{0,${precision}})?$`);
-
-    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 (
-      <StyledInput
-        id="form_number_input"
-        autoFocus={this.state.focusOn}
-        readOnly={!!this.props.disabled}
-        type="text"
-        value={currValue}
-        style={style}
-        onChange={evt => {
-          this.context.projectActions.copyProperties('ddddd');
-          let valid = regexp.test(evt.nativeEvent.target.value);
-
-          if (valid) {
-            this.setState({
-              showedValue: evt.nativeEvent.target.value,
-              flag: false
-            });
-            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={this.input}
-        onKeyDown={e => {
-          var keyCode = e.keyCode || e.which;
-          if (
-            keyCode == KEYBOARD_BUTTON_CODE.ENTER ||
-            keyCode == KEYBOARD_BUTTON_CODE.TAB
-          ) {
-            saveFn(e);
-            this.input.current.blur();
-          }
-          if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
-            this.context.projectActions.rollback();
-          }
-        }}
-        placeholder={placeholder}
-      />
-    );
-  }
-}
-
-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,
-  labelName: PropTypes.string,
-  isCeiling: PropTypes.string
-};
-
-FormNumberInput.contextTypes = {
-  translator: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired
-};
-
-FormNumberInput.defaultProps = {
-  value: 0,
-  style: {},
-  min: Number.MIN_SAFE_INTEGER,
-  max: Number.MAX_SAFE_INTEGER,
-  precision: 2,
-  disabled: false,
-  labelName: 'default'
-};

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
-};