change date picker

This commit is contained in:
saml33 2022-03-30 13:05:12 +11:00
parent 44b717ed80
commit 7ede39e0fc
8 changed files with 138 additions and 194 deletions

View File

@ -1,97 +0,0 @@
import DatePicker from 'react-datepicker/dist/react-datepicker'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
import Select from './Select'
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
]
const MangoDatePicker = ({ date, setDate, ...props }) => {
const generateArrayOfYears = () => {
const max = new Date().getFullYear()
const min = max - (max - 2020)
const years = []
for (let i = max; i >= min; i--) {
years.push(i)
}
return years
}
const years = generateArrayOfYears()
return (
<DatePicker
renderCustomHeader={({
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
}) => (
<div className="flex items-center justify-between px-1">
<button
className="default-transition mr-1 text-th-fgd-3 hover:text-th-fgd-1"
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
>
<ChevronLeftIcon className="h-6 w-6" />
</button>
<div className="flex space-x-2">
<Select
className="w-28"
dropdownPanelClassName="text-left"
value={months[date.getMonth()]}
onChange={(value) => changeMonth(months.indexOf(value))}
>
{months.map((option) => (
<Select.Option key={option} value={option}>
{option}
</Select.Option>
))}
</Select>
<Select
dropdownPanelClassName="text-left"
value={date.getFullYear()}
onChange={(value) => changeYear(value)}
>
{years.map((option) => (
<Select.Option key={option} value={option}>
{option}
</Select.Option>
))}
</Select>
</div>
<button
className="default-transition ml-1 text-th-fgd-3 hover:text-th-fgd-1"
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
>
<ChevronRightIcon className="h-6 w-6" />
</button>
</div>
)}
placeholderText="dd/mm/yyyy"
dateFormat="dd/MM/yyyy"
selected={date}
onChange={(date: Date) => setDate(date)}
className="default-transition h-10 w-full cursor-pointer rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
{...props}
/>
)
}
export default MangoDatePicker

View File

@ -0,0 +1,54 @@
import { ChevronRightIcon } from '@heroicons/react/solid'
import { useTranslation } from 'next-i18next'
import { enGB } from 'date-fns/locale'
import { DateRangePicker } from 'react-nice-dates'
import { Label } from './Input'
const MangoDateRangePicker = ({
startDate,
setStartDate,
endDate,
setEndDate,
}) => {
const { t } = useTranslation('common')
return (
<DateRangePicker
startDate={startDate}
endDate={endDate}
onStartDateChange={setStartDate}
onEndDateChange={setEndDate}
minimumDate={new Date('January 01, 2020 00:00:00')}
maximumDate={new Date()}
minimumLength={1}
format="dd MMM yyyy"
locale={enGB}
>
{({ startDateInputProps, endDateInputProps }) => (
<div className="date-range flex items-end">
<div className="w-full">
<Label>{t('from')}</Label>
<input
className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
{...startDateInputProps}
placeholder="Start Date"
/>
</div>
<div className="flex h-10 items-center justify-center">
<ChevronRightIcon className="mx-1 h-5 w-5 flex-shrink-0 text-th-fgd-3" />
</div>
<div className="w-full">
<Label>{t('to')}</Label>
<input
className="default-transition h-10 w-full rounded-md border border-th-bkg-4 bg-th-bkg-1 px-2 text-th-fgd-1 hover:border-th-fgd-4 focus:border-th-fgd-4 focus:outline-none"
{...endDateInputProps}
placeholder="End Date"
/>
</div>
</div>
)}
</DateRangePicker>
)
}
export default MangoDateRangePicker

View File

