Merge pull request #2437 from interactivellama/datepicker-componentDidUpdate

Datepicker: Remove componentDidUpdate

Author: kevinparkerson

components/date-picker/__examples__/default.jsx

@@ -8,6 +8,17 @@ import Datepicker from '~/components/date-picker';
 class Example extends React.Component {
 	static displayName = 'DatepickerExample';
 
+	constructor() {
+		super();
+		this.state = {
+			value: undefined,
+		};
+	}
+
+	handleChange = (event, data) => {
+		this.setState({ value: data.date });
+	};
+
 	render() {
 		return (
 			<IconSettings iconPath="/assets/icons">
@@ -16,6 +27,8 @@ class Example extends React.Component {
 						label: 'Date',
 					}}
 					onChange={(event, data) => {
+						this.handleChange(event, data);
+
 						if (this.props.action) {
 							const dataAsArray = Object.keys(data).map((key) => data[key]);
 							this.props.action('onChange')(event, data, ...dataAsArray);
@@ -37,6 +50,7 @@ class Example extends React.Component {
 					parser={(dateString) => {
 						return moment(dateString, 'MM-DD-YYYY').toDate();
 					}}
+					value={this.state.value}
 				/>
 			</IconSettings>
 		);

components/date-picker/__tests__/date-picker.browser-test.jsx

@@ -161,9 +161,6 @@ describe('SLDSDatepicker', function describeFunction() {
 					menuPosition="relative"
 					onChange={(event, data) => {
 						setTimeout(() => {
-							const input = wrapper.find('input');
-							expect(input).to.have.value('1/1/2007');
-
 							// test callback parameters
 							expect(data.date.getTime()).to.equal(
 								new Date('1/1/2007').getTime()
@@ -446,12 +443,15 @@ describe('SLDSDatepicker', function describeFunction() {
 		afterEach(() => wrapper.unmount());
 
 		it('disable weekends', (done) => {
+			// this only tests if onChange fires
+			const handleChangeSpy = sinon.spy();
 			wrapper = mount(
 				<DemoComponent
 					isOpen
 					menuPosition="relative"
 					value={new Date(2007, 0, 5)}
 					dateDisabled={({ date }) => date.getDay() > 5 || date.getDay() < 1}
+					onChange={handleChangeSpy}
 				/>
 			);
 
@@ -463,14 +463,14 @@ describe('SLDSDatepicker', function describeFunction() {
 				.first();
 			disabledDay.simulate('click', {});
 
-			expect(input).to.have.value('1/5/2007');
+			expect(handleChangeSpy.calledOnce).to.equal(false);
 
 			const day = wrapper
 				.find('.datepicker__month [aria-disabled=false]')
 				.first();
 			day.simulate('click', {});
 
-			expect(input).to.have.value('1/1/2007');
+			expect(handleChangeSpy.calledOnce).to.equal(true);
 			done();
 
 			const trigger = wrapper.find(triggerClassSelector);

components/date-picker/date-picker.jsx

@@ -274,26 +274,18 @@ class Datepicker extends React.Component {
 		checkProps(DATE_PICKER, props, componentDoc);
 	}
 
-	componentDidUpdate(nextProps) {
-		if (nextProps.value && this.props.value) {
-			const currentDate = this.props.value.getTime();
-			const nextDate = nextProps.value.getTime();
-
-			if (currentDate !== nextDate) {
-				// eslint-disable-next-line react/no-did-update-set-state
-				this.setState({
-					value: nextProps.value,
-					formattedValue: this.props.formatter(nextProps.value),
-					inputValue: this.props.formatter(nextProps.value),
-				});
-			}
-		}
-	}
-
 	getDatePicker = ({ labels, assistiveText }) => {
-		const date = this.state.formattedValue
-			? this.parseDate(this.state.formattedValue)
-			: this.state.value;
+		let date;
+		// Use props if present. Otherwise, use state.
+		if (this.props.value) {
+			date = this.props.formatter(this.props.value)
+				? this.parseDate(this.props.formatter(this.props.value))
+				: this.props.value;
+		} else {
+			date = this.state.formattedValue
+				? this.parseDate(this.state.formattedValue)
+				: this.state.value;
+		}
 
 		return (
 			<CalendarWrapper
@@ -419,7 +411,9 @@ class Datepicker extends React.Component {
 				this.openDialog();
 			},
 			onKeyDown: this.handleKeyDown,
-			value: this.state.inputValue,
+			value: this.props.value
+				? this.props.formatter(this.props.value)
+				: this.state.inputValue,
 		};
 
 		// eslint-disable react/prop-types
@@ -467,11 +461,13 @@ class Datepicker extends React.Component {
 	};
 
 	handleCalendarChange = (event, { date }) => {
-		this.setState({
-			value: date,
-			formattedValue: this.props.formatter(date),
-			inputValue: this.props.formatter(date),
-		});
+		if (!this.props.value) {
+			this.setState({
+				value: date,
+				formattedValue: this.props.formatter(date),
+				inputValue: this.props.formatter(date),
+			});
+		}
 
 		this.handleRequestClose();