Skip to content

Commit

Permalink
Set input value to use ISO format by default
Browse files Browse the repository at this point in the history
  • Loading branch information
Maja Wichrowska committed Jan 12, 2017
1 parent f931a82 commit 54af822
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 27 deletions.
16 changes: 10 additions & 6 deletions src/components/DateInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import isTouchDevice from '../utils/isTouchDevice';
const propTypes = {
id: PropTypes.string.isRequired,
placeholder: PropTypes.string, // also used as label
dateValue: PropTypes.string,
displayValue: PropTypes.string,
inputValue: PropTypes.string,
focused: PropTypes.bool,
disabled: PropTypes.bool,
required: PropTypes.bool,
Expand All @@ -20,7 +21,8 @@ const propTypes = {

const defaultProps = {
placeholder: 'Select Date',
dateValue: '',
displayValue: '',
inputValue: '',
focused: false,
disabled: false,
required: false,
Expand All @@ -46,7 +48,7 @@ export default class DateInput extends React.Component {
}

componentWillReceiveProps(nextProps) {
if (!this.props.dateValue && nextProps.dateValue) {
if (!this.props.displayValue && nextProps.displayValue) {
this.setState({
dateString: '',
});
Expand Down Expand Up @@ -88,15 +90,17 @@ export default class DateInput extends React.Component {
const {
id,
placeholder,
dateValue,
displayValue,
inputValue,
focused,
showCaret,
onFocus,
disabled,
required,
} = this.props;

const value = dateValue || dateString;
const displayText = displayValue || inputValue || dateString || placeholder;
const value = inputValue || displayValue || '';

return (
<div
Expand Down Expand Up @@ -134,7 +138,7 @@ export default class DateInput extends React.Component {
'DateInput__display-text--disabled': disabled,
})}
>
{value || placeholder}
{displayText}
</div>
</div>
);
Expand Down
17 changes: 10 additions & 7 deletions src/components/DateRangePickerInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ const propTypes = {
onClearDates: PropTypes.func,

startDate: PropTypes.string,
startDateValue: PropTypes.string,
endDate: PropTypes.string,
endDateValue: PropTypes.string,

isStartDateFocused: PropTypes.bool,
isEndDateFocused: PropTypes.bool,
Expand Down Expand Up @@ -86,16 +88,18 @@ export default class DateRangePickerInput extends React.Component {
}

render() {
const { startDateString, endDateString, isClearDatesHovered } = this.state;
const { isClearDatesHovered } = this.state;
const {
startDate,
startDateValue,
startDateId,
startDatePlaceholderText,
isStartDateFocused,
onStartDateChange,
onStartDateFocus,
onStartDateShiftTab,
endDate,
endDateValue,
endDateId,
endDatePlaceholderText,
isEndDateFocused,
Expand All @@ -110,9 +114,6 @@ export default class DateRangePickerInput extends React.Component {
phrases,
} = this.props;

const startDateValue = startDate || startDateString;
const endDateValue = endDate || endDateString;

return (
<div
className={cx('DateRangePickerInput', {
Expand All @@ -122,7 +123,8 @@ export default class DateRangePickerInput extends React.Component {
<DateInput
id={startDateId}
placeholder={startDatePlaceholderText}
dateValue={startDateValue}
displayValue={startDate}
inputValue={startDateValue}
focused={isStartDateFocused}
disabled={disabled}
required={required}
Expand All @@ -140,7 +142,8 @@ export default class DateRangePickerInput extends React.Component {
<DateInput
id={endDateId}
placeholder={endDatePlaceholderText}
dateValue={endDateValue}
displayValue={endDate}
inputValue={endDateValue}
focused={isEndDateFocused}
disabled={disabled}
required={required}
Expand All @@ -155,7 +158,7 @@ export default class DateRangePickerInput extends React.Component {
<button
type="button"
className={cx('DateRangePickerInput__clear-dates', {
'DateRangePickerInput__clear-dates--hide': !(startDateValue || endDateValue),
'DateRangePickerInput__clear-dates--hide': !(startDate || endDate),
'DateRangePickerInput__clear-dates--hover': isClearDatesHovered,
})}
onMouseEnter={this.onClearDatesMouseEnter}
Expand Down
5 changes: 5 additions & 0 deletions src/components/DateRangePickerInputController.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import DateRangePickerInput from './DateRangePickerInput';

import toMomentObject from '../utils/toMomentObject';
import toLocalizedDateString from '../utils/toLocalizedDateString';
import toISODateString from '../utils/toISODateString';

import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
import isInclusivelyBeforeDay from '../utils/isInclusivelyBeforeDay';
Expand Down Expand Up @@ -194,15 +195,19 @@ export default class DateRangePickerInputWithHandlers extends React.Component {
} = this.props;

const startDateString = this.getDateString(startDate);
const startDateValue = toISODateString(startDate);
const endDateString = this.getDateString(endDate);
const endDateValue = toISODateString(endDate);

return (
<DateRangePickerInput
startDate={startDateString}
startDateValue={startDateValue}
startDateId={startDateId}
startDatePlaceholderText={startDatePlaceholderText}
isStartDateFocused={isStartDateFocused}
endDate={endDateString}
endDateValue={endDateValue}
endDateId={endDateId}
endDatePlaceholderText={endDatePlaceholderText}
isEndDateFocused={isEndDateFocused}
Expand Down
5 changes: 4 additions & 1 deletion src/components/SingleDatePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import includes from 'array-includes';

import toMomentObject from '../utils/toMomentObject';
import toLocalizedDateString from '../utils/toLocalizedDateString';
import toISODateString from '../utils/toISODateString';
import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';

import SingleDatePickerInput from './SingleDatePickerInput';
Expand Down Expand Up @@ -335,6 +336,7 @@ export default class SingleDatePicker extends React.Component {
} = this.props;

const dateString = this.getDateString(date);
const dateValue = toISODateString(date);

return (
<div className="SingleDatePicker">
Expand All @@ -348,7 +350,8 @@ export default class SingleDatePicker extends React.Component {
phrases={phrases}
onClearDate={this.clearDate}
showClearDate={showClearDate}
dateValue={dateString}
displayValue={dateString}
inputValue={dateValue}
onChange={this.onChange}
onFocus={this.onFocus}
onKeyDownShiftTab={this.onClearFocus}
Expand Down
16 changes: 9 additions & 7 deletions src/components/SingleDatePickerInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import CloseButton from '../svg/close.svg';
const propTypes = {
id: PropTypes.string.isRequired,
placeholder: PropTypes.string, // also used as label
dateValue: PropTypes.string,
border: PropTypes.bool,
displayValue: PropTypes.string,
inputValue: PropTypes.string,
focused: PropTypes.bool,
disabled: PropTypes.bool,
required: PropTypes.bool,
Expand All @@ -29,8 +29,8 @@ const propTypes = {

const defaultProps = {
placeholder: 'Select Date',
dateValue: '',
border: false,
displayValue: '',
inputValue: '',
focused: false,
disabled: false,
required: false,
Expand Down Expand Up @@ -75,7 +75,8 @@ export default class SingleDatePickerInput extends React.Component {
const {
id,
placeholder,
dateValue,
displayValue,
inputValue,
focused,
disabled,
required,
Expand All @@ -94,7 +95,8 @@ export default class SingleDatePickerInput extends React.Component {
<DateInput
id={id}
placeholder={placeholder} // also used as label
dateValue={dateValue}
displayValue={displayValue}
inputValue={inputValue}
focused={focused}
disabled={disabled}
required={required}
Expand All @@ -110,7 +112,7 @@ export default class SingleDatePickerInput extends React.Component {
<button
type="button"
className={cx('SingleDatePickerInput__clear-date', {
'SingleDatePickerInput__clear-date--hide': !dateValue,
'SingleDatePickerInput__clear-date--hide': !displayValue,
'SingleDatePickerInput__clear-date--hover': isClearDateHovered,
})}
onMouseEnter={this.onClearDateMouseEnter}
Expand Down
20 changes: 16 additions & 4 deletions test/components/DateInput_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,18 @@ describe('DateInput', () => {
const wrapper = shallow(<DateInput id="date" />);
expect(wrapper.find('input').is('.DateInput__input')).to.equal(true);
});

it('has value === props.inputValue if prop is passed in', () => {
const INPUT_VALUE = 'foobar';
const wrapper = shallow(<DateInput id="date" inputValue={INPUT_VALUE} />);
expect(wrapper.find('input').props().value).to.equal(INPUT_VALUE);
});

it('has value === props.displayValue if inputValue is not passed in', () => {
const DISPLAY_VALUE = 'foobar';
const wrapper = shallow(<DateInput id="date" displayValue={DISPLAY_VALUE} />);
expect(wrapper.find('input').props().value).to.equal(DISPLAY_VALUE);
});
});

describe('display text', () => {
Expand All @@ -52,18 +64,18 @@ describe('DateInput', () => {
expect(wrapper.find('.DateInput__display-text')).to.have.lengthOf(1);
});

describe('props.dateValue is falsey', () => {
describe('props.displayValue is falsey', () => {
it('does not have .DateInput__display-text__has-input class', () => {
const wrapper = shallow(<DateInput id="date" dateValue={null} />);
const wrapper = shallow(<DateInput id="date" displayValue={null} />);
const hasInputDisplayTextWrapper =
wrapper.find('.DateInput__display-text--has-input');
expect(hasInputDisplayTextWrapper).to.have.lengthOf(0);
});
});

describe('props.dateValue is truthy', () => {
describe('props.displayValue is truthy', () => {
it('has .DateInput__display-text--has-input class', () => {
const wrapper = shallow(<DateInput id="date" dateValue="1991-07-13" />);
const wrapper = shallow(<DateInput id="date" displayValue="1991-07-13" />);
const hasInputDisplayTextWrapper =
wrapper.find('.DateInput__display-text--has-input');
expect(hasInputDisplayTextWrapper).to.have.lengthOf(1);
Expand Down
5 changes: 3 additions & 2 deletions test/components/SingleDatePickerInput_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,14 @@ describe('SingleDatePickerInput', () => {

it('has .SingleDatePickerInput__clear-date--hide class if there is no date',
() => {
const wrapper = shallow(<SingleDatePickerInput showClearDate dateValue={null} />);
const wrapper = shallow(<SingleDatePickerInput showClearDate displayValue={null} />);
expect(wrapper.find('.SingleDatePickerInput__clear-date--hide')).to.have.lengthOf(1);
});

it('does not have .SingleDatePickerInput__clear-date--hide class if there is a date',
() => {
const wrapper = shallow(<SingleDatePickerInput showClearDate dateValue="2016-07-13" />);
const wrapper =
shallow(<SingleDatePickerInput showClearDate displayValue="2016-07-13" />);
expect(wrapper.find('.SingleDatePickerInput__clear-date--hide')).to.have.lengthOf(0);
});
});
Expand Down

0 comments on commit 54af822

Please sign in to comment.