diff --git a/components/calendar/calendar.js b/components/calendar/calendar.js index 9b98db47..dbce88e6 100644 --- a/components/calendar/calendar.js +++ b/components/calendar/calendar.js @@ -23,7 +23,9 @@ const { function processProps(props) { const { initialDates, maxDate, minDate, selectionType } = props; const maxLimit = maxDate ? normalizeDate(new Date(maxDate), 23, 59, 59, 999) : null; - const renderDate = normalizeDate(((initialDates && initialDates.length) ? new Date(initialDates[0]) : new Date())); + const renderDate = normalizeDate(((initialDates && initialDates.length && initialDates[0]) + ? new Date(initialDates[0]) + : new Date())); let minLimit = minDate ? normalizeDate(new Date(minDate)) : null; let selectedDates = [null, null]; @@ -78,7 +80,25 @@ export default class Calendar extends Component { } componentWillReceiveProps(newProps) { - this.setState(() => processProps(newProps)); + const { initialDates, maxDate, minDate, selectionType } = newProps; + + let propsChanged = ( + (maxDate !== this.props.maxDate) || + (minDate !== this.props.minDate) || + (selectionType !== this.props.selectionType) + ); + + if (initialDates) { + if (this.props.initialDates) { + propsChanged = propsChanged || initialDates.some((item, idx) => item !== this.props.initialDates[idx]); + } else { + propsChanged = true; + } + } + + if (propsChanged) { + this.setState(() => processProps(newProps)); + } } /** diff --git a/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap b/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap index e50f43d1..9572aacc 100644 --- a/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap +++ b/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Calendar (normal mode) #render() should apply the new initialDates on Calendar 1`] = ` +exports[`Calendar (normal mode) #render() should apply the new initialDates on Calendar even when changed in runtime by the parent component 1`] = ` Change date + `; -exports[`Calendar (normal mode) #render() should merge the locale definition with the default one 1`] = ` - -
- +
- -
- Seg -
-
- Ter -
-
- Qua -
-
- Qui -
-
- Sex -
-
- Sáb -
-
- Dom -
-
-
- - - + + + +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + + +
+ +`; + +exports[`Calendar (normal mode) #render() should merge the locale definition with the default one 1`] = ` + +
+ +
+ +
+ +
+
+ Seg +
+
+ Ter +
+
+ Qua +
+
+ Qui +
+
+ Sex +
+
+ Sáb +
+
+ Dom +
+
+
+ + + -
+ 9 + +
+
+ +
+ + + +`; + +exports[`Calendar (normal mode) #render() should render the Calendar and re-render on change of the props 1`] = ` + +
+ +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
- + + +
- + `; exports[`Calendar (normal mode) #render() should render the calendar with selectionType as normal, initialized in the current date 1`] = ` diff --git a/tests/unit/calendar/calendar.normal.spec.js b/tests/unit/calendar/calendar.normal.spec.js index cc3864f7..47d3c4ba 100644 --- a/tests/unit/calendar/calendar.normal.spec.js +++ b/tests/unit/calendar/calendar.normal.spec.js @@ -287,17 +287,46 @@ describe('Calendar (normal mode)', () => { expect(wrapper.find('.ui-calendar-days__weekday').first().text()).toEqual('Sun'); }); - it('should apply the new initialDates on Calendar', () => { + it('should apply the new initialDates on Calendar even when changed in runtime by the parent component', () => { const wrapper = mount( ); expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('.ui-calendar-days-option_selected').props()['data-date']).toEqual('2017-03-03'); + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-03-03'); wrapper.find('#changeInitialDate').simulate('click'); - expect(wrapper.find('.ui-calendar-days-option_selected').props()['data-date']).toEqual('2017-04-03'); + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + }); + + it('should render the Calendar and re-render on change of the props', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + wrapper.find('#changeInitialDate').simulate('click'); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + + // Check what happens when the props are the same. + wrapper.find('#changeInitialDate').simulate('click'); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + }); + + it('should apply the new minDate on Calendar even when changed by the parent component', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.find('Calendar').props().minDate).toEqual('2017-03-01'); + + wrapper.find('#changeMinDate').simulate('click'); + + expect(wrapper.find('Calendar').props().minDate).toEqual('2017-04-01'); }); }); }); diff --git a/tests/unit/calendar/calendarWrapper.mock.js b/tests/unit/calendar/calendarWrapper.mock.js index 7ba01d36..fb295b50 100644 --- a/tests/unit/calendar/calendarWrapper.mock.js +++ b/tests/unit/calendar/calendarWrapper.mock.js @@ -4,16 +4,25 @@ const Calendar = require('../../../components/calendar/calendar'); export default class CalendarWrapper extends React.Component { constructor(props) { super(); - this.state = { - initialDates: props.initialDates, - }; this.changeInitialDates = this.changeInitialDates.bind(this); + this.changeMinDate = this.changeMinDate.bind(this); + this.state = { + initialDates: props.initialDates ? [].concat(props.initialDates) : undefined, + minDate: props.minDate, + }; } changeInitialDates() { this.setState((prevState) => { - prevState.initialDates[0] = '2017-04-03'; + prevState.initialDates = ['2017-04-03', null]; + return prevState; + }); + } + + changeMinDate() { + this.setState((prevState) => { + prevState.minDate = '2017-04-01'; return prevState; }); } @@ -23,6 +32,7 @@ export default class CalendarWrapper extends React.Component {
+
); } @@ -30,4 +40,5 @@ export default class CalendarWrapper extends React.Component { CalendarWrapper.propTypes = { initialDates: React.PropTypes.arrayOf(String), + minDate: React.PropTypes.string, };