Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 2x 2x 36x 36x 36x 36x 10x 10x 10x 10x 36x 2x 62x | import DatePicker from "@common/DatePickers/DatePicker";
import { ClickAwayListener, PopperProps } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
import moment from "moment";
import { useState } from "react";
import { StyledButton } from "../../styles";
const ISO = "YYYY-MM-DD";
interface Props {
/** Anchor/as-of date in ISO `YYYY-MM-DD`. */
value: string;
onChange: (date: string) => void;
disabled?: boolean;
}
/**
* Controlled anchor/as-of date selector for the Hub filter bar. Reuses the
* shared `@common/DatePickers/DatePicker` + the settlements `StyledButton` (the
* same primitives as `DateSelectDropdownButton`) so it matches the existing
* design, but is driven by local hub state instead of the redux date filter.
*/
const HubDatePicker = ({ value, onChange, disabled }: Props) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const label = moment(value, ISO).format("MMM DD, YYYY");
const currentValue = moment(value, ISO).toDate();
const handleAccept = (next: any) => {
Eif (next) {
const parsed = moment(next);
Eif (parsed.isValid()) onChange(parsed.format(ISO));
}
setAnchorEl(null);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<ClickAwayListener onClickAway={() => setAnchorEl(null)}>
<div>
<DatePicker
value={currentValue}
onChange={handleAccept}
minDate={null}
maxDate={moment()}
disableFuture
useUTCMoment
popperPlacement="bottom-start"
renderInput={() => (
<StyledButton
variant="filled"
size="large"
label={label}
disabled={disabled}
onClick={(e: React.MouseEvent<HTMLElement>) =>
setAnchorEl(e.currentTarget)
}
endIcon={
anchorEl ? (
<CaretUpIcon size={16} />
) : (
<CaretDownIcon size={16} />
)
}
/>
)}
popperProps={
{
anchorEl: anchorEl ?? undefined,
open: Boolean(anchorEl),
placement: "bottom-start",
} as unknown as Omit<PopperProps, "open">
}
/>
</div>
</ClickAwayListener>
</LocalizationProvider>
);
};
export default HubDatePicker;
|