choerodon-ui/pro/es/intl-field/IntlField.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { action, observable, computed, isArrayLike } from 'mobx';
import classNames from 'classnames';
import { ProgressType } from '../../../es/progress/enum';
import KeyCode from '../../../es/_util/KeyCode';
import debounce from 'lodash/debounce';
import isNil from 'lodash/isNil';
import TextArea from '../text-area/TextArea';
import { TextField } from '../text-field/TextField';
import { ResizeType } from '../text-area/enum';
import Icon from '../icon';
import IntlList from './IntlList';
import { IntlType } from './enum';
import Modal from '../modal/Modal';
import localeContext, { $l } from '../locale-context';
import Progress from '../progress';
import { Size, Tooltip as TextTooltip } from '../core/enum';
import message from '../message';
import exception from '../_util/exception';
import autobind from '../_util/autobind';
import { stopEvent } from '../_util/EventManager';
import isSame from '../_util/isSame';
import isEmpty from '../_util/isEmpty';
import { show } from '../tooltip/singleton';
import isOverflow from '../overflow-tip/util';

var IntlField = /*#__PURE__*/function (_TextArea) {
  _inherits(IntlField, _TextArea);

  var _super = _createSuper(IntlField);

  function IntlField(props, context) {
    var _this;

    _classCallCheck(this, IntlField);

    _this = _super.call(this, props, context);
    _this.openModal = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _this$props, modalProps, maxLengths, type, rows, cols, resize, _assertThisInitialize, record, lang, name, element, maxLength, supports, maxLengthList;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (_this.modal) {
                _context.next = 24;
                break;
              }

              _this$props = _this.props, modalProps = _this$props.modalProps, maxLengths = _this$props.maxLengths, type = _this$props.type, rows = _this$props.rows, cols = _this$props.cols, resize = _this$props.resize;
              _assertThisInitialize = _assertThisInitialized(_this), record = _assertThisInitialize.record, lang = _assertThisInitialize.lang, name = _assertThisInitialize.name, element = _assertThisInitialize.element;
              maxLength = _this.getProp('maxLength');
              supports = localeContext.supports;
              maxLengthList = {};
              Object.keys(supports).map(function (key) {
                maxLengthList[key] = maxLengths && (key !== lang || isNil(maxLength)) ? maxLengths[key] || maxLength : maxLength;
                return null;
              });

              if (!(record && name)) {
                _context.next = 23;
                break;
              }

              _this.setLoading(true);

              _context.prev = 9;

              if (element && !isSame(_this.getValue(), element.value)) {
                _this.syncValueOnBlur(element.value);
              }

              _context.next = 13;
              return record.tls(name);

            case 13:
              _context.next = 19;
              break;

            case 15:
              _context.prev = 15;
              _context.t0 = _context["catch"](9);
              message.error(exception(_context.t0));
              return _context.abrupt("return");

            case 19:
              _context.prev = 19;

              _this.setLoading(false);

              return _context.finish(19);

            case 22:
              _this.storeLocales(record, name);

            case 23:
              _this.modal = Modal.open(_objectSpread({
                title: $l('IntlField', 'modal_title'),
                children: /*#__PURE__*/React.createElement(IntlList, {
                  readOnly: _this.readOnly,
                  disabled: _this.disabled,
                  record: record,
                  name: name,
                  lang: lang,
                  maxLengths: maxLengthList,
                  type: type,
                  rows: rows,
                  cols: cols,
                  resize: resize,
                  getConfig: _this.getContextConfig
                }),
                onClose: _this.handleIntlListClose,
                onOk: _this.handleIntlListOk,
                onCancel: _this.handleIntlListCancel,
                okButton: !_this.disabled && !_this.readOnly,
                destroyOnClose: true
              }, modalProps));

            case 24:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[9, 15, 19, 22]]);
    }));
    _this.handleIntlListClose = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              delete _this.modal;

              if (!_this.props.displayOutput) {
                _this.focus();
              }

            case 2:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
    var suffixCls = _this.props.displayOutput ? 'output' : _this.props.type !== IntlType.multipleLine ? 'input' : 'textarea';
    _this.prefixCls = _this.getContextProPrefixCls(suffixCls, props.prefixCls);
    return _this;
  }

  _createClass(IntlField, [{
    key: "range",
    get: function get() {
      return false;
    }
  }, {
    key: "readOnly",
    get: function get() {
      if (this.props.displayOutput) {
        return true;
      }

      return this.isReadOnly();
    }
  }, {
    key: "resize",
    get: function get() {
      if (this.props.displayOutput) {
        return ResizeType.none;
      }

      return _get(_getPrototypeOf(IntlField.prototype), "resize", this);
    }
  }, {
    key: "autoSize",
    get: function get() {
      if (this.props.displayOutput) {
        return false;
      }

      return _get(_getPrototypeOf(IntlField.prototype), "autoSize", this);
    }
  }, {
    key: "border",
    get: function get() {
      if (this.props.displayOutput) {
        return false;
      }

      return _get(_getPrototypeOf(IntlField.prototype), "border", this);
    }
  }, {
    key: "saveSuffixRef",
    value: function saveSuffixRef(node) {
      this.suffixRef = node;
    }
  }, {
    key: "getEditorTextInfo",
    value: function getEditorTextInfo(rangeTarget) {
      var superText = _get(_getPrototypeOf(IntlField.prototype), "getEditorTextInfo", this).call(this, rangeTarget);

      return this.props.displayOutput ? _objectSpread(_objectSpread({}, superText), {}, {
        placeholder: undefined
      }) : superText;
    }
  }, {
    key: "getPlaceholders",
    value: function getPlaceholders() {
      if (this.props.displayOutput) {
        return [];
      }

      return _get(_getPrototypeOf(IntlField.prototype), "getPlaceholders", this).call(this);
    }
  }, {
    key: "isEditable",
    value: function isEditable() {
      if (this.props.displayOutput) {
        return false;
      }

      return _get(_getPrototypeOf(IntlField.prototype), "isEditable", this).call(this);
    }
  }, {
    key: "setLoading",
    value: function setLoading(loading) {
      this.loading = loading;
    }
  }, {
    key: "handleIntlListOk",
    value: function () {
      var _handleIntlListOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var supports, languages, record, name, field, tlsKey;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                supports = localeContext.supports;
                languages = Object.keys(supports);
                record = this.record, name = this.name, field = this.field;

                if (!(record && field)) {
                  _context3.next = 8;
                  break;
                }

                tlsKey = this.getContextConfig('tlsKey');
                _context3.next = 7;
                return Promise.all(languages.map(function (language) {
                  var intlField = record.dataSet.getField("".concat(tlsKey, ".").concat(name, ".").concat(language));
                  return intlField ? intlField.checkValidity(record) : true;
                }));

              case 7:
                return _context3.abrupt("return", _context3.sent.every(Boolean));

              case 8:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      function handleIntlListOk() {
        return _handleIntlListOk.apply(this, arguments);
      }

      return handleIntlListOk;
    }()
  }, {
    key: "handleIntlListCancel",
    value: function () {
      var _handleIntlListCancel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
        var record, locales;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                if (!(this.disabled || this.readOnly)) {
                  _context4.next = 2;
                  break;
                }

                return _context4.abrupt("return");

              case 2:
                record = this.record, locales = this.locales;

                if (record && locales) {
                  record.set(locales);
                }

              case 4:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));

      function handleIntlListCancel() {
        return _handleIntlListCancel.apply(this, arguments);
      }

      return handleIntlListCancel;
    }()
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (e.keyCode === KeyCode.DOWN && this.props.type !== IntlType.multipleLine) {
        stopEvent(e);
        this.openModal();
      }

      _get(_getPrototypeOf(IntlField.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (this.modal) {
        e.preventDefault();
      }

      _get(_getPrototypeOf(IntlField.prototype), "handleBlur", this).call(this, e);
    }
  }, {
    key: "storeLocales",
    value: function storeLocales(record, name) {
      var tlsKey = "".concat(this.getContextConfig('tlsKey'), ".").concat(name);
      var tls = record.get(tlsKey);

      var locales = _defineProperty({}, name, record.get(name));

      if (tls) {
        var defaultLang = localeContext.locale.lang,
            supports = localeContext.supports;
        Object.keys(supports).forEach(function (lang) {
          var value = tls[lang];

          if (lang === defaultLang) {
            locales["".concat(tlsKey, ".").concat(lang)] = locales[name];
          } else {
            locales["".concat(tlsKey, ".").concat(lang)] = value;
          }
        });
      }

      this.locales = locales;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      if (this.props.type === IntlType.multipleLine && !this.props.displayOutput) {
        return _get(_getPrototypeOf(IntlField.prototype), "getOmitPropsKeys", this).call(this).concat(['type', 'displayOutput']);
      }

      return _get(_getPrototypeOf(IntlField.prototype), "getOmitPropsKeys", this).call(this).concat(['cols', 'rows', 'wrap', 'resize', 'autoSize', 'onResize', 'type', 'displayOutput', 'modalProps']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      if (this.props.type === IntlType.multipleLine) {
        return _get(_getPrototypeOf(IntlField.prototype), "getOtherProps", this).call(this);
      }

      return TextField.prototype.getOtherProps.call(this);
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2;

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

      return (_get2 = _get(_getPrototypeOf(IntlField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, "".concat(this.prefixCls, "-intl")].concat(args));
    }
  }, {
    key: "getSuffix",
    value: function getSuffix() {
      var suffix = this.props.suffix;
      return this.wrapperSuffix(this.loading ? /*#__PURE__*/React.createElement(Progress, {
        size: Size.small,
        type: ProgressType.loading
      }) : suffix || /*#__PURE__*/React.createElement(Icon, {
        className: "".concat(this.prefixCls, "-intl"),
        type: "language"
      }), {
        onClick: debounce(this.openModal, 200)
      });
    }
  }, {
    key: "handleEnterDown",
    value: function handleEnterDown(e) {
      if (this.props.type === IntlType.multipleLine) {
        _get(_getPrototypeOf(IntlField.prototype), "handleEnterDown", this).call(this, e);
      } else {
        TextField.prototype.handleEnterDown.call(this, e);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      if (nextProps.type !== this.props.type) {
        var suffixCls = nextProps.type !== IntlType.multipleLine ? 'input' : 'textarea';
        this.prefixCls = this.getContextProPrefixCls(suffixCls, nextProps.prefixCls);
      }

      _get(_getPrototypeOf(IntlField.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.modal) {
        this.modal.close();
      }
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      if (this.props.displayOutput) {
        return this.renderOutput();
      }

      if (this.props.type === IntlType.multipleLine) {
        return _get(_getPrototypeOf(IntlField.prototype), "renderWrapper", this).call(this);
      }

      return this.renderGroup();
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (_get(_getPrototypeOf(IntlField.prototype), "showTooltip", this).call(this, e)) {
        return true;
      }

      if (this.props.displayOutput) {
        var _this$context = this.context,
            getTooltip = _this$context.getTooltip,
            getTooltipTheme = _this$context.getTooltipTheme,
            getTooltipPlacement = _this$context.getTooltipPlacement;
        var _this$props$tooltip = this.props.tooltip,
            tooltip = _this$props$tooltip === void 0 ? getTooltip('output') : _this$props$tooltip;
        var element = this.element,
            field = this.field;

        if (element && !(field && field.get('multiLine', this.record)) && (tooltip === TextTooltip.always || tooltip === TextTooltip.overflow && isOverflow(element))) {
          var title = this.getRenderedValue();

          if (title) {
            show(element, {
              title: title,
              placement: getTooltipPlacement('output') || 'right',
              theme: getTooltipTheme('output')
            });
            return true;
          }
        }
      }

      return false;
    }
  }, {
    key: "renderOutput",
    value: function renderOutput() {
      var result = this.getRenderedValue();
      var text = isEmpty(result) || isArrayLike(result) && !result.length ? this.getContextConfig('renderEmpty')('Output') : result;
      var floatLabel = this.renderFloatLabel();
      var suffix = this.getSuffix();
      var className = classNames("".concat(this.prefixCls, "-intl-wrapper"));

      if (floatLabel) {
        return /*#__PURE__*/React.createElement("span", _extends({}, this.getWrapperProps()), floatLabel, /*#__PURE__*/React.createElement("span", {
          className: className
        }, /*#__PURE__*/React.createElement("span", _extends({}, this.getOtherProps()), text), suffix));
      }

      return /*#__PURE__*/React.createElement("span", {
        className: className
      }, /*#__PURE__*/React.createElement("span", _extends({}, this.getMergedProps()), text), suffix);
    }
  }]);

  return IntlField;
}(TextArea);

IntlField.displayName = 'IntlField';
IntlField.defaultProps = _objectSpread(_objectSpread({}, TextArea.defaultProps), {}, {
  rows: 3,
  resize: ResizeType.vertical,
  type: IntlType.singleLine
});

__decorate([observable], IntlField.prototype, "loading", void 0);

__decorate([computed], IntlField.prototype, "readOnly", null);

__decorate([autobind, action], IntlField.prototype, "saveSuffixRef", null);

__decorate([action], IntlField.prototype, "setLoading", null);

__decorate([autobind], IntlField.prototype, "handleIntlListOk", null);

__decorate([autobind], IntlField.prototype, "handleIntlListCancel", null);

__decorate([autobind], IntlField.prototype, "handleKeyDown", null);

__decorate([autobind], IntlField.prototype, "handleBlur", null);

IntlField = __decorate([observer], IntlField);
export default IntlField;
//# sourceMappingURL=IntlField.js.map