@ttk/component/es/calculator/index.js

ttk组件库

import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass, e as _assertThisInitialized } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import { Button } from 'antd';
import { math } from '@ttk/utils';
import '../_commonjsHelpers-471920d6.js';

function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var replacement = [{
  reg: /\*/g,
  dest: '×'
}, {
  reg: /\//g,
  dest: '÷'
}];

var ResultPanel = /*#__PURE__*/function (_PureComponent) {
  _inherits(ResultPanel, _PureComponent);

  var _super = _createSuper$2(ResultPanel);

  function ResultPanel() {
    _classCallCheck(this, ResultPanel);

    return _super.call(this);
  }

  _createClass(ResultPanel, [{
    key: "render",
    value: function render() {
      var exp = this.props.exp || 0;
      replacement.forEach(function (item) {
        exp.cur = exp.cur.replace(item.reg, item.dest);
        exp.last = exp.last.replace(item.reg, item.dest);
      });
      return /*#__PURE__*/React__default.createElement("div", {
        className: "result-panel"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "last-row"
      }, exp.last), /*#__PURE__*/React__default.createElement("div", {
        className: "cur-row"
      }, exp.cur));
    }
  }]);

  return ResultPanel;
}(PureComponent);

function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var ButtonPanel = /*#__PURE__*/function (_PureComponent) {
  _inherits(ButtonPanel, _PureComponent);

  var _super = _createSuper$1(ButtonPanel);

  function ButtonPanel() {
    var _this;

    _classCallCheck(this, ButtonPanel);

    _this = _super.call(this);
    _this.keyMapping = {};
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ButtonPanel, [{
    key: "onClick",
    value: function onClick(event) {
      var target = event.target;
      target.classList.remove('clicked');
      setTimeout(function () {
        target.classList.add('clicked');
      }, 0);
      this.props.onClick(target.dataset.value);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var dom = findDOMNode(this);
      var buttons = dom.querySelectorAll('button');
      buttons = [].slice.call(buttons);
      buttons.forEach(function (button) {
        var list = button.dataset.code ? button.dataset.code.split('||') : [];
        list.forEach(function (item) {
          _this2.keyMapping[item] = button;
        });
      });

      window.onkeydown = function (event) {
        var button;
        var key = (event.shiftKey ? 'shift+' : '') + event.keyCode || event.which;

        if (event.keyCode == 13 || event.keyCode == 108) {
          _this2.props.confirm();
        } else {
          if (button = _this2.keyMapping[key]) {
            button.click();
            event.stopPropagation();
            event.preventDefault();
          }
        }
      };
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React__default.createElement("div", {
        className: "button-panel row"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "s3 column"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "s1 row"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "67",
        "data-value": "c",
        onClick: this.onClick
      }, "C"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "8",
        "data-value": "back",
        onClick: this.onClick
      }, "\u2190"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "191||111",
        "data-value": "/",
        onClick: this.onClick
      }, "\xF7")), /*#__PURE__*/React__default.createElement("div", {
        className: "s1 row"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "55||103",
        "data-value": "7",
        onClick: this.onClick
      }, "7"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "56||104",
        "data-value": "8",
        onClick: this.onClick
      }, "8"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "57||105",
        "data-value": "9",
        onClick: this.onClick
      }, "9")), /*#__PURE__*/React__default.createElement("div", {
        className: "s1 row"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "52||100",
        "data-value": "4",
        onClick: this.onClick
      }, "4"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "53||101",
        "data-value": "5",
        onClick: this.onClick
      }, "5"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "54||102",
        "data-value": "6",
        onClick: this.onClick
      }, "6")), /*#__PURE__*/React__default.createElement("div", {
        className: "s1 row"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "49||97",
        "data-value": "1",
        onClick: this.onClick
      }, "1"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "50||98",
        "data-value": "2",
        onClick: this.onClick
      }, "2"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "51||99",
        "data-value": "3",
        onClick: this.onClick
      }, "3")), /*#__PURE__*/React__default.createElement("div", {
        className: "s1 row"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s2",
        "data-code": "48||96",
        "data-value": "0",
        onClick: this.onClick
      }, "0"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "190||110",
        "data-value": ".",
        onClick: this.onClick
      }, "."))), /*#__PURE__*/React__default.createElement("div", {
        className: "s1 column"
      }, /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "shift+56||106",
        "data-value": "*",
        onClick: this.onClick
      }, "\xD7"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "189||109",
        "data-value": "-",
        onClick: this.onClick
      }, "-"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s1",
        "data-code": "187||107",
        "data-value": "+",
        onClick: this.onClick
      }, "+"), /*#__PURE__*/React__default.createElement("button", {
        className: "button s2 button-equal",
        "data-code": "13||108",
        "data-value": "=",
        onClick: this.onClick
      }, "=")));
    }
  }]);

  return ButtonPanel;
}(PureComponent);

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var Calculator = /*#__PURE__*/function (_PureComponent) {
  _inherits(Calculator, _PureComponent);

  var _super = _createSuper(Calculator);

  function Calculator() {
    var _this;

    _classCallCheck(this, Calculator);

    _this = _super.call(this);

    _this.eval = function (body) {
      return new Function("return " + body)();
    };

    _this.mathRound = function (num) {
      var digit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
      return math(math(num, 4), digit);
    };

    _this.confirm = function () {
      _this.props.closeModal();

      if (!_this.state.last) {
        try {
          _this.state.cur = _this.mathRound(_this.eval(_this.state.cur), 2) + '';
        } catch (e) {
          _this.state.cur = 0;
        }
      }

      _this.props.callBack(_this.state.cur ? _this.state.cur : 0);
    };

    _this.cancel = function () {
      _this.props.closeModal();
    };

    _this.state = {
      last: '',
      cur: '0'
    };
    _this.onButtonClick = _this.onButtonClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Calculator, [{
    key: "onButtonClick",
    value: function onButtonClick(type) {
      var cur;
      var lastLetter;

      switch (type) {
        case 'c':
          this.setState({
            last: '',
            cur: '0'
          });
          break;

        case 'back':
          this.setState({
            cur: this.state.cur === '0' ? this.state.cur : this.state.cur.slice(0, -1) || '0'
          });
          break;

        case '=':
          try {
            this.setState({
              last: this.state.cur + '=',
              cur: this.mathRound(this.eval(this.state.cur), 2) + ''
            });
          } catch (e) {
            this.setState({
              last: this.state.cur + '=',
              cur: 'NaN'
            });
          }

          break;

        case '+':
        case '-':
        case '*':
        case '/':
          cur = this.state.cur;
          lastLetter = cur.slice(-1);
          if (lastLetter === '+' || lastLetter === '-' || lastLetter === '*' || lastLetter === '/') this.setState({
            cur: cur.slice(0, -1) + type
          });else this.setState({
            cur: this.state.cur + type
          });
          break;

        case '.':
          cur = this.state.cur;
          lastLetter = cur.slice(-1);

          if (lastLetter !== '.') {
            this.setState({
              cur: this.state.cur + type
            });
          }

          break;

        default:
          this.setState({
            cur: this.state.cur === '0' ? type : this.state.cur + type
          });
          break;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var exp = {
        cur: this.state.cur,
        last: this.state.last
      };
      return /*#__PURE__*/React__default.createElement("div", {
        className: "react-calculator"
      }, /*#__PURE__*/React__default.createElement(ResultPanel, {
        exp: exp
      }), /*#__PURE__*/React__default.createElement(ButtonPanel, {
        onClick: this.onButtonClick,
        confirm: this.confirm
      }), /*#__PURE__*/React__default.createElement("div", {
        style: {
          width: '100%',
          textAlign: 'right',
          paddingTop: '12px',
          paddingRight: '12px',
          paddingBottom: '12px',
          borderTop: '1px solid #ddd'
        }
      }, /*#__PURE__*/React__default.createElement(Button, {
        className: "button",
        style: {
          marginRight: '8px',
          fontSize: '13px',
          padding: '0px 15px'
        },
        type: "primary",
        onClick: this.confirm
      }, "\u786E\u5B9A")));
    }
  }]);

  return Calculator;
}(PureComponent);

export { Calculator as default };