Merge pull request #317 from tkachenko-tatiana/develop

Today button implementation
mui · Apr 2, 2018 · 7b38957 · 7b38957
2 parents 290d130 + d255785
commit 7b38957
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 5 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -2859,6 +2859,27 @@
           },
           "required": true,
           "description": ""
+        },
+        "todayLabel": {
+          "type": {
+            "name": "string"
+          },
+          "required": true,
+          "description": ""
+        },
+        "showTodayButton": {
+          "type": {
+            "name": "bool"
+          },
+          "required": true,
+          "description": ""
+        },
+        "onSetToday": {
+          "type": {
+            "name": "func"
+          },
+          "required": true,
+          "description": ""
         }
       }
     }
@@ -2999,6 +3020,13 @@
       "description": "",
       "displayName": "ModalWrapper",
       "methods": [
+        {
+          "name": "handleSetTodayDate",
+          "docblock": null,
+          "modifiers": [],
+          "params": [],
+          "returns": null
+        },
         {
           "name": "open",
           "docblock": null,
@@ -3114,6 +3142,28 @@
             "computed": false
           }
         },
+        "todayLabel": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "\"Today\" label message",
+          "defaultValue": {
+            "value": "'Today'",
+            "computed": false
+          }
+        },
+        "showTodayButton": {
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "If true today button will be displayed\n<b>Note*</b> that clear button has higher priority",
+          "defaultValue": {
+            "value": "false",
+            "computed": false
+          }
+        },
         "onOpen": {
           "type": {
             "name": "func"
@@ -3180,6 +3230,17 @@
             "computed": true
           }
         },
+        "onSetToday": {
+          "type": {
+            "name": "func"
+          },
+          "required": false,
+          "description": "",
+          "defaultValue": {
+            "value": "undefined",
+            "computed": true
+          }
+        },
         "children": {
           "type": {
             "name": "node"

diff --git a/docs/src/Examples/Demo/BasicDatePicker.jsx b/docs/src/Examples/Demo/BasicDatePicker.jsx
@@ -35,6 +35,18 @@ export default class BasicDatePicker extends PureComponent {
             animateYearScrolling={false}
           />
         </div>
+
+        <div className="picker">
+          <DatePicker
+            label="With today button"
+            showTodayButton
+            disableFuture
+            maxDateMessage="Date must be less than today"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </div>
       </Fragment>
     );
   }

diff --git a/docs/src/Examples/Demo/BasicDateTimePicker.jsx b/docs/src/Examples/Demo/BasicDateTimePicker.jsx
@@ -34,6 +34,16 @@ export default class BasicDateTimePicker extends PureComponent {
             label="24h clock"
           />
         </div>
+
+        <div className="picker">
+          <DateTimePicker
+            value={selectedDate}
+            disablePast
+            onChange={this.handleDateChange}
+            label="With Today Button"
+            showTodayButton
+          />
+        </div>
       </Fragment>
     );
   }

diff --git a/docs/src/Examples/Demo/TimePickerBasic.jsx b/docs/src/Examples/Demo/TimePickerBasic.jsx
@@ -32,6 +32,16 @@ export default class BasicUsage extends PureComponent {
             onChange={this.handleDateChange}
           />
         </div>
+
+        <div className="picker">
+          <TimePicker
+            showTodayButton
+            todayLabel="now"
+            label="With today button"
+            value={selectedDate}
+            onChange={this.handleDateChange}
+          />
+        </div>
       </Fragment>
     );
   }

diff --git a/lib/__tests__/_shared/ModalDialog.test.js b/lib/__tests__/_shared/ModalDialog.test.js
@@ -1,16 +1,86 @@
 import React from 'react';
 import { shallow } from '../test-utils';
-import ModalDialog from '../../src/_shared/ModalDialog';
+import { ModalDialog } from '../../src/_shared/ModalDialog';
+
+const initialProps = {
+  onAccept: jest.fn(),
+  onDismiss: jest.fn(),
+  onClear: jest.fn(),
+  okLabel: 'OK',
+  cancelLabel: 'Cancel',
+  clearLabel: 'Clear',
+  clearable: false,
+  todayLabel: 'Today',
+  showTodayButton: false,
+  onSetToday: jest.fn(),
+  classes: {},
+  children: 'Test',
+};
 
 describe('ModalDialog', () => {
   let component;
+  const props = { ...initialProps };
 
   beforeEach(() => {
-    component = shallow(<ModalDialog />);
+    component = shallow(<ModalDialog {...props} />);
   });
 
   it('Should renders', () => {
     // console.log(component.debug());
     expect(component).toBeTruthy();
   });
+
+  it('Should render dialog content', () => {
+    expect(component.find('WithStyles(DialogContent)').props().children).toBe(props.children);
+  });
+
+  it('Should render dialog actions with 2 buttons', () => {
+    expect(component.find('WithStyles(DialogActions)').length).toBe(1);
+    expect(component.find('WithStyles(Button)').at(0).props().children).toBe('Cancel');
+    expect(component.find('WithStyles(Button)').at(1).props().children).toBe('OK');
+  });
+
+  it('Should handle on OK button click', () => {
+    component.find('WithStyles(Button)').at(1).simulate('click');
+    expect(props.onAccept).toHaveBeenCalled();
+  });
+
+  it('Should handle on Cancel button click', () => {
+    component.find('WithStyles(Button)').at(0).simulate('click');
+    expect(props.onDismiss).toHaveBeenCalled();
+  });
+});
+
+describe('ModalDialog with Clear Button', () => {
+  let component;
+  const props = {
+    ...initialProps,
+    clearable: true,
+  };
+
+  beforeEach(() => {
+    component = shallow(<ModalDialog {...props} />);
+  });
+
+  it('Should handle on Clear button click', () => {
+    component.find('WithStyles(Button)').at(0).simulate('click');
+    expect(props.onClear).toHaveBeenCalled();
+  });
+});
+
+describe('ModalDialog with Today Button', () => {
+  let component;
+  const props = {
+    ...initialProps,
+    showTodayButton: true,
+  };
+
+  beforeEach(() => {
+    component = shallow(<ModalDialog {...props} />);
+  });
+
+  it('Should handle on Clear button click', () => {
+    component.find('WithStyles(Button)').at(0).simulate('click');
+    expect(props.onSetToday).toHaveBeenCalled();
+  });
 });
