choerodon-ui/pro/es/field/utils.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { cloneElement, isValidElement } from 'react';
import isObject from 'lodash/isObject';
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import isNumber from 'lodash/isNumber';
import defaultTo from 'lodash/defaultTo';
import isPlainObject from 'lodash/isPlainObject';
import { get, isArrayLike, isObservableObject } from 'mobx';
import classNames from 'classnames';
import { isMoment } from 'moment';
import { BigNumber } from 'bignumber.js';
import { Utils } from 'choerodon-ui/dataset';
import { getConfig, getProPrefixCls } from '../../../es/configure/utils';
import { FieldType, RecordStatus } from '../data-set/enum';
import formatCurrency from '../formatter/formatCurrency';
import formatNumber from '../formatter/formatNumber';
import formatBigNumber from '../formatter/formatBigNumber';
import { getPrecision } from '../number-field/utils';
import isEmpty from '../_util/isEmpty';
import CloseButton from './CloseButton';
import { hide, show } from '../tooltip/singleton';
import Icon from '../icon';
import { $l } from '../locale-context';
import isReactChildren from '../_util/isReactChildren';
import { defaultTextField, findBindFields } from '../data-set/utils';
import ObjectChainValue from '../_util/ObjectChainValue';
import MultiLine from '../output/MultiLine';
var toRangeValue = Utils.toRangeValue;
var getDateFormatByFieldType = Utils.getDateFormatByFieldType;
var getDateFormatByField = Utils.getDateFormatByField;
export { toRangeValue, getDateFormatByFieldType, getDateFormatByField };
export function fromRangeValue(value, range) {
  if (isArrayLike(range)) {
    var _ref;

    var _range = _slicedToArray(range, 2),
        start = _range[0],
        end = _range[1];

    return _ref = {}, _defineProperty(_ref, start, value[0]), _defineProperty(_ref, end, value[1]), _ref;
  }

  return value;
}
export function toMultipleValue(value, range) {
  if (!isNil(value)) {
    var multipleValue = isArrayLike(value) ? value.slice() : [value];

    if (range) {
      return multipleValue.map(function (item) {
        return toRangeValue(item, range);
      });
    }

    return multipleValue;
  }

  return [];
}
export function transformHighlightProps(highlight, props) {
  if ( /*#__PURE__*/isValidElement(highlight) || isString(highlight)) {
    return _objectSpread(_objectSpread({}, props), {}, {
      content: highlight
    });
  }

  if (isObject(highlight)) {
    return _objectSpread(_objectSpread({}, props), highlight);
  }

  return props;
}
export function getCurrencyFormatter() {
  var currencyFormatter = getConfig('currencyFormatter');

  if (currencyFormatter !== undefined) {
    return currencyFormatter;
  }

  return formatCurrency;
}
export function getNumberFormatter() {
  var numberFieldFormatter = getConfig('numberFieldFormatter');

  if (numberFieldFormatter !== undefined) {
    return numberFieldFormatter;
  }

  return formatNumber;
}
export function getBigNumberFormatter() {
  var bigNumberFormatter = getConfig('bigNumberFormatter');

  if (bigNumberFormatter !== undefined) {
    return bigNumberFormatter;
  }

  return formatBigNumber;
}
export function getCurrencyFormatOptions(getProp, controlLang) {
  var precision = getProp('precision');
  var formatterOptions = getProp('formatterOptions') || {};
  var currencyFormatterOptions = getConfig('currencyFormatterOptions') || {
    options: {}
  };
  var lang = formatterOptions.lang || currencyFormatterOptions.lang || controlLang;
  var options = {};

  if (isNumber(precision)) {
    options.minimumFractionDigits = precision;
    options.maximumFractionDigits = precision;
  }

  _extends(options, currencyFormatterOptions.options, formatterOptions.options);

  var numberGrouping = getProp('numberGrouping');
  var currency = getProp('currency');

  if (currency) {
    options.currency = currency;
  }

  if (numberGrouping === false) {
    options.useGrouping = false;
  }

  return {
    lang: lang,
    options: options
  };
}
export function getNumberFormatOptions(getProp, getValue, value, controlLang) {
  var precision = getProp('precision');
  var precisionInValue = isNumber(precision) ? precision : getPrecision(isNil(value) ? getValue ? getValue() || 0 : 0 : value);
  var formatterOptions = getProp('formatterOptions') || {};
  var numberFieldFormatterOptions = getConfig('numberFieldFormatterOptions') || {
    options: {}
  };
  var lang = formatterOptions.lang || numberFieldFormatterOptions.lang || controlLang;

  var options = _objectSpread(_objectSpread({
    maximumFractionDigits: precisionInValue
  }, numberFieldFormatterOptions.options), formatterOptions.options);

  var numberGrouping = getProp('numberGrouping');

  if (numberGrouping === false) {
    options.useGrouping = false;
  }

  return {
    lang: lang,
    options: options
  };
}
export function getBigNumberFormatOptions(getProp, getValue, value, controlLang, bigNumberTarget) {
  var precision = getProp('precision');
  var bigNumberFormatterOptions;
  var options = {};
  var formatterOptions = getProp('formatterOptions') || {};

  if (bigNumberTarget === 'currency') {
    if (isNumber(precision)) {
      options.minimumFractionDigits = precision;
      options.maximumFractionDigits = precision;
    }

    bigNumberFormatterOptions = getConfig('currencyFormatterOptions') || {
      options: {}
    };

    _extends(options, bigNumberFormatterOptions.options, formatterOptions.options);

    var currency = getProp('currency');

    if (currency) {
      options.currency = currency;
    }
  } else {
    var precisionInValue = isNumber(precision) ? precision : new BigNumber(isEmpty(value) ? getValue ? getValue() || 0 : 0 : value).decimalPlaces();
    bigNumberFormatterOptions = getConfig('numberFieldFormatterOptions') || {
      options: {}
    };
    options = _objectSpread(_objectSpread({
      maximumFractionDigits: precisionInValue
    }, bigNumberFormatterOptions.options), formatterOptions.options);
  }

  var numberGrouping = getProp('numberGrouping');

  if (numberGrouping === false) {
    options.useGrouping = false;
  }

  var lang = formatterOptions.lang || bigNumberFormatterOptions.lang || controlLang;
  return {
    lang: lang,
    options: options
  };
}
export function processFieldValue(value, field, options, showValueIfNotFound, record) {
  var getProp = options.getProp,
      getValue = options.getValue,
      lang = options.lang;
  var type = getProp('type');
  var currency = getProp('currency');

  if (currency || type === FieldType.currency) {
    var formatOptions = getCurrencyFormatOptions(getProp, lang);
    var formatter = getProp('formatter');
    return (formatter || getCurrencyFormatter())(value, formatOptions.lang, formatOptions.options);
  }

  if (type === FieldType.number) {
    var _formatOptions = getNumberFormatOptions(getProp, getValue, value, lang);

    var _formatter = getProp('formatter');

    return (_formatter || getNumberFormatter())(value, _formatOptions.lang, _formatOptions.options);
  }

  if (type === FieldType.bigNumber) {
    var _formatOptions2 = getBigNumberFormatOptions(getProp, getValue, value, lang, currency ? 'currency' : 'number-field');

    var _formatter2 = getProp('formatter');

    return (_formatter2 || getBigNumberFormatter())(value, _formatOptions2.lang, _formatOptions2.options, currency ? 'currency' : 'number-field');
  }

  if (field) {
    return field.getText(value, showValueIfNotFound, record);
  }

  return value;
}
export function processValue(value, format) {
  if (!isNil(value)) {
    if (isMoment(value)) {
      if (value.isValid()) {
        return value.format(format);
      }

      if (getConfig('showInvalidDate')) {
        return $l('DatePicker', 'invalid_date');
      }

      return '';
    }

    if (isReactChildren(value)) {
      // For Select's Option and TreeSelect's TreeNode which type may be ReactElement
      return value;
    }

    return value.toString();
  }

  return '';
}
export function isFieldValueEmpty(value, range, multiple, valueField, textField) {
  if (isEmpty(value)) {
    return true;
  }

  if (multiple) {
    return !isArrayLike(value) || value.length === 0;
  }

  if (range === true) {
    return isArrayLike(value) && value.every(function (v) {
      return isEmpty(v);
    });
  }

  if (isArrayLike(range)) {
    return value && Object.values(value).every(function (v) {
      return isEmpty(v);
    });
  }

  var isObjectEmpty = function isObjectEmpty(v) {
    if (valueField && textField) {
      if (isObservableObject(v)) {
        return isEmpty(get(v, valueField)) && isEmpty(get(v, textField));
      }

      if (isObject(v)) {
        return isEmpty(v[valueField]) && isEmpty(v[textField]);
      }
    }

    return false;
  };

  if (isArrayLike(value)) {
    return value.length ? value.every(function (v) {
      if (isEmpty(v)) {
        return true;
      }

      return isObjectEmpty(v);
    }) : true;
  }

  return isObjectEmpty(value);
}
export function renderRangeValue(value, option) {
  var repeat = option.repeat,
      processRenderer = option.processRenderer;
  var rangeValue = (value || []).map(function (item) {
    return processRenderer(item, repeat);
  }, []);

  if (rangeValue.some(function (v) {
    return !isEmpty(v);
  })) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, rangeValue[0], "~", rangeValue[1]);
  }
}
export function getValueKey(v) {
  if (isArrayLike(v)) {
    return v.join(',');
  }

  return v;
}
export function renderMultipleValues(value, option) {
  var range = option.range,
      maxTagPlaceholder = option.maxTagPlaceholder,
      prefixCls = option.prefixCls,
      validationResults = option.validationResults,
      disabled = option.disabled,
      readOnly = option.readOnly,
      isMultipleBlockDisabled = option.isMultipleBlockDisabled,
      processRenderer = option.processRenderer,
      renderValidationResult = option.renderValidationResult,
      handleMultipleValueRemove = option.handleMultipleValueRemove,
      _option$getKey = option.getKey,
      getKey = _option$getKey === void 0 ? getValueKey : _option$getKey,
      isValidationMessageHidden = option.isValidationMessageHidden,
      selfShowValidationMessage = option.showValidationMessage,
      tooltipTheme = option.tooltipTheme;
  var values = toMultipleValue(value, range);
  var valueLength = values.length;
  var _option$maxTagCount = option.maxTagCount,
      maxTagCount = _option$maxTagCount === void 0 ? valueLength : _option$maxTagCount;
  var repeats = new Map();
  var blockClassName = classNames(_defineProperty({}, "".concat(prefixCls, "-multiple-block-disabled"), disabled), "".concat(prefixCls, "-multiple-block"));
  var multipleValidateMessageLength = 0;
  var tags = values.slice(0, maxTagCount).map(function (v, index) {
    var key = getKey(v);
    var repeat = repeats.get(key) || 0;
    var text = range ? renderRangeValue(v, {
      repeat: repeat,
      processRenderer: processRenderer
    }) : processRenderer(v, repeat);
    repeats.set(key, repeat + 1);

    if (!isEmpty(text)) {
      var _classNames2;

      var validationResult = validationResults && validationResults.find(function (error) {
        return error.value === v;
      });
      var blockDisabled = isMultipleBlockDisabled ? isMultipleBlockDisabled(v) : disabled;
      var className = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-multiple-block-invalid"), validationResult), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple-block-disabled"), blockDisabled), _classNames2), "".concat(prefixCls, "-multiple-block"));
      var validationMessage = validationResult && renderValidationResult(validationResult);

      if (validationMessage) {
        multipleValidateMessageLength++;
      }

      var closeBtn = !blockDisabled && !readOnly && /*#__PURE__*/React.createElement(CloseButton, {
        onClose: handleMultipleValueRemove,
        value: v,
        index: repeat
      });
      var inner = readOnly ? /*#__PURE__*/React.createElement("span", {
        key: String(index),
        className: className
      }, text) : /*#__PURE__*/React.createElement("li", {
        key: String(index),
        className: className
      }, /*#__PURE__*/React.createElement("div", null, text), closeBtn);

      if (!isValidationMessageHidden(validationMessage)) {
        return /*#__PURE__*/cloneElement(inner, {
          onMouseEnter: function onMouseEnter(e) {
            return selfShowValidationMessage(e, validationMessage, tooltipTheme);
          },
          onMouseLeave: function onMouseLeave() {
            return hide();
          }
        });
      }

      return inner;
    }

    return undefined;
  });

  if (valueLength > maxTagCount) {
    var content = "+ ".concat(valueLength - maxTagCount, " ...");

    if (maxTagPlaceholder) {
      var omittedValues = values.slice(maxTagCount, valueLength);
      content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
    }

    tags.push( /*#__PURE__*/React.createElement("li", {
      key: "maxTagPlaceholder",
      className: blockClassName
    }, /*#__PURE__*/React.createElement("div", null, content)));
  }

  return {
    tags: tags,
    multipleValidateMessageLength: multipleValidateMessageLength
  };
}
export function renderMultiLine(options) {
  var field = options.field,
      record = options.record,
      dataSet = options.dataSet,
      name = options.name,
      prefixCls = options.prefixCls,
      renderer = options.renderer,
      renderValidationResult = options.renderValidationResult,
      isValidationMessageHidden = options.isValidationMessageHidden,
      selfProcessValue = options.processValue,
      labelTooltip = options.labelTooltip,
      tooltip = options.tooltip;
  var multipleValidateMessageLength = 0;

  if (record) {
    var multiLineFields = findBindFields(field, record.dataSet.fields, false, record);

    if (renderer) {
      return {
        lines: renderer({
          multiLineFields: multiLineFields,
          record: record,
          dataSet: dataSet,
          name: name
        }),
        multipleValidateMessageLength: multipleValidateMessageLength
      };
    }

    if (multiLineFields.length) {
      var lines = multiLineFields.map(function (fieldItem) {
        if (fieldItem) {
          var required = defaultTo(fieldItem.get('required', record), field.get('required', record));
          var fieldName = fieldItem.name;
          var value = record.get(fieldName);
          var validationResults = record.getValidationError(fieldName);
          var validationResult = validationResults && validationResults.find(function (error) {
            return error.value === value;
          });
          var validationMessage = validationResult && renderValidationResult(validationResult);
          var validationHidden = isValidationMessageHidden(validationMessage);
          var processedValue = '';

          if (fieldItem.get('lovCode', record)) {
            var fieldValue = fieldItem.getValue(record);

            if (isPlainObject(fieldValue)) {
              processedValue = ObjectChainValue.get(fieldValue, fieldItem.get('textField', record) || defaultTextField);
            }
          }

          var notEmpty = !isEmpty(value); // 值集中不存在 再去取直接返回的值

          var text = processedValue || selfProcessValue(value);
          multipleValidateMessageLength++;
          var validationInner = notEmpty ? text : validationHidden ? record.status === RecordStatus.add ? '' : /*#__PURE__*/React.createElement("span", {
            className: "".concat(prefixCls, "-multi-value-invalid")
          }, text) : validationMessage;
          var label = fieldItem.get('label', record);
          return /*#__PURE__*/React.createElement(MultiLine, {
            key: "".concat(record.index, "-multi-").concat(fieldName),
            prefixCls: prefixCls,
            label: label,
            required: required,
            validationMessage: validationMessage,
            validationHidden: validationHidden,
            tooltip: tooltip,
            labelTooltip: labelTooltip
          }, validationInner);
        }

        return null;
      });
      return {
        lines: lines,
        multipleValidateMessageLength: multipleValidateMessageLength
      };
    }
  }

  return {
    multipleValidateMessageLength: multipleValidateMessageLength
  };
}
export function renderValidationMessage(validationMessage, showIcon) {
  if (validationMessage) {
    return /*#__PURE__*/React.createElement("div", {
      className: getProPrefixCls('validation-message')
    }, showIcon && /*#__PURE__*/React.createElement(Icon, {
      type: "error"
    }), /*#__PURE__*/React.createElement("span", null, validationMessage));
  }
}
export function defaultRenderer(renderOption) {
  var text = renderOption.text,
      repeat = renderOption.repeat,
      maxTagTextLength = renderOption.maxTagTextLength;
  return repeat !== undefined && maxTagTextLength && isString(text) && text.length > maxTagTextLength ? "".concat(text.slice(0, maxTagTextLength), "...") : text;
}
export function showValidationMessage(e, message, tooltipTheme, tooltipPlacement) {
  show(e.currentTarget, {
    suffixCls: "form-tooltip ".concat(getConfig('proPrefixCls'), "-tooltip"),
    title: message,
    theme: tooltipTheme,
    placement: tooltipPlacement || 'bottomLeft'
  });
}
//# sourceMappingURL=utils.js.map