@lunit/oui
Version:
Lunit Oncology UI components
155 lines (154 loc) • 5.82 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useMemo, useEffect } from 'react';
import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
import { StyledDatePicker } from './DatePicker.styled';
import { Button } from '../Button';
import theme from '../../theme';
function DatePicker({ alignment, placeholder, onChange, value, ...props }) {
const [open, setOpen] = useState(false);
const [selectedDate, setSelectedDate] = useState(null);
const { slots, slotProps, ...otherProps } = props;
const handleFieldClick = () => {
setOpen(true);
};
const handleChange = (date, context) => {
setSelectedDate(date);
if (onChange)
onChange(date, context);
setOpen(false);
};
const handleFieldClearClick = (e) => {
e.stopPropagation();
handleChange(null, null);
};
const popperPlacement = useMemo(() => {
switch (alignment) {
case 'left':
return 'bottom-start';
case 'right':
return 'bottom-end';
default:
return 'bottom';
}
}, [alignment]);
useEffect(() => {
if (value === null && selectedDate !== null) {
setSelectedDate(null);
}
if (value !== null && selectedDate === null) {
setSelectedDate(value);
}
}, [value, selectedDate, setSelectedDate]);
const canUseToday = useMemo(() => {
const today = new Date();
if (props.minDate && today < props.minDate)
return false;
if (props.maxDate && today > props.maxDate)
return false;
return true;
}, [props.minDate, props.maxDate]);
return (_jsx(StyledDatePicker, { open: open, value: selectedDate, onChange: handleChange,
// onOpen={() => setOpen(true)}
onClose: () => setOpen(false), views: ['year', 'month', 'day'], slots: {
inputAdornment: () => {
if (selectedDate) {
return (_jsx(Button, { variant: "ghost", color: "secondary", size: "small", icon: _jsx(CloseSmall, {}), sx: {
color: theme.palette.neutralGrey[0],
borderColor: 'transparent !important',
}, onClick: handleFieldClearClick }));
}
return null;
},
leftArrowIcon: ArrowLeft,
rightArrowIcon: ArrowRight,
...slots,
}, slotProps: {
switchViewButton: {
sx: {
display: 'none',
},
},
textField: {
variant: 'outlined',
onClick: handleFieldClick,
slotProps: {
input: {
sx: {
borderRadius: '8px',
// According to designer, the width of the date picker should be enforced at 320px
// when the placement is bottom. that is why we have !important here.
width: popperPlacement === 'bottom' ? '320px !important' : 'auto',
borderColor: 'red',
...theme.typography.body5,
textTransform: 'lowercase',
},
},
htmlInput: {
placeholder: placeholder || 'mm/dd/yyyy',
onMouseDown: (e) => {
e.preventDefault();
},
},
},
},
popper: {
placement: popperPlacement,
modifiers: [
{
name: 'offset',
enabled: true,
options: {
offset: [0, 8],
},
},
],
sx: {
'& .MuiPickersDay-today': {
border: `1px solid ${theme.palette.neutralGrey[0]} !important`,
borderRadius: '50%',
},
'& .MuiPickersDay-root:hover': {
border: `1px solid ${theme.palette.neutralGrey[0]}`,
borderRadius: '50%',
},
'& .MuiPickersDay-root.Mui-selected': {
backgroundColor: `${theme.palette.lunitTeal[40]} !important`,
color: `${theme.palette.neutralGrey[97]} !important`,
},
},
},
desktopPaper: {
sx: {
background: theme.palette.neutralGrey[70],
},
},
previousIconButton: {
sx: {
color: theme.palette.neutralGrey[0],
},
},
nextIconButton: {
sx: {
color: theme.palette.neutralGrey[0],
},
},
actionBar: {
actions: ['today'],
sx: {
'& button': {
color: `${theme.palette.lunitTeal[40]} !important`,
textTransform: 'capitalize',
pointerEvents: canUseToday ? 'auto' : 'none',
opacity: canUseToday ? 1 : 0.4,
},
},
},
day: {
sx: {
backgroundColor: 'transparent !important',
},
},
...slotProps,
}, ...otherProps }));
}
export default DatePicker;