@activecollab/components/dist/esm/components/Signifier/Signifier.js

ActiveCollab Components

import React, { useMemo, useState, useEffect } from "react";
import { SwitchTransition } from "react-transition-group";
import classnames from "classnames";
import { StyledIcon, StyledSignifier, StyledSignifierTransition } from "./Styles";
import { Tooltip } from "../Tooltip";
import { Body1, Caption1 } from "../Typography";
export const signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon", "PinIcon", "PinSmallIcon"];
export const Signifier = _ref => {
  let {
    type: Component,
    value = null,
    className,
    tooltipText,
    tooltipClassName
  } = _ref;
  if (signifierTypes.indexOf(Component.displayName) === -1) {
    console.warn("You are using unsupported Signifier icon");
  }
  const [direction, setDirection] = useState("c-signifier--top");
  const [, setPrevValue] = useState(value);
  const label = useMemo(() => {
    if (!value || value < 1) return null;
    const max = 1000000000;
    let newValue = value;
    if (newValue > max) {
      newValue = max;
    }
    if (newValue === max) {
      return Math.floor(newValue / 1000000000) + "B+";
    } else if (newValue > 999999) {
      return Math.floor(newValue / 1000000) + "M";
    } else if (newValue > 999) {
      return Math.floor(newValue / 1000) + "k";
    }
    return "" + newValue;
  }, [value]);
  useEffect(() => {
    value && setPrevValue(v => {
      v && setDirection(v - value > 0 ? "c-signifier--top" : "c-signifier--bottom");
      return value;
    });
  }, [value]);
  const renderSignifier = useMemo(() => /*#__PURE__*/React.createElement(StyledSignifier, {
    className: classnames("c-signifier", className),
    $direction: direction
  }, /*#__PURE__*/React.createElement(StyledIcon, {
    as: Component
  }), value !== null && /*#__PURE__*/React.createElement(SwitchTransition, {
    mode: "out-in"
  }, /*#__PURE__*/React.createElement(StyledSignifierTransition, {
    key: label,
    timeout: 300,
    classNames: "c-signifier--animate"
  }, Component.displayName.includes("SmallIcon") ? /*#__PURE__*/React.createElement(Caption1, {
    color: "secondary"
  }, label) : /*#__PURE__*/React.createElement(Body1, {
    color: "secondary"
  }, label)))), [className, direction, Component, value, label]);
  return /*#__PURE__*/React.createElement(Tooltip, {
    title: tooltipText != null ? tooltipText : "",
    disable: !tooltipText,
    popperTooltipClassName: tooltipClassName
  }, renderSignifier);
};
Signifier.displayName = "Signifier";
//# sourceMappingURL=Signifier.js.map