@ -11,8 +11,9 @@ interface InputProps {
[x: string]: any
}
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const {
const Input = forwardRef<HTMLInputElement, InputProps>(
({
ref,
type,
value,
onChange,
@ -23,21 +24,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
prefix,
prefixClassName,
suffix,
} = props
return (
<div className={`relative flex ${wrapperClassName}`}>
{prefix ? (
<div
className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
>
{prefix}
</div>
) : null}
<input
type={type}
value={value}
onChange={onChange}
className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
...props
}) => {
return (
<div className={`relative flex ${wrapperClassName}`}>
{prefix ? (
<div
className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
>
{prefix}
</div>
) : null}
<input
type={type}
value={value}
onChange={onChange}
className={`${className} h-10 w-full flex-1 rounded-md border bg-th-bkg-1 px-2 pb-px
text-th-fgd-1 ${
error ? 'border-th-red' : 'border-th-bkg-4'
} default-transition hover:border-th-fgd-4
@ -49,18 +51,19 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
}
${prefix ? 'pl-7' : ''}
${suffix ? 'pr-11' : ''}`}
disabled={disabled}
ref={ref}
{...props}
/>
{suffix ? (
<span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
{suffix}
</span>
) : null}
</div>
)
})
disabled={disabled}
ref={ref}
{...props}
/>
{suffix ? (
<span className="absolute right-0 flex h-full items-center bg-transparent pr-2 text-xs text-th-fgd-4">
{suffix}
</span>
) : null}
</div>
)
}
)
export default Input

View File

