@activecollab/components
Version:
ActiveCollab Components
68 lines • 3.27 kB
JavaScript
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 Component = _ref.type,
_ref$value = _ref.value,
value = _ref$value === void 0 ? null : _ref$value,
className = _ref.className,
tooltipText = _ref.tooltipText,
tooltipClassName = _ref.tooltipClassName;
if (signifierTypes.indexOf(Component.displayName) === -1) {
console.warn("You are using unsupported Signifier icon");
}
const _useState = useState("c-signifier--top"),
direction = _useState[0],
setDirection = _useState[1];
const _useState2 = useState(value),
setPrevValue = _useState2[1];
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