diff --git a/lib/src/DatePicker/DatePickerWrapper.jsx b/lib/src/DatePicker/DatePickerWrapper.jsx
@@ -92,6 +92,7 @@ export class DatePickerWrapper extends PickerBase {
         onAccept={this.handleAccept}
         onChange={this.handleTextFieldChange}
         onDismiss={this.handleDismiss}
+        onSetToday={this.handleSetTodayDate}
         labelFunc={labelFunc}
         minDate={minDate}
         maxDate={maxDate}

diff --git a/lib/src/DateTimePicker/DateTimePickerWrapper.jsx b/lib/src/DateTimePicker/DateTimePickerWrapper.jsx
@@ -116,6 +116,7 @@ export class DateTimePickerWrapper extends PickerBase {
         onChange={this.handleTextFieldChange}
         onDismiss={this.handleDismiss}
         onClear={this.handleClear}
+        onSetToday={this.handleSetTodayDate}
         dialogContentClassName={classes.dialogContent}
         minDate={minDate}
         maxDate={maxDate}

diff --git a/lib/src/TimePicker/TimePickerWrapper.jsx b/lib/src/TimePicker/TimePickerWrapper.jsx
@@ -50,6 +50,7 @@ export class TimePickerWrapper extends PickerBase {
         onAccept={this.handleAccept}
         onChange={this.handleTextFieldChange}
         onDismiss={this.handleDismiss}
+        onSetToday={this.handleSetTodayDate}
         {...other}
       >
         <TimePicker

diff --git a/lib/src/_shared/ModalDialog.d.ts b/lib/src/_shared/ModalDialog.d.ts
@@ -8,6 +8,7 @@ export interface DateTextFieldProps extends DialogProps {
   onAccept: ButtonProps['onClick'];
   onDismiss: ButtonProps['onClick'];
   onClear: ButtonProps['onClick'];
+  onSetToday: ButtonProps['onClick'];
   dialogContentClassName?: string;
   invalidLabel?: string;
   okLabel?: ReactNode;

diff --git a/lib/src/_shared/ModalDialog.jsx b/lib/src/_shared/ModalDialog.jsx
@@ -29,22 +29,30 @@ const styles = {
       marginRight: 'auto',
     },
   },
+  todayDialogAction: {
+    '&:first-child': {
+      marginRight: 'auto',
+    },
+  },
   dialogAction: {
     // empty but may be needed for override
   },
 };
 
-const ModalDialog = ({
+export const ModalDialog = ({
   children,
   classes,
   onAccept,
   onDismiss,
   onClear,
+  onSetToday,
   okLabel,
   cancelLabel,
   clearLabel,
+  todayLabel,
   dialogContentClassName,
   clearable,
+  showTodayButton,
   ...other
 }) => (
   <Dialog onClose={onDismiss} classes={{ paper: classes.dialogRoot }} {...other}>
@@ -55,7 +63,10 @@ const ModalDialog = ({
     <DialogActions
       classes={{
         root: clearable && classes.dialogActions,
-        action: classnames(classes.dialogAction, { [classes.clearableDialogAction]: clearable }),
+        action: classnames(classes.dialogAction, {
+          [classes.clearableDialogAction]: clearable,
+          [classes.todayDialogAction]: !clearable && showTodayButton,
+        }),
       }}
     >
       { clearable &&
@@ -68,6 +79,16 @@ const ModalDialog = ({
         </Button>
       }
 
+      { !clearable && showTodayButton &&
+        <Button
+          color="primary"
+          onClick={onSetToday}
+          aria-label={todayLabel}
+        >
+          { todayLabel }
+        </Button>
+      }
+
       <Button
         color="primary"
         onClick={onDismiss}
@@ -99,6 +120,9 @@ ModalDialog.propTypes = {
   cancelLabel: PropTypes.string.isRequired,
   clearLabel: PropTypes.string.isRequired,
   clearable: PropTypes.bool.isRequired,
+  todayLabel: PropTypes.string.isRequired,
+  showTodayButton: PropTypes.bool.isRequired,
+  onSetToday: PropTypes.func.isRequired,
 };
 
 ModalDialog.defaultProps = {

diff --git a/lib/src/_shared/PickerBase.jsx b/lib/src/_shared/PickerBase.jsx
@@ -72,4 +72,8 @@ export default class PickerBase extends PureComponent {
       this.setState({ date }, this.handleAccept);
     }
   }
+
+  handleSetTodayDate = () => {
+    this.props.onChange(this.props.utils.date());
+  }
 }
diff --git a/lib/src/wrappers/ModalWrapper.d.ts b/lib/src/wrappers/ModalWrapper.d.ts
@@ -5,6 +5,7 @@ export interface ModalWrapperProps extends Partial<DateTextFieldProps> {
     onAccept?: () => void;
     onDismiss?: () => void;
     onClear?: () => void;
+    onSetToday?: () => void;
     onOpen?: () => void;
     onClose?: () => void;
     dialogContentClassName?: string;