diff --git a/apps/finance/app/src/components/DateRange/DatePicker.js b/apps/finance/app/src/components/DateRange/DatePicker.js index cdf25572d4..1c16e73be5 100644 --- a/apps/finance/app/src/components/DateRange/DatePicker.js +++ b/apps/finance/app/src/components/DateRange/DatePicker.js @@ -220,7 +220,7 @@ const DayView = styled.li` ${props => props.today && css` - border: 1px solid ${theme.disabled}; + border: 1px solid ${mainColor}; `} ${props => diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js index e3cd588ecd..0df74afed6 100644 --- a/apps/finance/app/src/components/DateRange/DateRangeInput.js +++ b/apps/finance/app/src/components/DateRange/DateRangeInput.js @@ -10,11 +10,13 @@ import { startOfDay, endOfDay, } from 'date-fns' -import { breakpoint, theme } from '@aragon/ui' +import { breakpoint, font, theme } from '@aragon/ui' import IconCalendar from './Calendar' import TextInput from './TextInput' import DatePicker from './DatePicker' +const DATE_PLACEHOLDER = '--/--/----' + class DateRangeInput extends React.PureComponent { state = { showPicker: false, @@ -33,9 +35,10 @@ class DateRangeInput extends React.PureComponent { } get formattedEndDate() { - const { endDate } = this.state + const { endDate, startDate } = this.state + const { format } = this.props - return isDate(endDate) ? formatDate(endDate, this.props.format) : '' + return isDate(endDate) ? formatDate(endDate, format) : '' } componentWillUnmount() { @@ -59,36 +62,33 @@ class DateRangeInput extends React.PureComponent { handleClickOutside = event => { if (this.rootRef && !this.rootRef.contains(event.target)) { - this.setState({ showPicker: false }) + this.setState({ showPicker: false }, () => { + const { startDate, endDate } = this.state + if (startDate && endDate) { + this.props.onChange({ + start: startOfDay(startDate), + end: endOfDay(endDate), + }) + } + }) } } handleSelectStartDate = date => { const { endDate } = this.state - const isValidDate = isBefore(date, endDate) || isEqual(date, endDate) + const isValidDate = + !endDate || isBefore(date, endDate) || isEqual(date, endDate) if (isValidDate) { - this.setState( - { startDateSelected: true, startDate: startOfDay(date) }, - () => { - this.props.onChange({ - start: startOfDay(date), - end: endOfDay(endDate), - }) - } - ) + this.setState({ startDateSelected: true, startDate: startOfDay(date) }) } } handleSelectEndDate = date => { const { startDate } = this.state - const isValidDate = isAfter(date, startDate) || isEqual(date, startDate) + const isValidDate = + !startDate || isAfter(date, startDate) || isEqual(date, startDate) if (isValidDate) { - this.setState({ endDateSelected: true, endDate: endOfDay(date) }, () => { - this.props.onChange({ - start: startOfDay(startDate), - end: endOfDay(date), - }) - }) + this.setState({ endDateSelected: true, endDate: endOfDay(date) }) } } @@ -100,6 +100,19 @@ class DateRangeInput extends React.PureComponent { ) : ( ) + const value = + this.formattedStartDate && this.formattedEndDate + ? `${this.formattedStartDate} - ${this.formattedEndDate}` + : '' + const placeholder = `${ + this.formattedStartDate ? this.formattedStartDate : DATE_PLACEHOLDER + } - ${ + this.formattedEndDate + ? this.formattedEndDate + : this.formattedStartDate + ? DATE_PLACEHOLDER + : formatDate(new Date(), this.props.format) + }` return ( {this.state.showPicker && ( @@ -153,7 +167,8 @@ const StyledContainer = styled.div` ` const StyledTextInput = styled(TextInput)` - width: 13rem; + width: 28ch; + ${font({ monospace: true })}; ` const StyledDatePickersContainer = styled.div` diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js index c3565ee120..1e65ad208a 100644 --- a/apps/finance/app/src/components/Transfers.js +++ b/apps/finance/app/src/components/Transfers.js @@ -6,7 +6,6 @@ import { format, isWithinInterval, startOfDay, - subDays, } from 'date-fns' import { Button, @@ -31,8 +30,6 @@ const TRANSFER_TYPES = [ const TRANSFERS_PER_PAGE = 10 const TRANSFER_TYPES_STRING = TRANSFER_TYPES.map(TransferTypes.convertToString) -const DEFAULT_DAYS_SELECTED = 90 - const formatDate = date => format(date, 'dd/MM/yy') const reduceTokenDetails = (details, { address, decimals, symbol }) => { @@ -45,8 +42,8 @@ const reduceTokenDetails = (details, { address, decimals, symbol }) => { const initialState = { selectedDateRange: { - start: subDays(new Date(), DEFAULT_DAYS_SELECTED), - end: new Date(), + start: null, + end: null, }, selectedToken: 0, selectedTransferType: 0, @@ -75,9 +72,10 @@ class Transfers extends React.PureComponent { }) } handleResetFilters = () => { - this.setState({ + this.setState(({ selectedDateRange }) => ({ ...initialState, - }) + selectedDateRange, + })) } handleDateRangeChange = selectedDateRange => { this.setState({ selectedDateRange }) @@ -136,10 +134,11 @@ class Transfers extends React.PureComponent { const transferType = TRANSFER_TYPES[selectedTransferType] return transactions.filter( ({ token, isIncoming, date }) => - isWithinInterval(new Date(date), { - start: startOfDay(selectedDateRange.start), - end: endOfDay(selectedDateRange.end), - }) && + (!selectedDateRange.start || !selectedDateRange.end || + isWithinInterval(new Date(date), { + start: startOfDay(selectedDateRange.start), + end: endOfDay(selectedDateRange.end), + })) && (selectedToken === 0 || addressesEqual(token, tokens[selectedToken - 1].address)) && (transferType === TransferTypes.All || @@ -200,9 +199,11 @@ class Transfers extends React.PureComponent { {filteredTransfers.length === 0 ? (

- No transfers match your filter and period ( - {formatDate(selectedDateRange.start)} to{' '} - {formatDate(selectedDateRange.end)}) selection.{' '} + No transfers match your filter{' '} + {selectedDateRange.start && + `and period (${formatDate( + selectedDateRange.start + )} to ${formatDate(selectedDateRange.end)}) selection. `} {filtersActive && ( Clear filters diff --git a/apps/finance/app/src/components/TransfersFilters.js b/apps/finance/app/src/components/TransfersFilters.js index 4a34aadf1e..a5387373db 100644 --- a/apps/finance/app/src/components/TransfersFilters.js +++ b/apps/finance/app/src/components/TransfersFilters.js @@ -131,8 +131,6 @@ const Filters = styled.div` width: 100%; margin: 0; justify-content: space-between; - margin-left: 0; - margin-right: 0; /* Easier than passing compactMode to every Filter & FilterLabel */ ${Filter} {