forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-07-20 02:31:51 +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

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>
);
};