tplus-pos/dist/components/modalWraperPosTouch/textBox/Form.js

pos module

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _Form5 = require('tinper-bee/dist/Form');

var _Form6 = _interopRequireDefault(_Form5);

var _Label3 = require('tinper-bee/dist/Label');

var _Label4 = _interopRequireDefault(_Label3);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class;

require('tinper-bee/dist/Form/index.css');

require('tinper-bee/dist/Label/index.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mutantsMicrofx = require('mutants-microfx');

var _tplusComponentsTouch = require('tplus-components-touch');

var _mutantsUtil = require('mutants-util');

var _beeDatepicker = require('bee-datepicker');

var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _tools = require('../../../util/tools');

var _tools2 = _interopRequireDefault(_tools);

var _config = require('../../../config');

var _config2 = _interopRequireDefault(_config);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var commonDateFormat = 'YYYY-MM-DD';
var minDate = _config2.default.minDate;
var FormItem = _Form6.default.FormItem;

var ModalForm = (0, _mutantsMicrofx.observer)(_class = function (_React$Component) {
  (0, _inherits3.default)(ModalForm, _React$Component);

  // curFieldModel ：键盘要改变的数据
  // input :当前键盘绑定的dom

  function ModalForm(props) {
    (0, _classCallCheck3.default)(this, ModalForm);

    var _this = (0, _possibleConstructorReturn3.default)(this, (ModalForm.__proto__ || (0, _getPrototypeOf2.default)(ModalForm)).call(this, props));

    _this.textBoxChange = function (value, curFieldModel) {
      _this.props.changeValue(_this.curFieldModel, value);
    };

    _this.triggerChange = function (value, fieldModel) {
      var changeValue = _this.props.changeValue;

      changeValue && changeValue(fieldModel, value);
    };

    _this.triggerOk = function () {
      var ok = _this.props.ok;

      ok && ok();
    };

    _this.onKeyDown = function (e, el) {
      if (!e) return;
      var input = e.target;
      var key = e.keyCode;
      if (key === 13) {
        var inputs = $.find_element('input');
        if (!inputs) return;
        var length = inputs.length;
        if (length == 0) return;
        var index = inputs && inputs.findIndex(function (v) {
          return v == input;
        });
        if (index == length - 1) {
          _this.triggerOk();
          setTimeout(function () {
            input && input != document.activeElement && input.focus();
          }, 0);
        } else {
          input = inputs[index + 1];
          input && input != document.activeElement && input.focus();
        }
      }
    };

    _this.checkoutVal = function (val) {
      if (_this.curFieldModel.ControlType === 'NumTextBox') {
        if ('maxLength' in _this.curFieldModel) {
          if (_this.curFieldModel.maxLength < val.length) return false;
        }
        var arr = val.split('.');
        if (arr.length > 2) {
          return false;
        }
        if ('precisionLength' in _this.curFieldModel) {
          if (arr.length == 2 && arr[1].length > _this.curFieldModel.precisionLength) {
            return false;
          }
        }
      }
      return true;
    };

    _this.disabledDate = function (current) {
      return current && current.valueOf() < minDate.getTime();
    };

    var _ref = _mutantsUtil.platform || {},
        isHorizontalPad = _ref.isHorizontalPad,
        isHorizontalSunMi = _ref.isHorizontalSunMi;

    _this.isHorizontalPad = !!isHorizontalPad;
    _this.isHorizontalSunMi = !!isHorizontalSunMi;
    return _this;
  }

  (0, _createClass3.default)(ModalForm, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      if (this.isHorizontalPad) return;
      setTimeout(function () {
        var modal = document.getElementsByClassName('modal-form-content')[0];
        if (!modal) return;
        var inputs = modal.getElementsByTagName('input');
        var input = inputs && [].concat((0, _toConsumableArray3.default)(inputs)).filter(function (v) {
          return v.disabled == false && v.style.display != 'none';
        });
        input = input && input.length > 0 ? input[0] : null;
        if (_this2.isHorizontalSunMi) {
          if (input) setTimeout(function () {
            input.focus();
          }, 250);
        } else {
          if (input) input.focus();
        }
      }, 0);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var getFieldProps = this.props.form.getFieldProps;
      var modalType = this.props.modalType;

      var formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      };
      var getRuleConfig = function getRuleConfig(el) {
        return {
          rules: [{
            required: el.IsRequired, message: '\u8BF7\u5F55\u5165' + el.Title
          }]
        };
      };
      var data = this.props.data;


      return _react2.default.createElement(
        _Form6.default,
        (0, _extends3.default)({ ref: function ref(dom) {
            _this3.container = dom;
          } }, formItemLayout, { className: modalType === 'small' ? 'u-form-around' : '' }),
        _react2.default.createElement('input', { type: 'text', style: { display: 'none' } }),
        data.map(function (el, index) {
          var styles = index == data.length - 1 ? { inputClassName: _tplusComponentsTouch.hotKey.hotKeyNotFilter('form-input') } : {};
          if (el.ControlType === 'TextBox' || el.ControlType === 'NumTextBox' || el.ControlType === 'PwdTextBox') {
            var type = el.ControlType === 'PwdTextBox' ? 'password' : 'text';
            return _react2.default.createElement(
              FormItem,
              {
                label: el.Title,
                hasFeedback: true,
                key: index,
                style: el.SingleShow ? {
                  'height': '35px',
                  'minHeight': '35px'
                } : {}
              },
              _react2.default.createElement(_tplusComponentsTouch.Input, (0, _extends3.default)({}, styles, {
                State: el.State,
                Label: el.Label,
                Title: el.Title,
                Value: el.Value,
                IsScan: !!el.IsScan,
                IsReturn: el.isReturn,
                SingleShow: el.SingleShow,
                ControlType: el.ControlType,
                disabled: el.disabled,
                Style: el.Style,
                placeholder: el.placeholder,
                type: type,
                type1: el.type,
                maxLength: el.maxLength,
                precisionLength: el.precisionLength,
                onChange: function onChange(e) {
                  if (el.ControlType === 'NumTextBox') {
                    _this3.textBoxChange(e, el);
                  } else {
                    _this3.textBoxChange(e.target.value, el);
                  }
                },
                handleChange: function handleChange(value) {
                  return _this3.triggerChange(value, el);
                },
                handleOk: _this3.triggerOk,
                max: el.max,
                min: el.min,
                onFocus: function onFocus(e) {
                  _this3.curFieldModel = el;
                  if (el.ControlType === 'NumTextBox') {
                    _this3.input = e;
                    _tplusComponentsTouch.Keyboard.close();
                    return;
                  }
                  _this3.input = e.target;
                  _tplusComponentsTouch.Keyboard.open(function (v) {
                    var value = _tplusComponentsTouch.Keyboard.getNewValue(_this3.input, _this3.input.value, v);
                    _this3.textBoxChange(value);
                  })();
                },
                onKeyDown: function onKeyDown(e) {
                  return _this3.onKeyDown(e, el);
                }
              }))
            );
          } else if (el.ControlType === 'TextArea') {
            styles = index == data.length - 1 ? { className: _tplusComponentsTouch.hotKey.hotKeyNotFilter('form-input') } : {};
            return _react2.default.createElement(
              FormItem,
              {
                label: el.Title,
                hasFeedback: true,
                key: index
              },
              el.Title ? _react2.default.createElement(
                _Label4.default,
                { style: { 'verticalAlign': 'top' } },
                el.Title,
                ':'
              ) : null,
              _react2.default.createElement('textarea', (0, _extends3.default)({}, styles, {
                style: el.Title ? { width: '240px' } : { width: '368px' },
                maxLength: '50',
                rows: '2',
                value: el.Value,
                onChange: function onChange(e) {
                  _this3.textBoxChange(e.target.value, el);
                },
                onFocus: function onFocus(e) {
                  _this3.input = e.target;
                  _this3.curFieldModel = el;
                  _tplusComponentsTouch.Keyboard.open(function (v) {
                    var value = _tplusComponentsTouch.Keyboard.getNewValue(_this3.input, _this3.input.value, v);
                    _this3.textBoxChange(value);
                  })();
                },
                onKeyDown: function onKeyDown(e) {
                  return _this3.onKeyDown(e, el);
                }
              }))
            );
          } else if (el.ControlType === 'DatePicker') {
            return _react2.default.createElement(
              FormItem,
              {
                label: el.Title,
                hasFeedback: true,
                key: index
              },
              _react2.default.createElement(
                'div',
                { className: 'input-wrapper-2' },
                _react2.default.createElement(
                  _Label4.default,
                  { style: { 'lineHeight': '50px' } },
                  el.Title,
                  ':'
                ),
                _react2.default.createElement(_beeDatepicker2.default, (0, _extends3.default)({
                  renderIcon: function renderIcon() {
                    return _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'riqi', className: 'riqi' });
                  },
                  format: commonDateFormat,
                  placeholder: el.placeholder,
                  disabledDate: _this3.disabledDate,
                  showClose: false,
                  keyboardInput: false,
                  enterKeyDown: false,
                  outInputFocus: function outInputFocus(e) {
                    var input = e && e.target;
                    input.select();
                    _tplusComponentsTouch.Keyboard.close();
                  },
                  onKeyDown: function onKeyDown(e) {
                    return _this3.onKeyDown(e, el);
                  }
                }, getFieldProps(el.FieldName, getRuleConfig(el))))
              )
            );
          }
        })
      );
    }
  }]);
  return ModalForm;
}(_react2.default.Component)) || _class;
//输入datepicker控制；


