Add DatePicker component #5509
There are no files selected for viewing
This file contains hidden or 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,3 +1,6 @@ | ||
| <resources> | ||
| <color name="bootsplash_background">#FFFFFF</color> | ||
| <color name="accent">#0185ff</color> | ||
| <color name="dark">#0b1b34</color> | ||
| <color name="gray4">#7D8B8F</color> | ||
| </resources> |
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| propTypes as fieldPropTypes, | ||
| defaultProps as defaultFieldPropTypes, | ||
| } from '../ExpensiTextInput/baseExpensiTextInputPropTypes'; | ||
|
|
||
| const propTypes = { | ||
| ...fieldPropTypes, | ||
|
|
||
| /** | ||
| * The datepicker supports any value that `moment` can parse. | ||
| * `onChange` would always be called with a Date (or null) | ||
| */ | ||
| value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| ...defaultFieldPropTypes, | ||
| value: undefined, | ||
| }; | ||
|
|
||
| export {propTypes, defaultProps}; | ||
This file contains hidden or 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 |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React from 'react'; | ||
| import RNDatePicker from '@react-native-community/datetimepicker'; | ||
| import moment from 'moment'; | ||
| import ExpensiTextInput from '../ExpensiTextInput'; | ||
| import CONST from '../../CONST'; | ||
| import {propTypes, defaultProps} from './datepickerPropTypes'; | ||
|
|
||
|
kidroca marked this conversation as resolved.
|
||
| class DatePicker extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isPickerVisible: false, | ||
| }; | ||
|
|
||
| this.showPicker = this.showPicker.bind(this); | ||
| this.raiseDateChange = this.raiseDateChange.bind(this); | ||
| } | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| */ | ||
| showPicker(event) { | ||
| this.setState({isPickerVisible: true}); | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @param {Date} selectedDate | ||
| */ | ||
| raiseDateChange(event, selectedDate) { | ||
| if (event.type === 'set') { | ||
| this.props.onChange(selectedDate); | ||
| } | ||
|
|
||
| this.setState({isPickerVisible: false}); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| value, | ||
| label, | ||
| placeholder, | ||
| hasError, | ||
| errorText, | ||
| translateX, | ||
| containerStyles, | ||
| disabled, | ||
| } = this.props; | ||
|
|
||
| const dateAsText = value ? moment(value).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; | ||
|
|
||
| return ( | ||
| <> | ||
| <ExpensiTextInput | ||
| label={label} | ||
| value={dateAsText} | ||
| placeholder={placeholder} | ||
| hasError={hasError} | ||
| errorText={errorText} | ||
| containerStyles={containerStyles} | ||
| translateX={translateX} | ||
| onPress={this.showPicker} | ||
| editable={false} | ||
| disabled={disabled} | ||
| /> | ||
| {this.state.isPickerVisible && ( | ||
| <RNDatePicker | ||
| value={value ? moment(value).toDate() : new Date()} | ||
| mode="date" | ||
| onChange={this.raiseDateChange} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| DatePicker.propTypes = propTypes; | ||
| DatePicker.defaultProps = defaultProps; | ||
|
|
||
| export default DatePicker; | ||
This file contains hidden or 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 |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React from 'react'; | ||
| import {Button, View} from 'react-native'; | ||
| import RNDatePicker from '@react-native-community/datetimepicker'; | ||
| import moment from 'moment'; | ||
| import ExpensiTextInput from '../ExpensiTextInput'; | ||
| import withLocalize, {withLocalizePropTypes} from '../withLocalize'; | ||
| import Popover from '../Popover'; | ||
| import CONST from '../../CONST'; | ||
| import styles from '../../styles/styles'; | ||
| import themeColors from '../../styles/themes/default'; | ||
| import {propTypes, defaultProps} from './datepickerPropTypes'; | ||
|
|
||
| const datepickerPropTypes = { | ||
| ...propTypes, | ||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| class Datepicker extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isPickerVisible: false, | ||
| selectedDate: props.value ? moment(props.value).toDate() : new Date(), | ||
| }; | ||
|
|
||
| this.showPicker = this.showPicker.bind(this); | ||
| this.reset = this.reset.bind(this); | ||
| this.selectDate = this.selectDate.bind(this); | ||
| this.updateLocalDate = this.updateLocalDate.bind(this); | ||
| } | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| */ | ||
| showPicker(event) { | ||
| this.initialValue = this.state.selectedDate; | ||
| this.setState({isPickerVisible: true}); | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| /** | ||
| * Reset the date spinner to the initial value | ||
| */ | ||
| reset() { | ||
| this.setState({selectedDate: this.initialValue}); | ||
| } | ||
|
|
||
| /** | ||
| * Accept the current spinner changes, close the spinner and propagate the change | ||
| * to the parent component (props.onChange) | ||
| */ | ||
| selectDate() { | ||
| this.setState({isPickerVisible: false}); | ||
| this.props.onChange(this.state.selectedDate); | ||
| } | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @param {Date} selectedDate | ||
| */ | ||
| updateLocalDate(event, selectedDate) { | ||
| this.setState({selectedDate}); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| value, | ||
| label, | ||
| placeholder, | ||
| hasError, | ||
| errorText, | ||
| translateX, | ||
| containerStyles, | ||
| disabled, | ||
| } = this.props; | ||
|
|
||
| const dateAsText = value ? moment(value).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; | ||
|
|
||
| return ( | ||
| <> | ||
| <ExpensiTextInput | ||
| label={label} | ||
| value={dateAsText} | ||
| placeholder={placeholder} | ||
| hasError={hasError} | ||
| errorText={errorText} | ||
| containerStyles={containerStyles} | ||
| translateX={translateX} | ||
| onPress={this.showPicker} | ||
| editable={false} | ||
| disabled={disabled} | ||
| /> | ||
| <Popover | ||
| isVisible={this.state.isPickerVisible} | ||
| onClose={this.selectDate} | ||
| > | ||
| <View style={[ | ||
| styles.flexRow, | ||
| styles.justifyContentBetween, | ||
| styles.borderBottom, | ||
| styles.pb1, | ||
| styles.ph4, | ||
| ]} | ||
| > | ||
| <Button | ||
| title={this.props.translate('common.reset')} | ||
| color={themeColors.textError} | ||
| onPress={this.reset} | ||
| /> | ||
| <Button | ||
| title={this.props.translate('common.done')} | ||
| color={themeColors.link} | ||
| onPress={this.selectDate} | ||
| /> | ||
| </View> | ||
| <RNDatePicker | ||
| value={this.state.selectedDate} | ||
| mode="date" | ||
| display="spinner" | ||
| onChange={this.updateLocalDate} | ||
| locale={this.props.preferredLocale} | ||
| /> | ||
| </Popover> | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Datepicker.propTypes = datepickerPropTypes; | ||
| Datepicker.defaultProps = defaultProps; | ||
|
|
||
| export default withLocalize(Datepicker); | ||
|
Contributor
There was a problem hiding this comment. NAB but maybe useful to mention somewhere that iOS is the only platform where we have to manage localization ourselves, and on all others it's controlled by the OS
Contributor
Author
There was a problem hiding this comment. I'll open a separate request to put a note about this We're localizing the "Reset" and "Done" button that we put on our own popup. On Android the buttons and the modal are handled by the system so they are always in the system locale |
||
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.
Uh oh!
There was an error while loading. Please reload this page.