Merge pull request #501 from erin-doyle/readonly_prop_#496

Added a readOnly prop to the SingleDatePicker
react-dates · May 10, 2017 · f9054d7 · f9054d7
2 parents eee36cb + e36396f
commit f9054d7
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,7 @@ endDateId: PropTypes.string.isRequired,
 endDatePlaceholderText: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,
+readOnly: PropTypes.bool,
 screenReaderInputMessage: PropTypes.string,
 showClearDates: PropTypes.bool,
 showDefaultInputIcon: PropTypes.bool,
@@ -153,6 +154,7 @@ id: PropTypes.string.isRequired,
 placeholder: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,
+readOnly: PropTypes.bool,
 screenReaderInputMessage: PropTypes.string,
 showClearDate: PropTypes.bool,
 customCloseIcon: PropTypes.node,

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -15,6 +15,7 @@ const propTypes = forbidExtraProps({
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
   showCaret: PropTypes.bool,
 
   onChange: PropTypes.func,
@@ -37,6 +38,7 @@ const defaultProps = {
   focused: false,
   disabled: false,
   required: false,
+  readOnly: false,
   showCaret: false,
 
   onChange() {},
@@ -143,6 +145,7 @@ export default class DateInput extends React.Component {
       onFocus,
       disabled,
       required,
+      readOnly,
     } = this.props;
 
     const displayText = displayValue || inputValue || dateString || placeholder || '';
@@ -170,7 +173,7 @@ export default class DateInput extends React.Component {
           placeholder={placeholder}
           autoComplete="off"
           disabled={disabled}
-          readOnly={isTouch}
+          readOnly={readOnly || isTouch}
           required={required}
           aria-describedby={screenReaderMessage && screenReaderMessageId}
         />

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -47,6 +47,7 @@ const defaultProps = {
   endDatePlaceholderText: 'End Date',
   disabled: false,
   required: false,
+  readOnly: false,
   screenReaderInputMessage: '',
   showClearDates: false,
   showDefaultInputIcon: false,
@@ -396,6 +397,7 @@ export default class DateRangePicker extends React.Component {
       customCloseIcon,
       disabled,
       required,
+      readOnly,
       phrases,
       isOutsideRange,
       withPortal,
@@ -433,6 +435,7 @@ export default class DateRangePicker extends React.Component {
             customCloseIcon={customCloseIcon}
             disabled={disabled}
             required={required}
+            readOnly={readOnly}
             reopenPickerOnClearDates={reopenPickerOnClearDates}
             keepOpenOnDateSelect={keepOpenOnDateSelect}
             isOutsideRange={isOutsideRange}

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
@@ -42,6 +42,7 @@ const propTypes = forbidExtraProps({
   showClearDates: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
   showCaret: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,
   customInputIcon: PropTypes.node,
@@ -83,6 +84,7 @@ const defaultProps = {
   showClearDates: false,
   disabled: false,
   required: false,
+  readOnly: false,
   showCaret: false,
   showDefaultInputIcon: false,
   customInputIcon: null,
@@ -147,6 +149,7 @@ export default class DateRangePickerInput extends React.Component {
       showClearDates,
       disabled,
       required,
+      readOnly,
       showCaret,
       showDefaultInputIcon,
       customInputIcon,
@@ -190,6 +193,7 @@ export default class DateRangePickerInput extends React.Component {
           isFocused={isFocused}
           disabled={disabled}
           required={required}
+          readOnly={readOnly}
           showCaret={showCaret}
 
           onChange={onStartDateChange}
@@ -217,6 +221,7 @@ export default class DateRangePickerInput extends React.Component {
           isFocused={isFocused}
           disabled={disabled}
           required={required}
+          readOnly={readOnly}
           showCaret={showCaret}
 
           onChange={onEndDateChange}

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   showDefaultInputIcon: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -79,6 +80,7 @@ const defaultProps = {
   showDefaultInputIcon: false,
   disabled: false,
   required: false,
+  readOnly: false,
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -227,6 +229,7 @@ export default class DateRangePickerInputController extends React.Component {
       customCloseIcon,
       disabled,
       required,
+      readOnly,
       isFocused,
       phrases,
       onArrowDown,
@@ -254,6 +257,7 @@ export default class DateRangePickerInputController extends React.Component {
         isFocused={isFocused}
         disabled={disabled}
         required={required}
+        readOnly={readOnly}
         showCaret={showCaret}
         showDefaultInputIcon={showDefaultInputIcon}
         customInputIcon={customInputIcon}

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -51,6 +51,7 @@ const defaultProps = {
   placeholder: 'Date',
   disabled: false,
   required: false,
+  readOnly: false,
   screenReaderInputMessage: '',
   showClearDate: false,
   customCloseIcon: null,
@@ -735,6 +736,7 @@ export default class SingleDatePicker extends React.Component {
       disabled,
       focused,
       required,
+      readOnly,
       showClearDate,
       date,
       phrases,
@@ -761,6 +763,7 @@ export default class SingleDatePicker extends React.Component {
             isFocused={isInputFocused}
             disabled={disabled}
             required={required}
+            readOnly={readOnly}
             showCaret={!withPortal && !withFullScreenPortal}
             onClearDate={this.clearDate}
             showClearDate={showClearDate}

diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
@@ -19,6 +19,7 @@ const propTypes = forbidExtraProps({
   isFocused: PropTypes.bool, // describes actual DOM focus
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
   showCaret: PropTypes.bool,
   showClearDate: PropTypes.bool,
   customCloseIcon: PropTypes.node,
@@ -43,6 +44,7 @@ const defaultProps = {
   isFocused: false,
   disabled: false,
   required: false,
+  readOnly: false,
   showCaret: false,
   showClearDate: false,
   customCloseIcon: null,
@@ -93,6 +95,7 @@ export default class SingleDatePickerInput extends React.Component {
       isFocused,
       disabled,
       required,
+      readOnly,
       showCaret,
       showClearDate,
       phrases,
@@ -127,6 +130,7 @@ export default class SingleDatePickerInput extends React.Component {
           isFocused={isFocused}
           disabled={disabled}
           required={required}
+          readOnly={readOnly}
           showCaret={showCaret}
           onChange={onChange}
           onFocus={onFocus}

diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
@@ -27,6 +27,7 @@ export default {
   endDatePlaceholderText: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,
   showClearDates: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,

diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
@@ -21,6 +21,7 @@ export default {
   placeholder: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  readOnly: PropTypes.bool,
   screenReaderInputMessage: PropTypes.string,
   showClearDate: PropTypes.bool,
   customCloseIcon: PropTypes.node,

diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
@@ -62,6 +62,20 @@ describe('DateInput', () => {
           expect(wrapper.find('input').props().value).to.equal(DATE_STRING);
         },
       );
+
+      describe('props.readOnly is truthy', () => {
+        it('sets readOnly', () => {
+          const wrapper = shallow(<DateInput id="date" readOnly />);
+          expect(!!wrapper.find('input').prop('readOnly')).to.equal(true);
+        });
+      });
+
+      describe('props.readOnly is falsey', () => {
+        it('does not set readOnly', () => {
+          const wrapper = shallow(<DateInput id="date" readOnly={false} />);
+          expect(!!wrapper.find('input').prop('readOnly')).to.equal(false);
+        });
+      });
     });
 
     describe('screen reader message', () => {
@@ -259,13 +273,15 @@ describe('DateInput', () => {
       expect(wrapper.state()).to.contain.keys({ isTouchDevice: false });
     });
 
-    it('does not set readOnly when not a touch device', () => {
-      const wrapper = shallow(<DateInput id="date" />);
-      expect(!!wrapper.find('input').prop('readOnly')).to.equal(false);
+    it('sets readOnly when a touch device and props.readOnly === true', () => {
+      const wrapper = shallow(<DateInput id="date" readOnly />);
+      wrapper.setState({ isTouchDevice: true });
+      wrapper.update();
+      expect(!!wrapper.find('input').prop('readOnly')).to.equal(true);
     });
 
-    it('sets readOnly when a touch device', () => {
-      const wrapper = shallow(<DateInput id="date" />);
+    it('sets readOnly when a touch device and props.readOnly === false', () => {
+      const wrapper = shallow(<DateInput id="date" readOnly={false} />);
       wrapper.setState({ isTouchDevice: true });
       wrapper.update();
       expect(!!wrapper.find('input').prop('readOnly')).to.equal(true);