mdf-formula-designer/lib/RightContent.js

mdf formula designer

"use strict";

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

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

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

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 _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

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

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

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

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

var _reactDom = require("react-dom");

var _redux = require("redux");

var _reactRedux = require("react-redux");

var _antd = require("antd");

var _label = _interopRequireDefault(require("@mdf/metaui-web/lib/components/basic/label"));

var formulaActions = _interopRequireWildcard(require("./redux/formula"));

var TextArea = _antd.Input.TextArea;

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

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

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

      var dataSource = this.props.dataSource;
      if (!dataSource || !dataSource.length) return null;
      var items = [];
      dataSource.forEach(function (item) {
        var key = item.key,
            value = item.value;
        items.push(_react["default"].createElement(_antd.Tag, {
          key: key,
          onClick: function onClick() {
            return _this.props.onClick(key);
          }
        }, value));
      });
      return _react["default"].createElement("div", null, items);
    }
  }]);
  return Operator;
}(_react.Component);

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

  function RightContent() {
    var _getPrototypeOf2;

    var _this2;

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

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

    _this2 = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(RightContent)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onCaptionChange", function (e) {
      _this2.props.formulaActions.changeCaption(e.target.value);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChange", function (e) {
      _this2.props.formulaActions.change(e.target.value, e.target.selectionStart);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onFocus", function () {
      setTimeout(function () {
        var input = (0, _reactDom.findDOMNode)(_this2.input);

        _this2.props.formulaActions.focus(input.selectionStart);
      }, 0);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleOperatorSelect", function (key) {
      _this2.props.formulaActions.selectOperator(key);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "getFormatControl", function () {
      var _this2$props$formula = _this2.props.formula,
          cControlType = _this2$props$formula.cControlType,
          cFormatData = _this2$props$formula.cFormatData;
      var controlType = cControlType && cControlType.trim().toLocaleLowerCase();
      if (controlType == 'input') return null;

      if (controlType == 'datepicker') {
        return _react["default"].createElement(_antd.Input, {
          placeholder: "\u4F8B\uFF1AYYYY-MM-DD HH:mm:ss",
          value: cFormatData,
          onChange: _this2.onFormatChange
        });
      }

      if (controlType == 'inputnumber') {
        var monovalentdecimal = {},
            amountofdecimal = {},
            quantitydecimal = {};
        monovalentdecimal.decimal = "<%option.monovalentdecimal%>";
        amountofdecimal.decimal = "<%option.amountofdecimal%>";
        quantitydecimal.decimal = "<%option.quantitydecimal%>";
        return _react["default"].createElement(_antd.Select, {
          value: cFormatData,
          onChange: _this2.onFormatChangeForPrecision,
          allowClear: true
        }, _react["default"].createElement(_antd.Select.Option, {
          value: JSON.stringify(monovalentdecimal)
        }, "\u5355\u4EF7\u7CBE\u5EA6"), _react["default"].createElement(_antd.Select.Option, {
          value: JSON.stringify(amountofdecimal)
        }, "\u91D1\u989D\u7CBE\u5EA6"), _react["default"].createElement(_antd.Select.Option, {
          value: JSON.stringify(quantitydecimal)
        }, "\u6570\u91CF\u7CBE\u5EA6"));
      }

      return null;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onFormatChange", function (e) {
      _this2.props.formulaActions.setCommonData({
        'cFormatData': e && e.target ? e.target.value : e
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onFormatChangeForPrecision", function (e) {
      _this2.props.formulaActions.setCommonData({
        'cFormatData': e && e.target ? e.target.value : e,
        'precision': true
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onFieldTypeChange", function (value) {
      _this2.props.formulaActions.setCommonData({
        'cControlType': value,
        'cFormatData': null,
        'iNumPoint': 0
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onNumPointChange", function (value) {
      _this2.props.formulaActions.setCommonData({
        'iNumPoint': value
      });
    });
    return _this2;
  }

  (0, _createClass2["default"])(RightContent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.formulaActions.initOperator();
    }
  }, {
    key: "getControl",
    value: function getControl(control, caption, required) {
      var title = required ? _react["default"].createElement("label", null, _react["default"].createElement(_antd.Icon, {
        type: "star"
      }), caption) : _react["default"].createElement("label", null, caption);
      return _react["default"].createElement(_label["default"], {
        control: control,
        title: title
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props$formula = this.props.formula,
          operatorData = _this$props$formula.operatorData,
          caption = _this$props$formula.caption,
          expression = _this$props$formula.expression,
          errorInfo = _this$props$formula.errorInfo,
          cControlType = _this$props$formula.cControlType,
          iNumPoint = _this$props$formula.iNumPoint,
          cFormatData = _this$props$formula.cFormatData;

      var columnNameCom = _react["default"].createElement(_antd.Input, {
        value: caption,
        onChange: this.onCaptionChange
      });

      var operatorCom = _react["default"].createElement(Operator, {
        dataSource: operatorData,
        onClick: this.handleOperatorSelect
      });

      var expressionCom = _react["default"].createElement(TextArea, {
        ref: function ref(node) {
          return _this3.input = node;
        },
        onFocus: this.onFocus,
        value: expression,
        onChange: this.onChange
      });

      var controlType = cControlType && cControlType.trim().toLocaleLowerCase();

      var fieldTyepControl = _react["default"].createElement(_antd.Select, {
        value: controlType,
        onChange: this.onFieldTypeChange
      }, _react["default"].createElement(_antd.Select.Option, {
        value: "input"
      }, "\u6587\u672C"), _react["default"].createElement(_antd.Select.Option, {
        value: "inputnumber"
      }, "\u6570\u503C"), _react["default"].createElement(_antd.Select.Option, {
        value: "datepicker"
      }, "\u65E5\u671F"));

      var formatControl = this.getFormatControl();

      var numPointControl = _react["default"].createElement(_antd.InputNumber, {
        value: iNumPoint,
        disabled: cFormatData ? true : false,
        onChange: this.onNumPointChange
      });

      return _react["default"].createElement("div", null, this.getControl(columnNameCom, '栏目名称', true), this.getControl(operatorCom, '运算符'), _react["default"].createElement("div", {
        className: "formula-editing"
      }, this.getControl(expressionCom, '编辑区', true), _react["default"].createElement("label", {
        className: "error"
      }, errorInfo)), this.getControl(fieldTyepControl, '数据类型', true), formatControl ? this.getControl(formatControl, '格式化', false) : null, controlType == 'inputnumber' ? this.getControl(numPointControl, '精度', false) : null);
    }
  }]);
  return RightContent;
}(_react.Component);

function mapStateToProps(state) {
  return {
    formula: state.formula.toJS()
  };
}

function mapDispatchToProps(dispatch) {
  return {
    formulaActions: (0, _redux.bindActionCreators)(formulaActions, dispatch)
  };
}

var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(RightContent);

exports["default"] = _default;
//# sourceMappingURL=RightContent.js.map