[mui#886] Fix not dispatching on clearing input of inline datepicker (m…

…ui#902)
mnajdova · Feb 6, 2019 · a069517 · a069517
1 parent 4a41168
commit a069517
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 8 deletions.
diff --git a/docs/src/Pages/Components/DatePicker/InlineDatePicker.example.jsx b/docs/src/Pages/Components/DatePicker/InlineDatePicker.example.jsx
@@ -37,6 +37,7 @@ class InlineDatePickerDemo extends PureComponent {
         <div className="picker">
           <InlineDatePicker
             keyboard
+            clearable
             variant="outlined"
             label="With keyboard"
             value={selectedDate}

diff --git a/docs/src/layout/Layout.tsx b/docs/src/layout/Layout.tsx
@@ -90,7 +90,7 @@ class Layout extends Component<LayoutProps> {
 
             <div className={classes.flex} />
 
-            <Tooltip title="Change library that will work with date under the hood">
+            <Tooltip title="Change the peer library for date management">
               <IconButton color="inherit" onClick={this.handleUtilsMenuOpen}>
                 <SettingsIcon />
               </IconButton>

diff --git a/docs/src/prop-types.json b/docs/src/prop-types.json
@@ -321,7 +321,7 @@
     },
     "clearable": {
       "defaultValue": null,
-      "description": "If true clear button will be displayed",
+      "description": "Clearable mode (for inline pickers works only for clearing input)",
       "name": "clearable",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_shared/DateTextField.tsx",
@@ -655,7 +655,7 @@
     },
     "clearable": {
       "defaultValue": null,
-      "description": "If true clear button will be displayed",
+      "description": "Clearable mode (for inline pickers works only for clearing input)",
       "name": "clearable",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_shared/DateTextField.tsx",
@@ -1154,7 +1154,7 @@
     },
     "clearable": {
       "defaultValue": null,
-      "description": "If true clear button will be displayed",
+      "description": "Clearable mode (for inline pickers works only for clearing input)",
       "name": "clearable",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_shared/DateTextField.tsx",

diff --git a/lib/src/DatePicker/DatePickerInline.tsx b/lib/src/DatePicker/DatePickerInline.tsx
@@ -42,7 +42,15 @@ export const DatePickerInline: React.SFC<DatePickerInlineProps> = props => {
 
   return (
     <BasePicker {...props} autoOk>
-      {({ date, utils, isAccepted, handleChange, handleTextFieldChange, handleAccept }) => (
+      {({
+        date,
+        utils,
+        isAccepted,
+        handleChange,
+        handleClear,
+        handleTextFieldChange,
+        handleAccept,
+      }) => (
         <InlineWrapper
           disableFuture={disableFuture}
           disablePast={disablePast}
@@ -55,6 +63,7 @@ export const DatePickerInline: React.SFC<DatePickerInlineProps> = props => {
           value={value}
           isAccepted={isAccepted}
           handleAccept={handleAccept}
+          onClear={handleClear}
           {...other}
         >
           <ComponentToShow

diff --git a/lib/src/DateTimePicker/DateTimePickerInline.tsx b/lib/src/DateTimePicker/DateTimePickerInline.tsx
@@ -46,6 +46,7 @@ export const DateTimePickerInline: React.SFC<DateTimePickerInlineProps> = props
         handleTextFieldChange,
         isAccepted,
         pick12hOr24hFormat,
+        handleClear,
         handleAccept,
       }) => (
         <InlineWrapper
@@ -58,6 +59,7 @@ export const DateTimePickerInline: React.SFC<DateTimePickerInlineProps> = props
           value={value}
           isAccepted={isAccepted}
           handleAccept={handleAccept}
+          onClear={handleClear}
           format={pick12hOr24hFormat(utils.dateTime12hFormat, utils.dateTime24hFormat)}
           {...other}
         >

diff --git a/lib/src/TimePicker/TimePickerInline.tsx b/lib/src/TimePicker/TimePickerInline.tsx
@@ -23,17 +23,25 @@ export const TimePickerInline: React.SFC<TimePickerInlineProps> = props => {
         isAccepted,
         pick12hOr24hFormat,
         handleAccept,
+        handleClear,
       }) => (
         <InlineWrapper
           innerRef={forwardedRef}
           value={value}
           onChange={handleTextFieldChange}
           isAccepted={isAccepted}
+          onClear={handleClear}
           handleAccept={handleAccept}
           format={pick12hOr24hFormat(utils.time12hFormat, utils.time24hFormat)}
           {...other}
         >
-          <TimePicker date={date} onChange={handleChange} ampm={ampm} seconds={seconds} minutesStep={minutesStep} />
+          <TimePicker
+            date={date}
+            onChange={handleChange}
+            ampm={ampm}
+            seconds={seconds}
+            minutesStep={minutesStep}
+          />
         </InlineWrapper>
       )}
     </BasePicker>

diff --git a/lib/src/_shared/DateTextField.tsx b/lib/src/_shared/DateTextField.tsx
@@ -48,13 +48,13 @@ export interface DateTextFieldProps
   emptyLabel?: string;
   /** Do not open picker on enter keypress */
   disableOpenOnEnter?: boolean;
-  /** Dynamic label generation function [(date: Date, invalidLabel: string) => string] */
+  /** Dynamic label generation function */
   labelFunc?: (date: MaterialUiPickersDate, invalidLabel: string) => string;
   /** Icon displayed for open picker button in keyboard mode */
   keyboardIcon?: React.ReactNode;
   /** Message, appearing when date cannot be parsed */
   invalidDateMessage?: React.ReactNode;
-  /** If true clear button will be displayed */
+  /** Clearable mode (for inline pickers works only for clearing input) */
   clearable?: boolean;
   /** Component that should replace the default Material-UI TextField */
   TextFieldComponent?: