ming-demo3/lib/components/common/InputButtonPanel.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InputButtonPanelExample = exports["default"] = exports.InnerInput = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf4 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _omit2 = _interopRequireDefault(require("lodash/omit"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

function isEmpty(v) {
  return v === '0' || !v;
}

var InnerInput = function (_React$Component) {
  (0, _inherits2["default"])(InnerInput, _React$Component);

  function InnerInput() {
    (0, _classCallCheck2["default"])(this, InnerInput);
    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf4["default"])(InnerInput).apply(this, arguments));
  }

  return InnerInput;
}(_react["default"].Component);

exports.InnerInput = InnerInput;

var InnerButton = function (_React$Component2) {
  (0, _inherits2["default"])(InnerButton, _React$Component2);

  function InnerButton() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2["default"])(this, InnerButton);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf4["default"])(InnerButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseDown", function (event) {
      var type = _this.props.type;
      event.preventDefault();

      _this.props.onMouseDown(type);
    });
    return _this;
  }

  (0, _createClass2["default"])(InnerButton, [{
    key: "render",
    value: function render() {
      return _react["default"].createElement("button", (0, _extends2["default"])({}, (0, _omit2["default"])(this.props, ['children', 'onMouseDown', 'type']), {
        onMouseDown: this.onMouseDown,
        tabIndex: "-1"
      }), this.props.children);
    }
  }]);
  return InnerButton;
}(_react["default"].Component);

(0, _defineProperty2["default"])(InnerButton, "propTypes", {
  type: _propTypes["default"].string,
  onMouseDown: _propTypes["default"].func,
  className: _propTypes["default"].string
});
(0, _defineProperty2["default"])(InnerButton, "defaultProps", {
  onMouseDown: function onMouseDown(value) {}
});

var InputButtonPanel = function (_Component) {
  (0, _inherits2["default"])(InputButtonPanel, _Component);

  function InputButtonPanel() {
    var _getPrototypeOf3;

    var _this2;

    (0, _classCallCheck2["default"])(this, InputButtonPanel);

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this2 = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf3 = (0, _getPrototypeOf4["default"])(InputButtonPanel)).call.apply(_getPrototypeOf3, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getResultString", function () {
      var originStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
      var str = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';

      if (str === 'back') {
        str = '';
        if (start === end) start -= 1;
      }

      return originStr.replace(new RegExp('(.{' + start + '}).{' + (end - start) + '}'), '$1' + str);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleOkDown", function () {
      var _this2$props = _this2.props,
          onOk = _this2$props.onOk,
          value = _this2$props.value;
      onOk(value);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleMouseDown", function (type) {
      var activeEl = document.activeElement;
      if (['INPUT', 'TEXTAREA'].indexOf(activeEl.tagName) < 0) return;
      var value = activeEl.value || '';
      var selectionStart = activeEl.selectionStart,
          selectionEnd = activeEl.selectionEnd;

      var result = _this2.getResultString(value, selectionStart, selectionEnd, type);

      var caretPosition = result.length - (value.length - selectionEnd);
      var _this2$props2 = _this2.props,
          onChange = _this2$props2.onChange,
          onOk = _this2$props2.onOk,
          mode = _this2$props2.mode;

      switch (type) {
        case 'clear':
          onChange('');
          break;

        case 'back':
          onChange(result);
          break;

        case '.':
          if (value.indexOf('.') < 0) onChange(result);
          break;

        case '00':
          onChange(mode !== 'text' && isEmpty(value) ? 0 : result);
          break;

        case 'sure':
          onOk(value);
          break;

        default:
          onChange(mode !== 'text' && isEmpty(value) ? type : result);
          break;
      }

      setTimeout(function () {
        var currentV = activeEl.value;

        if (typeof currentV !== 'undefined' && currentV != result) {
          activeEl.setSelectionRange(99999, 99999);
        } else {
          activeEl.setSelectionRange(caretPosition, caretPosition);
        }
      }, 0);
    });
    return _this2;
  }

  (0, _createClass2["default"])(InputButtonPanel, [{
    key: "render",
    value: function render() {
      var _this3 = this;

      var showOk = this.props.showOk;
      return _react["default"].createElement("div", null, _react["default"].createElement("div", {
        ref: function ref(wrap) {
          return _this3.wrap = wrap;
        },
        className: "InputButtonPanelWrap clearfix",
        onMouseDown: function onMouseDown(event) {
          event.preventDefault();
        }
      }, _react["default"].createElement("div", {
        className: "num"
      }, _react["default"].createElement("div", {
        className: "InputButtonPanel-row"
      }, _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "1"
      }, "1")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "2"
      }, "2")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "3"
      }, "3"))), _react["default"].createElement("div", {
        className: "InputButtonPanel-row"
      }, _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "4"
      }, "4")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "5"
      }, "5")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "6"
      }, "6"))), _react["default"].createElement("div", {
        className: "InputButtonPanel-row"
      }, _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "7"
      }, "7")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "8"
      }, "8")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "9"
      }, "9"))), _react["default"].createElement("div", {
        className: "InputButtonPanel-row"
      }, _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "0"
      }, "0")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "00"
      }, "00")), _react["default"].createElement("div", {
        className: "InputButtonPanel-cell"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleMouseDown,
        type: "."
      }, ".")))), _react["default"].createElement("div", {
        className: (0, _classnames["default"])('del', {
          'InputButtonPanel-hasSure': showOk
        })
      }, _react["default"].createElement("div", null, _react["default"].createElement(InnerButton, {
        className: "InputButtonPanel-button-back",
        onMouseDown: this.handleMouseDown,
        type: "back"
      }, _react["default"].createElement(_SvgIcon["default"], {
        type: "shanchu1"
      }))), _react["default"].createElement("div", null, _react["default"].createElement(InnerButton, {
        className: "InputButtonPanel-button-clear",
        onMouseDown: this.handleMouseDown,
        type: "clear"
      }, _react["default"].createElement(_SvgIcon["default"], {
        type: "quanbushanchu"
      }))), showOk && _react["default"].createElement("div", {
        className: "InputButtonPanel-button-sure"
      }, _react["default"].createElement(InnerButton, {
        onMouseDown: this.handleOkDown,
        type: "sure"
      }, "\u786E\u5B9A")))));
    }
  }]);
  return InputButtonPanel;
}(_react.Component);

