forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 13:36:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move more components to shlink-web-component when applicable

Browse Source
This commit is contained in:
Alejandro Celaya
2023-07-29 10:43:15 +02:00
parent 275745fd3a
commit 8d24116859
94 changed files with 224 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/CopyToClipboardIcon.scss
View File

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

16
src/utils/CopyToClipboardIcon.tsx
View File

@@ -1,16 +0,0 @@
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>
);

17
src/utils/ExportBtn.tsx
View File

@@ -1,17 +0,0 @@
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>
);

24
src/utils/InfoTooltip.tsx
View File

@@ -1,24 +0,0 @@
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>
</>
);
};

25
src/utils/PaginationDropdown.tsx
View File

@@ -1,25 +0,0 @@
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>
);

16
src/utils/helpers/charts.ts
View File

@@ -1,16 +0,0 @@
import type { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
import { prettify } from './numbers';
export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveElement[]) => {
if (!native?.target) {
return;
}
const canvas = native.target as HTMLCanvasElement;
canvas.style.cursor = firstElement ? 'pointer' : 'default';
};
export const renderChartLabel = ({ dataset, raw }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(`${raw}`)}`;
export const renderPieChartLabel = ({ label, raw }: TooltipItem<ChartType>) => `${label}: ${prettify(`${raw}`)}`;

2
src/utils/helpers/dateIntervals.ts
View File

@@ -1,6 +1,5 @@
import { endOfDay, startOfDay, subDays } from 'date-fns';
import { cond, filter, isEmpty, T } from 'ramda';
import { equals } from '../utils';
import type { DateOrString } from './date';
import { dateOrNull, formatInternational, isBeforeOrEqual, now, parseISO } from './date';
@@ -68,6 +67,7 @@ export const rangeOrIntervalToString = (range?: DateRange | DateInterval): strin
const startOfDaysAgo = (daysAgo: number) => startOfDay(subDays(now(), daysAgo));
const endingToday = (startDate: Date): DateRange => ({ startDate, endDate: endOfDay(now()) });
const equals = (value: any) => (otherValue: any) => value === otherValue;
export const intervalToDateRange = cond<[DateInterval | undefined], DateRange>([
[equals('today'), () => endingToday(startOfDay(now()))],

7
src/utils/helpers/numbers.ts
View File

@@ -1,7 +0,0 @@
const TEN_ROUNDING_NUMBER = 10;
const { ceil } = Math;
const formatter = new Intl.NumberFormat('en-US');
export const prettify = (number: number | string) => formatter.format(Number(number));
export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;

39
src/utils/helpers/pagination.ts
View File

@@ -1,39 +0,0 @@
import { max, min, range } from 'ramda';
import { prettify } from './numbers';
const DELTA = 2;
export const ELLIPSIS = '...';
type Ellipsis = typeof ELLIPSIS;
export type NumberOrEllipsis = number | Ellipsis;
export const progressivePagination = (currentPage: number, pageCount: number): NumberOrEllipsis[] => {
const pages: NumberOrEllipsis[] = range(
max(DELTA, currentPage - DELTA),
min(pageCount - 1, currentPage + DELTA) + 1,
);
if (currentPage - DELTA > DELTA) {
pages.unshift(ELLIPSIS);
}
if (currentPage + DELTA < pageCount - 1) {
pages.push(ELLIPSIS);
}
pages.unshift(1);
pages.push(pageCount);
return pages;
};
export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
export const prettifyPageNumber = (pageNumber: NumberOrEllipsis): string => (
pageIsEllipsis(pageNumber) ? pageNumber : prettify(pageNumber)
);
export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => (
!pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`
);

23
src/utils/helpers/qrCodes.ts
View File

@@ -1,23 +0,0 @@
import { isEmpty } from 'ramda';
import { stringifyQuery } from '../../../shlink-web-component/utils/helpers/query';
export type QrCodeFormat = 'svg' | 'png';
export type QrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
export interface QrCodeOptions {
size: number;
format: QrCodeFormat;
margin: number;
errorCorrection: QrErrorCorrection;
}
export const buildQrCodeUrl = (shortUrl: string, { margin, ...options }: QrCodeOptions): string => {
const baseUrl = `${shortUrl}/qr-code`;
const query = stringifyQuery({
...options,
margin: margin > 0 ? margin : undefined,
});
return `${baseUrl}${isEmpty(query) ? '' : `?${query}`}`;
};

