diff --git a/src/core_modules/capture-core/components/FiltersForTypes/Date/From.component.js b/src/core_modules/capture-core/components/FiltersForTypes/Date/From.component.js index ed5a717a24..ff8cce189b 100644 --- a/src/core_modules/capture-core/components/FiltersForTypes/Date/From.component.js +++ b/src/core_modules/capture-core/components/FiltersForTypes/Date/From.component.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import i18n from '@dhis2/d2-i18n'; import { D2Date } from '../../FormFields/DateAndTime/D2Date/D2Date.component'; -import { modes, absoluteDirections } from '../../FormFields/DateAndTime/D2Date/d2DatePopup.const'; import { withInternalChangeHandler } from '../../FormFields/withInternalChangeHandler'; type Props = { @@ -45,13 +44,8 @@ class FromDateFilterPlain extends Component { onKeyPress={this.handleKeyPress} onBlur={this.handleBlur} placeholder={i18n.t('From')} - popupMode={modes.ABSOLUTE} - popupAbsoluteDirection={absoluteDirections.UP} width={150} calendarWidth={330} - calendarHeight={170} - calendarRowHeight={45} - calendarDisplayOptions={this.displayOptions} {...passOnProps} />
diff --git a/src/core_modules/capture-core/components/FiltersForTypes/Date/To.component.js b/src/core_modules/capture-core/components/FiltersForTypes/Date/To.component.js index 1a3a7405ef..2bddefbfc2 100644 --- a/src/core_modules/capture-core/components/FiltersForTypes/Date/To.component.js +++ b/src/core_modules/capture-core/components/FiltersForTypes/Date/To.component.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import i18n from '@dhis2/d2-i18n'; import { D2Date } from '../../FormFields/DateAndTime/D2Date/D2Date.component'; -import { anchorPositions, modes, absoluteDirections } from '../../FormFields/DateAndTime/D2Date/d2DatePopup.const'; import { withInternalChangeHandler } from '../../FormFields/withInternalChangeHandler'; type Props = { @@ -53,14 +52,8 @@ class ToDateFilterPlain extends Component { onBlur={this.handleBlur} onDateSelectedFromCalendar={this.handleDateSelectedFromCalendar} placeholder={i18n.t('To')} - popupAnchorPosition={anchorPositions.RIGHT} - popupMode={modes.ABSOLUTE} - popupAbsoluteDirection={absoluteDirections.UP} width={150} calendarWidth={330} - calendarHeight={170} - calendarRowHeight={45} - calendarDisplayOptions={this.displayOptions} {...passOnProps} />
diff --git a/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js b/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js index 70b96df9f9..1f1708ab48 100644 --- a/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js +++ b/src/core_modules/capture-core/components/FormFields/AgeField/AgeField.component.js @@ -189,7 +189,6 @@ export class AgeField extends Component { onBlur={this.handleCalendarBlur} placeholder={i18n.t('mm/dd/yyyy')} width={350} - calendarMaxMoment={moment()} />
void, - value?: ?string, - minMoment?: ?Object, - maxMoment?: ?Object, - currentWidth: number, - height?: ?number, - classes: Object, - displayOptions?: ?Object, - theme: Object, -}; - -const styles = () => ({ - container: {}, -}); - -class D2DateCalendarPlain extends Component { - handleChange: (e: any, dates: ?Array) => void; - calendarLocaleData: Object; - theme: Object; - displayOptions: Object; - - constructor(props: Props) { - super(props); - this.handleChange = this.handleChange.bind(this); - - const projectLocaleData = CurrentLocaleData.get(); - const currentWidth = this.props.currentWidth; - - this.calendarLocaleData = { - locale: projectLocaleData.dateFnsLocale, - headerFormat: currentWidth >= 400 ? - projectLocaleData.calendarFormatHeaderLong : - projectLocaleData.calendarFormatHeaderShort, - weekdays: projectLocaleData.weekDaysShort.map(day => capitalizeFirstLetter(day)), - blank: projectLocaleData.selectDatesText, - todayLabel: { - long: projectLocaleData.todayLabelLong, - short: projectLocaleData.todayLabelShort, - }, - weekStartsOn: projectLocaleData.weekStartsOn, - }; - - this.theme = getTheme(this.props.theme); - - - this.displayOptions = { - ...D2DateCalendar.displayOptions, - ...this.props.displayOptions, - }; - } - - shouldComponentUpdate(nextProps: Props) { - // Selecting multiple dates, then updating the props to the infiniteCalendar makes the Component "jump" back to the first selected date - if (nextProps.currentWidth !== this.props.currentWidth) { - const projectLocaleData = CurrentLocaleData.get(); - if (nextProps.currentWidth < 400) { - this.calendarLocaleData.headerFormat = projectLocaleData.calendarFormatHeaderShort; - } else { - this.calendarLocaleData.headerFormat = projectLocaleData.calendarFormatHeaderLong; - } - return true; - } - return false; - } - - static displayOptions = { - showHeader: false, - }; - - handleChange(changeDate: Date) { - const dateFormatString = convertDateObjectToDateFormatString(changeDate); - this.props.onDateSelected(dateFormatString); - } - - getValue(inputValue: ?string) { - if (!inputValue) { - return null; - } - - const parseData = parseDate(inputValue); - if (!parseData.isValid) { - return null; - } - - // $FlowFixMe[incompatible-use] automated comment - return parseData.momentDate.toDate(); - } - - getMinMaxProps() { - const minMaxProps: {min?: Date, minDate?: Date, max?: Date, maxDate?: Date} = {}; - - const minMoment = this.props.minMoment; - const maxMoment = this.props.maxMoment; - - if (minMoment) { - const minDate = minMoment.toDate(); - minMaxProps.min = minDate; - minMaxProps.minDate = minDate; - } - - if (maxMoment) { - const maxDate = maxMoment.toDate(); - minMaxProps.max = maxDate; - minMaxProps.maxDate = maxDate; - } - return minMaxProps; - } - - render() { - const { - value, - classes, - currentWidth, - height, - minMoment, - maxMoment, - onDateSelected, - theme, - displayOptions, - ...passOnProps - } = this.props; - - return ( -
- { /* $FlowFixMe */ } - -
- ); - } -} - -export const D2DateCalendar = withTheme()(withStyles(styles)(D2DateCalendarPlain)); diff --git a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/D2DatePopup.component.js b/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/D2DatePopup.component.js deleted file mode 100644 index 311391c75b..0000000000 --- a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/D2DatePopup.component.js +++ /dev/null @@ -1,94 +0,0 @@ -// @flow -import * as React from 'react'; -import { withStyles } from '@material-ui/core/styles'; -import { anchorPositions, modes, absoluteDirections } from './d2DatePopup.const'; - -const getStyles = () => ({ - containerAbsolute: { - position: 'relative', - }, - containerInline: {}, - calendarAbsolute: { - position: 'absolute', - zIndex: 201, - }, - calendarInline: {}, -}); - -type Props = { - open: boolean, - children: React.Node, - anchorPosition?: $Values, - mode?: $Values, - absoluteDirection: $Values, - inputWidth: number, - calendarWidth: number, - classes: { - containerAbsolute: string, - containerInline: string, - calendarAbsolute: string, - calendarInline: string, - }, - inputUsesFloatingLabel: boolean, -}; - -class D2DatePopupPlain extends React.Component { - getAbsoluteBottom() { - const inputUsesFloatingLabel = this.props.inputUsesFloatingLabel; - return inputUsesFloatingLabel ? 60 : 40; - } - getAbsoluteVerticalPosition() { - const absoluteDirection = this.props.absoluteDirection; - return absoluteDirection === absoluteDirections.UP ? { bottom: this.getAbsoluteBottom() } : { top: 0 }; - } - calculateMarginLeftInline() { - const { inputWidth, calendarWidth } = this.props; - return calendarWidth - inputWidth; - } - getPopupStyle() { - const { anchorPosition, mode } = this.props; - - let calendarStyle; - if (anchorPosition === anchorPositions.RIGHT) { - calendarStyle = mode === modes.INLINE ? - { marginLeft: `-${this.calculateMarginLeftInline()}px` } : - { ...this.getAbsoluteVerticalPosition(), right: 0 }; - } else { - calendarStyle = mode === modes.INLINE ? { } : { ...this.getAbsoluteVerticalPosition(), left: 0 }; - } - - return calendarStyle; - } - - render() { - const { - open, - mode, - classes, - children, - } = this.props; - - if (!open) { - return null; - } - - const containerClasses = mode === modes.INLINE ? classes.containerInline : classes.containerAbsolute; - const calendarClasses = mode === modes.INLINE ? classes.calendarInline : classes.calendarAbsolute; - const calendarStyle = this.getPopupStyle(); - - return ( -
-
- {children} -
-
- ); - } -} - -export const D2DatePopup = withStyles(getStyles)(D2DatePopupPlain); diff --git a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/customStyles.css b/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/customStyles.css deleted file mode 100644 index fdcb5d1cbb..0000000000 --- a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/customStyles.css +++ /dev/null @@ -1,12 +0,0 @@ -.Cal__Today__root { - align-items: center; - justify-content: center; -} -.Cal__Today__root .Cal__Today__chevron { - position: unset; - top: unset; - margin-left: 5px; - margin-top: 0; - margin-bottom: 0; - margin-right: 0; -} \ No newline at end of file diff --git a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/d2DatePopup.const.js b/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/d2DatePopup.const.js deleted file mode 100644 index 27d68de2ec..0000000000 --- a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/d2DatePopup.const.js +++ /dev/null @@ -1,16 +0,0 @@ -// @flow - -export const anchorPositions = { - LEFT: 'left', - RIGHT: 'right', -}; - -export const absoluteDirections = { - UP: 'up', - DOWN: 'down', -}; - -export const modes = { - ABSOLUTE: 'absolute', - INLINE: 'inline', -}; diff --git a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/getTheme.js b/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/getTheme.js deleted file mode 100644 index ad8c635647..0000000000 --- a/src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/getTheme.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export const getTheme = (theme: Theme) => ({ - accentColor: theme.palette.secondary.main, - floatingNav: { - background: 'rgba(0, 30, 64, 0.8)', - chevron: 'rgb(145, 203, 193)', - color: 'white', - }, - headerColor: theme.palette.primary.main, - todayColor: theme.palette.secondary.main, - selectionColor: theme.palette.primary.main, - weekdayColor: theme.palette.primary.main, -});