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

Move date components and helpers to shlink-web-component

Browse Source
This commit is contained in:
Alejandro Celaya
2023-07-31 18:10:34 +02:00
parent 8d24116859
commit bc11e568b9
49 changed files with 138 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/settings/VisitsSettings.tsx
View File

@@ -1,10 +1,10 @@
import type { FC } from 'react';
import { FormGroup } from 'reactstrap';
import type { Settings } from '../../shlink-web-component/utils/settings';
import type { Settings } from '../../shlink-web-component';
import type { DateInterval } from '../../shlink-web-component/utils/dates/helpers/dateIntervals';
import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
import { FormText } from '../utils/forms/FormText';
import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup';
import type { DateInterval } from '../utils/helpers/dateIntervals';
import { SimpleCard } from '../utils/SimpleCard';
import { ToggleSwitch } from '../utils/ToggleSwitch';

111
src/utils/dates/DateInput.scss
View File

@@ -1,111 +0,0 @@
@import '../mixins/vertical-align';
@import '../base';
.react-datepicker__close-icon.react-datepicker__close-icon {
@include vertical-align();
right: 0;
}
.react-datepicker__close-icon.react-datepicker__close-icon:after {
right: .75rem;
line-height: 11px;
background-color: #333333;
font-size: 14px;
}
.react-datepicker__input-container,
.react-datepicker-wrapper {
display: block !important;
}
.react-datepicker__day--keyboard-selected {
background-color: $mainColor;
&:hover {
background-color: darken($mainColor, 12%);
}
}
.react-datepicker__time.react-datepicker__time,
.react-datepicker.react-datepicker {
background-color: var(--primary-color) !important;
color: var(--text-color);
border-color: var(--border-color);
}
.react-datepicker__header.react-datepicker__header {
background-color: var(--secondary-color);
border-color: var(--border-color);
}
.react-datepicker__current-month.react-datepicker__current-month,
.react-datepicker-time__header.react-datepicker-time__header,
.react-datepicker-year-header.react-datepicker-year-header,
.react-datepicker__day-name.react-datepicker__day-name,
.react-datepicker__day.react-datepicker__day:not(:hover):not(.react-datepicker__day--selected),
.react-datepicker__time-name.react-datepicker__time-name {
color: inherit;
}
.react-datepicker__day--disabled.react-datepicker__day--disabled {
cursor: default;
color: var(--border-color) !important;
}
.react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected.react-datepicker__year-text--keyboard-selected {
background-color: var(--brand-color) !important;
color: white !important;
}
.react-datepicker__time-list-item.react-datepicker__time-list-item:hover {
color: #232323;
}
.react-datepicker__time-container.react-datepicker__time-container {
border-color: var(--border-color);
}
.react-datepicker__time-list.react-datepicker__time-list {
/* Forefox scrollbar */
scrollbar-color: rgba(0, 0, 0, 0.5) var(--secondary-color);
scrollbar-width: thin;
/* Chrome webkit scrollbar */
&::-webkit-scrollbar {
width: 10px;
background-color: var(--secondary-color);
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0.5rem;
}
}
.react-datepicker-popper.react-datepicker-popper {
z-index: 2;
&[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
&::after {
border-top-color: var(--primary-color);
}
&::before {
border-top-color: var(--border-color);
}
}
&[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
&::after {
border-bottom-color: var(--secondary-color);
}
&::before {
border-bottom-color: var(--border-color);
}
}
}

42
src/utils/dates/DateInput.tsx
View File

@@ -1,42 +0,0 @@
import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { isNil } from 'ramda';
import { useRef } from 'react';
import type { ReactDatePickerProps } from 'react-datepicker';
import DatePicker from 'react-datepicker';
import { STANDARD_DATE_FORMAT } from '../helpers/date';
import './DateInput.scss';
export type DateInputProps = ReactDatePickerProps;
export const DateInput = (props: DateInputProps) => {
const { className, isClearable, selected, dateFormat } = props;
const showCalendarIcon = !isClearable || isNil(selected);
const ref = useRef<{ input: HTMLInputElement }>();
return (
<div className="icon-input-container">
<DatePicker
{...props}
popperModifiers={[
{
name: 'arrow',
options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
},
]}
dateFormat={dateFormat ?? STANDARD_DATE_FORMAT}
className={classNames('icon-input-container__input form-control', className)}
// @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
ref={ref}
/>
{showCalendarIcon && (
<FontAwesomeIcon
icon={calendarIcon}
className="icon-input-container__icon"
onClick={() => ref.current?.input.focus()}
/>
)}
</div>
);
};

