Merge pull request #120 from data-driven-forms/update-date-time-picker

Update date time picker

Author: rvsia

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -34,7 +34,7 @@ const output = {
                   condition: {
                     when: 'text_box_1',
                     is: true,
-                  }
+                  },
                 },
                 {
                   name: 'text_box_1111',
@@ -149,20 +149,20 @@ const output = {
                   label: 'Check Box',
                   title: 'Check Box',
                   component: components.CHECKBOX,
-                  "options": [
+                  'options': [
                     {
-                      "label": "Dog",
-                      "value": "1"
+                      'label': 'Dog',
+                      value: '1',
                     },
                     {
-                      "label": "Cats",
-                      "value": "2"
+                      'label': 'Cats',
+                      'value': '2',
                     },
                     {
-                      "label": "Hamsters",
-                      "value": "3"
-                    }
-                  ]
+                      'label': 'Hamsters',
+                      'value': '3',
+                    },
+                  ],
                 },
                 {
                   name: 'check_box_2',
@@ -401,8 +401,15 @@ const output = {
                 {
                   name: 'date_control_1',
                   label: 'Datepicker',
-                  title: 'Datepicker',
+                  title: 'Datepicker with disabled days',
                   component: components.DATE_PICKER,
+                  isClearable: true,
+                  disabledDays: [
+                    new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 5),
+                    {
+                      before: new Date(),
+                    },
+                  ],
                 },
                 {
                   name: 'date_control_2',

packages/pf3-component-mapper/package.json

@@ -78,7 +78,7 @@
     ]
   },
   "dependencies": {
-    "react-day-picker": "^7.2.4",
+    "react-day-picker": "^7.3.2",
     "react-select": "^2.1.2"
   },
   "resolutions": {

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js

@@ -93,6 +93,8 @@ export class DateTimePicker extends React.Component {
     ),
   }), () => this.props.onChange(this.state.selectedDay))
 
+  clearValue = () => this.setState({ selectedDay: undefined })
+
   render() {
     const { isOpen, selectedDay, selectingYear, selectingMonth } = this.state;
     const {
@@ -103,6 +105,7 @@ export class DateTimePicker extends React.Component {
       showTodayButton,
       isDisabled,
       disabledDays,
+      isClearable,
     } = this.props;
     return (
       <div style={{ position: 'relative' }} ref={ this.wrapperRef } >
@@ -113,6 +116,8 @@ export class DateTimePicker extends React.Component {
           variant={ variant }
           locale={ locale }
           isDisabled={ isDisabled }
+          isClearable={ isClearable }
+          clearValue={ this.clearValue }
         />
         <Overlay
           show={ isOpen }
@@ -156,6 +161,7 @@ DateTimePicker.propTypes = {
   value: PropTypes.instanceOf(Date),
   closeOnDaySelect: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
+  isClearable: PropTypes.bool,
 };
 
 DateTimePicker.defaultProps = {
@@ -167,5 +173,6 @@ DateTimePicker.defaultProps = {
   closeOnDaySelect: false,
   isDisabled: false,
   disabledDays: [{}],
+  isClearable: false,
 };
 

packages/pf3-component-mapper/src/form-fields/date-time-picker/picker-input.js

@@ -4,7 +4,7 @@ import { FormControl, Icon, Form } from 'patternfly-react';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import './date-picker-styles.scss';
 
-const PickerInput = ({ variant, selectedDay, locale, handleOverlayToggle, isDisabled, ...props }) =>(
+const PickerInput = ({ variant, selectedDay, locale, handleOverlayToggle, isDisabled, isClearable, clearValue, ...props }) =>(
   <Form.InputGroup style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }} disabled={ isDisabled }>
     <FormControl
       readOnly={ true }
@@ -20,6 +20,11 @@ const PickerInput = ({ variant, selectedDay, locale, handleOverlayToggle, isDisa
       className="picker-input"
       disabled={ isDisabled }
     />
+    { isClearable && selectedDay && (
+      <Form.InputGroup.Addon disabled={ isDisabled } onClick={ clearValue }>
+        <Icon name="times" />
+      </Form.InputGroup.Addon>
+    ) }
     <Form.InputGroup.Addon disabled={ isDisabled } onClick={ () => handleOverlayToggle(true) }>
       <Icon name={ variant === 'time' ? 'time' : 'calendar' } />
     </Form.InputGroup.Addon>
@@ -32,6 +37,8 @@ PickerInput.propTypes = {
   locale: PropTypes.string,
   handleOverlayToggle: PropTypes.func.isRequired,
   isDisabled: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  clearValue: PropTypes.func.isRequired,
 };
 
 export default PickerInput;

packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap

@@ -856,8 +856,8 @@ exports[`FormFields should render Switch correctly 1`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
-                      checked={false}
                       className="pf-c-switch__input"
+                      defaultChecked={false}
                       disabled={false}
                       id="someIdKey"
                       name="Name of the field"
@@ -1995,8 +1995,8 @@ exports[`FormFields should render disabled Switch correctly 1`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
-                      checked={false}
                       className="pf-c-switch__input"
+                      defaultChecked={false}
                       disabled={true}
                       id="someIdKey"
                       name="Name of the field"
@@ -2162,8 +2162,8 @@ exports[`FormFields should render disabled Switch correctly 2`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
-                      checked={false}
                       className="pf-c-switch__input"
+                      defaultChecked={false}
                       disabled={true}
                       id="someIdKey"
                       name="Name of the field"

packages/pf4-component-mapper/src/tests/__snapshots__/tabs.test.js.snap

@@ -1,15 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs component should render tabs correctly 1`] = `
-<Tabs
+<Component
   activeKey={0}
-  className=""
-  isFilled={false}
-  isSecondary={false}
-  leftScrollAriaLabel="Scroll left"
   onSelect={[Function]}
-  rightScrollAriaLabel="Scroll right"
-  variant="div"
 >
   <ForwardRef
     eventKey={0}
@@ -37,5 +31,5 @@ exports[`Tabs component should render tabs correctly 1`] = `
       </div>
     </div>
   </ForwardRef>
-</Tabs>
+</Component>
 `;

packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap

@@ -8,20 +8,20 @@ exports[`<WizardSTepButtons should add custom className to toolbar 1`] = `
     handleSubmit={[MockFunction]}
     submitLabel="Submit"
   />
-  <Button
+  <Component
     onClick={[MockFunction]}
     type="button"
     variant="secondary"
   >
     Back
-  </Button>
-  <Button
+  </Component>
+  <Component
     onClick={[MockFunction]}
     type="button"
     variant="link"
   >
     Cancel
-  </Button>
+  </Component>
 </footer>
 `;
 
@@ -33,19 +33,19 @@ exports[`<WizardSTepButtons should render correctly 1`] = `
     handleSubmit={[MockFunction]}
     submitLabel="Submit"
   />
-  <Button
+  <Component
     onClick={[MockFunction]}
     type="button"
     variant="secondary"
   >
     Back
-  </Button>
-  <Button
+  </Component>
+  <Component
     onClick={[MockFunction]}
     type="button"
     variant="link"
   >
     Cancel
-  </Button>
+  </Component>
 </footer>
 `;