@thenewboston/ui
Version:
UI Library for the thenewboston community
677 lines (578 loc) • 24.1 kB
JavaScript
import React, { forwardRef, useMemo, useCallback } from 'react';
import clsx from 'clsx';
import { bemify } from '@thenewboston/utils';
import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
import AlertCircleCheckOutlineIcon from 'mdi-react/AlertCircleCheckOutlineIcon';
import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
import AlertCircleOutlineIcon from 'mdi-react/AlertCircleOutlineIcon';
import AlertIcon from 'mdi-react/AlertIcon';
import ArrowCollapseDownIcon from 'mdi-react/ArrowCollapseDownIcon';
import ArrowDownIcon from 'mdi-react/ArrowDownIcon';
import ArrowLeftIcon from 'mdi-react/ArrowLeftIcon';
import ArrowRightIcon from 'mdi-react/ArrowRightIcon';
import ArrowUpIcon from 'mdi-react/ArrowUpIcon';
import BellIcon from 'mdi-react/BellIcon';
import ChartAreasplineIcon from 'mdi-react/ChartAreasplineIcon';
import ChartTimelineVariantShimmer from 'mdi-react/ChartTimelineVariantShimmerIcon';
import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
import CheckboxBlankCircleIcon from 'mdi-react/CheckboxBlankCircleIcon';
import CheckboxBlankCircleOutlineIcon from 'mdi-react/CheckboxBlankCircleOutlineIcon';
import CheckboxBlankOutlineIcon from 'mdi-react/CheckboxBlankOutlineIcon';
import CheckboxMarkedIcon from 'mdi-react/CheckboxMarkedIcon';
import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
import ChevronUpIcon from 'mdi-react/ChevronUpIcon';
import CloseIcon from 'mdi-react/CloseIcon';
import ContentCopyIcon from 'mdi-react/ContentCopyIcon';
import CurrencyUsdIcon from 'mdi-react/CurrencyUsdIcon';
import DevToIcon from 'mdi-react/DevToIcon';
import DiscordIcon from 'mdi-react/DiscordIcon';
import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
import DownloadIcon from 'mdi-react/DownloadIcon';
import EarthIcon from 'mdi-react/EarthIcon';
import EyeIcon from 'mdi-react/EyeIcon';
import EyeOffIcon from 'mdi-react/EyeOffIcon';
import FacebookIcon from 'mdi-react/FacebookIcon';
import FileDocumentIcon from 'mdi-react/FileDocumentIcon';
import FileDownloadIcon from 'mdi-react/FileDownloadIcon';
import FilterMenuIcon from 'mdi-react/FilterMenuIcon';
import ForumIcon from 'mdi-react/ForumIcon';
import GithubIcon from 'mdi-react/GithubIcon';
import GoogleControllerIcon from 'mdi-react/GoogleControllerIcon';
import HammerWrenchIcon from 'mdi-react/HammerWrenchIcon';
import HumanHandsupIcon from 'mdi-react/HumanHandsupIcon';
import InformationIcon from 'mdi-react/InformationIcon';
import InstagramIcon from 'mdi-react/InstagramIcon';
import LanConnectIcon from 'mdi-react/LanConnectIcon';
import LanDisconnectIcon from 'mdi-react/LanDisconnectIcon';
import LinkIcon from 'mdi-react/LinkIcon';
import LinkedinIcon from 'mdi-react/LinkedinIcon';
import LoadingIcon from 'mdi-react/LoadingIcon';
import MapMarkerCheckIcon from 'mdi-react/MapMarkerCheckIcon';
import MenuIcon from 'mdi-react/MenuIcon';
import MenuRightIcon from 'mdi-react/MenuRightIcon';
import MinusIcon from 'mdi-react/MinusIcon';
import NotebookCheckOutlineIcon from 'mdi-react/NotebookCheckOutlineIcon';
import OpenInNewIcon from 'mdi-react/OpenInNewIcon';
import PencilIcon from 'mdi-react/PencilIcon';
import PinterestIcon from 'mdi-react/PinterestIcon';
import PlayBoxMultipleIcon from 'mdi-react/PlayBoxMultipleIcon';
import PlayIcon from 'mdi-react/PlayIcon';
import PlusIcon from 'mdi-react/PlusIcon';
import QrcodeIcon from 'mdi-react/QrcodeIcon';
import RadioboxBlankIcon from 'mdi-react/RadioboxBlankIcon';
import RadioboxMarkedIcon from 'mdi-react/RadioboxMarkedIcon';
import RedditIcon from 'mdi-react/RedditIcon';
import RefreshIcon from 'mdi-react/RefreshIcon';
import SlackIcon from 'mdi-react/SlackIcon';
import SortAscendingIcon from 'mdi-react/SortAscendingIcon';
import SortDescendingIcon from 'mdi-react/SortDescendingIcon';
import SyncIcon from 'mdi-react/SyncIcon';
import TextBoxIcon from 'mdi-react/TextBoxIcon';
import ThumbsUpIcon from 'mdi-react/ThumbsUpIcon';
import TrophyIcon from 'mdi-react/TrophyIcon';
import TwitchIcon from 'mdi-react/TwitchIcon';
import TwitterIcon from 'mdi-react/TwitterIcon';
import YoutubeIcon from 'mdi-react/YoutubeIcon';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ":root{--color-alert:#ed5f74;--color-black:#000;--color-danger:#d30c15;--color-gray-050:#f7fafc;--color-gray-100:#e3e8ee;--color-gray-300:#a3acb9;--color-gray-500:#697386;--color-gray-700:#3c4257;--color-green-100:#cbf4c9;--color-green-500:#09825d;--color-primary-disabled-fill:#fff9f9;--color-primary-disabled-text:#94c9ea;--color-primary-disabled:#b2d7ee;--color-primary-hover:#06457a;--color-primary-outline-bg:#b9daee;--color-primary:#042235;--color-red-100:#fde2dd;--color-red-500:#cd3d64;--color-secondary:#556cd6;--color-tertiary:#1ea672;--color-white:#fff;--color-yellow-100:#f8e5b9;--color-yellow-500:#bb5504}";
styleInject(css_248z);
var TnbIcon = function TnbIcon(_ref) {
var className = _ref.className,
_ref$color = _ref.color,
color = _ref$color === void 0 ? 'currentColor' : _ref$color,
onClick = _ref.onClick,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 24 : _ref$size;
return React.createElement("svg", {
className: clsx('TnbIcon', {
className: className
}),
width: size,
height: size,
fill: color,
onClick: onClick,
viewBox: "0 0 24 24"
}, React.createElement("path", {
d: "M4.23529 0.5H0L7.76471 8.5L0 16.5H4.23529L12 8.5L4.23529 0.5Z"
}));
};
var css_248z$1 = ".Icon{box-sizing:border-box;line-height:1.2;align-items:center;border-radius:50%;display:flex;justify-content:center;transition:background-color .3s,color .3s}.Icon:focus{background:var(--color-gray-100)}.Icon--button{cursor:pointer}.Icon--button:hover{background:var(--color-gray-100)}.Icon--disabled{color:var(--color-gray-300);cursor:default}.Icon--disabled:hover{background:transparent}.TnbIcon{margin-right:-6px;margin-top:1px}";
styleInject(css_248z$1);
var IconType;
(function (IconType) {
IconType["accountGroup"] = "account-group";
IconType["alert"] = "alert";
IconType["alertCircle"] = "alert-circle";
IconType["alertCircleCheckOutline"] = "alert-circle-check-outline";
IconType["alertCircleOutline"] = "alert-circle-outline";
IconType["arrowCollapseDown"] = "arrow-collapse-down";
IconType["arrowDown"] = "arrow-down";
IconType["arrowLeft"] = "arrow-left";
IconType["arrowRight"] = "arrow-right";
IconType["arrowUp"] = "arrow-up";
IconType["bell"] = "bell";
IconType["chartAreaspline"] = "chart-areaspline";
IconType["chartTimelineVariantShimmer"] = "chart-timeline-variant-shimmer";
IconType["checkCircle"] = "check-circle";
IconType["checkboxBlankCircle"] = "checkbox-blank-circle";
IconType["checkboxBlankCircleOutline"] = "checkbox-blank-circle-outline";
IconType["checkboxBlankOutline"] = "checkbox-blank-outline";
IconType["checkboxMarked"] = "checkbox-marked";
IconType["chevronDown"] = "chevron-down";
IconType["chevronLeft"] = "chevron-left";
IconType["chevronRight"] = "chevron-right";
IconType["chevronUp"] = "chevron-up";
IconType["close"] = "close";
IconType["contentCopy"] = "content-copy";
IconType["currencyUsd"] = "currency-usd";
IconType["devTo"] = "dev-to";
IconType["discord"] = "discord";
IconType["dotsVertical"] = "dots-vertical";
IconType["download"] = "download";
IconType["earth"] = "earth";
IconType["eye"] = "eye";
IconType["eyeOff"] = "eye-off";
IconType["facebook"] = "facebook";
IconType["fileDocument"] = "file-document";
IconType["fileDownload"] = "file-download";
IconType["filterMenu"] = "filter-menu";
IconType["forum"] = "forum";
IconType["github"] = "github";
IconType["googleController"] = "google-controller";
IconType["hammerWrench"] = "hammer-wrench";
IconType["humanHandsup"] = "human-handsup";
IconType["information"] = "information";
IconType["instagram"] = "instagram";
IconType["lanConnect"] = "lan-connect";
IconType["lanDisconnect"] = "lan-disconnect";
IconType["link"] = "link";
IconType["linkedin"] = "linkedin";
IconType["loading"] = "loading";
IconType["mapMarkerCheck"] = "map-marker-check";
IconType["menu"] = "menu";
IconType["menuRight"] = "menu-right";
IconType["minus"] = "minus";
IconType["notebookCheckOutline"] = "notebook-check-outline";
IconType["openInNew"] = "open-in-new";
IconType["pencil"] = "pencil";
IconType["pinterest"] = "pinterest";
IconType["play"] = "play";
IconType["playBoxMultiple"] = "playBoxMultiple";
IconType["plus"] = "plus";
IconType["qrcode"] = "qrcode";
IconType["radioboxBlank"] = "radiobox-blank";
IconType["radioboxMarked"] = "radiobox-marked";
IconType["reddit"] = "reddit";
IconType["refresh"] = "refresh";
IconType["slack"] = "slack";
IconType["sortAscending"] = "sort-ascending";
IconType["sortDescending"] = "sort-descending";
IconType["sync"] = "sync";
IconType["textBox"] = "text-box";
IconType["thumbsUp"] = "thumbs-up";
IconType["tnb"] = "tnb";
IconType["trophy"] = "trophy";
IconType["twitch"] = "twitch";
IconType["twitter"] = "twitter";
IconType["youtube"] = "youtube";
})(IconType || (IconType = {}));
/**
* Icon component with optional ability to pass in an onClick event handler.
*/
var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
var className = _ref.className,
dataTestId = _ref.dataTestId,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
icon = _ref.icon,
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
size = _ref.size,
_ref$totalSize = _ref.totalSize,
totalSize = _ref$totalSize === void 0 ? 30 : _ref$totalSize,
_ref$unfocusable = _ref.unfocusable,
unfocusable = _ref$unfocusable === void 0 ? false : _ref$unfocusable;
var divStyle = useMemo(function () {
if (totalSize === 'unset') return {};
var divSize = Math.max(size || 0, totalSize);
return {
height: divSize,
width: divSize
};
}, [size, totalSize]);
var tabIndex = useMemo(function () {
return unfocusable || disabled || !onClick ? undefined : 0;
}, [disabled, onClick, unfocusable]);
var handleClick = function handleClick(e) {
if (disabled || !onClick) return;
onClick(e);
};
var handleKeyDown = function handleKeyDown(e) {
if (!onClick) return;
if (e.key === 'Enter' && !disabled) {
handleClick();
}
onKeyDown == null ? void 0 : onKeyDown(e);
};
var renderIcon = useCallback(function () {
var iconBaseProps = {
'data-testid': 'Icon__svg'
};
switch (icon) {
case IconType.accountGroup:
return React.createElement(AccountGroupIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.alert:
return React.createElement(AlertIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.alertCircleCheckOutline:
return React.createElement(AlertCircleCheckOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.alertCircle:
return React.createElement(AlertCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.alertCircleOutline:
return React.createElement(AlertCircleOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.arrowCollapseDown:
return React.createElement(ArrowCollapseDownIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.arrowDown:
return React.createElement(ArrowDownIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.arrowLeft:
return React.createElement(ArrowLeftIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.arrowRight:
return React.createElement(ArrowRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.arrowUp:
return React.createElement(ArrowUpIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.bell:
return React.createElement(BellIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.chartAreaspline:
return React.createElement(ChartAreasplineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.chartTimelineVariantShimmer:
return React.createElement(ChartTimelineVariantShimmer, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.checkCircle:
return React.createElement(CheckCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.checkboxBlankCircle:
return React.createElement(CheckboxBlankCircleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.checkboxBlankCircleOutline:
return React.createElement(CheckboxBlankCircleOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.checkboxBlankOutline:
return React.createElement(CheckboxBlankOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.checkboxMarked:
return React.createElement(CheckboxMarkedIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.chevronDown:
return React.createElement(ChevronDownIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.chevronLeft:
return React.createElement(ChevronLeftIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.chevronRight:
return React.createElement(ChevronRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.chevronUp:
return React.createElement(ChevronUpIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.close:
return React.createElement(CloseIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.contentCopy:
return React.createElement(ContentCopyIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.currencyUsd:
return React.createElement(CurrencyUsdIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.devTo:
return React.createElement(DevToIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.discord:
return React.createElement(DiscordIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case IconType.dotsVertical:
return React.createElement(DotsVerticalIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.download:
return React.createElement(DownloadIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.earth:
return React.createElement(EarthIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.eye:
return React.createElement(EyeIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.eyeOff:
return React.createElement(EyeOffIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.facebook:
return React.createElement(FacebookIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.fileDocument:
return React.createElement(FileDocumentIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.fileDownload:
return React.createElement(FileDownloadIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.filterMenu:
return React.createElement(FilterMenuIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.forum:
return React.createElement(ForumIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.github:
return React.createElement(GithubIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.googleController:
return React.createElement(GoogleControllerIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.hammerWrench:
return React.createElement(HammerWrenchIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.humanHandsup:
return React.createElement(HumanHandsupIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.information:
return React.createElement(InformationIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.instagram:
return React.createElement(InstagramIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.lanConnect:
return React.createElement(LanConnectIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.lanDisconnect:
return React.createElement(LanDisconnectIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.link:
return React.createElement(LinkIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.linkedin:
return React.createElement(LinkedinIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.loading:
return React.createElement(LoadingIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.mapMarkerCheck:
return React.createElement(MapMarkerCheckIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.menu:
return React.createElement(MenuIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.menuRight:
return React.createElement(MenuRightIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.minus:
return React.createElement(MinusIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.notebookCheckOutline:
return React.createElement(NotebookCheckOutlineIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.openInNew:
return React.createElement(OpenInNewIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.pencil:
return React.createElement(PencilIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.pinterest:
return React.createElement(PinterestIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.play:
return React.createElement(PlayIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.playBoxMultiple:
return React.createElement(PlayBoxMultipleIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.plus:
return React.createElement(PlusIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.qrcode:
return React.createElement(QrcodeIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.radioboxBlank:
return React.createElement(RadioboxBlankIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.radioboxMarked:
return React.createElement(RadioboxMarkedIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.reddit:
return React.createElement(RedditIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.refresh:
return React.createElement(RefreshIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.slack:
return React.createElement(SlackIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.sortAscending:
return React.createElement(SortAscendingIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.sortDescending:
return React.createElement(SortDescendingIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.sync:
return React.createElement(SyncIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.textBox:
return React.createElement(TextBoxIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case IconType.thumbsUp:
return React.createElement(ThumbsUpIcon, Object.assign({}, iconBaseProps, {
size: size || 20
}));
case IconType.tnb:
return React.createElement(TnbIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.trophy:
return React.createElement(TrophyIcon, Object.assign({}, iconBaseProps, {
size: size || 22
}));
case IconType.twitch:
return React.createElement(TwitchIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.twitter:
return React.createElement(TwitterIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
case IconType.youtube:
return React.createElement(YoutubeIcon, Object.assign({}, iconBaseProps, {
size: size || 24
}));
default:
return null;
}
}, [icon, size]);
return React.createElement("div", {
className: clsx('Icon', className, _extends({
'Icon--button': !!onClick,
'Icon--disabled': disabled
}, bemify(className, '--disabled', disabled))),
"data-testid": dataTestId || 'Icon',
ref: ref,
role: !!onClick ? 'button' : 'img',
onClick: handleClick,
onKeyDown: handleKeyDown,
style: divStyle,
tabIndex: tabIndex
}, renderIcon());
});
export { Icon, IconType };
//# sourceMappingURL=ui.esm.js.map