[Pickers] Fix showTodayButton not returning the current time (#24650)

mui · Jan 28, 2021 · 28b36a2 · 28b36a2
1 parent 2c42921
commit 28b36a2
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 69 deletions.
diff --git a/docs/src/pages/components/date-picker/BasicDatePicker.js b/docs/src/pages/components/date-picker/BasicDatePicker.js
@@ -15,7 +15,7 @@ export default function BasicDatePicker() {
         onChange={(newValue) => {
           setValue(newValue);
         }}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
       />
     </LocalizationProvider>
   );

diff --git a/docs/src/pages/components/date-picker/BasicDatePicker.tsx b/docs/src/pages/components/date-picker/BasicDatePicker.tsx
@@ -15,7 +15,7 @@ export default function BasicDatePicker() {
         onChange={(newValue) => {
           setValue(newValue);
         }}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
       />
     </LocalizationProvider>
   );

diff --git a/docs/src/pages/components/date-picker/CustomDay.js b/docs/src/pages/components/date-picker/CustomDay.js
@@ -66,7 +66,7 @@ export default function CustomDay() {
         value={selectedDate}
         onChange={handleDateChange}
         renderDay={renderWeekPickerDay}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
         inputFormat="'Week of' MMM d"
       />
     </LocalizaitonProvider>

diff --git a/docs/src/pages/components/date-picker/CustomDay.tsx b/docs/src/pages/components/date-picker/CustomDay.tsx
@@ -70,7 +70,7 @@ export default function CustomDay() {
         value={selectedDate}
         onChange={handleDateChange}
         renderDay={renderWeekPickerDay as any}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
         inputFormat="'Week of' MMM d"
       />
     </LocalizaitonProvider>

diff --git a/docs/src/pages/components/date-picker/LocalizedDatePicker.js b/docs/src/pages/components/date-picker/LocalizedDatePicker.js
@@ -35,14 +35,6 @@ export default function LocalizedDatePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns} locale={localeMap[locale]}>
       <div style={{ width: 300 }}>
-        <DatePicker
-          mask={maskMap[locale]}
-          value={selectedDate}
-          onChange={(date) => handleDateChange(date)}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
-        />
         <ToggleButtonGroup value={locale} exclusive>
           {Object.keys(localeMap).map((localeItem) => (
             <ToggleButton
@@ -54,6 +46,12 @@ export default function LocalizedDatePicker() {
             </ToggleButton>
           ))}
         </ToggleButtonGroup>
+        <DatePicker
+          mask={maskMap[locale]}
+          value={selectedDate}
+          onChange={(date) => handleDateChange(date)}
+          renderInput={(params) => <TextField {...params} />}
+        />
       </div>
     </LocalizationProvider>
   );

diff --git a/docs/src/pages/components/date-picker/LocalizedDatePicker.tsx b/docs/src/pages/components/date-picker/LocalizedDatePicker.tsx
@@ -35,14 +35,6 @@ export default function LocalizedDatePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns} locale={localeMap[locale]}>
       <div style={{ width: 300 }}>
-        <DatePicker
-          mask={maskMap[locale]}
-          value={selectedDate}
-          onChange={(date) => handleDateChange(date)}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
-        />
         <ToggleButtonGroup value={locale} exclusive>
           {Object.keys(localeMap).map((localeItem) => (
             <ToggleButton
@@ -54,6 +46,12 @@ export default function LocalizedDatePicker() {
             </ToggleButton>
           ))}
         </ToggleButtonGroup>
+        <DatePicker
+          mask={maskMap[locale]}
+          value={selectedDate}
+          onChange={(date) => handleDateChange(date)}
+          renderInput={(params) => <TextField {...params} />}
+        />
       </div>
     </LocalizationProvider>
   );

diff --git a/docs/src/pages/components/date-picker/ResponsiveDatePickers.js b/docs/src/pages/components/date-picker/ResponsiveDatePickers.js
@@ -18,9 +18,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
         <DesktopDatePicker
           label="For desktop"
@@ -29,9 +27,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
         <DatePicker
           disableFuture
@@ -42,9 +38,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
       </div>
     </LocalizationProvider>

diff --git a/docs/src/pages/components/date-picker/ResponsiveDatePickers.tsx b/docs/src/pages/components/date-picker/ResponsiveDatePickers.tsx
@@ -18,9 +18,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
         <DesktopDatePicker
           label="For desktop"
@@ -29,9 +27,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
         <DatePicker
           disableFuture
@@ -42,9 +38,7 @@ export default function ResponsiveDatePickers() {
           onChange={(newValue) => {
             setValue(newValue);
           }}
-          renderInput={(params) => (
-            <TextField {...params} margin="normal" variant="standard" />
-          )}
+          renderInput={(params) => <TextField {...params} margin="normal" />}
         />
       </div>
     </LocalizationProvider>

diff --git a/docs/src/pages/components/date-picker/ServerRequestDatePicker.js b/docs/src/pages/components/date-picker/ServerRequestDatePicker.js
@@ -81,7 +81,7 @@ export default function ServerRequestDatePicker() {
           setValue(newValue);
         }}
         onMonthChange={handleMonthChange}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
         renderLoading={() => <PickersCalendarSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =

diff --git a/docs/src/pages/components/date-picker/ServerRequestDatePicker.tsx b/docs/src/pages/components/date-picker/ServerRequestDatePicker.tsx
@@ -81,7 +81,7 @@ export default function ServerRequestDatePicker() {
           setValue(newValue);
         }}
         onMonthChange={handleMonthChange}
-        renderInput={(params) => <TextField {...params} variant="standard" />}
+        renderInput={(params) => <TextField {...params} />}
         renderLoading={() => <PickersCalendarSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =

diff --git a/docs/src/pages/components/date-picker/date-picker.md b/docs/src/pages/components/date-picker/date-picker.md
@@ -37,7 +37,7 @@ function App() {
 
 ## Basic usage
 
-The date picker will be rendered as a modal dialog on mobile, and a textfield with a popover on desktop.
+The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
 
 {{"demo": "pages/components/date-picker/BasicDatePicker.js"}}
 

diff --git a/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx b/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy } from 'sinon';
+import { spy, useFakeTimers, SinonFakeTimers } from 'sinon';
 import TextField from '@material-ui/core/TextField';
 import { fireEvent, screen } from 'test/utils';
 import PickersDay from '@material-ui/lab/PickersDay';
@@ -176,28 +176,6 @@ describe('<MobileDatePicker />', () => {
     expect(getByMuiTest('datepicker-toolbar-date').textContent).to.equal('January');
   });
 
-  it('prop `showTodayButton` – accept current date when "today" button is clicked', () => {
-    const onCloseMock = spy();
-    const onChangeMock = spy();
-    render(
-      <MobileDatePicker
-        renderInput={(params) => <TextField {...params} />}
-        showTodayButton
-        cancelText="stream"
-        onClose={onCloseMock}
-        onChange={onChangeMock}
-        value={adapterToUse.date('2018-01-01T00:00:00.000')}
-        DialogProps={{ TransitionComponent: FakeTransitionComponent }}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('textbox'));
-    fireEvent.click(screen.getByText(/today/i));
-
-    expect(onCloseMock.callCount).to.equal(1);
-    expect(onChangeMock.callCount).to.equal(1);
-  });
-
   it('prop `onMonthChange` – dispatches callback when months switching', () => {
     const onMonthChangeMock = spy();
     render(
@@ -288,4 +266,40 @@ describe('<MobileDatePicker />', () => {
 
     expect(screen.getByText('July')).toBeVisible();
   });
+
+  describe('mock time', () => {
+    let clock: SinonFakeTimers;
+
+    beforeEach(() => {
+      clock = useFakeTimers(new Date());
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('prop `showTodayButton` – accept current date when "today" button is clicked', () => {
+      const onCloseMock = spy();
+      const handleChange = spy();
+      render(
+        <MobileDatePicker
+          renderInput={(params) => <TextField {...params} />}
+          showTodayButton
+          cancelText="stream"
+          onClose={onCloseMock}
+          onChange={handleChange}
+          value={adapterToUse.date('2018-01-01T00:00:00.000')}
+          DialogProps={{ TransitionComponent: FakeTransitionComponent }}
+        />,
+      );
+      const start = adapterToUse.date();
+      fireEvent.click(screen.getByRole('textbox'));
+      clock.tick(10);
+      fireEvent.click(screen.getByText(/today/i));
+
+      expect(onCloseMock.callCount).to.equal(1);
+      expect(handleChange.callCount).to.equal(1);
+      expect(adapterToUse.getDiff(handleChange.args[0][0], start)).to.equal(10);
+    });
+  });
 });
diff --git a/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx b/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx
@@ -44,7 +44,7 @@ export interface ExportedPickerModalProps {
   DialogProps?: Partial<MuiDialogProps>;
 }
 
-export interface PickerModalDialogProps extends ExportedPickerModalProps {
+export interface PickersModalDialogProps extends ExportedPickerModalProps {
   onAccept: () => void;
   onClear: () => void;
   onDismiss: () => void;
@@ -83,7 +83,7 @@ export const styles: MuiStyles<PickersModalDialogClassKey> = {
   },
 };
 
-const PickersModalDialog: React.FC<PickerModalDialogProps & WithStyles<typeof styles>> = (
+const PickersModalDialog: React.FC<PickersModalDialogProps & WithStyles<typeof styles>> = (
   props,
 ) => {
   const {

diff --git a/packages/material-ui-lab/src/internal/pickers/hooks/usePickerState.ts b/packages/material-ui-lab/src/internal/pickers/hooks/usePickerState.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useOpenState } from './useOpenState';
 import { WrapperVariant } from '../wrappers/Wrapper';
 import { BasePickerProps } from '../typings/BasePicker';
-import { useUtils, useNow, MuiPickersAdapter } from './useUtils';
+import { useUtils, MuiPickersAdapter } from './useUtils';
 
 export interface PickerStateValueManager<TInputValue, TDateValue> {
   parseInput: (utils: MuiPickersAdapter, value: TInputValue) => TDateValue;
@@ -44,7 +44,6 @@ export function usePickerState<TInput, TDateValue>(
     throw new Error('inputFormat prop is required');
   }
 
-  const now = useNow<TDateValue>();
   const utils = useUtils();
   const { isOpen, setIsOpen } = useOpenState(props);
 
@@ -100,6 +99,7 @@ export function usePickerState<TInput, TDateValue>(
       onAccept: () => acceptDate(draftState.draft, true),
       onDismiss: () => setIsOpen(false),
       onSetToday: () => {
+        const now = utils.date() as TDateValue;
         dispatch({ type: 'update', payload: now });
         acceptDate(now, !disableCloseOnSelect);
       },
@@ -108,7 +108,7 @@ export function usePickerState<TInput, TDateValue>(
       acceptDate,
       disableCloseOnSelect,
       isOpen,
-      now,
+      utils,
       draftState.draft,
       setIsOpen,
       valueManager.emptyValue,