Datepicker: Lint componentDidUpdate changes

Author: interactivellama

components/date-picker/__examples__/default.jsx

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

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

@@ -175,7 +175,7 @@ describe('SLDSDatepicker', function describeFunction() {
 							const firstDayOfMonth = wrapper
 								.find('.datepicker__month [aria-disabled=false]')
 								.first();
-              expect(firstDayOfMonth).to.exist;
+							expect(firstDayOfMonth).to.exist;
 							firstDayOfMonth.simulate('click', {});
 						});
 					}}
@@ -443,15 +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(
+			// 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}
+					dateDisabled={({ date }) => date.getDay() > 5 || date.getDay() < 1}
+					onChange={handleChangeSpy}
 				/>
 			);
 
@@ -468,9 +468,9 @@ describe('SLDSDatepicker', function describeFunction() {
 			const day = wrapper
 				.find('.datepicker__month [aria-disabled=false]')
 				.first();
-      day.simulate('click', {});
+			day.simulate('click', {});
 
-      expect(handleChangeSpy.calledOnce).to.equal(true);
+			expect(handleChangeSpy.calledOnce).to.equal(true);
 			done();
 
 			const trigger = wrapper.find(triggerClassSelector);

components/date-picker/date-picker.jsx

@@ -275,18 +275,17 @@ class Datepicker extends React.Component {
 	}
 
 	getDatePicker = ({ labels, assistiveText }) => {
-    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;
-    }
+		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
@@ -412,7 +411,9 @@ class Datepicker extends React.Component {
 				this.openDialog();
 			},
 			onKeyDown: this.handleKeyDown,
-			value: this.props.value ? this.props.formatter(this.props.value) : this.state.inputValue,
+			value: this.props.value
+				? this.props.formatter(this.props.value)
+				: this.state.inputValue,
 		};
 
 		// eslint-disable react/prop-types
@@ -460,13 +461,13 @@ class Datepicker extends React.Component {
 	};
 
 	handleCalendarChange = (event, { date }) => {
-    if(!this.props.value) {
-      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();