26
src/utils/dates/DateIntervalDropdownItems.tsx
View File

@@ -1,26 +0,0 @@
import type { FC } from 'react';
import { DropdownItem } from 'reactstrap';
import type { DateInterval } from '../helpers/dateIntervals';
import { DATE_INTERVALS, rangeOrIntervalToString } from '../helpers/dateIntervals';
export interface DateIntervalDropdownProps {
active?: DateInterval;
allText: string;
onChange: (interval: DateInterval) => void;
}
export const DateIntervalDropdownItems: FC<DateIntervalDropdownProps> = ({ active, allText, onChange }) => (
<>
<DropdownItem active={active === 'all'} onClick={() => onChange('all')}>
{allText}
</DropdownItem>
<DropdownItem divider />
{DATE_INTERVALS.map(
(interval) => (
<DropdownItem key={interval} active={active === interval} onClick={() => onChange(interval)}>
{rangeOrIntervalToString(interval)}
</DropdownItem>
),
)}
</>
);

38
src/utils/dates/DateIntervalSelector.tsx
View File

@@ -1,11 +1,39 @@
import type { FC } from 'react';
import { DropdownItem } from 'reactstrap';
import type { Settings } from '../../../shlink-web-component';
import { rangeOrIntervalToString } from '../../../shlink-web-component/utils/dates/helpers/dateIntervals';
import { DropdownBtn } from '../DropdownBtn';
import { rangeOrIntervalToString } from '../helpers/dateIntervals';
import type { DateIntervalDropdownProps } from './DateIntervalDropdownItems';
import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active, allText }) => (
type DateInterval = Exclude<Settings['visits'], undefined>['defaultInterval'];
export interface DateIntervalSelectorProps {
active?: DateInterval;
allText: string;
onChange: (interval: DateInterval) => void;
}
const INTERVAL_TO_STRING_MAP: Record<Exclude<DateInterval, 'all'>, string> = {
today: 'Today',
yesterday: 'Yesterday',
last7Days: 'Last 7 days',
last30Days: 'Last 30 days',
last90Days: 'Last 90 days',
last180Days: 'Last 180 days',
last365Days: 'Last 365 days',
};
export const DateIntervalSelector: FC<DateIntervalSelectorProps> = ({ onChange, active, allText }) => (
<DropdownBtn text={rangeOrIntervalToString(active) ?? allText}>
<DateIntervalDropdownItems allText={allText} active={active} onChange={onChange} />
<DropdownItem active={active === 'all'} onClick={() => onChange('all')}>
{allText}
</DropdownItem>
<DropdownItem divider />
{Object.entries(INTERVAL_TO_STRING_MAP).map(
([interval, name]) => (
<DropdownItem key={interval} active={active === interval} onClick={() => onChange(interval as DateInterval)}>
{name}
</DropdownItem>
),
)}
</DropdownBtn>
);

37
src/utils/dates/DateRangeRow.tsx
View File

@@ -1,37 +0,0 @@
import { endOfDay } from 'date-fns';
import type { DateRange } from '../helpers/dateIntervals';
import { DateInput } from './DateInput';
interface DateRangeRowProps extends DateRange {
onStartDateChange: (date: Date | null) => void;
onEndDateChange: (date: Date | null) => void;
disabled?: boolean;
}
export const DateRangeRow = (
{ startDate = null, endDate = null, disabled = false, onStartDateChange, onEndDateChange }: DateRangeRowProps,
) => (
<div className="row">
<div className="col-md-6">
<DateInput
selected={startDate}
placeholderText="Since..."
isClearable
maxDate={endDate ?? undefined}
disabled={disabled}
onChange={onStartDateChange}
/>
</div>
<div className="col-md-6">
<DateInput
className="mt-2 mt-md-0"
selected={endDate}
placeholderText="Until..."
isClearable
minDate={startDate ?? undefined}
disabled={disabled}
onChange={(date) => onEndDateChange(date && endOfDay(date))}
/>
</div>
</div>
);

67
src/utils/dates/DateRangeSelector.tsx
View File

@@ -1,67 +0,0 @@
import { useState } from 'react';
import { DropdownItem } from 'reactstrap';
import { DropdownBtn } from '../DropdownBtn';
import type {
DateInterval,
DateRange } from '../helpers/dateIntervals';
import {
ALL,
dateRangeIsEmpty,
intervalToDateRange,
rangeIsInterval,
rangeOrIntervalToString,
} from '../helpers/dateIntervals';
import { useEffectExceptFirstTime } from '../helpers/hooks';
import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
import { DateRangeRow } from './DateRangeRow';
export interface DateRangeSelectorProps {
initialDateRange?: DateInterval | DateRange;
disabled?: boolean;
onDatesChange: (dateRange: DateRange) => void;
defaultText: string;
updatable?: boolean;
}
export const DateRangeSelector = (
{ onDatesChange, initialDateRange, defaultText, disabled, updatable = false }: DateRangeSelectorProps,
) => {
const initialIntervalIsRange = rangeIsInterval(initialDateRange);
const [activeInterval, setActiveInterval] = useState<DateInterval | undefined>(
initialIntervalIsRange ? initialDateRange : undefined,
);
const [activeDateRange, setActiveDateRange] = useState(initialIntervalIsRange ? undefined : initialDateRange);
const updateDateRange = (dateRange: DateRange) => {
setActiveInterval(dateRangeIsEmpty(dateRange) ? ALL : undefined);
setActiveDateRange(dateRange);
onDatesChange(dateRange);
};
const updateInterval = (dateInterval: DateInterval) => {
setActiveInterval(dateInterval);
setActiveDateRange(undefined);
onDatesChange(intervalToDateRange(dateInterval));
};
updatable && useEffectExceptFirstTime(() => {
const isDateInterval = rangeIsInterval(initialDateRange);
isDateInterval && updateInterval(initialDateRange);
initialDateRange && !isDateInterval && updateDateRange(initialDateRange);
}, [initialDateRange]);
return (
<DropdownBtn disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
<DateIntervalDropdownItems allText={defaultText} active={activeInterval} onChange={updateInterval} />
<DropdownItem divider />
<DropdownItem header>Custom:</DropdownItem>
<DropdownItem text>
<DateRangeRow
{...activeDateRange}
onStartDateChange={(startDate) => updateDateRange({ ...activeDateRange, startDate })}
onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
/>
</DropdownItem>
</DropdownBtn>
);
};

15
src/utils/dates/DateTimeInput.tsx
View File

@@ -1,15 +0,0 @@
import type { FC } from 'react';
import type { ReactDatePickerProps } from 'react-datepicker';
import { STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
import { DateInput } from './DateInput';
export type DateTimeInputProps = Omit<ReactDatePickerProps, 'showTimeSelect' | 'dateFormat' | 'timeIntervals'>;
export const DateTimeInput: FC<DateTimeInputProps> = (props) => (
<DateInput
{...props}
dateFormat={STANDARD_DATE_AND_TIME_FORMAT}
showTimeSelect
timeIntervals={10}
/>
);

18
src/utils/dates/Time.tsx
View File

@@ -1,18 +0,0 @@
import { format as formatDate, formatDistance, getUnixTime, parseISO } from 'date-fns';
import { isDateObject, now, STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
export interface TimeProps {
date: Date | string;
format?: string;
relative?: boolean;
}
export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => {
const dateObject = isDateObject(date) ? date : parseISO(date);
return (
<time dateTime={`${getUnixTime(dateObject)}000`}>
{relative ? `${formatDistance(now(), dateObject)} ago` : formatDate(dateObject, format)}
</time>
);
};

50
src/utils/helpers/date.ts
View File

@@ -1,50 +0,0 @@
import { format, formatISO, isBefore, isEqual, isWithinInterval, parse, parseISO as stdParseISO } from 'date-fns';
import type { OptionalString } from '../utils';
export const STANDARD_DATE_FORMAT = 'yyyy-MM-dd';
export const STANDARD_DATE_AND_TIME_FORMAT = 'yyyy-MM-dd HH:mm';
export type DateOrString = Date | string;
type NullableDate = DateOrString | null;
export const now = () => new Date();
export const isDateObject = (date: DateOrString): date is Date => typeof date !== 'string';
const formatDateFromFormat = (date?: NullableDate, theFormat?: string): OptionalString => {
if (!date || !isDateObject(date)) {
return date;
}
return theFormat ? format(date, theFormat) : formatISO(date);
};
export const formatDate = (theFormat = STANDARD_DATE_FORMAT) => (date?: NullableDate) => formatDateFromFormat(
date,
theFormat,
);
export const formatIsoDate = (date?: NullableDate) => formatDateFromFormat(date, undefined);
export const formatInternational = formatDate();
export const formatHumanFriendly = formatDate(STANDARD_DATE_AND_TIME_FORMAT);
export const parseDate = (date: string, theFormat: string) => parse(date, theFormat, now());
export const parseISO = (date: DateOrString): Date => (isDateObject(date) ? date : stdParseISO(date));
export const dateOrNull = (date?: string): Date | null => (date ? parseISO(date) : null);
export const isBetween = (date: DateOrString, start?: DateOrString, end?: DateOrString): boolean => {
try {
return isWithinInterval(parseISO(date), { start: parseISO(start ?? date), end: parseISO(end ?? date) });
} catch (e) {
return false;
}
};
export const isBeforeOrEqual = (date: Date | number, dateToCompare: Date | number) =>
isEqual(date, dateToCompare) || isBefore(date, dateToCompare);

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

@@ -1,104 +0,0 @@
import { endOfDay, startOfDay, subDays } from 'date-fns';
import { cond, filter, isEmpty, T } from 'ramda';
import type { DateOrString } from './date';
import { dateOrNull, formatInternational, isBeforeOrEqual, now, parseISO } from './date';
export interface DateRange {
startDate?: Date | null;
endDate?: Date | null;
}
export const ALL = 'all';
const INTERVAL_TO_STRING_MAP = {
today: 'Today',
yesterday: 'Yesterday',
last7Days: 'Last 7 days',
last30Days: 'Last 30 days',
last90Days: 'Last 90 days',
last180Days: 'Last 180 days',
last365Days: 'Last 365 days',
[ALL]: undefined,
};
export type DateInterval = keyof typeof INTERVAL_TO_STRING_MAP;
const INTERVALS = Object.keys(INTERVAL_TO_STRING_MAP) as DateInterval[];
export const dateRangeIsEmpty = (dateRange?: DateRange): boolean => dateRange === undefined
|| isEmpty(filter(Boolean, dateRange as any));
export const rangeIsInterval = (range?: DateRange | DateInterval): range is DateInterval =>
typeof range === 'string' && INTERVALS.includes(range);
export const DATE_INTERVALS = INTERVALS.filter((value) => value !== ALL) as DateInterval[];
export const datesToDateRange = (startDate?: string, endDate?: string): DateRange => ({
startDate: dateOrNull(startDate),
endDate: dateOrNull(endDate),
});
const dateRangeToString = (range?: DateRange): string | undefined => {
if (!range || dateRangeIsEmpty(range)) {
return undefined;
}
if (range.startDate && !range.endDate) {
return `Since ${formatInternational(range.startDate)}`;
}
if (!range.startDate && range.endDate) {
return `Until ${formatInternational(range.endDate)}`;
}
return `${formatInternational(range.startDate)} - ${formatInternational(range.endDate)}`;
};
export const rangeOrIntervalToString = (range?: DateRange | DateInterval): string | undefined => {
if (!range || range === ALL) {
return undefined;
}
if (!rangeIsInterval(range)) {
return dateRangeToString(range);
}
return INTERVAL_TO_STRING_MAP[range];
};
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()))],
[equals('yesterday'), () => ({ startDate: startOfDaysAgo(1), endDate: endOfDay(subDays(now(), 1)) })],
[equals('last7Days'), () => endingToday(startOfDaysAgo(7))],
[equals('last30Days'), () => endingToday(startOfDaysAgo(30))],
[equals('last90Days'), () => endingToday(startOfDaysAgo(90))],
[equals('last180Days'), () => endingToday(startOfDaysAgo(180))],
[equals('last365Days'), () => endingToday(startOfDaysAgo(365))],
[T, () => ({})],
]);
export const dateToMatchingInterval = (date: DateOrString): DateInterval => {
const theDate = parseISO(date);
return cond<never, DateInterval>([
[() => isBeforeOrEqual(startOfDay(now()), theDate), () => 'today'],
[() => isBeforeOrEqual(startOfDaysAgo(1), theDate), () => 'yesterday'],
[() => isBeforeOrEqual(startOfDaysAgo(7), theDate), () => 'last7Days'],
[() => isBeforeOrEqual(startOfDaysAgo(30), theDate), () => 'last30Days'],
[() => isBeforeOrEqual(startOfDaysAgo(90), theDate), () => 'last90Days'],
[() => isBeforeOrEqual(startOfDaysAgo(180), theDate), () => 'last180Days'],
[() => isBeforeOrEqual(startOfDaysAgo(365), theDate), () => 'last365Days'],
[T, () => ALL],
])();
};
export const toDateRange = (rangeOrInterval: DateRange | DateInterval): DateRange => {
if (rangeIsInterval(rangeOrInterval)) {
return intervalToDateRange(rangeOrInterval);
}
return rangeOrInterval;
};