-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: [DHIS2-15463] Use dhis2 ui calendarInput component in working list #3712
Open
alaa-yahia
wants to merge
19
commits into
master
Choose a base branch
from
DHIS2-15463-use-dhis2-ui-calendarinput-component-in-working-list
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
08063b7
feat: add calendarInput
alaa-yahia 5855c58
fix: calendarInput zindex
simonadomnisoru 5241682
feat: use calendarInput
alaa-yahia 796c02d
fix: linter errors
alaa-yahia 6899da2
fix: flow errors
alaa-yahia bc566c7
fix: calendar version
alaa-yahia 7744732
fix: updated yarn.lock
alaa-yahia 3ae9dd5
fix: update calendar version
alaa-yahia ad40a7a
fix: add type state
alaa-yahia 7169cd9
fix: display date in wrong format when passing dd-mm-yyyy
alaa-yahia a050dd7
fix: display date in wrong format when passing dd-mm-yyyy
alaa-yahia f5c66f7
fix: remove editable prop
alaa-yahia 52e3c40
fix: label type definition
alaa-yahia 1ac9aff
fix: add label
alaa-yahia 22483c9
fix: allow empty strings to run onBlur
alaa-yahia 2623729
chore: remove unnecessary props
alaa-yahia 1ff177d
fix: replace onKeyPress with onKeyDown
alaa-yahia c53e104
Merge remote-tracking branch 'origin/master' into DHIS2-15463-use-dhi…
alaa-yahia 1a2c994
feat: display errors
alaa-yahia File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
186 changes: 33 additions & 153 deletions
186
src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/D2Date.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,207 +1,87 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { withStyles } from '@material-ui/core/styles'; | ||
| import { lowerCaseFirstLetter } from 'capture-core-utils/string/lowerCaseFirstLetter'; | ||
| import { D2TextField } from '../../Generic/D2TextField.component'; | ||
| import { D2DatePopup } from './D2DatePopup.component'; | ||
| import { D2DateCalendar } from './D2DateCalendar.component'; | ||
| import { CalendarInput } from '@dhis2/ui'; | ||
| import { systemSettingsStore } from '../../../../../capture-core/metaDataMemoryStores'; | ||
|
|
||
| type Props = { | ||
| label: string, | ||
| label?: ?string, | ||
| value: ?string, | ||
| width: number, | ||
| calendar?: string, | ||
| calendarWidth?: ?number, | ||
| calendarHeight?: ?number, | ||
| inputWidth?: ?number, | ||
| onBlur: (value: string) => void, | ||
| onFocus?: ?() => void, | ||
| onKeyDown?: ?() => void, | ||
| onDateSelectedFromCalendar?: () => void, | ||
| classes: Object, | ||
| textFieldRef?: (instance: D2TextField) => void, | ||
| classes?: Object, | ||
| disabled?: boolean, | ||
| }; | ||
|
|
||
| type State = { | ||
| popoverOpen: boolean, | ||
| date: ?string, | ||
| }; | ||
|
|
||
| const styles = () => ({ | ||
| textField: { | ||
| width: '100%', | ||
| }, | ||
| }); | ||
|
|
||
| class D2DatePlain extends React.Component<Props, State> { | ||
| static splitPassOnProps(passOnProps: ?Object) { | ||
| const splittedProps = { | ||
| input: {}, | ||
| popup: {}, | ||
| calendar: {}, | ||
| }; | ||
|
|
||
| if (!passOnProps) { | ||
| return splittedProps; | ||
| } | ||
|
|
||
| return Object | ||
| .keys(passOnProps) | ||
| .reduce((accSplittedProps, propKey) => { | ||
| let propContainer; | ||
| if (propKey.startsWith(D2Date.propContainers.CALENDAR)) { | ||
| propContainer = D2Date.propContainers.CALENDAR; | ||
| } else if (propKey.startsWith(D2Date.propContainers.POPUP)) { | ||
| propContainer = D2Date.propContainers.POPUP; | ||
| } else { | ||
| propContainer = D2Date.propContainers.INPUT; | ||
| } | ||
|
|
||
| const outputKey = lowerCaseFirstLetter(propKey.replace(propContainer, '')); | ||
|
|
||
| accSplittedProps[propContainer][outputKey] = passOnProps[propKey]; | ||
| return accSplittedProps; | ||
| }, splittedProps); | ||
| } | ||
|
|
||
| containerInstance: ?HTMLElement; | ||
| handleTextFieldFocus: () => void; | ||
| handleDateSelected: (value: string) => void; | ||
| handleTextFieldBlur: (value: string) => void; | ||
| hidePopover: () => void; | ||
| handleDocumentClick: (event: SyntheticEvent<any>) => void; | ||
| export class D2Date extends React.Component<Props, State> { | ||
| handleDateSelected: (value: {calendarDateString: string}) => void; | ||
|
|
||
| constructor(props: Props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| popoverOpen: false, | ||
| date: props.value, | ||
| }; | ||
|
|
||
| this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this); | ||
| this.handleDateSelected = this.handleDateSelected.bind(this); | ||
| this.handleTextFieldBlur = this.handleTextFieldBlur.bind(this); | ||
| this.hidePopover = this.hidePopover.bind(this); | ||
| this.handleDocumentClick = this.handleDocumentClick.bind(this); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| // $FlowFixMe[incompatible-call] automated comment | ||
| document.removeEventListener('click', this.handleDocumentClick); | ||
| } | ||
|
|
||
| static propContainers = { | ||
| CALENDAR: 'calendar', | ||
| POPUP: 'popup', | ||
| INPUT: 'input', | ||
| }; | ||
|
|
||
| handleTextFieldFocus() { | ||
| // $FlowFixMe[incompatible-call] automated comment | ||
| document.removeEventListener('click', this.handleDocumentClick); | ||
|
|
||
| this.setState({ | ||
| popoverOpen: true, | ||
| }); | ||
|
|
||
| this.props.onFocus && this.props.onFocus(); | ||
| } | ||
|
|
||
| handleDateSelected(value: string) { | ||
| this.props.onBlur(value); | ||
| this.hidePopover(); | ||
| this.props.onDateSelectedFromCalendar && this.props.onDateSelectedFromCalendar(); | ||
|
|
||
| // $FlowFixMe[incompatible-call] automated comment | ||
| document.removeEventListener('click', this.handleDocumentClick); | ||
| } | ||
|
|
||
| handleDocumentClick(event) { | ||
| if ((event.target && event.target.className && | ||
| event.target.className.startsWith && | ||
| event.target.className.startsWith('Cal__')) || | ||
| (event.target && event.target.className && | ||
| event.target.className.baseVal && event.target.className.baseVal.startsWith('Cal__'))) { | ||
| return; | ||
| } | ||
|
|
||
| this.hidePopover(); | ||
|
|
||
| // $FlowFixMe[incompatible-call] automated comment | ||
| document.removeEventListener('click', this.handleDocumentClick); | ||
| } | ||
|
|
||
| handleTextFieldBlur(value: string, event) { | ||
| this.props.onBlur(value); | ||
|
|
||
| if (!event.relatedTarget || event.relatedTarget.className !== 'Cal__Container__root') { | ||
| this.hidePopover(); | ||
| } else { | ||
| // $FlowFixMe[incompatible-call] automated comment | ||
| document.addEventListener('click', this.handleDocumentClick); | ||
| handleDateSelected(value: {calendarDateString: string}) { | ||
| const selectedDate = value?.calendarDateString; | ||
| this.setState({ date: selectedDate }); | ||
| if (selectedDate !== undefined) { | ||
| this.props.onBlur(selectedDate); | ||
| } | ||
| } | ||
|
|
||
| hidePopover() { | ||
| this.setState({ | ||
| popoverOpen: false, | ||
| }); | ||
| this.props.onDateSelectedFromCalendar && this.props.onDateSelectedFromCalendar(); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| width, | ||
| calendar, | ||
| calendarWidth, | ||
| calendarHeight, | ||
| inputWidth, | ||
| classes, | ||
| onBlur, | ||
| onFocus, | ||
| onDateSelectedFromCalendar, | ||
| textFieldRef, | ||
| value, | ||
| disabled, | ||
| ...passOnProps | ||
| } = this.props; | ||
| const { popoverOpen } = this.state; | ||
|
|
||
| const textFieldRefPropObject = textFieldRef ? { ref: textFieldRef } : null; | ||
| const calculatedInputWidth = inputWidth || width; | ||
| const calculatedCalendarWidth = calendarWidth || width; | ||
| const splittedPassOnProps = D2Date.splitPassOnProps(passOnProps); | ||
| const calculatedCalendarHeight = calendarHeight || 350; | ||
|
|
||
| const calendarType = calendar || 'gregory'; | ||
| const format = systemSettingsStore.get().dateFormat; | ||
| return ( | ||
| <div | ||
| ref={(containerInstance) => { this.containerInstance = containerInstance; }} | ||
| style={{ | ||
| width, | ||
| }} | ||
| > | ||
| {/* $FlowFixMe[incompatible-type] automated comment */} | ||
| <D2TextField | ||
| {...textFieldRefPropObject} | ||
| onFocus={this.handleTextFieldFocus} | ||
| onBlur={this.handleTextFieldBlur} | ||
| className={classes.textField} | ||
| width={calculatedInputWidth} | ||
| {...splittedPassOnProps.input} | ||
| <CalendarInput | ||
| {...passOnProps} | ||
| label={this.props.label} | ||
| format={format} | ||
| onDateSelect={this.handleDateSelected} | ||
| calendar={calendarType} | ||
| date={this.state.date} | ||
| width={String(calculatedCalendarWidth)} | ||
| inputWidth={String(calculatedInputWidth)} | ||
| onFocus={onFocus} | ||
| disabled={disabled} | ||
| /> | ||
| <D2DatePopup | ||
| open={popoverOpen} | ||
| onClose={this.hidePopover} | ||
| width={calculatedCalendarWidth} | ||
| height={calculatedCalendarHeight} | ||
| inputWidth={calculatedInputWidth} | ||
| inputUsesFloatingLabel={!!splittedPassOnProps.input.label} | ||
| {...splittedPassOnProps.popup} | ||
| > | ||
| <D2DateCalendar | ||
| onDateSelected={this.handleDateSelected} | ||
| value={this.props.value} | ||
| currentWidth={calculatedCalendarWidth} | ||
| height={calculatedCalendarHeight} | ||
| {...splittedPassOnProps.calendar} | ||
| /> | ||
| </D2DatePopup> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export const D2Date = withStyles(styles)(D2DatePlain); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alphas releases are useful when developing, but IMHO it is best to wait for the stable
@dhis2/uirelease before merging this PR. Do you know the timeline/steps to get the stable release to include the alpha changes?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was given the task to update the alpha with latest master. But I am not sure about the timeline as there are still accessibility task for CalendarInput.