;\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\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 );\n }\n}\n\nexport const styles = (theme: Theme) =>\n createStyles({\n container: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-end',\n margin: `${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,\n },\n clock: {\n backgroundColor: 'rgba(0,0,0,.07)',\n borderRadius: '50%',\n height: 260,\n width: 260,\n position: 'relative',\n pointerEvents: 'none',\n },\n squareMask: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n pointerEvents: 'auto',\n outline: 'none',\n touchActions: 'none',\n userSelect: 'none',\n '&:active': {\n cursor: 'move',\n },\n },\n pin: {\n width: 6,\n height: 6,\n borderRadius: '50%',\n backgroundColor: theme.palette.primary.main,\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n },\n });\n\nexport default withStyles(styles, {\n name: 'MuiPickersClock',\n})(Clock as React.ComponentType);\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\nconst positions: Record = {\n 0: [0, 40],\n 1: [55, 19.6],\n 2: [94.4, 59.5],\n 3: [109, 114],\n 4: [94.4, 168.5],\n 5: [54.5, 208.4],\n 6: [0, 223],\n 7: [-54.5, 208.4],\n 8: [-94.4, 168.5],\n 9: [-109, 114],\n 10: [-94.4, 59.5],\n 11: [-54.5, 19.6],\n 12: [0, 5],\n 13: [36.9, 49.9],\n 14: [64, 77],\n 15: [74, 114],\n 16: [64, 151],\n 17: [37, 178],\n 18: [0, 188],\n 19: [-37, 178],\n 20: [-64, 151],\n 21: [-74, 114],\n 22: [-64, 77],\n 23: [-37, 50],\n};\n\nexport interface ClockNumberProps {\n index: number;\n label: string;\n selected: boolean;\n isInner?: boolean;\n}\n\nexport const useStyles = makeStyles(\n theme => {\n const size = theme.spacing(4);\n\n return {\n clockNumber: {\n width: size,\n height: 32,\n userSelect: 'none',\n position: 'absolute',\n left: `calc((100% - ${typeof size === 'number' ? `${size}px` : size}) / 2)`,\n display: 'inline-flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n color:\n theme.palette.type === 'light' ? theme.palette.text.primary : theme.palette.text.hint,\n },\n clockNumberSelected: {\n color: theme.palette.primary.contrastText,\n },\n };\n },\n { name: 'MuiPickersClockNumber' }\n);\n\nexport const ClockNumber: React.FC = ({ selected, label, index, isInner }) => {\n const classes = useStyles();\n const className = clsx(classes.clockNumber, {\n [classes.clockNumberSelected]: selected,\n });\n\n const transformStyle = React.useMemo(() => {\n const position = positions[index];\n\n return {\n transform: `translate(${position[0]}px, ${position[1]}px`,\n };\n }, [index]);\n\n return (\n \n );\n};\n\nexport default ClockNumber;\n","import * as React from 'react';\nimport ClockNumber from './ClockNumber';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport const getHourNumbers = ({\n ampm,\n utils,\n date,\n}: {\n ampm: boolean;\n utils: IUtils;\n date: MaterialUiPickersDate;\n}) => {\n const currentHours = utils.getHours(date);\n\n const hourNumbers: JSX.Element[] = [];\n const startHour = ampm ? 1 : 0;\n const endHour = ampm ? 12 : 23;\n\n const isSelected = (hour: number) => {\n if (ampm) {\n if (hour === 12) {\n return currentHours === 12 || currentHours === 0;\n }\n\n return currentHours === hour || currentHours - 12 === hour;\n }\n\n return currentHours === hour;\n };\n\n for (let hour = startHour; hour <= endHour; hour += 1) {\n let label = hour.toString();\n\n if (hour === 0) {\n label = '00';\n }\n\n const props = {\n index: hour,\n label: utils.formatNumber(label),\n selected: isSelected(hour),\n isInner: !ampm && (hour === 0 || hour > 12),\n };\n\n hourNumbers.push();\n }\n\n return hourNumbers;\n};\n\nexport const getMinutesNumbers = ({\n value,\n utils,\n}: {\n value: number;\n utils: IUtils;\n}) => {\n const f = utils.formatNumber;\n\n return [\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ,\n ];\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Clock from './Clock';\nimport ClockType from '../../constants/ClockType';\nimport { useUtils } from '../../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { getHourNumbers, getMinutesNumbers } from './ClockNumbers';\nimport { convertToMeridiem, getMeridiem } from '../../_helpers/time-utils';\n\nexport interface TimePickerViewProps {\n /** TimePicker value */\n date: MaterialUiPickersDate;\n /** Clock type */\n type: 'hours' | 'minutes' | 'seconds';\n /** 12h/24h clock mode */\n ampm?: boolean;\n /** Minutes step */\n minutesStep?: number;\n /** On hour change */\n onHourChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n /** On minutes change */\n onMinutesChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n /** On seconds change */\n onSecondsChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n}\n\nexport const ClockView: React.FC = ({\n type,\n onHourChange,\n onMinutesChange,\n onSecondsChange,\n ampm,\n date,\n minutesStep,\n}) => {\n const utils = useUtils();\n const viewProps = React.useMemo(() => {\n switch (type) {\n case ClockType.HOURS:\n return {\n value: utils.getHours(date),\n children: getHourNumbers({ date, utils, ampm: Boolean(ampm) }),\n onChange: (value: number, isFinish?: boolean) => {\n const currentMeridiem = getMeridiem(date, utils);\n const updatedTimeWithMeridiem = convertToMeridiem(\n utils.setHours(date, value),\n currentMeridiem,\n Boolean(ampm),\n utils\n );\n\n onHourChange(updatedTimeWithMeridiem, isFinish);\n },\n };\n\n case ClockType.MINUTES:\n const minutesValue = utils.getMinutes(date);\n return {\n value: minutesValue,\n children: getMinutesNumbers({ value: minutesValue, utils }),\n onChange: (value: number, isFinish?: boolean) => {\n const updatedTime = utils.setMinutes(date, value);\n\n onMinutesChange(updatedTime, isFinish);\n },\n };\n\n case ClockType.SECONDS:\n const secondsValue = utils.getSeconds(date);\n return {\n value: secondsValue,\n children: getMinutesNumbers({ value: secondsValue, utils }),\n onChange: (value: number, isFinish?: boolean) => {\n const updatedTime = utils.setSeconds(date, value);\n\n onSecondsChange(updatedTime, isFinish);\n },\n };\n\n default:\n throw new Error('You must provide the type for TimePickerView');\n }\n }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);\n\n return ;\n};\n\nClockView.displayName = 'TimePickerView';\n\nClockView.propTypes = {\n date: PropTypes.object.isRequired,\n onHourChange: PropTypes.func.isRequired,\n onMinutesChange: PropTypes.func.isRequired,\n onSecondsChange: PropTypes.func.isRequired,\n ampm: PropTypes.bool,\n minutesStep: PropTypes.number,\n type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key as keyof typeof ClockType]))\n .isRequired,\n} as any;\n\nClockView.defaultProps = {\n ampm: true,\n minutesStep: 1,\n};\n\nexport default React.memo(ClockView);\n","import * as PropTypes from 'prop-types';\nimport { BaseTimePickerProps } from '../TimePicker/TimePicker';\nimport { BaseDatePickerProps } from '../DatePicker/DatePicker';\n\nconst date = PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.number,\n PropTypes.instanceOf(Date),\n]);\n\nconst datePickerView = PropTypes.oneOf(['year', 'month', 'day']);\n\nexport type ParsableDate = object | string | number | Date | null | undefined;\n\nexport const DomainPropTypes = { date, datePickerView };\n\n/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */\nexport const timePickerDefaultProps = {\n ampm: true,\n invalidDateMessage: 'Invalid Time Format',\n} as BaseTimePickerProps;\n\nexport const datePickerDefaultProps = {\n minDate: new Date('1900-01-01'),\n maxDate: new Date('2100-01-01'),\n invalidDateMessage: 'Invalid Date Format',\n minDateMessage: 'Date should not be before minimal date',\n maxDateMessage: 'Date should not be after maximal date',\n allowKeyboardControl: true,\n} as BaseDatePickerProps;\n\nexport const dateTimePickerDefaultProps = {\n ...timePickerDefaultProps,\n ...datePickerDefaultProps,\n showTabs: true,\n} as BaseTimePickerProps & BaseDatePickerProps;\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 YearProps {\n children: React.ReactNode;\n disabled?: boolean;\n onSelect: (value: any) => void;\n selected?: boolean;\n value: any;\n forwardedRef?: React.Ref;\n}\n\nexport const useStyles = makeStyles(\n theme => ({\n root: {\n height: 40,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n outline: 'none',\n '&:focus': {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n },\n },\n yearSelected: {\n margin: '10px 0',\n fontWeight: theme.typography.fontWeightMedium,\n },\n yearDisabled: {\n pointerEvents: 'none',\n color: theme.palette.text.hint,\n },\n }),\n { name: 'MuiPickersYear' }\n);\n\nexport const Year: React.FC = ({\n onSelect,\n forwardedRef,\n value,\n selected,\n disabled,\n children,\n ...other\n}) => {\n const classes = useStyles();\n const handleClick = React.useCallback(() => onSelect(value), [onSelect, value]);\n\n return (\n \n );\n};\n\nYear.displayName = 'Year';\n\nexport default React.forwardRef((props, ref) => (\n \n));\n","import * as React from 'react';\nimport Year from './Year';\nimport { DateType } from '@date-io/type';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useUtils } from '../../_shared/hooks/useUtils';\nimport { VariantContext } from '../../wrappers/Wrapper';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport interface YearSelectionProps {\n date: MaterialUiPickersDate;\n minDate: DateType;\n maxDate: DateType;\n onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;\n disablePast?: boolean | null | undefined;\n disableFuture?: boolean | null | undefined;\n animateYearScrolling?: boolean | null | undefined;\n onYearChange?: (date: MaterialUiPickersDate) => void;\n}\n\nexport const useStyles = makeStyles(\n {\n container: {\n height: 300,\n overflowY: 'auto',\n },\n },\n { name: 'MuiPickersYearSelection' }\n);\n\nexport const YearSelection: React.FC = ({\n date,\n onChange,\n onYearChange,\n minDate,\n maxDate,\n disablePast,\n disableFuture,\n animateYearScrolling,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const currentVariant = React.useContext(VariantContext);\n const selectedYearRef = React.useRef(null);\n\n React.useEffect(() => {\n if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {\n try {\n selectedYearRef.current.scrollIntoView({\n block: currentVariant === 'static' ? 'nearest' : 'center',\n behavior: animateYearScrolling ? 'smooth' : 'auto',\n });\n } catch (e) {\n // call without arguments in case when scrollIntoView works improperly (e.g. Firefox 52-57)\n selectedYearRef.current.scrollIntoView();\n }\n }\n }, []); // eslint-disable-line\n\n const currentYear = utils.getYear(date);\n const onYearSelect = React.useCallback(\n (year: number) => {\n const newDate = utils.setYear(date, year);\n if (onYearChange) {\n onYearChange(newDate);\n }\n\n onChange(newDate, true);\n },\n [date, onChange, onYearChange, utils]\n );\n\n return (\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 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 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 \n \n \n Role *\n \n \n {Array.isArray(currentApp.roles) &&\n currentApp.roles.map((option: any) => (\n \n ))}\n \n
\n \n \n \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\ninterface ChildComponentProps {\n onSaveUser: any;\n}\n\nexport default function AddNewUser({ onSaveUser }: ChildComponentProps) {\n return (\n \n \n \n );\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nimport isMuiElement from '../utils/isMuiElement';\nimport useForkRef from '../utils/useForkRef';\nimport ListContext from '../List/ListContext';\nimport * as ReactDOM from 'react-dom';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */\n root: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n position: 'relative',\n textDecoration: 'none',\n width: '100%',\n boxSizing: 'border-box',\n textAlign: 'left',\n paddingTop: 8,\n paddingBottom: 8,\n '&$focusVisible': {\n backgroundColor: theme.palette.action.selected\n },\n '&$selected, &$selected:hover': {\n backgroundColor: theme.palette.action.selected\n },\n '&$disabled': {\n opacity: 0.5\n }\n },\n\n /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */\n container: {\n position: 'relative'\n },\n\n /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */\n focusVisible: {},\n\n /* Styles applied to the `component` element if dense. */\n dense: {\n paddingTop: 4,\n paddingBottom: 4\n },\n\n /* Styles applied to the `component` element if `alignItems=\"flex-start\"`. */\n alignItemsFlexStart: {\n alignItems: 'flex-start'\n },\n\n /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the inner `component` element if `divider={true}`. */\n divider: {\n borderBottom: \"1px solid \".concat(theme.palette.divider),\n backgroundClip: 'padding-box'\n },\n\n /* Styles applied to the inner `component` element if `disableGutters={false}`. */\n gutters: {\n paddingLeft: 16,\n paddingRight: 16\n },\n\n /* Styles applied to the inner `component` element if `button={true}`. */\n button: {\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n }),\n '&:hover': {\n textDecoration: 'none',\n backgroundColor: theme.palette.action.hover,\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n\n /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */\n secondaryAction: {\n // Add some space to avoid collision as `ListItemSecondaryAction`\n // is absolutely positioned.\n paddingRight: 48\n },\n\n /* Pseudo-class applied to the root element if `selected={true}`. */\n selected: {}\n };\n};\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * Uses an additional container component if `ListItemSecondaryAction` is the last child.\n */\n\nvar ListItem = /*#__PURE__*/React.forwardRef(function ListItem(props, ref) {\n var _props$alignItems = props.alignItems,\n alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,\n _props$button = props.button,\n button = _props$button === void 0 ? false : _props$button,\n childrenProp = props.children,\n classes = props.classes,\n className = props.className,\n componentProp = props.component,\n _props$ContainerCompo = props.ContainerComponent,\n ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,\n _props$ContainerProps = props.ContainerProps;\n _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;\n\n var ContainerClassName = _props$ContainerProps.className,\n ContainerProps = _objectWithoutProperties(_props$ContainerProps, [\"className\"]),\n _props$dense = props.dense,\n dense = _props$dense === void 0 ? false : _props$dense,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n _props$divider = props.divider,\n divider = _props$divider === void 0 ? false : _props$divider,\n focusVisibleClassName = props.focusVisibleClassName,\n _props$selected = props.selected,\n selected = _props$selected === void 0 ? false : _props$selected,\n other = _objectWithoutProperties(props, [\"alignItems\", \"autoFocus\", \"button\", \"children\", \"classes\", \"className\", \"component\", \"ContainerComponent\", \"ContainerProps\", \"dense\", \"disabled\", \"disableGutters\", \"divider\", \"focusVisibleClassName\", \"selected\"]);\n\n var context = React.useContext(ListContext);\n var childContext = {\n dense: dense || context.dense || false,\n alignItems: alignItems\n };\n var listItemRef = React.useRef(null);\n useEnhancedEffect(function () {\n if (autoFocus) {\n if (listItemRef.current) {\n listItemRef.current.focus();\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.');\n }\n }\n }, [autoFocus]);\n var children = React.Children.toArray(childrenProp);\n var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n listItemRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRef = useForkRef(handleOwnRef, ref);\n\n var componentProps = _extends({\n className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== \"center\" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),\n disabled: disabled\n }, other);\n\n var Component = componentProp || 'li';\n\n if (button) {\n componentProps.component = componentProp || 'div';\n componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);\n Component = ButtonBase;\n }\n\n if (hasSecondaryAction) {\n // Use div by default.\n Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.\n\n if (ContainerComponent === 'li') {\n if (Component === 'li') {\n Component = 'div';\n } else if (componentProps.component === 'li') {\n componentProps.component = 'div';\n }\n }\n\n return /*#__PURE__*/React.createElement(ListContext.Provider, {\n value: childContext\n }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({\n className: clsx(classes.container, ContainerClassName),\n ref: handleRef\n }, ContainerProps), /*#__PURE__*/React.createElement(Component, componentProps, children), children.pop()));\n }\n\n return /*#__PURE__*/React.createElement(ListContext.Provider, {\n value: childContext\n }, /*#__PURE__*/React.createElement(Component, _extends({\n ref: handleRef\n }, componentProps), children));\n});\nprocess.env.NODE_ENV !== \"production\" ? ListItem.propTypes = {\n /**\n * Defines the `align-items` style property.\n */\n alignItems: PropTypes.oneOf(['flex-start', 'center']),\n\n /**\n * If `true`, the list item will be focused during the first mount.\n * Focus will also be triggered if the value changes from false to true.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, the list item will be a button (using `ButtonBase`). Props intended\n * for `ButtonBase` can then be applied to `ListItem`.\n */\n button: PropTypes.bool,\n\n /**\n * The content of the component. If a `ListItemSecondaryAction` is used it must\n * be the last child.\n */\n children: chainPropTypes(PropTypes.node, function (props) {\n var children = React.Children.toArray(props.children); // React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)\n\n var secondaryActionIndex = -1;\n\n for (var i = children.length - 1; i >= 0; i -= 1) {\n var child = children[i];\n\n if (isMuiElement(child, ['ListItemSecondaryAction'])) {\n secondaryActionIndex = i;\n break;\n }\n } // is ListItemSecondaryAction the last child of ListItem\n\n\n if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {\n return new Error('Material-UI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');\n }\n\n return null;\n }),\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * The container component used when a `ListItemSecondaryAction` is the last child.\n */\n ContainerComponent: PropTypes.elementType,\n\n /**\n * Props applied to the container component if used.\n */\n ContainerProps: PropTypes.object,\n\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used.\n */\n dense: PropTypes.bool,\n\n /**\n * If `true`, the list item will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the left and right padding is removed.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * If `true`, a 1px light border is added to the bottom of the list item.\n */\n divider: PropTypes.bool,\n\n /**\n * @ignore\n */\n focusVisibleClassName: PropTypes.string,\n\n /**\n * Use to apply selected styling.\n */\n selected: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiListItem'\n})(ListItem);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport ListContext from '../List/ListContext';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n flex: '1 1 auto',\n minWidth: 0,\n marginTop: 4,\n marginBottom: 4\n },\n\n /* Styles applied to the `Typography` components if primary and secondary are set. */\n multiline: {\n marginTop: 6,\n marginBottom: 6\n },\n\n /* Styles applied to the `Typography` components if dense. */\n dense: {},\n\n /* Styles applied to the root element if `inset={true}`. */\n inset: {\n paddingLeft: 56\n },\n\n /* Styles applied to the primary `Typography` component. */\n primary: {},\n\n /* Styles applied to the secondary `Typography` component. */\n secondary: {}\n};\nvar ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$disableTypogra = props.disableTypography,\n disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,\n _props$inset = props.inset,\n inset = _props$inset === void 0 ? false : _props$inset,\n primaryProp = props.primary,\n primaryTypographyProps = props.primaryTypographyProps,\n secondaryProp = props.secondary,\n secondaryTypographyProps = props.secondaryTypographyProps,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"disableTypography\", \"inset\", \"primary\", \"primaryTypographyProps\", \"secondary\", \"secondaryTypographyProps\"]);\n\n var _React$useContext = React.useContext(ListContext),\n dense = _React$useContext.dense;\n\n var primary = primaryProp != null ? primaryProp : children;\n\n if (primary != null && primary.type !== Typography && !disableTypography) {\n primary = /*#__PURE__*/React.createElement(Typography, _extends({\n variant: dense ? 'body2' : 'body1',\n className: classes.primary,\n component: \"span\",\n display: \"block\"\n }, primaryTypographyProps), primary);\n }\n\n var secondary = secondaryProp;\n\n if (secondary != null && secondary.type !== Typography && !disableTypography) {\n secondary = /*#__PURE__*/React.createElement(Typography, _extends({\n variant: \"body2\",\n className: classes.secondary,\n color: \"textSecondary\",\n display: \"block\"\n }, secondaryTypographyProps), secondary);\n }\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, dense && classes.dense, inset && classes.inset, primary && secondary && classes.multiline),\n ref: ref\n }, other), primary, secondary);\n});\nprocess.env.NODE_ENV !== \"production\" ? ListItemText.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Alias for the `primary` prop.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, the children won't be wrapped by a Typography component.\n * This can be useful to render an alternative Typography variant by wrapping\n * the `children` (or `primary`) text, and optional `secondary` text\n * with the Typography component.\n */\n disableTypography: PropTypes.bool,\n\n /**\n * If `true`, the children will be indented.\n * This should be used if there is no left avatar or left icon.\n */\n inset: PropTypes.bool,\n\n /**\n * The main content element.\n */\n primary: PropTypes.node,\n\n /**\n * These props will be forwarded to the primary typography component\n * (as long as disableTypography is not `true`).\n */\n primaryTypographyProps: PropTypes.object,\n\n /**\n * The secondary content element.\n */\n secondary: PropTypes.node,\n\n /**\n * These props will be forwarded to the secondary typography component\n * (as long as disableTypography is not `true`).\n */\n secondaryTypographyProps: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiListItemText'\n})(ListItemText);","import React, { FC, 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 TextField from \"@material-ui/core/TextField\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport Button from \"@material-ui/core/Button\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Dialog from \"@material-ui/core/Dialog\";\nimport MuiDialogTitle from \"@material-ui/core/DialogTitle\";\nimport MuiDialogContent from \"@material-ui/core/DialogContent\";\nimport AccordionDetails from \"@material-ui/core/AccordionDetails\";\nimport DateRangeIcon from \"@material-ui/icons/DateRange\";\nimport DateFnsUtils from \"@date-io/date-fns\";\nimport { API } from \"../../api/property\";\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from \"@material-ui/pickers\";\nimport { Backdrop, CircularProgress, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';\nimport { SnackbarProvider, useSnackbar } from \"notistack\";\nimport ErrorDialog from \"../../utils/ErrorDialog\";\nimport Stepper from \"@material-ui/core/Stepper\";\nimport Step from \"@material-ui/core/Step\";\nimport callXhrRequest from \"../../utils/xhrRequestHandler\";\nimport { arrayOfErrorsRefresh, arrayOfErrorsLogout } from '../../utils/helper';\nimport { useStore } from \"mobx-store-provider\";\nimport StepLabel from \"@material-ui/core/StepLabel\";\nconst textFieldBorder = \"1px solid #464659\";\nconst buttonBorder = \"1px solid rgba(235,235,245,0.35)\";\nconst stepsColor = \"red !important\";\n\nconst CssTextField = withStyles({\n root: {\n \"& input\": {\n padding: \"10px\",\n color: \"#ffffff\",\n backgroundColor: \"#1D1D25 \",\n border: `${textFieldBorder}`,\n borderRadius: \"2px\",\n marginTop: \"16px\",\n },\n \"& .MuiInput-underline\": {\n \"&&:before\": {\n borderBottom: \"none\",\n },\n \"&&:after\": {\n borderBottom: \"none\",\n },\n },\n \"& label.Mui-focused\": {\n color: \"#ffffff\",\n },\n },\n})(TextField);\n\nconst DateTextField = withStyles({\n root: {\n \"& input\": {\n padding: \"10px\",\n color: \"#ffffff\",\n },\n \"& .MuiInput-root\": {\n border: `${textFieldBorder}`,\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\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n flexGrow: 1,\n margin: \"30px\",\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 spaceLeft: {\n paddingLeft: \"10px\",\n },\n formTitle: {\n fontWeight: \"bold\",\n color: \"#FFFFFF\",\n fontSize: \"21px\",\n lineHeight: \"25px\",\n },\n form: {\n width: \"100%\",\n },\n fieldWrapper: {\n marginTop: \"20px\",\n },\n labels: {\n color: \"#fcfcfc\",\n lineHeight: \"19px\",\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 textfield1: {\n color: \"#ffffff\",\n backgroundColor: \"#1D1D25\",\n border: `${textFieldBorder}`,\n borderRadius: \"2px\",\n boxSizing: \"border-box\",\n marginLeft: \"-26px\",\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\": {\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 bgColorBlue: {\n color: \"#1976d2 !important\",\n },\n marginLeft15: {\n marginLeft: \"15px\",\n },\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: \"#fff\",\n },\n bgColor: {\n background: \"#2B2B36\",\n margin: \"1px 0\",\n padding: \"7px 0\",\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 btnDelRole: {\n textDecoration: \"underline\",\n color: \"#0089ff !important\",\n marginLeft: \"92.5em\",\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: \"16px\",\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 dividerColor: {\n background: \"#464659\",\n margin: \"1em\",\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: \"12px\",\n padding: \"11px 0px\",\n marginRight: \"30px\",\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 isExpand: {\n position: \"relative\",\n top: \"1rem\",\n },\n\n stepperRoot: {\n width: \"50%\",\n margin: \"0 auto\",\n },\n stepactive: {\n color: \"#FFF\",\n },\n stepname: {\n color: \"#FFF\",\n \"& span\": {\n display: \"flex\",\n flexDirection: \"column\",\n },\n },\n alternativeLabel: {\n color: \"yellow !important\",\n \"&$active\": {\n color: `${stepsColor}`,\n },\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 completed: {\n color: \"#0089ff !important\",\n },\n step: {\n \"&$completed\": {\n color: \"#0089ff\",\n },\n \"&$active\": {\n color: \"cornflowerblue\",\n },\n \"&$disabled\": {\n color: \"red\",\n },\n },\n active: {\n color: \"cornflowerblue !important\",\n },\n steplabel: {\n color: \"#FFF\",\n \"& span\": {\n color: \"darkgray !important\",\n },\n \"& .active\": {\n color: \"green !important\",\n },\n },\n hidden: {\n display: \"none\",\n },\n spaceLeftSite: {\n display: \"flex\",\n alignItems: \"flex-end\",\n paddingLeft: \"10px\",\n },\n rightSec1: {\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 appTitle: {\n width: \"100%\",\n },\n colorWhite: {\n color: \"#FFFFFF\",\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 levelSearch: {\n height: \"50px\",\n backgroundColor: \"#2B2B36\",\n border: \"transparent\",\n color: \"white\",\n marginTop: \"2em\",\n paddingLeft: \"23px\"\n },\n appContainer: {\n padding: \"1rem\",\n background: \"#2b2b36\",\n marginTop: \"1rem\",\n },\n })\n);\n\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\n });\n\nconst StyledTableRow = withStyles((theme: Theme) =>\n createStyles({\n root: {\n \"&:nth-of-type(odd)\": {\n },\n },\n })\n)(TableRow);\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\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 overflow: \"hidden\",\n },\n}))(MuiDialogContent);\n\ninterface ComponentProps {\n onEditUser: any;\n editItem: any;\n userRoles: any;\n}\n\nconst EditUserWrapper: FC = (props: ComponentProps) => {\n const classes = useStyles();\n const { user1 } = useStore();\n\n const handleCancel = () => {\n props.onEditUser();\n setApplication_level_id([]);\n setApplication_level_name([]);\n };\n const [backDrop, setbackDrop] = React.useState(false);\n const backDropClose = () => {\n setbackDrop(false);\n };\n\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 API_KEY = window.SERVER_DATA.REACT_APP_PM_API_KEY;\n const { enqueueSnackbar } = useSnackbar();\n const [email, setEmailAddr] = React.useState(\"\");\n const [reload, setReload] = React.useState(false);\n const [application, setApplicationName] = React.useState(\"\");\n const [editUserRole, setEditUserRole] = React.useState(\"\");\n const [editUser, setEditUser] = React.useState(\"\");\n const [editUserLevel, setEditUserLevel] = React.useState(\"\");\n const [appid, setAppId] = React.useState(0);\n const [user, setUser] = React.useState(0);\n const [levels, setLevels] = React.useState([] as any);\n\n\n const [permDialog, setPermDialogOpen] = React.useState(false);\n const openPermDialog = () => {\n setPermDialogOpen(true);\n };\n const dialogPermClose = () => {\n setPermDialogOpen(false);\n };\n\n const [validToDate, setValidToDate] = React.useState(new Date(props.editItem.valid_to));\n const [validFromDate, setValidFromDate] = React.useState(\n new Date(props.editItem.valid_from)\n );\n const validToDateChange = (date: Date | null) => {\n setValidToDate(date);\n };\n const validFromDateChange = (date: Date | null) => {\n setValidFromDate(date);\n };\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 [application_level_id, setApplication_level_id] = React.useState([] as any);\n const [application_level_name, setApplication_level_name] = React.useState([] as any);\n const highlightHandler = (event: React.ChangeEvent, level_id: any, level_name: any) => {\n\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(temp1.indexOf(level_name), 1);\n }\n setApplication_level_id(temp);\n setApplication_level_name(temp1);\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 saveEditUserAction = () => {\n const tokenKey = \"sso_token\";\n const accessToken = JSON.parse(sessionStorage.getItem(tokenKey) as string);\n const USERS_API = `${API[\"GETALLAPPLS\"]}/${appid}/users/${user}`;\n const requestOptions = {\n method: \"PUT\",\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: userRoles_data,\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 saveEditUserAction();\n }).catch(function (error) {\n user1.triggerLogout();\n console.log('error', error)\n })\n } catch (error) {\n console.log(error);\n }\n return;\n }\n else if ((response && response.status === 401) && (response && arrayOfErrorsLogout.includes(response.message.toLowerCase()))) {\n try {\n user1.triggerLogout();\n } catch (error) {\n console.log(error);\n }\n return;\n }\n else if (response.status === 200 || response.status === 201) {\n enqueueSnackbar(\"User changed.\", { variant: \"success\" });\n setTimeout(function () {\n props.onEditUser();\n setApplication_level_id([]);\n setApplication_level_name([]);\n }, 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 const [error, setError] = React.useState(false);\n const [errMsg, setErrMsg] = React.useState(\"\");\n const updateError = () => {\n setError(false);\n setErrMsg(\"\");\n };\n\n function getSteps() {\n return [\"Basic Information\", \"Roles & Permission\"];\n }\n const [activeStep, setActiveStep] = React.useState(0);\n const [skipped, setSkipped] = React.useState(new Set());\n const steps = getSteps();\n\n const handleBack = () => {\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\n };\n const handleNext = () => {\n const newSkipped = skipped;\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\n setSkipped(newSkipped);\n };\n const [rolesDataFind, setRolesDataFind] = React.useState({});\n useEffect(()=>{\n const rolesData =\n props.userRoles.find((e: any) => e.role_name.toUpperCase() === editUserRole.toUpperCase() ) || {};\n setRolesDataFind(rolesData);\n },[editUserRole, props])\n\n \n\n\n const [userLevel, setUserLevel] = React.useState(\"\");\n const onChangeLevel = (\n event: React.ChangeEvent\n ) => {\n setUserLevel(event.target.value);\n };\n const [usersInput, setUsersInput] = React.useState([] as any);\n\n let levelsData = usersInput.filter((e: any) => {\n return e.application_id === appid;\n })\n let level_data = levelsData[0] && levelsData[0].levels\n let role_data = levelsData[0] && levelsData[0].roles\n \n const [userRoles_data, setUserRoles_data] = React.useState(\"\");\n React.useEffect(() => {\n setUserRoles_data(editUserLevel)\n }, [setUserRoles_data, editUserLevel]);\n\n\n const onChangeRoles = (\n event: React.ChangeEvent\n ) => {\n setUserRoles_data(event.target.value);\n const data = role_data.find((e:any)=> e.role_id === event.target.value )\n setRolesDataFind(data);\n };\n\n React.useEffect(() => {\n const tokenKey = \"sso_token\";\n const accessToken = JSON.parse(sessionStorage.getItem(tokenKey) as string);\n setAppId(props.editItem.application_id);\n setEmailAddr(props.editItem.email_id);\n setUser(props.editItem.user_id);\n setApplicationName(props.editItem.application_name);\n setEditUserRole(props.editItem.role_name);\n setEditUser(props.editItem.role_id);\n setValidToDate(props.editItem.valid_to);\n setValidFromDate(props.editItem.valid_from);\n setUserRoles_data(props.editItem.role_id)\n if (props.editItem.application_level) {\n props.editItem.application_level.forEach((element: any) => {\n application_level_name.push(element.level_name);\n application_level_id.push(element.level_id)\n\n });\n }\n\n interface sessionObj {\n pm_s_id: string;\n }\n interface tokenObj {\n pm_s_token: string;\n }\n let pmSessionId: sessionObj = {\n pm_s_id: \"\",\n };\n let pmSessionToken: tokenObj = {\n pm_s_token: \"\",\n };\n pmSessionId =\n sessionStorage.getItem(\"pm_s_id\") ||\n JSON.parse(JSON.stringify(pmSessionId));\n pmSessionToken =\n sessionStorage.getItem(\"pm_s_token\") ||\n JSON.parse(JSON.stringify(pmSessionToken));\n const USERS_INPUT = API[\"GETUSERSAPPLS\"] + `?pm_s_token=${pmSessionToken}&pm_s_id=${pmSessionId}`;\n fetch(USERS_INPUT, {\n headers: {\n 'Authorization': `Bearer ${accessToken.access_token}`,\n 'Ocp-Apim-Subscription-Key': `${API_KEY}`,\n 'Ocp-Apim-Trace': `true`\n },\n })\n .then((resp) => resp.json())\n .then(function (response) {\n if ((response && response.status === 401) && (response && arrayOfErrorsRefresh.includes(response.message.toLowerCase()))) {\n try {\n const tokenKey = \"sso_token\";\n setbackDrop(true);\n callXhrRequest().then(function (data) {\n sessionStorage.setItem(tokenKey, data);\n setbackDrop(false);\n setReload(!reload)\n }).catch(function (error) {\n user1.triggerLogout();\n console.log('error', error)\n })\n } catch (error) {\n console.log(error);\n }\n return;\n }\n else if ((response && response.status === 401) && (response && arrayOfErrorsLogout.includes(response.message.toLowerCase()))) {\n try {\n user1.triggerLogout();\n } catch (error) {\n console.log(error);\n }\n return;\n }\n setUsersInput(response.users_input[0].applications)\n const selectedApp = response.users_input[0].applications.find((a: any) => a.application_id === props.editItem.application_id)\n setLevels(selectedApp.application_level)\n })\n .catch(function (error) {\n console.log(error);\n });\n\n }, [props.editItem, 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
\n \n \n \n
\n
\n {error && (\n
\n )}\n
\n );\n};\n\ninterface ChildComponentProps {\n onEditUser: any;\n editItem: any;\n userRoles: any;\n}\n\nexport default function EditUser({\n editItem,\n onEditUser,\n userRoles,\n}: ChildComponentProps) {\n return (\n \n \n \n );\n}\n","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport ListItem from '../ListItem';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body1, _defineProperty({\n minHeight: 48,\n paddingTop: 6,\n paddingBottom: 6,\n boxSizing: 'border-box',\n width: 'auto',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }, theme.breakpoints.up('sm'), {\n minHeight: 'auto'\n })),\n // TODO v5: remove\n\n /* Styles applied to the root element if `disableGutters={false}`. */\n gutters: {},\n\n /* Styles applied to the root element if `selected={true}`. */\n selected: {},\n\n /* Styles applied to the root element if dense. */\n dense: _extends({}, theme.typography.body2, {\n minHeight: 'auto'\n })\n };\n};\nvar MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'li' : _props$component,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n ListItemClasses = props.ListItemClasses,\n _props$role = props.role,\n role = _props$role === void 0 ? 'menuitem' : _props$role,\n selected = props.selected,\n tabIndexProp = props.tabIndex,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"disableGutters\", \"ListItemClasses\", \"role\", \"selected\", \"tabIndex\"]);\n\n var tabIndex;\n\n if (!props.disabled) {\n tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;\n }\n\n return /*#__PURE__*/React.createElement(ListItem, _extends({\n button: true,\n role: role,\n tabIndex: tabIndex,\n component: component,\n selected: selected,\n disableGutters: disableGutters,\n classes: _extends({\n dense: classes.dense\n }, ListItemClasses),\n className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuItem.propTypes = {\n /**\n * Menu item contents.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used.\n */\n dense: PropTypes.bool,\n\n /**\n * @ignore\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the left and right padding is removed.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * `classes` prop applied to the [`ListItem`](/api/list-item/) element.\n */\n ListItemClasses: PropTypes.object,\n\n /**\n * @ignore\n */\n role: PropTypes.string,\n\n /**\n * @ignore\n */\n selected: PropTypes.bool,\n\n /**\n * @ignore\n */\n tabIndex: PropTypes.number\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiMenuItem'\n})(MenuItem);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z\"\n}), 'KeyboardArrowLeft');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z\"\n}), 'KeyboardArrowRight');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';\nimport useTheme from '../styles/useTheme';\nimport IconButton from '../IconButton';\n/**\n * @ignore - internal component.\n */\n\nvar _ref = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar _ref2 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref3 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref4 = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {\n var backIconButtonProps = props.backIconButtonProps,\n count = props.count,\n nextIconButtonProps = props.nextIconButtonProps,\n onChangePage = props.onChangePage,\n page = props.page,\n rowsPerPage = props.rowsPerPage,\n other = _objectWithoutProperties(props, [\"backIconButtonProps\", \"count\", \"nextIconButtonProps\", \"onChangePage\", \"page\", \"rowsPerPage\"]);\n\n var theme = useTheme();\n\n var handleBackButtonClick = function handleBackButtonClick(event) {\n onChangePage(event, page - 1);\n };\n\n var handleNextButtonClick = function handleNextButtonClick(event) {\n onChangePage(event, page + 1);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref\n }, other), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleBackButtonClick,\n disabled: page === 0,\n color: \"inherit\"\n }, backIconButtonProps), theme.direction === 'rtl' ? _ref : _ref2), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleNextButtonClick,\n disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,\n color: \"inherit\"\n }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));\n});\nprocess.env.NODE_ENV !== \"production\" ? TablePaginationActions.propTypes = {\n /**\n * Props applied to the back arrow [`IconButton`](/api/icon-button/) element.\n */\n backIconButtonProps: PropTypes.object,\n\n /**\n * The total number of rows.\n */\n count: PropTypes.number.isRequired,\n\n /**\n * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.\n */\n nextIconButtonProps: PropTypes.object,\n\n /**\n * Callback fired when the page is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {number} page The page selected.\n */\n onChangePage: PropTypes.func.isRequired,\n\n /**\n * The zero-based index of the current page.\n */\n page: PropTypes.number.isRequired,\n\n /**\n * The number of rows per page.\n */\n rowsPerPage: PropTypes.number.isRequired\n} : void 0;\nexport default TablePaginationActions;","import * as React from 'react';\n/**\n * Private module reserved for @material-ui/x packages.\n */\n\nexport default function useId(idOverride) {\n var _React$useState = React.useState(idOverride),\n defaultId = _React$useState[0],\n setDefaultId = _React$useState[1];\n\n var id = idOverride || defaultId;\n React.useEffect(function () {\n if (defaultId == null) {\n // Fallback to this default id when possible.\n // Use the random value for client-side rendering only.\n // We can't use it server-side.\n setDefaultId(\"mui-\".concat(Math.round(Math.random() * 1e5)));\n }\n }, [defaultId]);\n return id;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { chainPropTypes } from '@material-ui/utils';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport InputBase from '../InputBase';\nimport MenuItem from '../MenuItem';\nimport Select from '../Select';\nimport TableCell from '../TableCell';\nimport Toolbar from '../Toolbar';\nimport Typography from '../Typography';\nimport TablePaginationActions from './TablePaginationActions';\nimport useId from '../utils/unstable_useId';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.primary,\n fontSize: theme.typography.pxToRem(14),\n overflow: 'auto',\n // Increase the specificity to override TableCell.\n '&:last-child': {\n padding: 0\n }\n },\n\n /* Styles applied to the Toolbar component. */\n toolbar: {\n minHeight: 52,\n paddingRight: 2\n },\n\n /* Styles applied to the spacer element. */\n spacer: {\n flex: '1 1 100%'\n },\n\n /* Styles applied to the caption Typography components if `variant=\"caption\"`. */\n caption: {\n flexShrink: 0\n },\n // TODO v5: `.selectRoot` should be merged with `.input`\n\n /* Styles applied to the Select component root element. */\n selectRoot: {\n marginRight: 32,\n marginLeft: 8\n },\n\n /* Styles applied to the Select component `select` class. */\n select: {\n paddingLeft: 8,\n paddingRight: 24,\n textAlign: 'right',\n textAlignLast: 'right' // Align