;\n}\n\nexport const withUtils = () => (Component: React.ComponentType
) => {\n const WithUtils: React.SFC> = props => {\n const utils = useUtils();\n return ;\n };\n\n WithUtils.displayName = `WithUtils(${Component.displayName || Component.name})`;\n return WithUtils;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Day from './Day';\nimport DayWrapper from './DayWrapper';\nimport CalendarHeader from './CalendarHeader';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport SlideTransition, { SlideDirection } from './SlideTransition';\nimport { Theme } from '@material-ui/core/styles';\nimport { VariantContext } from '../../wrappers/Wrapper';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { runKeyHandler } from '../../_shared/hooks/useKeyDown';\nimport { IconButtonProps } from '@material-ui/core/IconButton';\nimport { withStyles, WithStyles } from '@material-ui/core/styles';\nimport { findClosestEnabledDate } from '../../_helpers/date-utils';\nimport { withUtils, WithUtilsProps } from '../../_shared/WithUtils';\n\nexport interface OutterCalendarProps {\n /** Left arrow icon */\n leftArrowIcon?: React.ReactNode;\n /** Right arrow icon */\n rightArrowIcon?: React.ReactNode;\n /** Custom renderer for day @DateIOType */\n renderDay?: (\n day: MaterialUiPickersDate,\n selectedDate: MaterialUiPickersDate,\n dayInCurrentMonth: boolean,\n dayComponent: JSX.Element\n ) => JSX.Element;\n /**\n * Enables keyboard listener for moving between days in calendar\n * @default true\n */\n allowKeyboardControl?: boolean;\n /**\n * Props to pass to left arrow button\n * @type {Partial}\n */\n leftArrowButtonProps?: Partial;\n /**\n * Props to pass to right arrow button\n * @type {Partial}\n */\n rightArrowButtonProps?: Partial;\n /** Disable specific date @DateIOType */\n shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;\n /** Callback firing on month change. Return promise to render spinner till it will not be resolved @DateIOType */\n onMonthChange?: (date: MaterialUiPickersDate) => void | Promise;\n /** Custom loading indicator */\n loadingIndicator?: JSX.Element;\n}\n\nexport interface CalendarProps\n extends OutterCalendarProps,\n WithUtilsProps,\n WithStyles {\n /** Calendar Date @DateIOType */\n date: MaterialUiPickersDate;\n /** Calendar onChange */\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n /** Min date @DateIOType */\n minDate?: MaterialUiPickersDate;\n /** Max date @DateIOType */\n maxDate?: MaterialUiPickersDate;\n /** Disable past dates */\n disablePast?: boolean;\n /** Disable future dates */\n disableFuture?: boolean;\n}\n\nexport interface CalendarState {\n slideDirection: SlideDirection;\n currentMonth: MaterialUiPickersDate;\n lastDate?: MaterialUiPickersDate;\n loadingQueue: number;\n}\n\nconst KeyDownListener = ({ onKeyDown }: { onKeyDown: (e: KeyboardEvent) => void }) => {\n React.useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n return null;\n};\n\nexport class Calendar extends React.Component {\n static contextType = VariantContext;\n static propTypes: any = {\n renderDay: PropTypes.func,\n shouldDisableDate: PropTypes.func,\n allowKeyboardControl: PropTypes.bool,\n };\n\n static defaultProps: Partial = {\n minDate: new Date('1900-01-01'),\n maxDate: new Date('2100-01-01'),\n disablePast: false,\n disableFuture: false,\n allowKeyboardControl: true,\n };\n\n static getDerivedStateFromProps(nextProps: CalendarProps, state: CalendarState) {\n const { utils, date: nextDate } = nextProps;\n\n if (!utils.isEqual(nextDate, state.lastDate)) {\n const nextMonth = utils.getMonth(nextDate);\n const lastDate = state.lastDate || nextDate;\n const lastMonth = utils.getMonth(lastDate);\n\n return {\n lastDate: nextDate,\n currentMonth: nextProps.utils.startOfMonth(nextDate),\n // prettier-ignore\n slideDirection: nextMonth === lastMonth\n ? state.slideDirection\n : utils.isAfterDay(nextDate, lastDate)\n ? 'left'\n : 'right'\n };\n }\n\n return null;\n }\n\n state: CalendarState = {\n slideDirection: 'left',\n currentMonth: this.props.utils.startOfMonth(this.props.date),\n loadingQueue: 0,\n };\n\n componentDidMount() {\n const { date, minDate, maxDate, utils, disablePast, disableFuture } = this.props;\n\n if (this.shouldDisableDate(date)) {\n const closestEnabledDate = findClosestEnabledDate({\n date,\n utils,\n minDate: utils.date(minDate),\n maxDate: utils.date(maxDate),\n disablePast: Boolean(disablePast),\n disableFuture: Boolean(disableFuture),\n shouldDisableDate: this.shouldDisableDate,\n });\n\n this.handleDaySelect(closestEnabledDate, false);\n }\n }\n\n private pushToLoadingQueue = () => {\n const loadingQueue = this.state.loadingQueue + 1;\n this.setState({ loadingQueue });\n };\n\n private popFromLoadingQueue = () => {\n let loadingQueue = this.state.loadingQueue;\n loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;\n this.setState({ loadingQueue });\n };\n\n handleChangeMonth = (newMonth: MaterialUiPickersDate, slideDirection: SlideDirection) => {\n this.setState({ currentMonth: newMonth, slideDirection });\n\n if (this.props.onMonthChange) {\n const returnVal = this.props.onMonthChange(newMonth);\n if (returnVal) {\n this.pushToLoadingQueue();\n returnVal.then(() => {\n this.popFromLoadingQueue();\n });\n }\n }\n };\n\n validateMinMaxDate = (day: MaterialUiPickersDate) => {\n const { minDate, maxDate, utils, disableFuture, disablePast } = this.props;\n const now = utils.date();\n\n return Boolean(\n (disableFuture && utils.isAfterDay(day, now)) ||\n (disablePast && utils.isBeforeDay(day, now)) ||\n (minDate && utils.isBeforeDay(day, utils.date(minDate))) ||\n (maxDate && utils.isAfterDay(day, utils.date(maxDate)))\n );\n };\n\n shouldDisablePrevMonth = () => {\n const { utils, disablePast, minDate } = this.props;\n\n const now = utils.date();\n const firstEnabledMonth = utils.startOfMonth(\n disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate)\n );\n\n return !utils.isBefore(firstEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableNextMonth = () => {\n const { utils, disableFuture, maxDate } = this.props;\n\n const now = utils.date();\n const lastEnabledMonth = utils.startOfMonth(\n disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate)\n );\n\n return !utils.isAfter(lastEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableDate = (day: MaterialUiPickersDate) => {\n const { shouldDisableDate } = this.props;\n\n return this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));\n };\n\n handleDaySelect = (day: MaterialUiPickersDate, isFinish = true) => {\n const { date, utils } = this.props;\n\n this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);\n };\n\n moveToDay = (day: MaterialUiPickersDate) => {\n const { utils } = this.props;\n\n if (day && !this.shouldDisableDate(day)) {\n if (utils.getMonth(day) !== utils.getMonth(this.state.currentMonth)) {\n this.handleChangeMonth(utils.startOfMonth(day), 'left');\n }\n\n this.handleDaySelect(day, false);\n }\n };\n\n handleKeyDown = (event: KeyboardEvent) => {\n const { theme, date, utils } = this.props;\n\n runKeyHandler(event, {\n ArrowUp: () => this.moveToDay(utils.addDays(date, -7)),\n ArrowDown: () => this.moveToDay(utils.addDays(date, 7)),\n ArrowLeft: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1)),\n ArrowRight: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1)),\n });\n };\n\n private renderWeeks = () => {\n const { utils, classes } = this.props;\n const weeks = utils.getWeekArray(this.state.currentMonth);\n\n return weeks.map(week => (\n \n {this.renderDays(week)}\n
\n ));\n };\n\n private renderDays = (week: MaterialUiPickersDate[]) => {\n const { date, renderDay, utils } = this.props;\n\n const now = utils.date();\n const selectedDate = utils.startOfDay(date);\n const currentMonthNumber = utils.getMonth(this.state.currentMonth);\n\n return week.map(day => {\n const disabled = this.shouldDisableDate(day);\n const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;\n\n let dayComponent = (\n \n {utils.getDayText(day)}\n \n );\n\n if (renderDay) {\n dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);\n }\n\n return (\n \n {dayComponent}\n \n );\n });\n };\n\n render() {\n const { currentMonth, slideDirection } = this.state;\n const {\n classes,\n allowKeyboardControl,\n leftArrowButtonProps,\n leftArrowIcon,\n rightArrowButtonProps,\n rightArrowIcon,\n loadingIndicator,\n } = this.props;\n const loadingElement = loadingIndicator ? loadingIndicator : ;\n\n return (\n \n {allowKeyboardControl && this.context !== 'static' && (\n \n )}\n\n \n\n \n <>\n {(this.state.loadingQueue > 0 && (\n {loadingElement}
\n )) || {this.renderWeeks()}
}\n \n \n \n );\n }\n}\n\nexport const styles = (theme: Theme) => ({\n transitionContainer: {\n minHeight: 36 * 6,\n marginTop: theme.spacing(1.5),\n },\n progressContainer: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n week: {\n display: 'flex',\n justifyContent: 'center',\n },\n});\n\nexport default withStyles(styles, {\n name: 'MuiPickersCalendar',\n withTheme: true,\n})(withUtils()(Calendar));\n","enum ClockType {\n HOURS = 'hours',\n\n MINUTES = 'minutes',\n\n SECONDS = 'seconds',\n}\n\nexport type ClockViewType = 'hours' | 'minutes' | 'seconds';\n\nexport default ClockType;\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ClockType, { ClockViewType } from '../../constants/ClockType';\nimport { Theme } from '@material-ui/core/styles';\nimport { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ClockPointerProps extends WithStyles {\n value: number;\n hasSelected: boolean;\n isInner: boolean;\n type: ClockViewType;\n}\n\nexport class ClockPointer extends React.Component {\n public static getDerivedStateFromProps = (\n nextProps: ClockPointerProps,\n state: ClockPointer['state']\n ) => {\n if (nextProps.type !== state.previousType) {\n return {\n toAnimateTransform: true,\n previousType: nextProps.type,\n };\n }\n\n return {\n toAnimateTransform: false,\n previousType: nextProps.type,\n };\n };\n\n public state = {\n toAnimateTransform: false,\n previousType: undefined,\n };\n\n public getAngleStyle = () => {\n const { value, isInner, type } = this.props;\n\n const max = type === ClockType.HOURS ? 12 : 60;\n let angle = (360 / max) * value;\n\n if (type === ClockType.HOURS && value > 12) {\n angle -= 360; // round up angle to max 360 degrees\n }\n\n return {\n height: isInner ? '26%' : '40%',\n transform: `rotateZ(${angle}deg)`,\n };\n };\n\n public render() {\n const { classes, hasSelected } = this.props;\n\n return (\n \n \n \n );\n }\n}\n\nexport const styles = (theme: Theme) =>\n createStyles({\n pointer: {\n width: 2,\n backgroundColor: theme.palette.primary.main,\n position: 'absolute',\n left: 'calc(50% - 1px)',\n bottom: '50%',\n transformOrigin: 'center bottom 0px',\n },\n animateTransform: {\n transition: theme.transitions.create(['transform', 'height']),\n },\n thumb: {\n width: 4,\n height: 4,\n backgroundColor: theme.palette.primary.contrastText,\n borderRadius: '100%',\n position: 'absolute',\n top: -21,\n left: -15,\n border: `14px solid ${theme.palette.primary.main}`,\n boxSizing: 'content-box',\n },\n noPoint: {\n backgroundColor: theme.palette.primary.main,\n },\n });\n\nexport default withStyles(styles, {\n name: 'MuiPickersClockPointer',\n})(ClockPointer as React.ComponentType);\n","import { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\n\nconst center = {\n x: 260 / 2,\n y: 260 / 2,\n};\n\nconst basePoint = {\n x: center.x,\n y: 0,\n};\n\nconst cx = basePoint.x - center.x;\nconst cy = basePoint.y - center.y;\n\nconst rad2deg = (rad: number) => rad * 57.29577951308232;\n\nconst getAngleValue = (step: number, offsetX: number, offsetY: number) => {\n const x = offsetX - center.x;\n const y = offsetY - center.y;\n\n const atan = Math.atan2(cx, cy) - Math.atan2(x, y);\n\n let deg = rad2deg(atan);\n deg = Math.round(deg / step) * step;\n deg %= 360;\n\n const value = Math.floor(deg / step) || 0;\n const delta = Math.pow(x, 2) + Math.pow(y, 2);\n const distance = Math.sqrt(delta);\n\n return { value, distance };\n};\n\nexport const getHours = (offsetX: number, offsetY: number, ampm: boolean) => {\n let { value, distance } = getAngleValue(30, offsetX, offsetY);\n value = value || 12;\n\n if (!ampm) {\n if (distance < 90) {\n value += 12;\n value %= 24;\n }\n } else {\n value %= 12;\n }\n\n return value;\n};\n\nexport const getMinutes = (offsetX: number, offsetY: number, step = 1) => {\n const angleStep = step * 6;\n let { value } = getAngleValue(angleStep, offsetX, offsetY);\n value = (value * step) % 60;\n\n return value;\n};\n\nexport const getMeridiem = (\n date: MaterialUiPickersDate,\n utils: IUtils\n): 'am' | 'pm' => {\n return utils.getHours(date) >= 12 ? 'pm' : 'am';\n};\n\nexport const convertToMeridiem = (\n time: MaterialUiPickersDate,\n meridiem: 'am' | 'pm',\n ampm: boolean,\n utils: IUtils\n) => {\n if (ampm) {\n const currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';\n if (currentMeridiem !== meridiem) {\n const hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;\n\n return utils.setHours(time, hours);\n }\n }\n\n return time;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport ClockPointer from './ClockPointer';\nimport ClockType, { ClockViewType } from '../../constants/ClockType';\nimport { getHours, getMinutes } from '../../_helpers/time-utils';\nimport { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core/styles';\n\nexport interface ClockProps extends WithStyles {\n type: ClockViewType;\n value: number;\n onChange: (value: number, isFinish?: boolean) => void;\n ampm?: boolean;\n minutesStep?: number;\n children: React.ReactElement[];\n}\n\nexport class Clock extends React.Component {\n public static propTypes: any = {\n type: PropTypes.oneOf(\n Object.keys(ClockType).map(key => ClockType[key as keyof typeof ClockType])\n ).isRequired,\n value: PropTypes.number.isRequired,\n onChange: PropTypes.func.isRequired,\n children: PropTypes.arrayOf(PropTypes.node).isRequired,\n ampm: PropTypes.bool,\n minutesStep: PropTypes.number,\n innerRef: PropTypes.any,\n };\n\n public static defaultProps = {\n ampm: false,\n minutesStep: 1,\n };\n\n public isMoving = false;\n\n public setTime(e: any, isFinish = false) {\n let { offsetX, offsetY } = e;\n\n if (typeof offsetX === 'undefined') {\n const rect = e.target.getBoundingClientRect();\n\n offsetX = e.changedTouches[0].clientX - rect.left;\n offsetY = e.changedTouches[0].clientY - rect.top;\n }\n\n const value =\n this.props.type === ClockType.SECONDS || this.props.type === ClockType.MINUTES\n ? getMinutes(offsetX, offsetY, this.props.minutesStep)\n : getHours(offsetX, offsetY, Boolean(this.props.ampm));\n\n this.props.onChange(value, isFinish);\n }\n\n public handleTouchMove = (e: React.TouchEvent) => {\n this.isMoving = true;\n this.setTime(e);\n };\n\n public handleTouchEnd = (e: React.TouchEvent) => {\n if (this.isMoving) {\n this.setTime(e, true);\n this.isMoving = false;\n }\n };\n\n public handleMove = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari\n const isButtonPressed =\n typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;\n\n if (isButtonPressed) {\n this.setTime(e.nativeEvent, false);\n }\n };\n\n public handleMouseUp = (e: React.MouseEvent) => {\n if (this.isMoving) {\n this.isMoving = false;\n }\n\n this.setTime(e.nativeEvent, true);\n };\n\n public hasSelected = () => {\n const { type, value } = this.props;\n\n if (type === ClockType.HOURS) {\n return true;\n }\n\n return value % 5 === 0;\n };\n\n public render() {\n const { classes, value, children, type, ampm } = this.props;\n\n const isPointerInner = !ampm && type === ClockType.HOURS && (value < 1 || value > 12);\n\n return (\n \n
\n
\n\n
\n\n
\n\n {children}\n
\n
\n {utils.getYearRange(minDate, maxDate).map(year => {\n const yearNumber = utils.getYear(year);\n const selected = yearNumber === currentYear;\n\n return (\n \n {utils.getYearText(year)}\n \n );\n })}\n
\n );\n};\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport interface MonthProps {\n children: React.ReactNode;\n disabled?: boolean;\n onSelect: (value: any) => void;\n selected?: boolean;\n value: any;\n}\n\nexport const useStyles = makeStyles(\n theme => ({\n root: {\n flex: '1 0 33.33%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n outline: 'none',\n height: 75,\n transition: theme.transitions.create('font-size', { duration: '100ms' }),\n '&:focus': {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n },\n },\n monthSelected: {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n },\n monthDisabled: {\n pointerEvents: 'none',\n color: theme.palette.text.hint,\n },\n }),\n { name: 'MuiPickersMonth' }\n);\n\nexport const Month: React.FC = ({\n selected,\n onSelect,\n disabled,\n value,\n children,\n ...other\n}) => {\n const classes = useStyles();\n const handleSelection = React.useCallback(() => {\n onSelect(value);\n }, [onSelect, value]);\n\n return (\n \n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n","import * as React from 'react';\nimport Month from './Month';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useUtils } from '../../_shared/hooks/useUtils';\nimport { ParsableDate } from '../../constants/prop-types';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport interface MonthSelectionProps {\n date: MaterialUiPickersDate;\n minDate?: ParsableDate;\n maxDate?: ParsableDate;\n onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;\n disablePast?: boolean | null | undefined;\n disableFuture?: boolean | null | undefined;\n onMonthChange?: (date: MaterialUiPickersDate) => void | Promise;\n}\n\nexport const useStyles = makeStyles(\n {\n container: {\n width: 310,\n display: 'flex',\n flexWrap: 'wrap',\n alignContent: 'stretch',\n },\n },\n { name: 'MuiPickersMonthSelection' }\n);\n\nexport const MonthSelection: React.FC = ({\n disablePast,\n disableFuture,\n minDate,\n maxDate,\n date,\n onMonthChange,\n onChange,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const currentMonth = utils.getMonth(date);\n\n const shouldDisableMonth = (month: MaterialUiPickersDate) => {\n const now = utils.date();\n const utilMinDate = utils.date(minDate);\n const utilMaxDate = utils.date(maxDate);\n\n const firstEnabledMonth = utils.startOfMonth(\n disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate\n );\n\n const lastEnabledMonth = utils.startOfMonth(\n disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate\n );\n\n const isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);\n const isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);\n\n return isBeforeFirstEnabled || isAfterLastEnabled;\n };\n\n const onMonthSelect = React.useCallback(\n (month: number) => {\n const newDate = utils.setMonth(date, month);\n\n onChange(newDate, true);\n if (onMonthChange) {\n onMonthChange(newDate);\n }\n },\n [date, onChange, onMonthChange, utils]\n );\n\n return (\n \n {utils.getMonthArray(date).map(month => {\n const monthNumber = utils.getMonth(month);\n const monthText = utils.format(month, 'MMM');\n\n return (\n \n {monthText}\n \n );\n })}\n
\n );\n};\n","import * as React from 'react';\nimport { useIsomorphicEffect } from './useKeyDown';\nimport { BasePickerProps } from '../../typings/BasePicker';\n\nconst getOrientation = () => {\n if (typeof window === 'undefined') {\n return 'portrait';\n }\n\n if (window.screen && window.screen.orientation && window.screen.orientation.angle) {\n return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';\n }\n\n // Support IOS safari\n if (window.orientation) {\n return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';\n }\n\n return 'portrait';\n};\n\nexport function useIsLandscape(customOrientation?: BasePickerProps['orientation']) {\n const [orientation, setOrientation] = React.useState(\n getOrientation()\n );\n\n const eventHandler = React.useCallback(() => setOrientation(getOrientation()), []);\n\n useIsomorphicEffect(() => {\n window.addEventListener('orientationchange', eventHandler);\n return () => window.removeEventListener('orientationchange', eventHandler);\n }, [eventHandler]);\n\n const orientationToUse = customOrientation || orientation;\n return orientationToUse === 'landscape';\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Calendar from '../views/Calendar/Calendar';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { useViews } from '../_shared/hooks/useViews';\nimport { ClockView } from '../views/Clock/ClockView';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { YearSelection } from '../views/Year/YearView';\nimport { BasePickerProps } from '../typings/BasePicker';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { MonthSelection } from '../views/Month/MonthView';\nimport { BaseTimePickerProps } from '../TimePicker/TimePicker';\nimport { BaseDatePickerProps } from '../DatePicker/DatePicker';\nimport { useIsLandscape } from '../_shared/hooks/useIsLandscape';\nimport { datePickerDefaultProps } from '../constants/prop-types';\nimport { DIALOG_WIDTH_WIDER, DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';\n\nconst viewsMap = {\n year: YearSelection,\n month: MonthSelection,\n date: Calendar,\n hours: ClockView,\n minutes: ClockView,\n seconds: ClockView,\n};\n\nexport type PickerView = keyof typeof viewsMap;\n\nexport type ToolbarComponentProps = BaseDatePickerProps &\n BaseTimePickerProps & {\n views: PickerView[];\n openView: PickerView;\n date: MaterialUiPickersDate;\n setOpenView: (view: PickerView) => void;\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n // TODO move out, cause it is DateTimePickerOnly\n hideTabs?: boolean;\n dateRangeIcon?: React.ReactNode;\n timeIcon?: React.ReactNode;\n isLandscape: boolean;\n };\n\nexport interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProps {\n views: PickerView[];\n openTo: PickerView;\n disableToolbar?: boolean;\n ToolbarComponent: React.ComponentType;\n // TODO move out, cause it is DateTimePickerOnly\n hideTabs?: boolean;\n dateRangeIcon?: React.ReactNode;\n timeIcon?: React.ReactNode;\n}\n\ninterface PickerProps extends PickerViewProps {\n date: MaterialUiPickersDate;\n orientation?: BasePickerProps['orientation'];\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n}\n\nconst useStyles = makeStyles(\n {\n container: {\n display: 'flex',\n flexDirection: 'column',\n },\n containerLandscape: {\n flexDirection: 'row',\n },\n pickerView: {\n overflowX: 'hidden',\n minHeight: VIEW_HEIGHT,\n minWidth: DIALOG_WIDTH,\n maxWidth: DIALOG_WIDTH_WIDER,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n pickerViewLandscape: {\n padding: '0 8px',\n },\n },\n { name: 'MuiPickersBasePicker' }\n);\n\nexport const Picker: React.FunctionComponent = ({\n date,\n views,\n disableToolbar,\n onChange,\n openTo,\n minDate: unparsedMinDate,\n maxDate: unparsedMaxDate,\n ToolbarComponent,\n orientation,\n ...rest\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const isLandscape = useIsLandscape(orientation);\n const { openView, setOpenView, handleChangeAndOpenNext } = useViews(views, openTo, onChange);\n\n const minDate = React.useMemo(() => utils.date(unparsedMinDate)!, [unparsedMinDate, utils]);\n const maxDate = React.useMemo(() => utils.date(unparsedMaxDate)!, [unparsedMaxDate, utils]);\n\n return (\n \n {!disableToolbar && (\n \n )}\n\n \n {openView === 'year' && (\n \n )}\n\n {openView === 'month' && (\n \n )}\n\n {openView === 'date' && (\n \n )}\n\n {(openView === 'hours' || openView === 'minutes' || openView === 'seconds') && (\n \n )}\n
\n \n );\n};\n\nPicker.defaultProps = {\n ...datePickerDefaultProps,\n views: Object.keys(viewsMap),\n} as any;\n","import * as React from 'react';\nimport { PickerView } from '../../Picker/Picker';\nimport { arrayIncludes } from '../../_helpers/utils';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport function useViews(\n views: PickerView[],\n openTo: PickerView,\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void\n) {\n const [openView, setOpenView] = React.useState(\n openTo && arrayIncludes(views, openTo) ? openTo : views[0]\n );\n\n const handleChangeAndOpenNext = React.useCallback(\n (date: MaterialUiPickersDate, isFinish?: boolean) => {\n const nextViewToOpen = views[views.indexOf(openView!) + 1];\n if (isFinish && nextViewToOpen) {\n // do not close picker if needs to show next view\n onChange(date, false);\n setOpenView(nextViewToOpen);\n return;\n }\n\n onChange(date, Boolean(isFinish));\n },\n [onChange, openView, views]\n );\n\n return { handleChangeAndOpenNext, openView, setOpenView };\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles, fade } from '@material-ui/core/styles';\n\nexport interface ToolbarTextProps extends ExtendMui {\n selected?: boolean;\n label: string;\n}\n\nexport const useStyles = makeStyles(\n theme => {\n const textColor =\n theme.palette.type === 'light'\n ? theme.palette.primary.contrastText\n : theme.palette.getContrastText(theme.palette.background.default);\n\n return {\n toolbarTxt: {\n color: fade(textColor, 0.54),\n },\n toolbarBtnSelected: {\n color: textColor,\n },\n };\n },\n { name: 'MuiPickersToolbarText' }\n);\n\nconst ToolbarText: React.FunctionComponent = ({\n selected,\n label,\n className = null,\n ...other\n}) => {\n const classes = useStyles();\n return (\n \n );\n};\n\nexport default ToolbarText;\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ToolbarText from './ToolbarText';\nimport Button, { ButtonProps } from '@material-ui/core/Button';\nimport { ExtendMui } from '../typings/extendMui';\nimport { TypographyProps } from '@material-ui/core/Typography';\nimport { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ToolbarButtonProps\n extends ExtendMui,\n WithStyles {\n variant: TypographyProps['variant'];\n selected: boolean;\n label: string;\n align?: TypographyProps['align'];\n typographyClassName?: string;\n}\n\nconst ToolbarButton: React.FunctionComponent = ({\n classes,\n className = null,\n label,\n selected,\n variant,\n align,\n typographyClassName,\n ...other\n}) => {\n return (\n \n );\n};\n\n(ToolbarButton as any).propTypes = {\n selected: PropTypes.bool.isRequired,\n label: PropTypes.string.isRequired,\n classes: PropTypes.any.isRequired,\n className: PropTypes.string,\n innerRef: PropTypes.any,\n};\n\nToolbarButton.defaultProps = {\n className: '',\n};\n\nexport const styles = createStyles({\n toolbarBtn: {\n padding: 0,\n minWidth: '16px',\n textTransform: 'none',\n },\n});\n\nexport default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(\n theme => ({\n toolbar: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n height: 100,\n backgroundColor:\n theme.palette.type === 'light'\n ? theme.palette.primary.main\n : theme.palette.background.default,\n },\n toolbarLandscape: {\n height: 'auto',\n maxWidth: 150,\n padding: 8,\n justifyContent: 'flex-start',\n },\n }),\n { name: 'MuiPickersToolbar' }\n);\n\ninterface PickerToolbarProps extends ExtendMui {\n isLandscape: boolean;\n}\n\nconst PickerToolbar: React.SFC = ({\n children,\n isLandscape,\n className = null,\n ...other\n}) => {\n const classes = useStyles();\n\n return (\n \n {children}\n \n );\n};\n\nexport default PickerToolbar;\n","import * as React from 'react';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { ExtendMui } from '../typings/extendMui';\n\nexport type NotOverridableProps =\n | 'openPicker'\n | 'inputValue'\n | 'onChange'\n | 'format'\n | 'validationError'\n | 'format'\n | 'forwardedRef';\n\nexport interface PureDateInputProps\n extends ExtendMui {\n /** Pass material-ui text field variant down, bypass internal variant prop */\n inputVariant?: TextFieldProps['variant'];\n /** Override input component */\n TextFieldComponent?: React.ComponentType;\n InputProps?: TextFieldProps['InputProps'];\n inputProps?: TextFieldProps['inputProps'];\n onBlur?: TextFieldProps['onBlur'];\n onFocus?: TextFieldProps['onFocus'];\n inputValue: string;\n validationError?: React.ReactNode;\n openPicker: () => void;\n}\n\nexport const PureDateInput: React.FC = ({\n inputValue,\n inputVariant,\n validationError,\n InputProps,\n openPicker: onOpen,\n TextFieldComponent = TextField,\n ...other\n}) => {\n const PureDateInputProps = React.useMemo(\n () => ({\n ...InputProps,\n readOnly: true,\n }),\n [InputProps]\n );\n\n return (\n {\n // space\n if (e.keyCode === 32) {\n e.stopPropagation();\n onOpen();\n }\n }}\n />\n );\n};\n\nPureDateInput.displayName = 'PureDateInput';\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const KeyboardIcon: React.SFC = props => {\n return (\n \n \n \n \n );\n};\n","import { Omit } from './utils';\nimport { DatePickerProps } from '..';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { ParsableDate } from '../constants/prop-types';\nimport { BasePickerProps } from '../typings/BasePicker';\n\nexport const getDisplayDate = (\n value: ParsableDate,\n format: string,\n utils: IUtils,\n isEmpty: boolean,\n { invalidLabel, emptyLabel, labelFunc }: Omit\n) => {\n const date = utils.date(value);\n if (labelFunc) {\n return labelFunc(isEmpty ? null : date, invalidLabel!);\n }\n\n if (isEmpty) {\n return emptyLabel || '';\n }\n\n return utils.isValid(date) ? utils.format(date, format) : invalidLabel!;\n};\n\nexport interface BaseValidationProps {\n /**\n * Message, appearing when date cannot be parsed\n * @default 'Invalid Date Format'\n */\n invalidDateMessage?: React.ReactNode;\n}\n\nexport interface DateValidationProps extends BaseValidationProps {\n /**\n * Error message, shown if date is less then minimal date\n * @default 'Date should not be before minimal date'\n */\n minDateMessage?: React.ReactNode;\n /**\n * Error message, shown if date is more then maximal date\n * @default 'Date should not be after maximal date'\n */\n maxDateMessage?: React.ReactNode;\n}\n\nconst getComparisonMaxDate = (utils: IUtils, strictCompareDates: boolean, date: Date) => {\n if (strictCompareDates) {\n return date;\n }\n\n return utils.endOfDay(date);\n};\n\nconst getComparisonMinDate = (utils: IUtils, strictCompareDates: boolean, date: Date) => {\n if (strictCompareDates) {\n return date;\n }\n\n return utils.startOfDay(date);\n};\n\nexport const validate = (\n value: ParsableDate,\n utils: IUtils,\n {\n maxDate,\n minDate,\n disablePast,\n disableFuture,\n maxDateMessage,\n minDateMessage,\n invalidDateMessage,\n strictCompareDates,\n }: Omit // DateTimePicker doesn't support\n): React.ReactNode => {\n const parsedValue = utils.date(value);\n\n // if null - do not show error\n if (value === null) {\n return '';\n }\n\n if (!utils.isValid(value)) {\n return invalidDateMessage;\n }\n\n if (\n maxDate &&\n utils.isAfter(\n parsedValue,\n getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate))\n )\n ) {\n return maxDateMessage;\n }\n\n if (\n disableFuture &&\n utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))\n ) {\n return maxDateMessage;\n }\n\n if (\n minDate &&\n utils.isBefore(\n parsedValue,\n getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate))\n )\n ) {\n return minDateMessage;\n }\n if (\n disablePast &&\n utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))\n ) {\n return minDateMessage;\n }\n\n return '';\n};\n\nexport function pick12hOr24hFormat(\n userFormat: string | undefined,\n ampm: boolean | undefined = true,\n formats: { '12h': string; '24h': string }\n) {\n if (userFormat) {\n return userFormat;\n }\n\n return ampm ? formats['12h'] : formats['24h'];\n}\n\nexport function makeMaskFromFormat(format: string, numberMaskChar: string) {\n return format.replace(/[a-z]/gi, numberMaskChar);\n}\n\nexport const maskedDateFormatter = (mask: string, numberMaskChar: string, refuse: RegExp) => (\n value: string\n) => {\n let result = '';\n const parsed = value.replace(refuse, '');\n\n if (parsed === '') {\n return parsed;\n }\n\n let i = 0;\n let n = 0;\n while (i < mask.length) {\n const maskChar = mask[i];\n if (maskChar === numberMaskChar && n < parsed.length) {\n const parsedChar = parsed[n];\n result += parsedChar;\n n += 1;\n } else {\n result += maskChar;\n }\n i += 1;\n }\n\n return result;\n};\n","import * as React from 'react';\nimport IconButton, { IconButtonProps } from '@material-ui/core/IconButton';\nimport InputAdornment, { InputAdornmentProps } from '@material-ui/core/InputAdornment';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { Rifm } from 'rifm';\nimport { ExtendMui } from '../typings/extendMui';\nimport { KeyboardIcon } from './icons/KeyboardIcon';\nimport { makeMaskFromFormat, maskedDateFormatter } from '../_helpers/text-field-helper';\n\nexport interface KeyboardDateInputProps\n extends ExtendMui {\n format: string;\n onChange: (value: string | null) => void;\n openPicker: () => void;\n validationError?: React.ReactNode;\n inputValue: string;\n inputProps?: TextFieldProps['inputProps'];\n InputProps?: TextFieldProps['InputProps'];\n onBlur?: TextFieldProps['onBlur'];\n onFocus?: TextFieldProps['onFocus'];\n /** Override input component */\n TextFieldComponent?: React.ComponentType;\n /** Icon displaying for open picker button */\n keyboardIcon?: React.ReactNode;\n /** Pass material-ui text field variant down, bypass internal variant prop */\n inputVariant?: TextFieldProps['variant'];\n /**\n * Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)\n */\n mask?: string;\n /**\n * Char string that will be replaced with number (for \"_\" mask will be \"__/__/____\")\n * @default '_'\n */\n maskChar?: string;\n /**\n * Refuse values regexp\n * @default /[^\\d]+/gi\n */\n refuse?: RegExp;\n /**\n * Props to pass to keyboard input adornment\n * @type {Partial}\n */\n InputAdornmentProps?: Partial;\n /**\n * Props to pass to keyboard adornment button\n * @type {Partial}\n */\n KeyboardButtonProps?: Partial;\n /** Custom formatter to be passed into Rifm component */\n rifmFormatter?: (str: string) => string;\n}\n\nexport const KeyboardDateInput: React.FunctionComponent = ({\n inputValue,\n inputVariant,\n validationError,\n KeyboardButtonProps,\n InputAdornmentProps,\n openPicker: onOpen,\n onChange,\n InputProps,\n mask,\n maskChar = '_',\n refuse = /[^\\d]+/gi,\n format,\n keyboardIcon,\n disabled,\n rifmFormatter,\n TextFieldComponent = TextField,\n ...other\n}) => {\n const inputMask = mask || makeMaskFromFormat(format, maskChar);\n // prettier-ignore\n const formatter = React.useMemo(\n () => maskedDateFormatter(inputMask, maskChar, refuse),\n [inputMask, maskChar, refuse]\n );\n\n const position =\n InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';\n\n const handleChange = (text: string) => {\n const finalString = text === '' || text === inputMask ? null : text;\n onChange(finalString);\n };\n\n return (\n \n {({ onChange, value }) => (\n \n \n {keyboardIcon}\n \n \n ),\n }}\n />\n )}\n \n );\n};\n\nKeyboardDateInput.defaultProps = {\n keyboardIcon: ,\n};\n\nexport default KeyboardDateInput;\n","import { useUtils } from './useUtils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { useOpenState } from './useOpenState';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { getDisplayDate, validate } from '../../_helpers/text-field-helper';\nimport { useCallback, useDebugValue, useEffect, useMemo, useState, useRef } from 'react';\n\nexport interface StateHookOptions {\n getDefaultFormat: () => string;\n}\n\nconst useValueToDate = (\n utils: IUtils,\n { value, initialFocusedDate }: BasePickerProps\n) => {\n const nowRef = useRef(utils.date());\n const date = utils.date(value || initialFocusedDate || nowRef.current);\n\n return date && utils.isValid(date) ? date : nowRef.current;\n};\n\nfunction useDateValues(props: BasePickerProps, options: StateHookOptions) {\n const utils = useUtils();\n const date = useValueToDate(utils, props);\n const format = props.format || options.getDefaultFormat();\n\n return { date, format };\n}\n\nexport function usePickerState(props: BasePickerProps, options: StateHookOptions) {\n const { autoOk, disabled, readOnly, onAccept, onChange, onError, value, variant } = props;\n\n const utils = useUtils();\n const { isOpen, setIsOpen } = useOpenState(props);\n const { date, format } = useDateValues(props, options);\n const [pickerDate, setPickerDate] = useState(date);\n\n useEffect(() => {\n // if value was changed in closed state - treat it as accepted\n if (!isOpen && !utils.isEqual(pickerDate, date)) {\n setPickerDate(date);\n }\n }, [date, isOpen, pickerDate, utils]);\n\n const acceptDate = useCallback(\n (acceptedDate: MaterialUiPickersDate) => {\n onChange(acceptedDate);\n if (onAccept) {\n onAccept(acceptedDate);\n }\n\n setIsOpen(false);\n },\n [onAccept, onChange, setIsOpen]\n );\n\n const wrapperProps = useMemo(\n () => ({\n format,\n open: isOpen,\n onClear: () => acceptDate(null),\n onAccept: () => acceptDate(pickerDate),\n onSetToday: () => setPickerDate(utils.date()),\n onDismiss: () => {\n setIsOpen(false);\n },\n }),\n [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]\n );\n\n const pickerProps = useMemo(\n () => ({\n date: pickerDate,\n onChange: (newDate: MaterialUiPickersDate, isFinish = true) => {\n setPickerDate(newDate);\n\n if (isFinish && autoOk) {\n acceptDate(newDate);\n return;\n }\n\n // simulate autoOk, but do not close the modal\n if (variant === 'inline' || variant === 'static') {\n onChange(newDate);\n onAccept && onAccept(newDate);\n }\n },\n }),\n [acceptDate, autoOk, onAccept, onChange, pickerDate, variant]\n );\n\n const validationError = validate(value, utils, props);\n useEffect(() => {\n if (onError) {\n onError(validationError, value);\n }\n }, [onError, validationError, value]);\n\n const inputValue = getDisplayDate(date, format, utils, value === null, props);\n const inputProps = useMemo(\n () => ({\n inputValue,\n validationError,\n openPicker: () => !readOnly && !disabled && setIsOpen(true),\n }),\n [disabled, inputValue, readOnly, setIsOpen, validationError]\n );\n\n const pickerState = { pickerProps, inputProps, wrapperProps };\n\n useDebugValue(pickerState);\n return pickerState;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { useCallback, useState, Dispatch, SetStateAction } from 'react';\n\nexport function useOpenState({ open, onOpen, onClose }: BasePickerProps) {\n let setIsOpenState: null | Dispatch> = null;\n if (open === undefined || open === null) {\n // The component is uncontrolled, so we need to give it its own state.\n [open, setIsOpenState] = useState(false);\n }\n\n // prettier-ignore\n const setIsOpen = useCallback((newIsOpen: boolean) => {\n setIsOpenState && setIsOpenState(newIsOpen);\n\n return newIsOpen\n ? onOpen && onOpen()\n : onClose && onClose();\n }, [onOpen, onClose, setIsOpenState]);\n\n return { isOpen: open, setIsOpen };\n}\n","import { useUtils } from './useUtils';\nimport { Omit } from '../../_helpers/utils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { getDisplayDate } from '../../_helpers/text-field-helper';\nimport { StateHookOptions, usePickerState } from './usePickerState';\n\nexport interface BaseKeyboardPickerProps extends Omit {\n /** String value for controlling value with pure input string. Overrides value prop */\n inputValue?: string;\n /** Keyboard onChange callback @DateIOType */\n onChange: (date: MaterialUiPickersDate | null, value?: string | null) => void;\n}\n\nfunction parseInputString(value: string, utils: IUtils, format: string) {\n try {\n return utils.parse(value, format);\n } catch {\n return null;\n }\n}\n\nexport function useKeyboardPickerState(props: BaseKeyboardPickerProps, options: StateHookOptions) {\n const { format = options.getDefaultFormat(), inputValue, onChange, value } = props;\n const utils = useUtils();\n\n const displayDate = getDisplayDate(value, format, utils, value === null, props);\n const [innerInputValue, setInnerInputValue] = useState(displayDate);\n const dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;\n\n useEffect(() => {\n if (value === null || utils.isValid(value)) {\n setInnerInputValue(displayDate);\n }\n }, [displayDate, setInnerInputValue, utils, value]);\n\n const handleKeyboardChange = useCallback(\n (date: MaterialUiPickersDate) => {\n onChange(date, date === null ? null : utils.format(date, format));\n },\n [format, onChange, utils]\n );\n\n const { inputProps: innerInputProps, wrapperProps, pickerProps } = usePickerState(\n // Extend props interface\n { ...props, value: dateValue, onChange: handleKeyboardChange },\n options\n );\n\n const inputProps = useMemo(\n () => ({\n ...innerInputProps, // reuse validation and open/close logic\n format: wrapperProps.format,\n inputValue: inputValue || innerInputValue,\n onChange: (value: string | null) => {\n setInnerInputValue(value || '');\n const date = value === null ? null : utils.parse(value, wrapperProps.format);\n\n onChange(date, value);\n },\n }),\n [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]\n );\n\n return {\n inputProps,\n wrapperProps,\n pickerProps,\n };\n}\n","import * as React from 'react';\nimport { BasePickerProps } from '../typings/BasePicker';\nimport { Picker, ToolbarComponentProps } from './Picker';\nimport { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';\nimport { PureDateInputProps } from '../_shared/PureDateInput';\nimport { DateValidationProps } from '../_helpers/text-field-helper';\nimport { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';\nimport { StateHookOptions, usePickerState } from '../_shared/hooks/usePickerState';\nimport {\n BaseKeyboardPickerProps,\n useKeyboardPickerState,\n} from '../_shared/hooks/useKeyboardPickerState';\n\nexport type WithKeyboardInputProps = DateValidationProps &\n BaseKeyboardPickerProps &\n ExtendWrapper;\n\nexport type WithPureInputProps = DateValidationProps &\n BasePickerProps &\n ExtendWrapper;\n\nexport interface MakePickerOptions {\n Input: any;\n useState: typeof usePickerState | typeof useKeyboardPickerState;\n useOptions: (props: any) => StateHookOptions;\n getCustomProps?: (props: T) => Partial;\n DefaultToolbarComponent: React.ComponentType;\n}\n\nexport function makePickerWithState({\n Input,\n useState,\n useOptions,\n getCustomProps,\n DefaultToolbarComponent,\n}: MakePickerOptions): React.FC {\n function PickerWithState(props: T) {\n const {\n allowKeyboardControl,\n ampm,\n animateYearScrolling,\n autoOk,\n dateRangeIcon,\n disableFuture,\n disablePast,\n disableToolbar,\n emptyLabel,\n format,\n forwardedRef,\n hideTabs,\n initialFocusedDate,\n invalidDateMessage,\n invalidLabel,\n labelFunc,\n leftArrowButtonProps,\n leftArrowIcon,\n loadingIndicator,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n minutesStep,\n onAccept,\n onChange,\n onClose,\n onMonthChange,\n onOpen,\n onYearChange,\n openTo,\n orientation,\n renderDay,\n rightArrowButtonProps,\n rightArrowIcon,\n shouldDisableDate,\n strictCompareDates,\n timeIcon,\n ToolbarComponent = DefaultToolbarComponent,\n value,\n variant,\n views,\n ...other\n } = props;\n\n const injectedProps = getCustomProps ? getCustomProps(props) : {};\n\n const options = useOptions(props);\n const { pickerProps, inputProps, wrapperProps } = useState(props as any, options);\n\n return (\n \n \n \n );\n }\n\n return PickerWithState;\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { isYearAndMonthViews, isYearOnlyView } from '../_helpers/date-utils';\n\nexport const useStyles = makeStyles(\n {\n toolbar: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n toolbarLandscape: {\n padding: 16,\n },\n dateLandscape: {\n marginRight: 16,\n },\n },\n { name: 'MuiPickersDatePickerRoot' }\n);\n\nexport const DatePickerToolbar: React.FC = ({\n date,\n views,\n setOpenView,\n isLandscape,\n openView,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n\n const isYearOnly = React.useMemo(() => isYearOnlyView(views as any), [views]);\n const isYearAndMonth = React.useMemo(() => isYearAndMonthViews(views as any), [views]);\n\n return (\n \n setOpenView('year')}\n selected={openView === 'year'}\n label={utils.getYearText(date)}\n />\n\n {!isYearOnly && !isYearAndMonth && (\n setOpenView('date')}\n align={isLandscape ? 'left' : 'center'}\n label={utils.getDatePickerHeaderText(date)}\n className={clsx({ [classes.dateLandscape]: isLandscape })}\n />\n )}\n\n {isYearAndMonth && (\n setOpenView('month')}\n selected={openView === 'month'}\n label={utils.getMonthText(date)}\n />\n )}\n \n );\n};\n","import { useUtils } from '../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { DatePickerToolbar } from './DatePickerToolbar';\nimport { PureDateInput } from '../_shared/PureDateInput';\nimport { getFormatByViews } from '../_helpers/date-utils';\nimport { KeyboardDateInput } from '../_shared/KeyboardDateInput';\nimport { OutterCalendarProps } from '../views/Calendar/Calendar';\nimport { usePickerState } from '../_shared/hooks/usePickerState';\nimport { datePickerDefaultProps, ParsableDate } from '../constants/prop-types';\nimport { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';\nimport {\n WithKeyboardInputProps,\n WithPureInputProps,\n makePickerWithState,\n} from '../Picker/makePickerWithState';\n\nexport type DatePickerView = 'year' | 'date' | 'month';\n\nexport interface BaseDatePickerProps extends OutterCalendarProps {\n /**\n * Min selectable date\n * @default Date(1900-01-01)\n */\n minDate?: ParsableDate;\n /**\n * Max selectable date\n * @default Date(2100-01-01)\n */\n maxDate?: ParsableDate;\n\n /**\n * Compare dates by the exact timestamp, instead of start/end of date\n * @default false\n */\n strictCompareDates?: boolean;\n\n /**\n * Disable past dates\n * @default false\n */\n disablePast?: boolean;\n /**\n * Disable future dates\n * @default false\n */\n disableFuture?: boolean;\n /**\n * To animate scrolling to current year (using scrollIntoView)\n * @default false\n */\n animateYearScrolling?: boolean;\n /** Callback firing on year change @DateIOType */\n onYearChange?: (date: MaterialUiPickersDate) => void;\n}\n\nexport interface DatePickerViewsProps extends BaseDatePickerProps {\n /**\n * Array of views to show\n * @type {Array<\"year\" | \"date\" | \"month\">}\n */\n views?: DatePickerView[];\n /** First view to show in DatePicker */\n openTo?: DatePickerView;\n}\n\nexport type DatePickerProps = WithPureInputProps & DatePickerViewsProps;\n\nexport type KeyboardDatePickerProps = WithKeyboardInputProps & DatePickerViewsProps;\n\nconst defaultProps = {\n ...datePickerDefaultProps,\n openTo: 'date' as DatePickerView,\n views: ['year', 'date'] as DatePickerView[],\n};\n\nfunction useOptions(props: DatePickerViewsProps) {\n const utils = useUtils();\n\n return {\n getDefaultFormat: () => getFormatByViews(props.views!, utils),\n };\n}\n\nexport const DatePicker = makePickerWithState({\n useOptions,\n Input: PureDateInput,\n useState: usePickerState,\n DefaultToolbarComponent: DatePickerToolbar,\n});\n\nexport const KeyboardDatePicker = makePickerWithState({\n useOptions,\n Input: KeyboardDateInput,\n useState: useKeyboardPickerState,\n DefaultToolbarComponent: DatePickerToolbar,\n});\n\nDatePicker.defaultProps = defaultProps;\n\nKeyboardDatePicker.defaultProps = defaultProps;\n","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name endOfYear\n * @category Year Helpers\n * @summary Return the end of a year for the given date.\n *\n * @description\n * Return the end of a year for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the end of a year\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The end of a year for 2 September 2014 11:55:00:\n * const result = endOfYear(new Date(2014, 8, 2, 11, 55, 00))\n * //=> Wed Dec 31 2014 23:59:59.999\n */\nexport default function endOfYear(dirtyDate) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate);\n var year = date.getFullYear();\n date.setFullYear(year + 1, 0, 0);\n date.setHours(23, 59, 59, 999);\n return date;\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfHour\n * @category Hour Helpers\n * @summary Return the start of an hour for the given date.\n *\n * @description\n * Return the start of an hour for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of an hour\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of an hour for 2 September 2014 11:55:00:\n * const result = startOfHour(new Date(2014, 8, 2, 11, 55))\n * //=> Tue Sep 02 2014 11:00:00\n */\nexport default function startOfHour(dirtyDate) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate);\n date.setMinutes(0, 0, 0);\n return date;\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfYear\n * @category Year Helpers\n * @summary Return the start of a year for the given date.\n *\n * @description\n * Return the start of a year for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a year\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a year for 2 September 2014 11:55:00:\n * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))\n * //=> Wed Jan 01 2014 00:00:00\n */\nexport default function startOfYear(dirtyDate) {\n requiredArgs(1, arguments);\n var cleanDate = toDate(dirtyDate);\n var date = new Date(0);\n date.setFullYear(cleanDate.getFullYear(), 0, 1);\n date.setHours(0, 0, 0, 0);\n return date;\n}","import addDays from 'date-fns/addDays';\nimport addMonths from 'date-fns/addMonths';\nimport addYears from 'date-fns/addYears';\nimport differenceInMilliseconds from 'date-fns/differenceInMilliseconds';\nimport eachDayOfInterval from 'date-fns/eachDayOfInterval';\nimport endOfDay from 'date-fns/endOfDay';\nimport endOfWeek from 'date-fns/endOfWeek';\nimport endOfYear from 'date-fns/endOfYear';\nimport format from 'date-fns/format';\nimport getHours from 'date-fns/getHours';\nimport getSeconds from 'date-fns/getSeconds';\nimport getYear from 'date-fns/getYear';\nimport isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\nimport isEqual from 'date-fns/isEqual';\nimport isSameDay from 'date-fns/isSameDay';\nimport isSameYear from 'date-fns/isSameYear';\nimport isSameMonth from 'date-fns/isSameMonth';\nimport isSameHour from 'date-fns/isSameHour';\nimport isValid from 'date-fns/isValid';\nimport dateFnsParse from 'date-fns/parse';\nimport setHours from 'date-fns/setHours';\nimport setMinutes from 'date-fns/setMinutes';\nimport setMonth from 'date-fns/setMonth';\nimport setSeconds from 'date-fns/setSeconds';\nimport setYear from 'date-fns/setYear';\nimport startOfDay from 'date-fns/startOfDay';\nimport startOfMonth from 'date-fns/startOfMonth';\nimport endOfMonth from 'date-fns/endOfMonth';\nimport startOfWeek from 'date-fns/startOfWeek';\nimport startOfYear from 'date-fns/startOfYear';\n\nvar DateFnsUtils = /** @class */ (function () {\n function DateFnsUtils(_a) {\n var locale = (_a === void 0 ? {} : _a).locale;\n this.yearFormat = \"yyyy\";\n this.yearMonthFormat = \"MMMM yyyy\";\n this.dateTime12hFormat = \"MMMM do hh:mm aaaa\";\n this.dateTime24hFormat = \"MMMM do HH:mm\";\n this.time12hFormat = \"hh:mm a\";\n this.time24hFormat = \"HH:mm\";\n this.dateFormat = \"MMMM do\";\n this.locale = locale;\n }\n // Note: date-fns input types are more lenient than this adapter, so we need to expose our more\n // strict signature and delegate to the more lenient signature. Otherwise, we have downstream type errors upon usage.\n DateFnsUtils.prototype.addDays = function (value, count) {\n return addDays(value, count);\n };\n DateFnsUtils.prototype.isValid = function (value) {\n return isValid(this.date(value));\n };\n DateFnsUtils.prototype.getDiff = function (value, comparing) {\n return differenceInMilliseconds(value, this.date(comparing));\n };\n DateFnsUtils.prototype.isAfter = function (value, comparing) {\n return isAfter(value, comparing);\n };\n DateFnsUtils.prototype.isBefore = function (value, comparing) {\n return isBefore(value, comparing);\n };\n DateFnsUtils.prototype.startOfDay = function (value) {\n return startOfDay(value);\n };\n DateFnsUtils.prototype.endOfDay = function (value) {\n return endOfDay(value);\n };\n DateFnsUtils.prototype.getHours = function (value) {\n return getHours(value);\n };\n DateFnsUtils.prototype.setHours = function (value, count) {\n return setHours(value, count);\n };\n DateFnsUtils.prototype.setMinutes = function (value, count) {\n return setMinutes(value, count);\n };\n DateFnsUtils.prototype.getSeconds = function (value) {\n return getSeconds(value);\n };\n DateFnsUtils.prototype.setSeconds = function (value, count) {\n return setSeconds(value, count);\n };\n DateFnsUtils.prototype.isSameDay = function (value, comparing) {\n return isSameDay(value, comparing);\n };\n DateFnsUtils.prototype.isSameMonth = function (value, comparing) {\n return isSameMonth(value, comparing);\n };\n DateFnsUtils.prototype.isSameYear = function (value, comparing) {\n return isSameYear(value, comparing);\n };\n DateFnsUtils.prototype.isSameHour = function (value, comparing) {\n return isSameHour(value, comparing);\n };\n DateFnsUtils.prototype.startOfMonth = function (value) {\n return startOfMonth(value);\n };\n DateFnsUtils.prototype.endOfMonth = function (value) {\n return endOfMonth(value);\n };\n DateFnsUtils.prototype.getYear = function (value) {\n return getYear(value);\n };\n DateFnsUtils.prototype.setYear = function (value, count) {\n return setYear(value, count);\n };\n DateFnsUtils.prototype.date = function (value) {\n if (typeof value === \"undefined\") {\n return new Date();\n }\n if (value === null) {\n return null;\n }\n return new Date(value);\n };\n DateFnsUtils.prototype.parse = function (value, formatString) {\n if (value === \"\") {\n return null;\n }\n return dateFnsParse(value, formatString, new Date(), { locale: this.locale });\n };\n DateFnsUtils.prototype.format = function (date, formatString) {\n return format(date, formatString, { locale: this.locale });\n };\n DateFnsUtils.prototype.isEqual = function (date, comparing) {\n if (date === null && comparing === null) {\n return true;\n }\n return isEqual(date, comparing);\n };\n DateFnsUtils.prototype.isNull = function (date) {\n return date === null;\n };\n DateFnsUtils.prototype.isAfterDay = function (date, value) {\n return isAfter(date, endOfDay(value));\n };\n DateFnsUtils.prototype.isBeforeDay = function (date, value) {\n return isBefore(date, startOfDay(value));\n };\n DateFnsUtils.prototype.isBeforeYear = function (date, value) {\n return isBefore(date, startOfYear(value));\n };\n DateFnsUtils.prototype.isAfterYear = function (date, value) {\n return isAfter(date, endOfYear(value));\n };\n DateFnsUtils.prototype.formatNumber = function (numberToFormat) {\n return numberToFormat;\n };\n DateFnsUtils.prototype.getMinutes = function (date) {\n return date.getMinutes();\n };\n DateFnsUtils.prototype.getMonth = function (date) {\n return date.getMonth();\n };\n DateFnsUtils.prototype.setMonth = function (date, count) {\n return setMonth(date, count);\n };\n DateFnsUtils.prototype.getMeridiemText = function (ampm) {\n return ampm === \"am\" ? \"AM\" : \"PM\";\n };\n DateFnsUtils.prototype.getNextMonth = function (date) {\n return addMonths(date, 1);\n };\n DateFnsUtils.prototype.getPreviousMonth = function (date) {\n return addMonths(date, -1);\n };\n DateFnsUtils.prototype.getMonthArray = function (date) {\n var firstMonth = startOfYear(date);\n var monthArray = [firstMonth];\n while (monthArray.length < 12) {\n var prevMonth = monthArray[monthArray.length - 1];\n monthArray.push(this.getNextMonth(prevMonth));\n }\n return monthArray;\n };\n DateFnsUtils.prototype.mergeDateAndTime = function (date, time) {\n return this.setMinutes(this.setHours(date, this.getHours(time)), this.getMinutes(time));\n };\n DateFnsUtils.prototype.getWeekdays = function () {\n var _this = this;\n var now = new Date();\n return eachDayOfInterval({\n start: startOfWeek(now, { locale: this.locale }),\n end: endOfWeek(now, { locale: this.locale })\n }).map(function (day) { return _this.format(day, \"EEEEEE\"); });\n };\n DateFnsUtils.prototype.getWeekArray = function (date) {\n var start = startOfWeek(startOfMonth(date), { locale: this.locale });\n var end = endOfWeek(endOfMonth(date), { locale: this.locale });\n var count = 0;\n var current = start;\n var nestedWeeks = [];\n while (isBefore(current, end)) {\n var weekNumber = Math.floor(count / 7);\n nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];\n nestedWeeks[weekNumber].push(current);\n current = addDays(current, 1);\n count += 1;\n }\n return nestedWeeks;\n };\n DateFnsUtils.prototype.getYearRange = function (start, end) {\n var startDate = startOfYear(start);\n var endDate = endOfYear(end);\n var years = [];\n var current = startDate;\n while (isBefore(current, endDate)) {\n years.push(current);\n current = addYears(current, 1);\n }\n return years;\n };\n // displaying methpds\n DateFnsUtils.prototype.getCalendarHeaderText = function (date) {\n return this.format(date, this.yearMonthFormat);\n };\n DateFnsUtils.prototype.getYearText = function (date) {\n return this.format(date, \"yyyy\");\n };\n DateFnsUtils.prototype.getDatePickerHeaderText = function (date) {\n return this.format(date, \"EEE, MMM d\");\n };\n DateFnsUtils.prototype.getDateTimePickerHeaderText = function (date) {\n return this.format(date, \"MMM d\");\n };\n DateFnsUtils.prototype.getMonthText = function (date) {\n return this.format(date, \"MMMM\");\n };\n DateFnsUtils.prototype.getDayText = function (date) {\n return this.format(date, \"d\");\n };\n DateFnsUtils.prototype.getHourText = function (date, ampm) {\n return this.format(date, ampm ? \"hh\" : \"HH\");\n };\n DateFnsUtils.prototype.getMinuteText = function (date) {\n return this.format(date, \"mm\");\n };\n DateFnsUtils.prototype.getSecondText = function (date) {\n return this.format(date, \"ss\");\n };\n return DateFnsUtils;\n}());\n\nexport default DateFnsUtils;\n","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n * new Date(2014, 6, 2, 12, 30, 21, 700),\n * new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n requiredArgs(2, arguments);\n return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name getHours\n * @category Hour Helpers\n * @summary Get the hours of the given date.\n *\n * @description\n * Get the hours of the given date.\n *\n * @param {Date|Number} date - the given date\n * @returns {Number} the hours\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Get the hours of 29 February 2012 11:45:00:\n * const result = getHours(new Date(2012, 1, 29, 11, 45))\n * //=> 11\n */\nexport default function getHours(dirtyDate) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate);\n var hours = date.getHours();\n return hours;\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name setHours\n * @category Hour Helpers\n * @summary Set the hours to the given date.\n *\n * @description\n * Set the hours to the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} hours - the hours of the new date\n * @returns {Date} the new date with the hours set\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Set 4 hours to 1 September 2014 11:30:00:\n * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)\n * //=> Mon Sep 01 2014 04:30:00\n */\nexport default function setHours(dirtyDate, dirtyHours) {\n requiredArgs(2, arguments);\n var date = toDate(dirtyDate);\n var hours = toInteger(dirtyHours);\n date.setHours(hours);\n return date;\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name setMinutes\n * @category Minute Helpers\n * @summary Set the minutes to the given date.\n *\n * @description\n * Set the minutes to the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} minutes - the minutes of the new date\n * @returns {Date} the new date with the minutes set\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Set 45 minutes to 1 September 2014 11:30:40:\n * const result = setMinutes(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:45:40\n */\nexport default function setMinutes(dirtyDate, dirtyMinutes) {\n requiredArgs(2, arguments);\n var date = toDate(dirtyDate);\n var minutes = toInteger(dirtyMinutes);\n date.setMinutes(minutes);\n return date;\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name getSeconds\n * @category Second Helpers\n * @summary Get the seconds of the given date.\n *\n * @description\n * Get the seconds of the given date.\n *\n * @param {Date|Number} date - the given date\n * @returns {Number} the seconds\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Get the seconds of 29 February 2012 11:45:05.123:\n * const result = getSeconds(new Date(2012, 1, 29, 11, 45, 5, 123))\n * //=> 5\n */\nexport default function getSeconds(dirtyDate) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate);\n var seconds = date.getSeconds();\n return seconds;\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name setSeconds\n * @category Second Helpers\n * @summary Set the seconds to the given date.\n *\n * @description\n * Set the seconds to the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} seconds - the seconds of the new date\n * @returns {Date} the new date with the seconds set\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Set 45 seconds to 1 September 2014 11:30:40:\n * const result = setSeconds(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:30:45\n */\nexport default function setSeconds(dirtyDate, dirtySeconds) {\n requiredArgs(2, arguments);\n var date = toDate(dirtyDate);\n var seconds = toInteger(dirtySeconds);\n date.setSeconds(seconds);\n return date;\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameYear\n * @category Year Helpers\n * @summary Are the given dates in the same year?\n *\n * @description\n * Are the given dates in the same year?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same year\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 2 September 2014 and 25 September 2014 in the same year?\n * const result = isSameYear(new Date(2014, 8, 2), new Date(2014, 8, 25))\n * //=> true\n */\nexport default function isSameYear(dirtyDateLeft, dirtyDateRight) {\n requiredArgs(2, arguments);\n var dateLeft = toDate(dirtyDateLeft);\n var dateRight = toDate(dirtyDateRight);\n return dateLeft.getFullYear() === dateRight.getFullYear();\n}","import startOfHour from \"../startOfHour/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameHour\n * @category Hour Helpers\n * @summary Are the given dates in the same hour (and same day)?\n *\n * @description\n * Are the given dates in the same hour (and same day)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same hour (and same day)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 2014 06:00:00 and 4 September 06:30:00 in the same hour?\n * const result = isSameHour(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 6, 30))\n * //=> true\n *\n * @example\n * // Are 4 September 2014 06:00:00 and 5 September 06:00:00 in the same hour?\n * const result = isSameHour(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 5, 6, 0))\n * //=> false\n */\nexport default function isSameHour(dirtyDateLeft, dirtyDateRight) {\n requiredArgs(2, arguments);\n var dateLeftStartOfHour = startOfHour(dirtyDateLeft);\n var dateRightStartOfHour = startOfHour(dirtyDateRight);\n return dateLeftStartOfHour.getTime() === dateRightStartOfHour.getTime();\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name getYear\n * @category Year Helpers\n * @summary Get the year of the given date.\n *\n * @description\n * Get the year of the given date.\n *\n * @param {Date|Number} date - the given date\n * @returns {Number} the year\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Which year is 2 July 2014?\n * const result = getYear(new Date(2014, 6, 2))\n * //=> 2014\n */\nexport default function getYear(dirtyDate) {\n requiredArgs(1, arguments);\n return toDate(dirtyDate).getFullYear();\n}","import React from \"react\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport TextField from \"@material-ui/core/TextField\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport Button from \"@material-ui/core/Button\";\nimport Typography from \"@material-ui/core/Typography\";\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from \"@material-ui/pickers\";\nimport DateFnsUtils from \"@date-io/date-fns\";\nimport Grid from \"@material-ui/core/Grid\";\nimport DateRangeIcon from \"@material-ui/icons/DateRange\";\n\nconst DateTextField = withStyles({\n root: {\n \"& input\": {\n padding: \"10px\",\n color: \"#ffffff\",\n },\n \"& .MuiInput-root\": {\n border: \"1px solid #464659\",\n marginTop: \"32px\",\n backgroundColor: \"#1D1D25\",\n borderRadius: \"2px\",\n boxSizing: \"border-box\",\n padding: \"2px\",\n },\n \"& label.Mui-focused\": {\n color: \"#ffffff\",\n },\n \"& .MuiIconButton-root\": {\n color: \"#ffffff\",\n },\n },\n})(KeyboardDatePicker);\n\ntype TypeAddNewUserStepTwoProp = {\n classes: { [key: string]: string };\n dialogHandleDelete: () => void;\n onChangeRoles: (e: any) => void;\n showDialog: () => void;\n onValidToDateChange: (date: Date | null) => void;\n onValidFromDateChange: (date: Date | null) => void;\n currentApp: any;\n dateValidTo: any;\n dateValidFrom: any;\n userChoices: any;\n roles: any;\n applicationLevels: any\n};\n\nexport default function AddNewUserStepTwo({\n classes,\n currentApp,\n onChangeRoles,\n showDialog,\n dateValidTo,\n userChoices,\n roles,\n onValidToDateChange,\n onValidFromDateChange,\n dateValidFrom,\n applicationLevels\n}: TypeAddNewUserStepTwoProp) {\n const today = new Date();\n return (\n \n
\n \n \n \n \n Levels\n \n \n {applicationLevels.map((element: any) => {\n return (\n {element}\n )\n })}\n \n\n\n \n \n Role *\n \n \n {Array.isArray(currentApp.roles) &&\n currentApp.roles.map((option: any) => (\n \n {option.role_name}\n \n ))}\n \n
\n \n \n \n \n View Permissions\n \n
\n \n \n }\n KeyboardButtonProps={{\n \"aria-label\": \"change date\",\n }}\n required\n />\n \n \n }\n KeyboardButtonProps={{\n \"aria-label\": \"change date\",\n }}\n required\n />\n \n \n \n \n );\n}\n","const callXhrRequest = function () {\n const tokenKey = \"sso_token\";\n const REACT_APP_SSO_HOST = window.SERVER_DATA.REACT_APP_SSO_HOST;\n const accessToken = JSON.parse(sessionStorage.getItem(tokenKey));\n return new Promise(function (myResolve, myReject) {\n // \"Producing Code\" (May take some time)\n console.log(\"Calling Refresh token request\");\n var data = `refresh_token=${accessToken.refresh_token}&grant_type=refresh_token`;\n\n var xhr = new XMLHttpRequest();\n xhr.withCredentials = true;\n\n xhr.addEventListener(\"readystatechange\", function () {\n if (this.readyState === 4) {\n if (this.responseText.indexOf(\"error\") === -1) {\n myResolve(this.responseText);\n } else {\n myReject(\"could not refresh token, logging out\");\n }\n // when successful\n }\n });\n\n xhr.open(\"POST\", `${REACT_APP_SSO_HOST}/as/token.oauth2`);\n xhr.setRequestHeader(\"content-type\", \"application/x-www-form-urlencoded\");\n xhr.setRequestHeader(\"authorization\", `Bearer ${accessToken.access_token}`);\n\n xhr.send(data);\n });\n};\n\nexport default callXhrRequest;\n","import FileSaver from \"file-saver\";\nimport * as XLSX from \"xlsx\";\n\nexport async function exportToExcel(ExclData, SheetName, ColsCount) {\n const today = getCurrentDate();\n const fileName = `Export-${SheetName}-Data-${today}`;\n const fileType =\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8\";\n const fileExtension = \".csv\";\n const wscols = [];\n for (let i = 1; i <= ColsCount; i++) {\n wscols.push({ wch: 15 });\n }\n const reportExcl = XLSX.utils.json_to_sheet(ExclData);\n reportExcl[\"!cols\"] = wscols;\n const wb = XLSX.utils.book_new();\n XLSX.utils.book_append_sheet(wb, reportExcl, SheetName);\n const excelBuffer = XLSX.write(wb, { bookType: \"xlsx\", type: \"array\" });\n const data = new Blob([excelBuffer], { type: fileType });\n FileSaver.saveAs(data, fileName + fileExtension);\n}\n\nfunction getCurrentDate() {\n const date = new Date();\n const day = date.getDate();\n const month = new Date().getMonth() + 1;\n const year = new Date().getFullYear();\n return `${month}-${day}-${year}`;\n}\n\nexport function getTodayDate() {\n var d = new Date(),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) {\n month = \"0\" + month;\n }\n if (day.length < 2) {\n day = \"0\" + day;\n }\n const hrs = d.getHours() < 10 ? \"0\" + d.getHours() : d.getHours();\n const mins = d.getMinutes() < 10 ? \"0\" + d.getMinutes() : d.getMinutes();\n const secs = d.getSeconds() < 10 ? \"0\" + d.getSeconds() : d.getSeconds();\n return `${[year, month, day].join(\"-\")} ${hrs}:${mins}:${secs}`;\n}\n\nexport const isValidImageExtension = (file) => {\n const extension = file.name.split(\".\").pop().toLowerCase();\n return [\"jpeg\", \"jpg\", \"png\"].includes(extension);\n};\n\nexport const arrayOfErrorsRefresh = [\"token expired\"];\nexport const arrayOfErrorsLogout = [\"authentication error\"];\nexport const arrayOfImageTypes = [\"image/jpeg\",\"image/jpg\",\"image/png\"];\nexport const maxImages = 5;\nexport const maxImageSize = 10;\nexport const AuthType = {\n x509: 'X509',\n sas: 'SAS'\n};\n","import React, { useEffect } from \"react\";\nimport {\n makeStyles,\n createStyles,\n withStyles,\n Theme,\n WithStyles,\n} from \"@material-ui/core/styles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Button from \"@material-ui/core/Button\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Stepper from \"@material-ui/core/Stepper\";\nimport Step from \"@material-ui/core/Step\";\nimport StepLabel from \"@material-ui/core/StepLabel\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport MuiDialogTitle from \"@material-ui/core/DialogTitle\";\nimport MuiDialogContent from \"@material-ui/core/DialogContent\";\nimport MuiDialogActions from \"@material-ui/core/DialogActions\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport deleteLogo from \"../../assets/Delete.png\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport { API } from \"../../api/property\";\nimport { SnackbarProvider, useSnackbar } from \"notistack\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Paper from \"@material-ui/core/Paper\";\nimport ErrorDialog from \"../../utils/ErrorDialog\";\nimport PermissionDialog from \"./UsersComponent/PermissionDialog\";\nimport AddNewUserStepOne from \"./UsersComponent/AddNewUserStepOne\";\nimport AddNewUserStepTwo from \"./UsersComponent/AddNewUserStepTwo\";\nimport Radio from \"@material-ui/core/Radio\";\nimport callXhrRequest from '../../utils/xhrRequestHandler';\nimport { arrayOfErrorsRefresh, arrayOfErrorsLogout } from '../../utils/helper';\nimport { useStore } from \"mobx-store-provider\";\nimport { Checkbox } from \"@material-ui/core\";\nconst textFieldBorder = \"1px solid #464659\";\nconst buttonBorder = \"1px solid rgba(235,235,245,0.35)\";\nconst stepsColor = \"red !important\";\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n margin: \"30px\",\n },\n hidden: {\n display: \"none\",\n },\n noSpace: {\n padding: \"0px\",\n margin: \"0px\",\n },\n spaceTop: {\n marginTop: \"35px\",\n },\n space2Top: {\n marginTop: \"20px\",\n },\n spaceRight: {\n paddingRight: \"10px\",\n },\n spaceLeftSite: {\n display: \"flex\",\n alignItems: \"flex-end\",\n paddingLeft: \"10px\",\n },\n spaceLeft: {\n paddingLeft: \"10px\",\n },\n formTitle: {\n fontWeight: \"bold\",\n fontSize: \"21px\",\n color: \"#FFFFFF\",\n lineHeight: \"25px\",\n },\n form: {\n width: \"100%\",\n },\n fieldWrapper: {\n marginTop: \"20px\",\n },\n labels: {\n color: \"#fcfcfc\",\n fontSize: \"16px\",\n transform: \"scale(1)\",\n },\n accordionRoot: {\n color: \"#FFFFFF\",\n margin: \"0px\",\n padding: \"0px\",\n boxShadow: \"none\",\n \"& .MuiAccordionSummary-content\": {\n margin: \"0px\",\n },\n minHeight: \"auto !important\",\n },\n noSpaceNoMin: {\n margin: \"0px !important\",\n padding: \"0px !important\",\n minHeight: \"auto !important\",\n },\n typoRoot: {\n paddingLeft: \"24px\",\n },\n field: {\n color: \"#FCFCFC\",\n fontSize: \"12px\",\n padding: \"10px\",\n },\n textfield: {\n color: \"#ffffff\",\n backgroundColor: \"#1D1D25\",\n border: `${textFieldBorder}`,\n borderRadius: \"2px\",\n boxSizing: \"border-box\",\n },\n icon: {\n color: \"#FFFFFF\",\n },\n options: {\n color: \"#FCFCFC\",\n fontSize: \"12px\",\n padding: \"10px\",\n cursor: \"pointer\",\n },\n fieldRoot: {\n marginTop: \"16px\",\n },\n selectRoot: {\n padding: \"24px\",\n },\n datePickerRoot: {\n color: \"#FFFFFF\",\n border: `${textFieldBorder}`,\n borderRadius: \"2px\",\n \"& .MuiIconButton-root, .MuiPickersDay-day, .MuiPickersCalendarHeader-dayLabel\": {\n color: \"#FFFFFF\",\n },\n \"& .MuiPickersDay-daySelected\": {\n border: `${textFieldBorder}`,\n },\n },\n bottomSection: {\n justifyContent: \"space-between\",\n display: \"flex\",\n borderTop: \"1px solid #33333F\",\n paddingTop: \"20px\",\n },\n btnCancel: {\n borderRadius: \"2px\",\n border: `${buttonBorder}`,\n color: \"#0089FF\",\n background: \"none\",\n fontSize: \"16px\",\n lineHeight: \"19px\",\n textTransform: \"none\",\n padding: \"9px 20px\",\n },\n btnAddNUser: {\n backgroundColor: \"#0089ff\",\n borderRadius: \"4px\",\n border: \"none\",\n color: \"#FFFFFF\",\n \"&:hover\": {\n backgroundColor: \"#0089ff\",\n },\n fontSize: \"16px\",\n lineHeight: \"19px\",\n textTransform: \"none\",\n padding: \"9px 20px\",\n },\n vp: {\n backgroundColor: \"#2B2B36\",\n border: `${textFieldBorder}`,\n borderRadius: \"2px\",\n color: \"#FCFCFC\",\n \"&:hover\": {\n backgroundColor: \"#2B2B36\",\n },\n fontSize: \"14px\",\n lineHeight: \"16px\",\n textTransform: \"none\",\n padding: \"12px 0px\",\n marginTop: \"34px\",\n width: \"100%\",\n },\n dialogRoot: {\n boxShadow: \"0px 30px 100px #000000\",\n borderRadius: \"3px\",\n maxWidth: \"800px\",\n minWidth: \"800px\",\n \"& .dcTitle.dcHeader\": {\n marginTop: \"0px\",\n },\n \"& .dcTitle\": {\n fontSize: \"16px\",\n lineHeight: \"19px\",\n color: \"#FFFFFF\",\n fontWeight: \"bold\",\n marginTop: \"25px\",\n },\n \"& .dcOuter\": {\n background: \"#2B2B36\",\n borderRadius: \"4px\",\n padding: \"15px\",\n },\n \"& .dcOuterPadding\": {\n padding: \"10px 20px\",\n },\n \"& .dcFieldValue\": {\n fontSize: \"14px\",\n lineHeight: \"16px\",\n margin: \"10px\",\n color: \"#FFFFFF\",\n },\n \"& .dcSep\": {\n marginTop: \"20px\",\n },\n \"& .dcBtDelete\": {\n borderRadius: \"2px\",\n border: `${buttonBorder}`,\n color: \"#0089FF\",\n background: \"none\",\n },\n \"& .dcBtEdit\": {\n backgroundColor: \"#0089ff\",\n borderRadius: \"4px\",\n border: \"none\",\n color: \"#FFFFFF\",\n },\n },\n bgColor: {\n background: \"#2B2B36\",\n margin: \"1px 0\",\n padding: \"7px 0\",\n },\n marginLeft15: {\n marginLeft: \"-1px\",\n },\n bgColorBlue: {\n color: \"#1976d2 !important\",\n },\n listButton: {\n padding: \"0px\",\n textTransform: \"none\",\n fontSize: \"14px\",\n whiteSpace: \"nowrap\",\n },\n dividerColor: {\n background: \"#464659\",\n margin: \"1em\",\n },\n helperText: {\n color: \"#d32f2f !important\",\n position: \"absolute\",\n right: 0,\n },\n isExpand: {\n position: \"relative\",\n top: \"1rem\",\n },\n stepperRoot: {\n width: \"50%\",\n margin: \"0 auto\",\n },\n stepname: {\n color: \"#FFF\",\n \"& span\": {\n display: \"flex\",\n flexDirection: \"column\",\n },\n },\n stepactive: {\n color: \"#FFF\",\n },\n steplabel: {\n color: \"#FFF\",\n \"& span\": {\n color: \"darkgray !important\",\n },\n \"& .active\": {\n color: \"green !important\",\n },\n },\n step: {\n \"&$completed\": {\n color: \"#0089ff\",\n },\n \"&$active\": {\n color: \"cornflowerblue\",\n },\n \"&$disabled\": {\n color: \"red\",\n },\n },\n alternativeLabel: {\n color: \"yellow !important\",\n \"&$active\": {\n color: `${stepsColor}`,\n },\n },\n active: {\n color: \"cornflowerblue !important\",\n },\n completed: {\n color: \"#0089ff !important\",\n },\n disabled: {\n color: \"red\",\n },\n labelContainer: {\n color: `${stepsColor}`,\n \"&$alternativeLabel\": {\n marginTop: 0,\n color: \"orange !important\",\n },\n \"&$active\": {\n color: `${stepsColor}`,\n },\n \"&$completed\": {\n color: \"green !important\",\n },\n },\n appContainer: {\n padding: \"1rem\",\n background: \"#2b2b36\",\n marginTop: \"1rem\",\n },\n rightSec: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"flex-end\",\n whiteSpace: \"nowrap\",\n padding: \"5px 0px\",\n fontSize: \"12px\",\n lineHeight: \"14px\",\n \"& p\": {\n fontSize: \"13px\",\n padding: \"10px 25px\",\n backgroundColor: \"#2B2B36\",\n color: \"white\",\n },\n \"& button\": {\n background: \"#0089FF\",\n borderRadius: \"2px\",\n fontSize: \"16px\",\n color: \"#FCFCFC\",\n padding: \"6px 20px\",\n marginRight: \"10px\",\n \"&:hover\": {\n background: \"#0089FF\",\n },\n },\n },\n dialogRootSmall: {\n boxShadow: \"0px 30px 100px #000000\",\n borderRadius: \"3px\",\n maxWidth: \"800px\",\n position: \"absolute\",\n top: \"10%\",\n minWidth: \"416px\",\n \"& .dcTitle.dcHeader\": {\n marginTop: \"0px\",\n },\n \"& .dcTitle\": {\n fontSize: \"16px\",\n lineHeight: \"19px\",\n color: \"#FFFFFF\",\n fontWeight: \"bold\",\n marginTop: \"25px\",\n },\n \"& .dcOuter\": {\n background: \"#2B2B36\",\n borderRadius: \"4px\",\n padding: \"15px\",\n },\n \"& .dcFieldValue\": {\n fontSize: \"14px\",\n lineHeight: \"1px\",\n marginTop: \"10px\",\n color: \"#FFFFFF\",\n },\n \"& .dcSep\": {\n marginTop: \"20px\",\n },\n \"& .dcBtDelete\": {\n borderRadius: \"2px\",\n border: `${buttonBorder}`,\n color: \"#0089FF\",\n background: \"none\",\n },\n \"& .dcBtEdit\": {\n backgroundColor: \"#0089ff\",\n borderRadius: \"4px\",\n border: \"none\",\n color: \"#FFFFFF\",\n },\n },\n colorWhite: {\n color: \"#FFFFFF\",\n },\n appTitle: {\n width: \"100%\",\n },\n tableWrapper: {\n padding: \"0 20px\",\n marginTop: \"15px\",\n boxShadow: \"none\",\n overflow: \"hidden\",\n width: \"50em\",\n },\n table: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n },\n instructions: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n btnDelRole: {\n textDecoration: \"underline\",\n color: \"#0089ff !important\",\n },\n textField: {\n width: \"26ch\",\n color: \"#fff\",\n padding: \"3px 10px\",\n border: \"1px solid gray\",\n },\n margin: {\n margin: theme.spacing(2),\n },\n levelSearch: {\n height: \"50px\",\n backgroundColor: \"#2B2B36\",\n border: \"transparent\",\n color: \"white\",\n marginTop: \"2em\",\n paddingLeft: \"23px\"\n },\n })\n);\n\nconst DialogActions = withStyles((theme: Theme) => ({\n root: {\n margin: \"20px 15px\",\n justifyContent: \"space-between\",\n padding: 0,\n \"& button\": {\n fontSize: \"16px\",\n lineHeight: \"19px\",\n textTransform: \"none\",\n padding: \"9px 20px\",\n },\n },\n}))(MuiDialogActions);\nconst DialogTitleStyles = (theme: Theme) =>\n createStyles({\n root: {\n margin: \"20px\",\n padding: 0,\n color: \"#FFFFFF\",\n },\n title: {\n fontSize: \"21px\",\n lineHeight: \"25px\",\n fontWeight: \"bold\",\n },\n closeButton: {\n position: \"absolute\",\n right: \"2px\",\n top: \"15px\",\n color: \"#FFFFFF\",\n fontSize: \"14px\",\n },\n });\nexport interface DialogTitleProps extends WithStyles {\n id: string;\n children: React.ReactNode;\n onClose: () => void;\n}\nconst DialogTitle = withStyles(DialogTitleStyles)((props: DialogTitleProps) => {\n const { children, classes, onClose, ...other } = props;\n return (\n \n \n {children}\n \n {onClose ? (\n \n \n \n ) : null}\n \n );\n});\nconst DialogContent = withStyles((theme: Theme) => ({\n root: {\n margin: \"0px 20px\",\n padding: 0,\n color: \"#FFFFFF\",\n scrollY: \"auto\",\n },\n}))(MuiDialogContent);\n\nconst StyledTableCell = withStyles((theme: Theme) =>\n createStyles({\n root: {\n borderBottom: \"none\",\n },\n head: {\n backgroundColor: \"#1D1D25\",\n color: \"#FFFFFF\",\n borderBottom: \"none\",\n padding: \"8px\",\n },\n body: {\n fontSize: 14,\n color: \"#FFFFFF\",\n backgroundColor: \"none\",\n padding: \"3px 0\",\n background: \"#1D1D25\",\n },\n })\n)(TableCell);\n\nconst StyledTableRow = withStyles((theme: Theme) =>\n createStyles({\n root: {\n \"&:nth-of-type(odd)\": {\n },\n },\n })\n)(TableRow);\n\nfunction getSteps() {\n return [\"User Details\", \"Roles & Permissions\"];\n}\n\ninterface ComponentProps {\n onSaveUser: any;\n}\n\nconst getDefaultValidToDate = () => {\n let validToDate = new Date();\n validToDate.setFullYear(validToDate.getFullYear() + 1)\n return validToDate;\n}\n\nconst AddNewUserWrapper: React.FC = (props: ComponentProps) => {\n const classes = useStyles();\n const { user } = useStore();\n\n const API_KEY = window.SERVER_DATA.REACT_APP_PM_API_KEY;\n interface sObj {\n pm_s_id: string;\n }\n interface tObj {\n pm_s_token: string;\n }\n let pmSId: sObj = {\n pm_s_id: \"\",\n };\n let pmST: tObj = {\n pm_s_token: \"\",\n };\n pmSId =\n sessionStorage.getItem(\"pm_s_id\") || JSON.parse(JSON.stringify(pmSId));\n pmST =\n sessionStorage.getItem(\"pm_s_token\") || JSON.parse(JSON.stringify(pmST));\n const [userEmailValidation, setUserEmailValidation] = React.useState([] as any);\n\n const [application_level_id, setApplication_level_id] = React.useState([] as any);\n const [application_level_name, setApplication_level_name] = React.useState([] as any);\n\n const [userApplication, setUserApplication] = React.useState([] as any);\n const [app, setApp] = React.useState(\"\");\n const [applvl, setAppLevel] = React.useState(false);\n const [reload, setReload] = React.useState(false);\n const handleChangeApp = (event: React.ChangeEvent) => {\n setApp(event.target.value);\n setAppLevel(true);\n setUserChoices(\"\");\n };\n const { enqueueSnackbar } = useSnackbar();\n const [emailHelper, setEmailHelper] = React.useState(\"\");\n const [email, setEmail] = React.useState(\"\");\n const validEmail = userEmailValidation.some((e: any) => {\n if (e.email_id === email) {\n return true\n } else {\n return false\n }\n })\n const onEmailChange = (event: any) => {\n if (\n /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/.test(\n event.target.value\n )\n ) {\n setEmailHelper(\"\");\n } else {\n setEmailHelper(\"Please enter valid email address\");\n }\n setEmail(event.target.value);\n };\n const [search, setSearch] = React.useState(\"\");\n const handleChangeSearch = (event: any) => {\n const target = event.target.value;\n setSearch(target);\n };\n\n const [rolesData, setRolesData] = React.useState({});\n\n const [roles, setRoles] = React.useState(\"\" as any);\n const handleChangeRoles = (event: any) => {\n setRoles(event.target.value);\n const _rolesData =\n (selectedApplication.roles || []).find(\n (role: any) => role.role_id === event.target.value\n ) || {};\n setRolesData(_rolesData);\n };\n const [permDialog, setPermDialogOpen] = React.useState(false);\n\n const openPermDialog = () => {\n setPermDialogOpen(true);\n };\n\n const dialogPermClose = () => {\n setPermDialogOpen(false);\n };\n const [rolesInput, setRolesInput] = React.useState([] as any);\n const [validToDate, setValidToDate] = React.useState(getDefaultValidToDate());\n const [validFromDate, setValidFromDate] = React.useState(\n new Date()\n );\n const validToDateChange = (date: Date | null) => {\n setValidToDate(date);\n };\n const validFromDateChange = (date: Date | null) => {\n setValidFromDate(date);\n };\n const [levelRadioSelect, setLevelRadioSelect] = React.useState(\"\" as any);\n const highlightHandler = (event: React.ChangeEvent, level_id: any, level_name: any) => {\n const checked = event.target.checked;\n let temp = [...application_level_id]\n let temp1 = [...application_level_name]\n if (checked) {\n temp.push(level_id)\n temp1.push(level_name)\n }\n else {\n temp.splice(temp.indexOf(level_id), 1);\n temp1.splice(temp.indexOf(level_name), 1);\n }\n setApplication_level_id(temp);\n setApplication_level_name(temp1);\n\n };\n\n const d = new Date(`${validToDate}`);\n const dateValidTo =\n d.getFullYear() +\n \"-\" +\n `${(\"0\" + (d.getMonth() + 1)).slice(-2)}` +\n \"-\" +\n d.getDate() +\n \" \" +\n \"23:59:59\"\n const d1 = new Date(`${validFromDate}`);\n const dateValidFrom =\n d1.getFullYear() +\n \"-\" + \n `${(\"0\" + (d1.getMonth() + 1)).slice(-2)}` +\n \"-\" +\n d1.getDate() +\n \" \" +\n \"00:00:01\"\n\n const saveUserAction = () => {\n const tokenKey = \"sso_token\";\n const accessToken = JSON.parse(sessionStorage.getItem(tokenKey) as string);\n const USERS_API = `${API[\"GETALLAPPLS\"]}/${app}/users`;\n if (!roles) {\n enqueueSnackbar(\"Please select a role.\", { variant: \"error\" });\n } else if (!dateValidFrom) {\n enqueueSnackbar(\"Please select valid from date.\", { variant: \"error\" });\n\n } else if (!dateValidTo) {\n enqueueSnackbar(\"Please select a valid to date.\", { variant: \"error\" });\n\n } else {\n const requestOptions = {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n 'Authorization': `Bearer ${accessToken.access_token}`,\n 'Ocp-Apim-Subscription-Key': `${API_KEY}`,\n 'Ocp-Apim-Trace': `true`\n },\n body: JSON.stringify({\n pm_s_id: pmSId,\n pm_s_token: pmST,\n user: {\n email_id: email,\n application_level_id: application_level_id,\n role_id: roles,\n valid_from: dateValidFrom,\n valid_to: dateValidTo,\n },\n }),\n };\n fetch(USERS_API, requestOptions)\n .then(function (response: any) {\n response.json().then((response: any) => {\n if ((response && response.status === 401) && (response && arrayOfErrorsRefresh.includes(response.message.toLowerCase()))) {\n try {\n const tokenKey = \"sso_token\";\n callXhrRequest().then(function (data) {\n sessionStorage.setItem(tokenKey, data);\n saveUserAction()\n }).catch(function (error) {\n console.log('error', error)\n })\n } catch (error) {\n user.triggerLogout();\n console.log(error);\n }\n return;\n }\n else if ((response && response.status === 401) && (response && arrayOfErrorsLogout.includes(response.message.toLowerCase()))) {\n try {\n user.triggerLogout();\n } catch (error) {\n console.log(error);\n }\n return;\n }\n else if (response.status === 200 || response.status === 201) {\n enqueueSnackbar(\"User Created\", { variant: \"success\" });\n setTimeout(() => { cancelUserAction() }, 500);\n }\n else {\n setError(true);\n setErrMsg(\"Error occured. Please try again after sometime.\");\n }\n })\n })\n .catch(function (error) {\n console.log(error);\n });\n \n }\n };\n\n const cancelUserAction = () => {\n setTimeout(function () {\n setEmail(\"\");\n setLevelRadioSelect(\"\");\n setRoles(\"\");\n setValidFromDate(new Date());\n setValidToDate(getDefaultValidToDate());\n setApp(\"\");\n setActiveStep(0);\n setUserChoices([]);\n setAppLevel(false);\n setApplication_level_id([]);\n setApplication_level_name([]);\n props.onSaveUser();\n }, 5);\n };\n\n const [error, setError] = React.useState(false);\n const [errMsg, setErrMsg] = React.useState(\"\");\n const updateError = () => {\n setError(false);\n setErrMsg(\"\");\n };\n const [activeStep, setActiveStep] = React.useState(0);\n const [skipped, setSkipped] = React.useState(new Set());\n const steps = getSteps();\n\n const handleNext = (event: any) => {\n const regexCheck = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n event.preventDefault();\n if (!email) {\n enqueueSnackbar(\"Please enter email id.\", { variant: \"error\" });\n } else if (!(regexCheck.test(email))) {\n enqueueSnackbar('Invalid email id.', { variant: \"error\" });\n } else if (validEmail) {\n enqueueSnackbar(\"Email id is already registered. Please enter another email id.\", { variant: \"error\" });\n } else if (!app) {\n enqueueSnackbar(\"Please select an application.\", { variant: \"error\" });\n } else if (application_level_id.length === 0) {\n enqueueSnackbar(\"Please select an application level.\", { variant: \"error\" });\n } else {\n const newSkipped = skipped;\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped(newSkipped);\n }\n };\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n\n const [openDialogDelete, setOpenDialogDelete] = React.useState(false);\n const dialogHandleDelete = () => {\n setOpenDialogDelete(true);\n };\n const dialogHandleCloseDelete = () => {\n setOpenDialogDelete(false);\n };\n const [userChoices, setUserChoices] = React.useState([]);\n const userChoicesValue: any = [];\n const [dummyRoles, setDummyRoles] = React.useState([...userChoicesValue]);\n\n const dialogHandlesaveDelete = () => {\n dummyRoles.splice(-1, 1);\n setDummyRoles(dummyRoles);\n setTimeout(function () {\n enqueueSnackbar(\"User Updated\", { variant: \"success\" });\n }, 1000);\n setOpenDialogDelete(false);\n setTimeout(function () {\n setOpenDialogDelete(false);\n }, 500);\n };\n const selectedApplication =\n userApplication ? (userApplication.find((a: any) => a.application_id === app) || {}) : {};\n const levels = selectedApplication.application_level || [];\n useEffect(() => {\n setDummyRoles(userChoices);\n }, [userChoices]);\n\n useEffect(() => {\n const tokenKey = \"sso_token\";\n const accessToken = JSON.parse(sessionStorage.getItem(tokenKey) as string);\n interface sObj {\n pm_s_id: string;\n }\n interface tObj {\n pm_s_token: string;\n }\n let pmSId: sObj = {\n pm_s_id: \"\",\n };\n let pmST: tObj = {\n pm_s_token: \"\",\n };\n pmSId =\n sessionStorage.getItem(\"pm_s_id\") || JSON.parse(JSON.stringify(pmSId));\n pmST =\n sessionStorage.getItem(\"pm_s_token\") || JSON.parse(JSON.stringify(pmST));\n const GETALLUSERS_API = API[\"GETALLUSERS\"];\n const GETUSERSAPPLS_API = API[\"GETUSERSAPPLS\"];\n const GETROLES_INPUT = API[\"ROLES_APPLS_INPUT\"];\n\n Promise.all([\n fetch(`${GETALLUSERS_API}?pm_s_token=${pmST}&pm_s_id=${pmSId}`, {\n headers: {\n 'Authorization': `Bearer ${accessToken.access_token}`,\n 'Ocp-Apim-Subscription-Key': `${API_KEY}`,\n 'Ocp-Apim-Trace': `true`\n },\n }),\n fetch(`${GETUSERSAPPLS_API}?pm_s_token=${pmST}&pm_s_id=${pmSId}`, {\n headers: {\n 'Authorization': `Bearer ${accessToken.access_token}`,\n 'Ocp-Apim-Subscription-Key': `${API_KEY}`,\n 'Ocp-Apim-Trace': `true`\n },\n }),\n fetch(`${GETROLES_INPUT}?pm_s_token=${pmST}&pm_s_id=${pmSId}`, {\n headers: {\n 'Authorization': `Bearer ${accessToken.access_token}`,\n 'Ocp-Apim-Subscription-Key': `${API_KEY}`,\n 'Ocp-Apim-Trace': `true`\n },\n }),\n ])\n .then(function (responses) {\n return Promise.all(\n responses.map(function (response) {\n return response.json();\n })\n );\n })\n .then(function (response: any) {\n if ((response && response[0].status === 401) && (response && arrayOfErrorsRefresh.includes(response[0].message.toLowerCase()))) {\n try {\n const tokenKey = \"sso_token\";\n callXhrRequest().then(function (data) {\n sessionStorage.setItem(tokenKey, data);\n setReload(!reload)\n }).catch(function (error) {\n user.triggerLogout();\n console.log('error', error)\n })\n } catch (error) {\n console.log(error);\n }\n return;\n }\n else if ((response && response[0].status === 401) && (response && arrayOfErrorsLogout.includes(response[0].message.toLowerCase()))) {\n try {\n user.triggerLogout();\n } catch (error) {\n console.log(error);\n }\n return;\n }\n if (\n response &&\n response[0].status === 200 &&\n typeof response[0].users !== \"undefined\"\n ) {\n setUserEmailValidation(response && response[0].users);\n }\n if (\n response &&\n response[1].status === 200 &&\n typeof response[1].users_input !== \"undefined\"\n ) {\n setUserApplication(\n response && response[1].users_input[0].applications\n );\n }\n if (\n response &&\n response[2].status === 200 &&\n typeof response[2].roles_input !== \"undefined\"\n ) {\n setRolesInput(response && response[2].roles_input[0].portal_components);\n }\n })\n .catch(function (error) {\n console.log(error);\n });\n }, [API_KEY, reload]);\n\n return (\n \n
\n \n {steps.map((label, index) => {\n return (\n \n \n {label}\n \n \n );\n })}\n \n
\n {/*
All fields marked * are mandatory.
*/}\n
\n {error && (\n
\n )}\n
\n
\n \n {steps.map((label, index) => {\n return (\n \n \n {label}\n \n \n );\n })}\n \n
\n
\n \n \n \n \n \n {error && (\n \n )}\n