@teravn/onui
Version:
The React UI component library is based on MUI
442 lines (432 loc) • 20.9 kB
text/typescript
import { styled } from '@mui/material/styles'
import Box, { BoxProps } from '@mui/material/Box'
import { hexToRGBA } from '../../@core/utils/common'
import 'react-datepicker/dist/react-datepicker.css'
const DatePickerContainer = styled(Box)<BoxProps>(({ theme }) => {
return {
'& .react-datepicker-popper': {
zIndex: 20
},
'& .react-datepicker-wrapper': {
width: '100%'
},
'& .react-datepicker': {
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius,
fontFamily: theme.typography.fontFamily,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[7],
border: 'none',
'& .react-datepicker__header': {
padding: 0,
border: 'none',
fontWeight: 'normal',
backgroundColor: theme.palette.background.paper,
'&:not(.react-datepicker-year-header)': {
'& + .react-datepicker__month, & + .react-datepicker__year': {
margin: theme.spacing(3.2),
marginTop: theme.spacing(6)
}
},
'&.react-datepicker-year-header': {
'& + .react-datepicker__month, & + .react-datepicker__year': {
margin: theme.spacing(3.2),
marginTop: theme.spacing(4)
}
}
},
'& .react-datepicker__triangle': {
display: 'none'
},
'& > .react-datepicker__navigation': {
top: 18,
'&.react-datepicker__navigation--previous': {
width: 24,
height: 24,
border: 'none',
...(theme.direction === 'ltr' ? { left: 15 } : { right: 15 }),
backgroundImage: `${"url('data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' style=\\'width:24px;height:24px\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath fill=\\'currentColor\\' d=\\'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z\\' /%3E%3C/svg%3E')"
.replace('currentColor', theme.palette.text.secondary)
.replace('#', '%23')}`,
'& .react-datepicker__navigation-icon': {
display: 'none'
}
},
'&.react-datepicker__navigation--next': {
width: 24,
height: 24,
border: 'none',
...(theme.direction === 'ltr' ? { right: 15 } : { left: 15 }),
backgroundImage: `${"url('data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' style=\\'width:24px;height:24px\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath fill=\\'currentColor\\' d=\\'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z\\' /%3E%3C/svg%3E')"
.replace('currentColor', theme.palette.text.secondary)
.replace('#', '%23')}`,
'& .react-datepicker__navigation-icon': {
display: 'none'
}
},
'&.react-datepicker__navigation--next--with-time':
theme.direction === 'ltr' ? { right: 127 } : { left: 127 },
'&:focus, &:active': {
outline: 0
}
},
'& .react-datepicker__month-container': {
paddingTop: theme.spacing(3.2)
},
'& .react-datepicker__current-month, & .react-datepicker-year-header': {
lineHeight: 2.1,
fontSize: '1rem',
fontWeight: 'normal',
letterSpacing: '0.15px',
marginBottom: theme.spacing(2),
color: theme.palette.text.primary
},
'& .react-datepicker__day-name': {
margin: 0,
lineHeight: 1.5,
width: '2.25rem',
fontSize: '0.75rem',
letterSpacing: '0.4px',
color: theme.palette.text.secondary
},
'& .react-datepicker__day': {
margin: 0,
width: '2.25rem',
borderRadius: '50%',
lineHeight: '2.25rem',
color: theme.palette.text.primary,
'&.react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selected.react-datepicker__day--range-start.react-datepicker__day--in-range, &.react-datepicker__day--range-start':
{
borderTopLeftRadius: '50%',
borderBottomLeftRadius: '50%',
color: `${theme.palette.common.white} !important`,
backgroundColor: `${theme.palette.primary.main} !important`
},
'&.react-datepicker__day--range-end.react-datepicker__day--in-range': {
borderTopRightRadius: '50%',
borderBottomRightRadius: '50%',
color: `${theme.palette.common.white} !important`,
backgroundColor: `${theme.palette.primary.main} !important`
},
'&:focus, &:active': {
outline: 0
},
'&.react-datepicker__day--outside-month, &.react-datepicker__day--disabled:not(.react-datepicker__day--selected)':
{
color: theme.palette.text.disabled,
'&:hover': {
backgroundColor: 'transparent'
}
},
'&.react-datepicker__day--highlighted, &.react-datepicker__day--highlighted:hover': {
color: theme.palette.success.main,
'&.react-datepicker__day--selected': {
backgroundColor: `${theme.palette.primary.main} !important`
}
}
},
'& .react-datepicker__day--in-range, & .react-datepicker__day--in-selecting-range': {
borderRadius: 0,
color: theme.palette.primary.main,
backgroundColor: `${hexToRGBA(theme.palette.primary.main, 0.06)} !important`
},
'& .react-datepicker__day--today': {
fontWeight: 'normal',
'&:not(.react-datepicker__day--selected):not(:empty)': {
lineHeight: '2.125rem',
color: theme.palette.primary.main,
border: `1px solid ${theme.palette.primary.main}`,
'&:hover': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.04)
},
'&.react-datepicker__day--keyboard-selected': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.06),
'&:hover': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.06)
}
}
}
},
'& .react-datepicker__month-text--today': {
fontWeight: 'normal',
'&:not(.react-datepicker__month--selected)': {
lineHeight: '2.125rem',
color: theme.palette.primary.main,
border: `1px solid ${theme.palette.primary.main}`,
'&:hover': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.04)
}
}
},
'& .react-datepicker__year-text--today': {
fontWeight: 'normal',
'&:not(.react-datepicker__year-text--selected)': {
lineHeight: '2.125rem',
color: theme.palette.primary.main,
border: `1px solid ${theme.palette.primary.main}`,
'&:hover': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.04)
},
'&.react-datepicker__year-text--keyboard-selected': {
color: theme.palette.primary.main,
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.06),
'&:hover': {
color: theme.palette.primary.main,
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.06)
}
}
}
},
'& .react-datepicker__day--keyboard-selected': {
'&:not(.react-datepicker__day--in-range)': {},
'&.react-datepicker__day--in-range:not(.react-datepicker__day--range-end)': {
'&:hover': {}
}
},
'& .react-datepicker__month-text--keyboard-selected': {
'&:not(.react-datepicker__month--in-range)': {
color: theme.palette.text.primary,
'&:hover': {
color: theme.palette.text.primary
}
}
},
'& .react-datepicker__year-text--keyboard-selected': {
color: theme.palette.text.primary,
'&:hover': {
color: theme.palette.text.primary
}
},
'& .react-datepicker__day--selected, & .react-datepicker__month--selected, & .react-datepicker__year-text--selected, & .react-datepicker__quarter--selected':
{
color: `${theme.palette.common.white} !important`,
backgroundColor: `${theme.palette.primary.main} !important`,
'&:hover': {
backgroundColor: `${theme.palette.primary.dark} !important`
}
},
'& .react-datepicker__header__dropdown': {
'& .react-datepicker__month-dropdown-container:not(:last-child)': {
marginRight: theme.spacing(8)
},
'& .react-datepicker__month-dropdown-container, & .react-datepicker__year-dropdown-container': {
marginBottom: theme.spacing(4)
},
'& .react-datepicker__month-read-view--selected-month, & .react-datepicker__year-read-view--selected-year':
{
fontSize: '0.875rem',
marginRight: theme.spacing(1),
color: theme.palette.text.primary
},
'& .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow':
{
borderColor: theme.palette.text.secondary
},
'& .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view--down-arrow': {
top: 4,
borderColor: theme.palette.text.disabled
},
'& .react-datepicker__month-dropdown, & .react-datepicker__year-dropdown': {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.palette.mode === 'light' ? theme.shadows[8] : theme.shadows[9]
},
'& .react-datepicker__month-option, & .react-datepicker__year-option': {
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
'&:first-of-type, &:last-of-type': {
borderRadius: 0
},
'&:hover': {
backgroundColor: theme.palette.action.hover
}
},
'& .react-datepicker__month-option.react-datepicker__month-option--selected_month': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08),
'&:hover': {},
'& .react-datepicker__month-option--selected': {
display: 'none'
}
},
'& .react-datepicker__year-option.react-datepicker__year-option--selected_year': {
backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08),
'&:hover': {},
'& .react-datepicker__year-option--selected': {
display: 'none'
}
},
'& .react-datepicker__year-option': {
// TODO: Remove some of the following styles for arrow in Year dropdown when react-datepicker give arrows in Year dropdown
'& .react-datepicker__navigation--years-upcoming': {
width: 9,
height: 9,
borderStyle: 'solid',
borderWidth: '3px 3px 0 0',
transform: 'rotate(-45deg)',
borderTopColor: theme.palette.text.disabled,
borderRightColor: theme.palette.text.disabled,
margin: `${theme.spacing(2.75)} auto ${theme.spacing(0)}`
},
'&:hover .react-datepicker__navigation--years-upcoming': {
borderTopColor: theme.palette.text.secondary,
borderRightColor: theme.palette.text.secondary
},
'& .react-datepicker__navigation--years-previous': {
width: 9,
height: 9,
borderStyle: 'solid',
borderWidth: '0 0 3px 3px',
transform: 'rotate(-45deg)',
borderLeftColor: theme.palette.text.disabled,
borderBottomColor: theme.palette.text.disabled,
margin: `${theme.spacing(0)} auto ${theme.spacing(2.75)}`
},
'&:hover .react-datepicker__navigation--years-previous': {
borderLeftColor: theme.palette.text.secondary,
borderBottomColor: theme.palette.text.secondary
}
}
},
'& .react-datepicker__week-number': {
margin: 0,
fontWeight: 600,
width: '2.25rem',
lineHeight: '2.25rem',
color: theme.palette.text.primary
},
'& .react-datepicker__month-text, & .react-datepicker__year-text, & .react-datepicker__quarter-text': {
margin: 0,
alignItems: 'center',
lineHeight: '2.25rem',
display: 'inline-flex',
justifyContent: 'center',
borderRadius: theme.shape.borderRadius,
'&:focus, &:active': {
outline: 0
}
},
'& .react-datepicker__year--container': {
paddingTop: theme.spacing(3.2)
},
'& .react-datepicker__year-wrapper': {
maxWidth: 205,
justifyContent: 'center'
},
'& .react-datepicker__input-time-container': {
display: 'flex',
alignItems: 'center',
...(theme.direction === 'rtl' ? { flexDirection: 'row-reverse' } : {})
},
'& .react-datepicker__today-button': {
borderTop: 0,
borderRadius: '1rem',
margin: theme.spacing(0, 4, 4),
color: theme.palette.common.white,
backgroundColor: theme.palette.primary.main
},
// ** Time Picker
'&:not(.react-datepicker--time-only)': {
'& .react-datepicker__time-container': {
borderLeftColor: theme.palette.divider,
[theme.breakpoints.down('sm')]: {
width: '5.5rem'
},
[theme.breakpoints.up('sm')]: {
width: '7rem'
}
},
'.react-datepicker-time__header': {
paddingTop: theme.spacing(3.2)
}
},
'&.react-datepicker--time-only': {
width: '7rem',
padding: theme.spacing(1.2, 0),
'& .react-datepicker__time-container': {
width: 'calc(7rem - 2px)'
}
},
'& .react-datepicker__time-container': {
padding: theme.spacing(1.2, 0),
'& .react-datepicker-time__header': {
fontSize: '1rem',
lineHeight: 1.31,
fontWeight: 'normal',
letterSpacing: '0.15px',
marginBottom: theme.spacing(3),
color: theme.palette.text.primary
},
'& .react-datepicker__time': {
background: theme.palette.background.paper,
'& .react-datepicker__time-box .react-datepicker__time-list-item--disabled': {
pointerEvents: 'none',
color: theme.palette.text.disabled,
'&.react-datepicker__time-list-item--selected': {
fontWeight: 'normal',
backgroundColor: theme.palette.action.disabledBackground
}
}
},
'& .react-datepicker__time-list-item': {
lineHeight: 1.75,
height: 'auto !important',
marginLeft: theme.spacing(3.2),
marginRight: theme.spacing(1.2),
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius,
'&:focus, &:active': {
outline: 0
},
'&:hover': {
backgroundColor: `${theme.palette.action.hover} !important`
},
'&.react-datepicker__time-list-item--selected:not(.react-datepicker__time-list-item--disabled)': {
fontWeight: '600 !important',
color: `${theme.palette.common.white} !important`,
backgroundColor: `${theme.palette.primary.main} !important`
}
},
'& .react-datepicker__time-box': {
width: '100%'
},
'& .react-datepicker__time-list': {
'&::-webkit-scrollbar': {
width: 8
},
/* Track */
'&::-webkit-scrollbar-track': {
background: theme.palette.background.paper
},
/* Handle */
'&::-webkit-scrollbar-thumb': {
borderRadius: 10,
background: '#aaa'
},
/* Handle on hover */
'&::-webkit-scrollbar-thumb:hover': {
background: '#999'
}
}
},
'& .react-datepicker__day:hover, & .react-datepicker__month-text:hover, & .react-datepicker__quarter-text:hover, & .react-datepicker__year-text:hover':
{
backgroundColor: theme.palette.action.hover
}
},
'& .react-datepicker__close-icon': {
paddingRight: theme.spacing(4),
...(theme.direction === 'rtl' ? { right: 0, left: 'auto' } : {}),
'&:after': {
width: 'unset',
height: 'unset',
fontSize: '1.5rem',
color: theme.palette.text.primary,
backgroundColor: 'transparent !important'
}
}
}
})
export default DatePickerContainer