sourcecode/front/project/www/components/Calculator/index.js

import React, { Component } from 'react';
import Assets from '@src/components/Assets';
import './index.less';

export default class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '0' };
    this.valueList = [];
    this.typeList = [];
    this.change = false;
  }

  clear() {
    this.valueList = [];
    this.typeList = [];
    this.setState({ value: '0' });
  }

  del() {
    const { value } = this.state;
    if (value.length > 1) {
      this.setState({ value: value.substr(0, value.length - 1) });
    } else if (value !== '0') {
      this.setState({ value: '0' });
    }
  }

  f(a, b, c) {
    switch (c) {
      case '+':
        return a + b;
      case '-':
        return a - b;
      case '*':
        return a * b;
      case '/':
        return a / b;
      default:
        return 0;
    }
  }

  compute() {
    let { value } = this.state;
    for (let i = 0; i < this.typeList.length; i += 1) {
      if (i === 0) {
        value = this.f(this.valueList[0], this.valueList[1], this.typeList[0]);
      } else if (this.valueList[i + 1] !== undefined) {
        value = this.f(value, this.valueList[i + 1], this.typeList[i]);
      }
    }
    return value;
  }

  input(text) {
    const { value } = this.state;
    switch (text) {
      case '=':
        if (this.change && this.typeList.length > 0) {
          this.valueList.push(value);
          this.setState({ value: this.compute() });
          this.change = false;
        }
        break;
      case '+':
      case '-':
      case '*':
      case '/':
        if (this.change) {
          this.valueList.push(value);
          this.typeList.push(text);
          this.change = false;
          if (this.valueList.length > 1) {
            console.log(this);
            this.setState({ value: this.compute() });
          }
        }
        break;
      case '.':
        if (this.change && value[value.length - 1] !== '.') {
          this.setState({ value: `${value}${text}` });
        } else if (!this.change) {
          this.change = true;
        }
        break;
      case 0:
        if (this.change && value !== '0') {
          this.setState({ value: `${value}${text}` });
        } else if (!this.change) {
          this.change = true;
          this.setState({ value: '0' });
        }
        break;
      default:
        if (this.change) {
          if (value !== '0') {
            this.setState({ value: `${value}${text}` });
          } else {
            this.setState({ value: text });
          }
        } else {
          this.setState({ value: text });
          this.change = true;
        }
        break;
    }
  }

  render() {
    const { show } = this.props;
    const { value } = this.state;
    return (
      <div hidden={!show} className="calculator">
        <div className="line">
          <div className="block block-1 value">{value}</div>
        </div>
        <div className="line">
          <div className="block block-2 left" onClick={() => this.del()}>
            <Assets name="eliminate_icon" />
          </div>
          <div className="block block-3 right" onClick={() => this.clear()}>
            Clear
          </div>
        </div>
        <div className="line">
          <div className="block block-1 left" onClick={() => this.input(7)}>
            7
          </div>
          <div className="block block-1 center" onClick={() => this.input(8)}>
            8
          </div>
          <div className="block block-1 center" onClick={() => this.input(9)}>
            9
          </div>
          <div className="block block-2 right" onClick={() => this.input('/')}>
            /
          </div>
        </div>
        <div className="line">
          <div className="block block-1 left" onClick={() => this.input(4)}>
            4
          </div>
          <div className="block block-1 center" onClick={() => this.input(5)}>
            5
          </div>
          <div className="block block-1 center" onClick={() => this.input(6)}>
            6
          </div>
          <div className="block block-2 right" onClick={() => this.input('*')}>
            *
          </div>
        </div>
        <div className="line">
          <div className="block block-1 left" onClick={() => this.input(1)}>
            1
          </div>
          <div className="block block-1 center" onClick={() => this.input(2)}>
            2
          </div>
          <div className="block block-1 center" onClick={() => this.input(3)}>
            3
          </div>
          <div className="block block-2 right" onClick={() => this.input('-')}>
            -
          </div>
        </div>
        <div className="line">
          <div className="block block-1 left" onClick={() => this.input(0)}>
            0
          </div>
          <div className="block block-1 center" onClick={() => this.input('.')}>
            .
          </div>
          <div className="block block-1 center" onClick={() => this.input('=')}>
            =
          </div>
          <div className="block block-2 right" onClick={() => this.input('+')}>
            +
          </div>
        </div>
      </div>
    );
  }
}