Move more components to shlink-web-component when applicable

shlink-web-component/utils/components/CopyToClipboardIcon.scss

@@ -0,0 +1,4 @@
+.copy-to-clipboard-icon {
+  cursor: pointer;
+  font-size: 1.2rem;
+}

shlink-web-component/utils/components/CopyToClipboardIcon.tsx

@@ -0,0 +1,16 @@
+import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import './CopyToClipboardIcon.scss';
+
+interface CopyToClipboardIconProps {
+  text: string;
+  onCopy?: (text: string, result: boolean) => void;
+}
+
+export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
+  <CopyToClipboard text={text} onCopy={onCopy}>
+    <FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
+  </CopyToClipboard>
+);

shlink-web-component/utils/components/ExportBtn.tsx

@@ -0,0 +1,17 @@
+import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import type { ButtonProps } from 'reactstrap';
+import { Button } from 'reactstrap';
+import { prettify } from '../helpers/numbers';
+
+type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
+  amount?: number;
+  loading?: boolean;
+};
+
+export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
+  <Button {...rest} outline color="primary" disabled={loading}>
+    <FontAwesomeIcon icon={faFileCsv} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
+  </Button>
+);

shlink-web-component/utils/components/InfoTooltip.tsx

@@ -0,0 +1,24 @@
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Placement } from '@popperjs/core';
+import type { FC, PropsWithChildren } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../helpers/hooks';
+
+export type InfoTooltipProps = PropsWithChildren<{
+  className?: string;
+  placement: Placement;
+}>;
+
+export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
+  const ref = useElementRef<HTMLSpanElement>();
+
+  return (
+    <>
+      <span className={className} ref={ref}>
+        <FontAwesomeIcon icon={infoIcon} />
+      </span>
+      <UncontrolledTooltip target={ref} placement={placement}>{children}</UncontrolledTooltip>
+    </>
+  );
+};

shlink-web-component/utils/components/PaginationDropdown.tsx

@@ -0,0 +1,25 @@
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+
+interface PaginationDropdownProps {
+  ranges: number[];
+  value: number;
+  setValue: (newValue: number) => void;
+  toggleClassName?: string;
+}
+
+export const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => (
+  <UncontrolledDropdown>
+    <DropdownToggle caret color="link" className={toggleClassName}>Paginate</DropdownToggle>
+    <DropdownMenu end>
+      {ranges.map((itemsPerPage) => (
+        <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
+          <b>{itemsPerPage}</b> items per page
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
+        <i>Clear pagination</i>
+      </DropdownItem>
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);

shlink-web-component/utils/components/SimplePaginator.scss

@@ -0,0 +1,3 @@
+.simple-paginator {
+  user-select: none;
+}

shlink-web-component/utils/components/SimplePaginator.tsx

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import type { NumberOrEllipsis } from '../helpers/pagination';
+import {
+  keyForPage,
+  pageIsEllipsis,
+  prettifyPageNumber,
+  progressivePagination,
+} from '../helpers/pagination';
+import './SimplePaginator.scss';
+
+interface SimplePaginatorProps {
+  pagesCount: number;
+  currentPage: number;
+  setCurrentPage: (currentPage: number) => void;
+  centered?: boolean;
+}
+
+export const SimplePaginator: FC<SimplePaginatorProps> = (
+  { pagesCount, currentPage, setCurrentPage, centered = true },
+) => {
+  if (pagesCount < 2) {
+    return null;
+  }
+
+  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
+
+  return (
+    <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
+      </PaginationItem>
+      {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
+        <PaginationItem
+          key={keyForPage(pageNumber, index)}
+          disabled={pageIsEllipsis(pageNumber)}
+          active={currentPage === pageNumber}
+        >
+          <PaginationLink role="link" tag="span" onClick={onClick(pageNumber)}>
+            {prettifyPageNumber(pageNumber)}
+          </PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};