var handdleDate = function handdleDate(value) {
  if (_tools2.default.isNull(value)) {
    value = "";
    return value;
  }

  if (!(value instanceof _moment2.default)) {
    value = (0, _moment2.default)(value);
  }

  if (value && value.valueOf() < minDate.getTime()) {
    value = "";
  }
  return value;
};
var WrappedModalForm = _Form6.default.createForm({
  name: 'modalForm',
  mapPropsToFields: function mapPropsToFields(props) {
    var obj = {};
    props.data.forEach(function (el) {
      var value = el.Value;
      if (el.ControlType == 'DatePicker') {
        value = handdleDate(value);
      }
      obj[el.FieldName] = _Form6.default.createFormField({
        value: value
      });
    });
    return obj;
  },
  onFieldsChange: function onFieldsChange(props, fields) {
    var _loop = function _loop(key) {
      props.data.forEach(function (el) {
        if (el.FieldName !== key) return;
        var fieldValue = fields[key].value;
        if (el.ControlType == 'DatePicker') {
          var oldValue = el.Value;
          if (!oldValue) oldValue = new Date(1899, 0, 1);
          if (!fieldValue) {
            fieldValue = new Date(1899, 0, 1);
          } else {
            fieldValue = new Date(fieldValue.format('YYYY/MM/DD'));
          }
          if ((0, _moment2.default)(fieldValue).format('YYYY-MM-DD') === (0, _moment2.default)(oldValue).format('YYYY-MM-DD')) {
            return;
          }
        }
        props.changeValue(el, fieldValue);
      });
    };

    for (var key in fields) {
      _loop(key);
    }
  }
})(ModalForm);
exports.default = WrappedModalForm;
//# sourceMappingURL=Form.js.map