-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix/date range picker history (#1088)
* add react date picker modal * add date time range picker * added new date picker * adjust date picker style and functionality * added test for date picker * resolving remaining merge conflicts * change: - removed breaking code in getCoinImage - added png files for boba icons - loaded the icons for network and coin wherever required. - fix console crash for gasSwitcher - fix hover issue on history page - fix classNames for avaxIcons. * commented out the date picker as needs some more time * add date picker back * updated snapshot and breaking change * navgation links for stake & dao only for ETH network * boba logo update across app --------- Co-authored-by: Sahil Kashetwar <sahil@enya.ai>
- Loading branch information
Showing
27 changed files
with
519 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
packages/boba/gateway/src/containers/history/DatePicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React, { FC, useRef, useState, useEffect, useCallback } from 'react' | ||
| import { subMonths } from 'date-fns' | ||
| import { | ||
| DatePickerDropdown, | ||
| DatePickerHeader, | ||
| DatePickerContainer, | ||
| } from './styles' | ||
| import { formatDate } from 'util/dates' | ||
| import { DayPicker, DateRange } from 'react-day-picker' | ||
| import 'react-day-picker/dist/style.css' | ||
|
|
||
| export interface IDatePickerProps { | ||
| selected: Date | ||
| timeFormat?: string | ||
| onChange: Function | ||
| range?: boolean | ||
| onChangeFrom?: Function | ||
| onChangeTo?: Function | ||
| } | ||
|
|
||
| const DatePicker = (props: IDatePickerProps) => { | ||
| const dropdownRef = useRef<HTMLDivElement>(null) | ||
| useEffect(() => { | ||
| const handleClickOutside = (e: Event) => { | ||
| if ( | ||
| dropdownRef.current && | ||
| !dropdownRef.current.contains(e.target as Node) | ||
| ) { | ||
| setIsOpen(false) | ||
| } | ||
| } | ||
| // Bind the event listener | ||
| document.addEventListener('mousedown', handleClickOutside) | ||
| return () => { | ||
| // Unbind the event listener on clean up | ||
| document.removeEventListener('mousedown', handleClickOutside) | ||
| } | ||
| }, [dropdownRef]) | ||
|
|
||
| const [selectedDate, setSelectedDate] = useState<Date>(props.selected) | ||
| const [isOpen, setIsOpen] = useState(false) | ||
| const today = new Date() | ||
| const defaultSelectedRange: DateRange = { | ||
| from: subMonths(today, 6), | ||
| to: today, | ||
| } | ||
| const [selectedRange, setSelectedRange] = useState<DateRange | undefined>( | ||
| defaultSelectedRange | ||
| ) | ||
|
|
||
| const handleClick = useCallback(() => { | ||
| setIsOpen(!isOpen) | ||
| }, [isOpen]) | ||
|
|
||
| const handleDateChange = (date: Date | undefined) => { | ||
| if (date && selectedDate !== date) { | ||
| setSelectedDate(date) | ||
| props.onChange(date) | ||
| } | ||
| } | ||
| const handleRangeChange = (range: DateRange | undefined) => { | ||
| if (range && range !== selectedRange) { | ||
| setSelectedRange(range) | ||
| props.onChangeFrom && props.onChangeFrom(range.from) | ||
| props.onChangeTo && props.onChangeTo(range.to) | ||
| } | ||
| } | ||
|
|
||
| if (props.range) { | ||
| const dateRangeString = `${ | ||
| selectedRange?.from | ||
| ? formatDate(selectedRange?.from?.getTime() / 1000, props.timeFormat) | ||
| : 'From' | ||
| } - ${ | ||
| selectedRange?.to | ||
| ? formatDate(selectedRange?.to?.getTime() / 1000, props.timeFormat) | ||
| : 'To' | ||
| }` | ||
|
|
||
| return ( | ||
| <DatePickerContainer ref={dropdownRef}> | ||
| <DatePickerHeader onClick={handleClick}> | ||
| {dateRangeString} | ||
| </DatePickerHeader> | ||
| {isOpen && ( | ||
| <DatePickerDropdown> | ||
| <DayPicker | ||
| id="rangeDatePicker" | ||
| mode="range" | ||
| defaultMonth={selectedRange?.from} | ||
| selected={selectedRange} | ||
| onSelect={(range) => handleRangeChange(range)} | ||
| /> | ||
| </DatePickerDropdown> | ||
| )} | ||
| </DatePickerContainer> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <DatePickerContainer ref={dropdownRef}> | ||
| <DatePickerHeader onClick={handleClick}> | ||
| {formatDate(selectedDate.getTime() / 1000, props.timeFormat)} | ||
| </DatePickerHeader> | ||
| {isOpen && ( | ||
| <DatePickerDropdown> | ||
| <DayPicker | ||
| mode="single" | ||
| defaultMonth={selectedDate} | ||
| selected={selectedDate} | ||
| onSelect={(date) => handleDateChange(date)} | ||
| /> | ||
| </DatePickerDropdown> | ||
| )} | ||
| </DatePickerContainer> | ||
| ) | ||
| } | ||
|
|
||
| export default DatePicker |
Oops, something went wrong.