choerodon-ui/pro/lib/output/Output.js

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

"use strict";

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

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

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

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _FormField2 = require("../field/FormField");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _enum = require("../core/enum");

var _utils = require("../field/utils");

var _isEmpty = _interopRequireDefault(require("../_util/isEmpty"));

var _util = _interopRequireDefault(require("../overflow-tip/util"));

var _singleton = require("../tooltip/singleton");

var _utils2 = require("./utils");

var Output = /*#__PURE__*/function (_FormField) {
  (0, _inherits2["default"])(Output, _FormField);

  var _super = (0, _createSuper2["default"])(Output);

  function Output() {
    (0, _classCallCheck2["default"])(this, Output);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(Output, [{
    key: "isEditable",
    value: function isEditable() {
      return false;
    }
  }, {
    key: "useFocusedClassName",
    value: function useFocusedClassName() {
      return false;
    }
  }, {
    key: "handleChange",
    value: function handleChange() {// noop
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Output.prototype), "getOmitPropsKeys", this).call(this).concat(['name', 'renderEmpty']);
    }
  }, {
    key: "getOtherPropsExcludeOutput",
    value: function getOtherPropsExcludeOutput(otherProps) {
      return otherProps;
    }
  }, {
    key: "getWrapperClassNamesExcludeOutput",
    value: function getWrapperClassNamesExcludeOutput() {
      return undefined;
    }
  }, {
    key: "getObservablePropsExcludeOutput",
    value: function getObservablePropsExcludeOutput() {
      return undefined;
    }
  }, {
    key: "getValueKey",
    value: function getValueKey(value) {
      if ((0, _mobx.isArrayLike)(value)) {
        return value.map(this.getValueKey, this).join(',');
      }

      return this.processValue(value);
    }
  }, {
    key: "processValue",
    value: function processValue(value) {
      var _this = this;

      if (!(0, _isNil["default"])(value)) {
        var text = (0, _isPlainObject["default"])(value) ? value : (0, _get2["default"])((0, _getPrototypeOf2["default"])(Output.prototype), "processValue", this).call(this, value);
        var field = this.field;
        return (0, _utils.processFieldValue)(text, field, {
          getProp: function getProp(name) {
            return _this.getProp(name);
          },
          getValue: function getValue() {
            return _this.getValue();
          },
          lang: this.lang,
          getDisplayProp: function getDisplayProp(name) {
            return _this.getDisplayProp(name);
          }
        }, true, this.record, this.getContextConfig);
      }

      return '';
    }
  }, {
    key: "defaultRenderer",
    value: function defaultRenderer(renderProps) {
      return (0, _utils2.defaultOutputRenderer)(renderProps);
    }
    /**
     * 多行单元格渲染
     */

  }, {
    key: "renderMultiLine",
    value: function renderMultiLine(field) {
      var name = this.name,
          record = this.record,
          dataSet = this.dataSet,
          prefixCls = this.prefixCls,
          renderer = this.props.renderer;

      var _renderMultiLine2 = (0, _utils.renderMultiLine)({
        name: name,
        field: field,
        record: record,
        dataSet: dataSet,
        prefixCls: prefixCls,
        renderer: renderer,
        renderValidationResult: this.renderValidationResult,
        isValidationMessageHidden: this.isValidationMessageHidden,
        processValue: this.processValue.bind(this),
        tooltip: this.props.tooltip,
        labelTooltip: this.labelTooltip
      }),
          lines = _renderMultiLine2.lines,
          multipleValidateMessageLength = _renderMultiLine2.multipleValidateMessageLength;

      this.multipleValidateMessageLength = multipleValidateMessageLength;
      return lines;
    }
  }, {
    key: "getRenderedValue",
    value: function getRenderedValue() {
      if (this.multiple) {
        var _this$renderMultipleV = this.renderMultipleValues(true),
            tags = _this$renderMultipleV.tags;

        return tags;
      }

      if (this.range) {
        return this.renderRangeValue((0, _utils.toRangeValue)(this.getValue(), this.range));
      }
      /**
       * 多行单元格渲染
       */


      var field = this.field;

      if (field && field.get('multiLine', this.record)) {
        return this.renderMultiLine(field);
      }

      return this.processRenderer(this.getValue());
    }
  }, {
    key: "getTooltipTitle",
    value: function getTooltipTitle() {
      var _this2 = this;

      if (this.multiple) {
        var values = this.getValues();
        var repeats = new Map();
        var texts = values.map(function (v) {
          var key = _this2.getValueKey(v);

          var repeat = repeats.get(key) || 0;

          var text = _this2.processText(_this2.processValue(v));

          repeats.set(key, repeat + 1);

          if (!(0, _isNil["default"])(text)) {
            return text;
          }

          return undefined;
        });
        return texts.join(typeof this.multiple === 'string' ? this.multiple : '、');
      }

      return this.getRenderedValue();
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if ((0, _get2["default"])((0, _getPrototypeOf2["default"])(Output.prototype), "showTooltip", this).call(this, e)) {
        return true;
      }

      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;

      var _this$renderMultipleV2 = this.renderMultipleValues(true),
          isOverflowMaxTagCount = _this$renderMultipleV2.isOverflowMaxTagCount;

      var title = this.getTooltipTitle();
      var placement = getTooltipPlacement('output') || 'right';
      var theme = getTooltipTheme('output');

      if (element && !(field && field.get('multiLine', this.record)) && (tooltip === _enum.Tooltip.always || tooltip === _enum.Tooltip.overflow && (!this.multiple && (0, _util["default"])(element) || this.multiple && isOverflowMaxTagCount))) {
        if (title) {
          (0, _singleton.show)(element, {
            title: title,
            placement: placement,
            theme: theme
          });
          return true;
        }
      }

      return false;
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var result = this.getRenderedValue();
      var renderEmpty = this.props.renderEmpty;
      var text = (0, _isEmpty["default"])(result) || (0, _mobx.isArrayLike)(result) && !result.length ? renderEmpty ? renderEmpty() : this.getContextConfig('renderEmpty')('Output') : result;
      var floatLabel = this.renderFloatLabel();
      return floatLabel ? /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, this.getWrapperProps()), floatLabel, /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, this.getOtherProps()), text)) : /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, this.getMergedProps()), text);
    }
  }]);
  return Output;
}(_FormField2.FormField);

Output.displayName = 'Output'; // eslint-disable-next-line camelcase

Output.__PRO_OUTPUT = true;
Output.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _FormField2.FormField.defaultProps), {}, {
  suffixCls: 'output'
});
(0, _tslib.__decorate)([_autobind["default"]], Output.prototype, "handleChange", null);
(0, _tslib.__decorate)([_autobind["default"]], Output.prototype, "getValueKey", null);
(0, _tslib.__decorate)([_autobind["default"]], Output.prototype, "defaultRenderer", null);
Output = (0, _tslib.__decorate)([_mobxReact.observer], Output);
var _default = Output;
exports["default"] = _default;
//# sourceMappingURL=Output.js.map