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

package/src/components/style/button.jsx

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

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

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

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

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

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

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

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

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

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

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