forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-31 17:46:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created common Dropdown component for style consistency

Browse Source
This commit is contained in:
Alejandro Celaya
2020-12-25 10:29:25 +01:00
parent 81d24432a9
commit 6be3a1223f
7 changed files with 92 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/utils/Dropdown.scss Normal file
View File

@@ -0,0 +1,19 @@
@import '../utils/mixins/vertical-align';
.dropdown__btn.dropdown__btn,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled).active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):active,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):focus,
.dropdown__btn.dropdown__btn:not(:disabled):not(.disabled):hover,
.show > .dropdown__btn.dropdown__btn.dropdown-toggle {
color: #6c757d;
background-color: white;
text-align: left;
border-color: rgba(0, 0, 0, .125);
}
.dropdown__btn.dropdown__btn:after {
@include vertical-align();
right: .75rem;
}

21
src/utils/Dropdown.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { FC } from 'react';
import { Dropdown as BsDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
import { useToggle } from './helpers/hooks';
import './Dropdown.scss';
interface DropdownProps {
text: string;
disabled?: boolean;
className?: string;
}
export const Dropdown: FC<DropdownProps> = ({ text, disabled = false, className, children }) => {
const [ isOpen, toggle ] = useToggle();
return (
<BsDropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
<DropdownToggle caret className={`dropdown__btn btn-block ${className}`} color="primary">{text}</DropdownToggle>
<DropdownMenu className="w-100">{children}</DropdownMenu>
</BsDropdown>
);
};

19
src/utils/dates/DateRangeSelector.scss
View File

@@ -1,19 +0,0 @@
@import '../../utils/mixins/vertical-align';
.date-range-selector__btn.date-range-selector__btn,
.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled).active,
.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):active,
.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):focus,
.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):hover,
.show > .date-range-selector__btn.date-range-selector__btn.dropdown-toggle {
color: #6c757d;
background-color: white;
text-align: left;
border-color: rgba(0, 0, 0, .125);
}
.date-range-selector__btn.date-range-selector__btn:after {
@include vertical-align();
right: .75rem;
}

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

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
import { useToggle } from '../helpers/hooks';
import { DropdownItem } from 'reactstrap';
import { Dropdown } from '../Dropdown';
import {
DateInterval,
DateRange,
@@ -10,7 +10,6 @@ import {
rangeIsInterval,
} from './types';
import DateRangeRow from './DateRangeRow';
import './DateRangeSelector.scss';
export interface DateRangeSelectorProps {
initialDateRange?: DateInterval | DateRange;
@@ -20,9 +19,8 @@ export interface DateRangeSelectorProps {
}
export const DateRangeSelector = (
{ onDatesChange, initialDateRange, defaultText, disabled = false }: DateRangeSelectorProps,
{ onDatesChange, initialDateRange, defaultText, disabled }: DateRangeSelectorProps,
) => {
const [ isOpen, toggle ] = useToggle();
const [ activeInterval, setActiveInterval ] = useState(
rangeIsInterval(initialDateRange) ? initialDateRange : undefined,
);
@@ -41,35 +39,30 @@ export const DateRangeSelector = (
};
return (
<Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
<DropdownToggle caret className="date-range-selector__btn btn-block" color="primary">
{rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}
</DropdownToggle>
<DropdownMenu className="w-100">
<DropdownItem
active={activeInterval === undefined && dateRangeIsEmpty(activeDateRange)}
onClick={updateInterval(undefined)}
>
{defaultText}
</DropdownItem>
<DropdownItem divider />
{([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
(interval) => (
<DropdownItem key={interval} active={activeInterval === interval} onClick={updateInterval(interval)}>
{rangeOrIntervalToString(interval)}
</DropdownItem>
),
)}
<DropdownItem divider />
<DropdownItem header>Custom:</DropdownItem>
<DropdownItem text>
<DateRangeRow
{...activeDateRange}
onStartDateChange={(startDate) => updateDateRange({ ...activeDateRange, startDate })}
onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
/>
</DropdownItem>
</DropdownMenu>
<Dropdown disabled={disabled} text={rangeOrIntervalToString(activeInterval ?? activeDateRange) ?? defaultText}>
<DropdownItem
active={activeInterval === undefined && dateRangeIsEmpty(activeDateRange)}
onClick={updateInterval(undefined)}
>
{defaultText}
</DropdownItem>
<DropdownItem divider />
{([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
(interval) => (
<DropdownItem key={interval} active={activeInterval === interval} onClick={updateInterval(interval)}>
{rangeOrIntervalToString(interval)}
</DropdownItem>
),
)}
<DropdownItem divider />
<DropdownItem header>Custom:</DropdownItem>
<DropdownItem text>
<DateRangeRow
{...activeDateRange}
onStartDateChange={(startDate) => updateDateRange({ ...activeDateRange, startDate })}
onEndDateChange={(endDate) => updateDateRange({ ...activeDateRange, endDate })}
/>
</DropdownItem>
</Dropdown>
);
};