fix(pf3): added clearable option and updated docs.

Author: Hyperkid123

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/react-renderer-demo/src/common/examples-definitions.js

@@ -159,7 +159,7 @@ export const baseExamples = [{
     title: 'Clearable',
   }, {
     name: 'simpleValue',
-    title: 'Simple value'
+    title: 'Simple value',
   }],
 },
 {
@@ -200,8 +200,25 @@ export const baseExamples = [{
     title: 'Label',
     component: 'input',
     value: 'Date Picker',
-  },
-  ],
+  }, {
+    title: 'Variant',
+    name: 'variant',
+    options: [ 'date-time', 'date' ],
+  }, {
+    name: 'showTodayButton',
+    title: 'Show today button',
+  }, {
+    name: 'todayButtonLabel',
+    component: 'input',
+    value: 'Today',
+    title: 'Today button label',
+  }, {
+    name: 'closeOnDaySelect',
+    title: 'Close on day select',
+  }, {
+    name: 'isClearable',
+    title: 'Clearable',
+  }],
 },
 {
   component: componentTypes.TIME_PICKER,

packages/react-renderer-demo/src/docs-components/component-api.md

@@ -87,9 +87,18 @@ All those components provides a shared group of props:
 
 #### Datepicker
 
+This component is using [react-day-picker](https://react-day-picker.js.org/docs/) as a base component.
+
 |Prop|Type|Description|
 |----|:--:|----------:|
 |placeholder|node/string|A placeholder|
+|variant|['date-time', 'date']|variant of date picker|,
+|locale|string|Defines date picker locale. See react-day-picker [docs](https://react-day-picker.js.org/docs/localization#moment) for more info |
+|todayButtonLabel|string|Label for today button|
+|showTodayButton|bool|show/hide today button|
+|isDisabled|bool|disable component|
+|disabledDays|array|Mark specific days or a range of days as disabled. [More info](https://react-day-picker.js.org/examples/disabled)|
+|closeOnDaySelect|bool|Close the calendar popover after selecting date.|
 
 <ExampleLink to='date-picker' />