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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
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 { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { isArrayLike } from 'mobx';
import isPlainObject from 'lodash/isPlainObject';
import isNil from 'lodash/isNil';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import { Tooltip as TextTooltip } from '../core/enum';
import { processFieldValue, renderMultiLine as _renderMultiLine, toRangeValue } from '../field/utils';
import isEmpty from '../_util/isEmpty';
import isOverflow from '../overflow-tip/util';
import { show } from '../tooltip/singleton';
import { defaultOutputRenderer } from './utils';

var Output = /*#__PURE__*/function (_FormField) {
  _inherits(Output, _FormField);

  var _super = _createSuper(Output);

  function Output() {
    _classCallCheck(this, Output);

    return _super.apply(this, arguments);
  }

  _createClass(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 _get(_getPrototypeOf(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 (isArrayLike(value)) {
        return value.map(this.getValueKey, this).join(',');
      }

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

      if (!isNil(value)) {
        var text = isPlainObject(value) ? value : _get(_getPrototypeOf(Output.prototype), "processValue", this).call(this, value);
        var field = this.field;
        return processFieldValue(text, field, {
          getProp: function getProp(name) {
            return _this.getProp(name);
          },
          getValue: function getValue() {
            return _this.getValue();
          },
          lang: this.lang
        }, true, this.record);
      }

      return '';
    }
  }, {
    key: "defaultRenderer",
    value: function defaultRenderer(renderProps) {
      return 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 = _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) {
        return this.renderMultipleValues(true);
      }

      if (this.range) {
        return this.renderRangeValue(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: "showTooltip",
    value: function showTooltip(e) {
      if (_get(_getPrototypeOf(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;

      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: "renderWrapper",
    value: function renderWrapper() {
      var result = this.getRenderedValue();
      var renderEmpty = this.props.renderEmpty;
      var text = isEmpty(result) || isArrayLike(result) && !result.length ? renderEmpty ? renderEmpty() : this.getContextConfig('renderEmpty')('Output') : result;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({}, this.getMergedProps()), text), this.renderFloatLabel());
    }
  }]);

  return Output;
}(FormField);

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

Output.__PRO_OUTPUT = true;
Output.defaultProps = _objectSpread(_objectSpread({}, FormField.defaultProps), {}, {
  suffixCls: 'output'
});

__decorate([autobind], Output.prototype, "handleChange", null);

__decorate([autobind], Output.prototype, "getValueKey", null);

__decorate([autobind], Output.prototype, "defaultRenderer", null);

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