14
src/utils/helpers/version.ts
View File

@@ -1,18 +1,20 @@
import { compare } from 'compare-versions';
import { identity, memoizeWith } from 'ramda';
import type { Empty } from '../utils';
import { hasValue } from '../utils';
import { identity, isEmpty, isNil, memoizeWith } from 'ramda';
type Empty = null | undefined | '' | never[];
const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !isEmpty(value);
type SemVerPatternFragment = `${bigint | '*'}`;
export type SemVerPattern = SemVerPatternFragment
type SemVerPattern = SemVerPatternFragment
| `${SemVerPatternFragment}.${SemVerPatternFragment}`
| `${SemVerPatternFragment}.${SemVerPatternFragment}.${SemVerPatternFragment}`;
export interface Versions {
type Versions = {
maxVersion?: SemVerPattern;
minVersion?: SemVerPattern;
}
};
export type SemVer = `${bigint}.${bigint}.${bigint}` | 'latest';

2
src/utils/services/provideServices.ts
View File

@@ -1,5 +1,4 @@
import type Bottle from 'bottlejs';
import { ColorGenerator } from '../../../shlink-web-component/utils/services/ColorGenerator';
import { csvToJson, jsonToCsv } from '../helpers/csvjson';
import { useTimeoutToggle } from '../helpers/hooks';
import { LocalStorage } from './LocalStorage';
@@ -7,7 +6,6 @@ import { LocalStorage } from './LocalStorage';
export const provideServices = (bottle: Bottle) => {
bottle.constant('localStorage', window.localStorage);
bottle.service('Storage', LocalStorage, 'localStorage');
bottle.service('ColorGenerator', ColorGenerator, 'Storage');
bottle.constant('csvToJson', csvToJson);
bottle.constant('jsonToCsv', jsonToCsv);

19
src/utils/table/TableOrderIcon.tsx
View File

@@ -1,19 +0,0 @@
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Order } from '../helpers/ordering';
interface TableOrderIconProps<T> {
currentOrder: Order<T>;
field: T;
className?: string;
}
export function TableOrderIcon<T extends string = string>(
{ currentOrder, field, className = 'ms-1' }: TableOrderIconProps<T>,
) {
if (!currentOrder.dir || currentOrder.field !== field) {
return null;
}
return <FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className={className} />;
}

3
src/utils/types.ts
View File

@@ -1,3 +0,0 @@
export type MediaMatcher = (query: string) => MediaQueryList;
export type Fetch = typeof window.fetch;

33
src/utils/utils.ts
View File

@@ -1,36 +1,11 @@
import { isEmpty, isNil, pipe, range } from 'ramda';
import { pipe } from 'ramda';
import type { SyntheticEvent } from 'react';
export const rangeOf = <T>(size: number, mappingFn: (value: number) => T, startAt = 1): T[] =>
range(startAt, size + 1).map(mappingFn);
export type Empty = null | undefined | '' | never[];
export const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !isEmpty(value);
export const handleEventPreventingDefault = <T>(handler: () => T) => pipe(
(e: SyntheticEvent) => e.preventDefault(),
handler,
);
export type Nullable<T> = {
[P in keyof T]: T[P] | null
};
type Optional<T> = T | null | undefined;
export type OptionalString = Optional<string>;
export const nonEmptyValueOrNull = <T>(value: T): T | null => (isEmpty(value) ? null : value);
export const capitalize = <T extends string>(value: T): string => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
export const equals = (value: any) => (otherValue: any) => value === otherValue;
export type BooleanString = 'true' | 'false';
export const parseBooleanToString = (value: boolean): BooleanString => (value ? 'true' : 'false');
export const parseOptionalBooleanToString = (value?: boolean): BooleanString | undefined => (
value === undefined ? undefined : parseBooleanToString(value)
export const handleEventPreventingDefault = <T>(handler: () => T) => pipe(
(e: SyntheticEvent) => e.preventDefault(),
handler,
);