@carbon/ibm-security/lib/components/ICA/ICA.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.namespace = exports.default = exports.Locales = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _numeral = _interopRequireDefault(require("numeral"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
require("numeral/locales");
var _iconsReact = require("@carbon/icons-react");
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _env = _interopRequireDefault(require("../../globals/env"));
var _namespace = require("../../globals/namespace");
var _excluded = ["className", "forceShowTotal", "label", "locale", "percentage", "information", "iconButton", "size", "trending", "truncate", "total", "value"];
/**
 * @file Important content area (ICA).
 * @copyright IBM Security 2019, 2021
 */
var namespace = exports.namespace = (0, _namespace.getComponentNamespace)('ica');

/**
 * @type {string[]} Array of accepted locales by Numeral.js.
 */
var Locales = exports.Locales = Object.keys(_numeral.default.locales);

/**
 * Ensure that the format string includes a decimal space only for values that
 * are 1000 and above.
 * @param {number} value The value to evaluate.
 * @returns {string} Format string for numeral.
 */
var getFormat = function getFormat(value) {
  return Math.round(value) > 999 ? '0.0a' : '0a';
};

/**
 * Ensure that the value is formatted correctly based on whether it should be truncated or not.
 * @param {number} value The value to format.
 * @param {boolean} truncate Whether or not the value should be truncated.
 * @returns {string} The formatted value.
 */
var formatValue = function formatValue(value, truncate) {
  var localeValue = (0, _numeral.default)(value);
  return truncate ? localeValue.format(getFormat(value)) : localeValue.value();
};

/**
 * Ensure that the value includes a percentage if specified by prop,
 * or otherwise the value is properly formatted.
 * @param {boolean} percentage Whether a percent sign should be included.
 * @param {number|null} value The value to be formatted.
 * @param {boolean} truncate Whether or not the value should be truncated.
 * @returns {string} Formatted string.
 */
var truncateValue = function truncateValue(percentage, value, truncate) {
  if (percentage) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(namespace, "__percentage")
    }, value, /*#__PURE__*/_react.default.createElement("span", {
      className: "".concat(namespace, "__percentage-mark")
    }, "%"));
  }
  return value === null ? '–' : formatValue(value, truncate);
};
var _ICA = function ICA(_ref) {
  var className = _ref.className,
    forceShowTotal = _ref.forceShowTotal,
    label = _ref.label,
    locale = _ref.locale,
    percentage = _ref.percentage,
    information = _ref.information,
    iconButton = _ref.iconButton,
    size = _ref.size,
    trending = _ref.trending,
    truncate = _ref.truncate,
    total = _ref.total,
    value = _ref.value,
    other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var isSize = function isSize(sizeValue) {
    return size === sizeValue;
  };
  var isLarge = isSize('lg');
  var isXLarge = isSize('xl');
  var renderIcon = _iconsReact.ArrowUp16;
  if (isLarge) {
    renderIcon = _iconsReact.ArrowUp20;
  } else if (isXLarge) {
    renderIcon = _iconsReact.ArrowUp24;
  }
  var ICAClasses = (0, _classnames2.default)(className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(namespace, "--lg"), isLarge), "".concat(namespace, "--xl"), isXLarge));
  if (Locales.includes(locale)) {
    _numeral.default.locale(locale);
  } else {
    if ((0, _env.default)()) {
      console.warn("Locale \"".concat(locale, "\" for ICA component is not recognized. Using fallback locale \"").concat(_ICA.defaultProps.locale, ". For list of supported locales go to: https://github.com/carbon-design-system/ibm-security/tree/master/src/components/ICA"));
    }
    _numeral.default.locale(_ICA.defaultProps.locale);
  }
  var truncatedValue = truncateValue(percentage, value, truncate);
  var truncatedTotal = formatValue(total, truncate);
  var shouldDisplayof = !percentage && total > value && truncatedValue !== truncatedTotal || forceShowTotal && truncatedTotal > 0;
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: "".concat(ICAClasses)
  }, other), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(namespace, "__row")
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "".concat(namespace, "__label")
  }, label, " "), information && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    showIcon: true,
    direction: 'right'
  }, information)), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(namespace, "__row")
  }, trending && /*#__PURE__*/_react.default.createElement(_Icon.default, {
    className: "".concat(namespace, "__trend"),
    renderIcon: renderIcon
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(namespace, "__value")
  }, truncatedValue), shouldDisplayof ? /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(namespace, "__total")
  }, ' ', /*#__PURE__*/_react.default.createElement("span", null, "/", truncatedTotal)) : null, iconButton));
};
_ICA.propTypes = {
  /**
   * Optional class name.
   * @type number
   */
  className: _propTypes.default.string,
  /**
   * Display the `total` even when the `value` is equal to
   * the `total` when `forceShowTotal` prop is true on the
   * condition that the `total` is greater than 0.
   * @type bool
   */
  forceShowTotal: _propTypes.default.bool,
  /** Displays an iconButton next to the ICA value */
  iconButton: _propTypes.default.node,
  /** Pass in content to the body of the information tooltip. */
  information: _propTypes.default.node,
  /**
   * Text label for ICA.
   * @type string
   */
  label: _propTypes.default.string.isRequired,
  /**
   * Locale value to determine approach to formatting numbers.
   * @type string
   */
  locale: _propTypes.default.oneOf(Locales),
  /**
   * Format number to percentage when `percentage` prop is true.
   * @type bool
   */
  percentage: _propTypes.default.bool,
  /** The size of the ICA. */
  size: _propTypes.default.oneOf(['default', 'lg', 'xl']),
  /**
   * Total value that the main ICA value is a subset of.
   * @type number
   */
  total: _propTypes.default.number,
  /** Display trending icon. */
  trending: _propTypes.default.bool,
  /** Specify whether or not the values should be truncated. */
  truncate: _propTypes.default.bool,
  /**
   * The main ICA value to display
   * @type number
   */
  value: _propTypes.default.number
};
_ICA.defaultProps = {
  total: 0,
  className: '',
  locale: 'en',
  percentage: false,
  size: 'default',
  value: null,
  forceShowTotal: false,
  trending: false,
  truncate: true
};
var _default = exports.default = _ICA;