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

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "forceShowTotal", "label", "locale", "percentage", "information", "iconButton", "size", "trending", "truncate", "total", "value"];
/**
 * @file Important content area (ICA).
 * @copyright IBM Security 2019, 2021
 */

import classnames from 'classnames';
import numeral from 'numeral';
import PropTypes from 'prop-types';
import React from 'react';
import 'numeral/locales';
import { ArrowUp16, ArrowUp20, ArrowUp24 } from '@carbon/icons-react';
import Icon from '../Icon/Icon';
import Tooltip from '../Tooltip';
import isDevelopment from '../../globals/env';
import { getComponentNamespace } from '../../globals/namespace';
export var namespace = getComponentNamespace('ica');

/**
 * @type {string[]} Array of accepted locales by Numeral.js.
 */
export var Locales = Object.keys(numeral.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 = numeral(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.createElement("div", {
      className: "".concat(namespace, "__percentage")
    }, value, /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
  var isSize = function isSize(sizeValue) {
    return size === sizeValue;
  };
  var isLarge = isSize('lg');
  var isXLarge = isSize('xl');
  var renderIcon = ArrowUp16;
  if (isLarge) {
    renderIcon = ArrowUp20;
  } else if (isXLarge) {
    renderIcon = ArrowUp24;
  }
  var ICAClasses = classnames(className, _defineProperty(_defineProperty({}, "".concat(namespace, "--lg"), isLarge), "".concat(namespace, "--xl"), isXLarge));
  if (Locales.includes(locale)) {
    numeral.locale(locale);
  } else {
    if (isDevelopment()) {
      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.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.createElement("div", _extends({
    className: "".concat(ICAClasses)
  }, other), /*#__PURE__*/React.createElement("span", {
    className: "".concat(namespace, "__row")
  }, /*#__PURE__*/React.createElement("h4", {
    className: "".concat(namespace, "__label")
  }, label, " "), information && /*#__PURE__*/React.createElement(Tooltip, {
    showIcon: true,
    direction: 'right'
  }, information)), /*#__PURE__*/React.createElement("span", {
    className: "".concat(namespace, "__row")
  }, trending && /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(namespace, "__trend"),
    renderIcon: renderIcon
  }), /*#__PURE__*/React.createElement("span", {
    className: "".concat(namespace, "__value")
  }, truncatedValue), shouldDisplayof ? /*#__PURE__*/React.createElement("span", {
    className: "".concat(namespace, "__total")
  }, ' ', /*#__PURE__*/React.createElement("span", null, "/", truncatedTotal)) : null, iconButton));
};
_ICA.propTypes = {
  /**
   * Optional class name.
   * @type number
   */
  className: PropTypes.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.bool,
  /** Displays an iconButton next to the ICA value */
  iconButton: PropTypes.node,
  /** Pass in content to the body of the information tooltip. */
  information: PropTypes.node,
  /**
   * Text label for ICA.
   * @type string
   */
  label: PropTypes.string.isRequired,
  /**
   * Locale value to determine approach to formatting numbers.
   * @type string
   */
  locale: PropTypes.oneOf(Locales),
  /**
   * Format number to percentage when `percentage` prop is true.
   * @type bool
   */
  percentage: PropTypes.bool,
  /** The size of the ICA. */
  size: PropTypes.oneOf(['default', 'lg', 'xl']),
  /**
   * Total value that the main ICA value is a subset of.
   * @type number
   */
  total: PropTypes.number,
  /** Display trending icon. */
  trending: PropTypes.bool,
  /** Specify whether or not the values should be truncated. */
  truncate: PropTypes.bool,
  /**
   * The main ICA value to display
   * @type number
   */
  value: PropTypes.number
};
_ICA.defaultProps = {
  total: 0,
  className: '',
  locale: 'en',
  percentage: false,
  size: 'default',
  value: null,
  forceShowTotal: false,
  trending: false,
  truncate: true
};
export default _ICA;