@ -16,9 +16,7 @@ import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
import { Popover, Transition } from '@headlessui/react'
import Checkbox from './Checkbox'
import dayjs from 'dayjs'
import DatePicker from './DatePicker'
import 'react-datepicker/dist/react-datepicker.css'
import DateRangePicker from './DateRangePicker'
interface TradeHistoryFilterModalProps {
filters: any
@ -123,8 +121,8 @@ const TradeHistoryFilterModal: FunctionComponent<
useEffect(() => {
if (dateFrom && dateTo) {
const dateFromTimestamp = dayjs(dateFrom).unix() * 1000
const dateToTimestamp = dayjs(dateTo).unix() * 1000
const dateFromTimestamp = dayjs.utc(dateFrom).unix() * 1000
const dateToTimestamp = dayjs.utc(dateTo).unix() * 1000
// filter should still work if users get from/to backwards
const from =
dateFromTimestamp < dateToTimestamp
@ -184,13 +182,13 @@ const TradeHistoryFilterModal: FunctionComponent<
<div className="pb-4">
<p className="font-bold text-th-fgd-1">{t('date')}</p>
<div className="flex items-center space-x-2">
<div className="w-1/2">
<Label>{t('from')}</Label>
<DatePicker date={dateFrom} setDate={setDateFrom} />
</div>
<div className="w-1/2">
<Label>{t('to')}</Label>
<DatePicker date={dateTo} setDate={setDateTo} />
<div className="w-full">
<DateRangePicker
startDate={dateFrom}
setStartDate={setDateFrom}
endDate={dateTo}
setEndDate={setDateTo}
/>
</div>
</div>
</div>

View File

@ -40,6 +40,7 @@
"bignumber.js": "^9.0.2",
"bn.js": "^5.1.0",
"bs58": "^4.0.1",
"date-fns": "^2.28.0",
"dayjs": "^1.10.4",
"export-to-csv": "^0.2.1",
"immer": "^9.0.1",
@ -52,9 +53,9 @@
"rc-slider": "^9.7.5",
"react": "^17.0.2",
"react-cool-dimensions": "^2.0.7",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-grid-layout": "^1.3.3",
"react-nice-dates": "^3.1.0",
"react-portal": "^4.2.1",
"react-super-responsive-table": "^5.2.0",
"react-swipeable-views": "^0.14.0",

View File

@ -2,9 +2,9 @@ import Head from 'next/head'
import { ThemeProvider } from 'next-themes'
import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'
import '../node_modules/react-datepicker/dist/react-datepicker.css'
import 'intro.js/introjs.css'
import '../styles/index.css'
import 'react-nice-dates/build/style.css'
import '../styles/datepicker.css'
import useHydrateStore from '../hooks/useHydrateStore'
import Notifications from '../components/Notification'

View File

@ -1,45 +1,53 @@
/* Date Picker */
/* Range Picker */
.react-datepicker {
@apply rounded-md border-0 bg-th-bkg-3 font-body text-th-fgd-2 ring-1 ring-th-fgd-4;
.nice-dates .nice-dates-popover {
@apply max-w-[384px] bg-th-bkg-4;
}
.react-datepicker-popper[data-placement^='bottom'] {
@apply pt-1;
.nice-dates .nice-dates-navigation {
@apply font-bold text-th-fgd-1;
}
.react-datepicker__header {
@apply rounded-tl-md border-none bg-th-bkg-1 text-th-fgd-1;
.nice-dates .nice-dates-navigation_next:before {
@apply border-th-fgd-2 hover:border-th-primary;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
@apply rounded-tr-md;
.nice-dates .nice-dates-navigation_next:hover:before {
@apply border-th-primary;
}
.react-datepicker__current-month {
@apply text-th-fgd-1;
.nice-dates .nice-dates-navigation_previous:before {
@apply border-th-fgd-2 hover:border-th-primary;
}
.react-datepicker__day-name {
.nice-dates .nice-dates-navigation_previous:hover:before {
@apply border-th-primary;
}
.nice-dates .nice-dates-week-header_day {
@apply text-th-fgd-2;
}
.react-datepicker__triangle {
@apply hidden;
.nice-dates .nice-dates-day_date {
@apply text-th-fgd-3;
}
.react-datepicker__day {
@apply text-th-fgd-2 hover:bg-th-bkg-4;
.nice-dates .-outside .nice-dates-day_date {
@apply text-th-fgd-4;
}
.react-datepicker__day--selected {
@apply bg-th-primary text-th-bkg-1 hover:bg-th-primary hover:text-th-bkg-1;
.nice-dates .nice-dates-day_month {
@apply text-th-fgd-4;
}
.react-datepicker__day--keyboard-selected {
@apply bg-transparent ring-2 ring-inset ring-th-fgd-4;
.nice-dates .nice-dates-day:after {
@apply border-th-fgd-4;
}
.react-datepicker__day--today {
@apply rounded-md ring-2 ring-inset ring-th-fgd-4;
.nice-dates .nice-dates-day:before {
@apply bg-th-bkg-1;
}
.nice-dates .nice-dates-day.-selected:hover:after {
@apply bg-th-bkg-3;
}

View File

@ -1285,7 +1285,7 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
"@popperjs/core@^2.9.0":
version "2.11.4"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
@ -2810,7 +2810,7 @@ d3-shape@^2.0.0:
dependencies:
d3-array "2"
date-fns@^2.24.0:
date-fns@^2.28.0:
version "2.28.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
@ -4603,7 +4603,7 @@ promise-retry@^2.0.1, promise-retry@~2.0.1:
err-code "^2.0.2"
retry "^0.12.0"
prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@15.x, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -4709,18 +4709,6 @@ react-cool-dimensions@^2.0.7:
resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
react-datepicker@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.7.0.tgz#75e03b0a6718b97b84287933307faf2ed5f03cf4"
integrity sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==
dependencies:
"@popperjs/core" "^2.9.2"
classnames "^2.2.6"
date-fns "^2.24.0"
prop-types "^15.7.2"
react-onclickoutside "^6.12.0"
react-popper "^2.2.5"
react-dom@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@ -4747,11 +4735,6 @@ react-event-listener@^0.6.0:
prop-types "^15.6.0"
warning "^4.0.1"
react-fast-compare@^3.0.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-grid-layout@^1.3.3:
version "1.3.4"
resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.3.4.tgz#4fa819be24a1ba9268aa11b82d63afc4762a32ff"
@ -4787,18 +4770,12 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-onclickoutside@^6.12.0:
version "6.12.1"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==
react-popper@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
react-nice-dates@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/react-nice-dates/-/react-nice-dates-3.1.0.tgz#1be7dc18397a54a81e6b37bae460a34c058e5a14"
integrity sha512-tOsA7tB2E9q+47nZwrk2ncK2rOUublNOWPVnY/N2HFDLO8slexGaAfOTKpej2KzPxCN3gcvOKeE2/9vua2LAjQ==
dependencies:
react-fast-compare "^3.0.1"
warning "^4.0.2"
classnames "^2.2.6"
react-portal@^4.2.1:
version "4.2.1"
@ -5725,7 +5702,7 @@ void-elements@3.1.0:
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
warning@^4.0.1, warning@^4.0.2:
warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==