generated from stacks-network/.github
-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
1,309 additions
and
91 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
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,17 @@ | ||
'use client'; | ||
|
||
import { forwardRef } from '@chakra-ui/react'; | ||
|
||
import { Input } from '../../../ui/Input'; | ||
|
||
export const DateInput = forwardRef((props, ref) => ( | ||
<Input | ||
sx={{ | ||
'::placeholder': { | ||
color: 'textSubdued', | ||
}, | ||
}} | ||
ref={ref} | ||
{...props} | ||
/> | ||
)); |
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,141 @@ | ||
import { FormLabel } from '@/ui/FormLabel'; | ||
import { UTCDate } from '@date-fns/utc'; | ||
import { Field, FieldProps, Form, Formik } from 'formik'; | ||
import DatePicker from 'react-datepicker'; | ||
import 'react-datepicker/dist/react-datepicker.css'; | ||
|
||
import { Box } from '../../../ui/Box'; | ||
import { Button } from '../../../ui/Button'; | ||
import { FormControl } from '../../../ui/FormControl'; | ||
import { Stack } from '../../../ui/Stack'; | ||
import { DateInput } from './DateInput'; | ||
|
||
type DateValue = number | undefined; | ||
|
||
export interface DatePickerValues { | ||
date: DateValue; | ||
} | ||
|
||
export interface DatePickerFormProps { | ||
initialDate: DateValue; | ||
onSubmit: (values: DatePickerValues) => void; | ||
placeholder?: string; | ||
label?: string; | ||
key?: string; | ||
} | ||
|
||
// TODO: move this to the search | ||
// function searchAfterDatePickerOnSubmitHandler({ | ||
// searchParams, | ||
// router, | ||
// onClose, | ||
// }: { | ||
// searchParams: URLSearchParams; | ||
// router: ReturnType<typeof useRouter>; | ||
// onClose: () => void; | ||
// }) { | ||
// return ({ date: startTime }: DatePickerFormValues) => { | ||
// const params = new URLSearchParams(searchParams); | ||
// const startTimeTs = startTime ? Math.floor(startTime).toString() : undefined; | ||
// params.delete('endTime'); | ||
// if (startTimeTs) { | ||
// params.set('startTime', startTimeTs); | ||
// } else { | ||
// params.delete('startTime'); | ||
// } | ||
// router.push(`?${params.toString()}`, { scroll: false }); | ||
// onClose(); | ||
// }; | ||
// } | ||
|
||
// TODO: move this to the search | ||
// function searchBeforeDatePickerOnSubmitHandler({ | ||
// searchParams, | ||
// router, | ||
// onClose, | ||
// }: { | ||
// searchParams: URLSearchParams; | ||
// router: ReturnType<typeof useRouter>; | ||
// onClose: () => void; | ||
// }) { | ||
// return ({ date: endTime }: DatePickerFormValues) => { | ||
// const params = new URLSearchParams(searchParams); | ||
// const endTimeTs = endTime ? Math.floor(endTime).toString() : undefined; | ||
// params.delete('startTime'); | ||
// if (endTimeTs) { | ||
// params.set('endTime', endTimeTs); | ||
// } else { | ||
// params.delete('endTime'); | ||
// } | ||
// router.push(`?${params.toString()}`, { scroll: false }); | ||
// onClose(); | ||
// }; | ||
// } | ||
|
||
export function DatePickerInput({ | ||
initialDate, | ||
label = 'Date:', | ||
onSubmit, | ||
placeholder = 'YYYY-MM-DD', | ||
key, | ||
}: DatePickerFormProps) { | ||
const initialValues: DatePickerValues = { | ||
date: initialDate, | ||
}; | ||
return ( | ||
<Formik | ||
enableReinitialize | ||
validateOnChange={false} | ||
validateOnBlur={false} | ||
initialValues={initialValues} | ||
onSubmit={({ date }: DatePickerValues) => { | ||
onSubmit({ date }); | ||
}} | ||
key={key} | ||
> | ||
{() => ( | ||
<Form> | ||
<Stack gap={4}> | ||
<Field name="date"> | ||
{({ field, form }: FieldProps<string, DatePickerValues>) => ( | ||
<FormControl> | ||
<FormLabel>{label}</FormLabel> | ||
<DatePicker | ||
customInput={<DateInput placeholder={placeholder} fontSize="sm" />} | ||
selected={form.values.date ? new UTCDate(form.values.date * 1000) : undefined} | ||
onChange={date => { | ||
if (date) { | ||
const utcDate = new UTCDate( | ||
date.getUTCFullYear(), | ||
date.getUTCMonth(), | ||
date.getUTCDate(), | ||
0, | ||
0, | ||
0 | ||
); | ||
form.setFieldValue('date', utcDate.getTime() / 1000); | ||
} | ||
}} | ||
dateFormat="yyyy-MM-dd" | ||
/> | ||
</FormControl> | ||
)} | ||
</Field> | ||
</Stack> | ||
<Box mt={4}> | ||
<Button | ||
width="full" | ||
type="submit" | ||
fontSize="sm" | ||
variant="secondary" | ||
height={10} | ||
color="textSubdued" | ||
> | ||
Apply | ||
</Button> | ||
</Box> | ||
</Form> | ||
)} | ||
</Formik> | ||
); | ||
} |
142 changes: 142 additions & 0 deletions
142
src/app/_components/time-filter/DatePickerRangeInput.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,142 @@ | ||
import { UTCDate } from '@date-fns/utc'; | ||
import { Field, FieldProps, Form, Formik } from 'formik'; | ||
import DatePicker from 'react-datepicker'; | ||
import 'react-datepicker/dist/react-datepicker.css'; | ||
|
||
import { Box } from '../../../ui/Box'; | ||
import { Button } from '../../../ui/Button'; | ||
import { FormControl } from '../../../ui/FormControl'; | ||
import { FormLabel } from '../../../ui/FormLabel'; | ||
import { Stack } from '../../../ui/Stack'; | ||
import { DateInput } from './DateInput'; | ||
|
||
type DateValue = number | undefined; | ||
|
||
export interface DatePickerRangeInputState { | ||
startDate: DateValue; | ||
endDate: DateValue; | ||
} | ||
|
||
interface DatePickerRangeInputProps { | ||
onSubmit: (values: DatePickerRangeInputState) => void; | ||
initialStartDate?: DateValue; | ||
initialEndDate?: DateValue; | ||
label?: string; | ||
key?: string; | ||
} | ||
|
||
// // TODO: move this to the search | ||
// function searchDatePickerRangeFormOnSubmitHandler({ | ||
// searchParams, | ||
// router, | ||
// onClose, | ||
// }: { | ||
// searchParams: URLSearchParams; | ||
// router: ReturnType<typeof useRouter>; | ||
// onClose: () => void; | ||
// }) { | ||
// return ({ startTime, endTime }: DateRangeFormValues) => { | ||
// const params = new URLSearchParams(searchParams); | ||
// const startTimeTs = startTime ? Math.floor(startTime).toString() : undefined; | ||
// const endTimeTs = endTime ? Math.floor(endTime).toString() : undefined; | ||
// if (startTimeTs) { | ||
// params.set('startTime', startTimeTs); | ||
// } else { | ||
// params.delete('startTime'); | ||
// } | ||
// if (endTimeTs) { | ||
// params.set('endTime', endTimeTs); | ||
// } else { | ||
// params.delete('endTime'); | ||
// } | ||
// router.push(`?${params.toString()}`, { scroll: false }); | ||
// onClose(); | ||
// }; | ||
// } | ||
|
||
export function DatePickerRangeInput({ | ||
initialStartDate, | ||
initialEndDate, | ||
onSubmit, | ||
label = 'Between:', | ||
key, | ||
}: DatePickerRangeInputProps) { | ||
const initialValues: DatePickerRangeInputState = { | ||
startDate: initialStartDate, | ||
endDate: initialEndDate, | ||
}; | ||
return ( | ||
<Formik | ||
enableReinitialize | ||
validateOnChange={false} | ||
validateOnBlur={false} | ||
initialValues={initialValues} | ||
onSubmit={({ startDate, endDate }: DatePickerRangeInputState) => { | ||
onSubmit({ startDate, endDate }); | ||
}} | ||
key={key} | ||
> | ||
{() => ( | ||
<Form> | ||
<Stack gap={4}> | ||
<Field name="startTime"> | ||
{({ form }: FieldProps<string, DatePickerRangeInputState>) => ( | ||
<FormControl> | ||
<FormLabel>{label}</FormLabel> | ||
<DatePicker | ||
selectsRange={true} | ||
customInput={<DateInput placeholder="YYYY-MM-DD" fontSize={'sm'} />} | ||
onChange={dateRange => { | ||
const [startDate, endDate] = dateRange; | ||
const utcStart = startDate | ||
? new UTCDate( | ||
startDate.getUTCFullYear(), | ||
startDate.getUTCMonth(), | ||
startDate.getUTCDate(), | ||
0, | ||
0, | ||
0 | ||
).getTime() / 1000 | ||
: null; | ||
const utcEnd = endDate | ||
? new UTCDate( | ||
endDate.getUTCFullYear(), | ||
endDate.getUTCMonth(), | ||
endDate.getUTCDate(), | ||
23, | ||
59, | ||
59 | ||
).getTime() / 1000 | ||
: null; | ||
form.setFieldValue('endTime', utcEnd); | ||
form.setFieldValue('startTime', utcStart); | ||
}} | ||
startDate={ | ||
form.values.startDate ? new UTCDate(form.values.startDate * 1000) : undefined | ||
} | ||
endDate={ | ||
form.values.endDate ? new UTCDate(form.values.endDate * 1000) : undefined | ||
} | ||
dateFormat="yyyy-MM-dd" | ||
/> | ||
</FormControl> | ||
)} | ||
</Field> | ||
</Stack> | ||
<Box mt={4}> | ||
<Button | ||
width="100%" | ||
type="submit" | ||
fontSize={'sm'} | ||
variant={'secondary'} | ||
height={10} | ||
color="textSubdued" | ||
> | ||
Apply | ||
</Button> | ||
</Box> | ||
</Form> | ||
)} | ||
</Formik> | ||
); | ||
} |
Oops, something went wrong.