exports["default"] = InputButtonPanel;
(0, _defineProperty2["default"])(InputButtonPanel, "propTypes", {
  onChange: _propTypes["default"].func,
  showOk: _propTypes["default"].bool,
  onOk: _propTypes["default"].func
});
(0, _defineProperty2["default"])(InputButtonPanel, "defaultProps", {
  onChange: function onChange(value) {
    console.log(value);
  },
  showOk: false,
  onOk: function onOk(value) {
    console.log(value);
  }
});
InputButtonPanel.InnerInput = InnerInput;

var InputButtonPanelExample = function (_Component2) {
  (0, _inherits2["default"])(InputButtonPanelExample, _Component2);

  function InputButtonPanelExample(props) {
    var _this4;

    (0, _classCallCheck2["default"])(this, InputButtonPanelExample);
    _this4 = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf4["default"])(InputButtonPanelExample).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this4), "onChange", function (v) {
      _this4.setState({
        value: v
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this4), "handleChange", function (e) {
      var value = e.target.value;

      _this4.setState({
        value: value
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this4), "onOk", function (v) {
      console.log(v);
    });
    _this4.state = {
      value: 0
    };
    return _this4;
  }

  (0, _createClass2["default"])(InputButtonPanelExample, [{
    key: "render",
    value: function render() {
      var value = this.state.value;
      return _react["default"].createElement("div", null, _react["default"].createElement(InputButtonPanel, {
        value: this.props.value,
        onChange: this.onChange,
        showOk: true,
        onOk: this.onOk
      }, _react["default"].createElement("div", null, _react["default"].createElement("span", null, "\u4F7F\u7528"), " ", _react["default"].createElement(InnerInput, null), _react["default"].createElement("span", null, "\u79EF\u5206"), " ", _react["default"].createElement("span", null, "\u62B5\u6263"), _react["default"].createElement("span", null, value * 10)), _react["default"].createElement("div", null, _react["default"].createElement("span", null, "\u5F53\u524D\u79EF\u5206\uFF1A"), _react["default"].createElement("span", null, value))));
    }
  }]);
  return InputButtonPanelExample;
}(_react.Component);

exports.InputButtonPanelExample = InputButtonPanelExample;
//# sourceMappingURL=InputButtonPanel.js.map