[pickers] Migrate PickersModalDialog to emotion (#26355)

mui · May 19, 2021 · 73b8c37 · 73b8c37
1 parent 07be194
commit 73b8c37
Showing 1 changed file with 39 additions and 45 deletions.
diff --git a/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx b/packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
-import Dialog, { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import Dialog, { DialogProps as MuiDialogProps, dialogClasses } from '@material-ui/core/Dialog';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { DIALOG_WIDTH } from './constants/dimensions';
 
 export interface ExportedPickerModalProps {
@@ -52,44 +51,49 @@ export interface PickersModalDialogProps extends ExportedPickerModalProps {
   open: boolean;
 }
 
-export type PickersModalDialogClassKey =
-  | 'container'
-  | 'paper'
-  | 'content'
-  | 'action'
-  | 'withAdditionalAction';
-
-export const styles: MuiStyles<PickersModalDialogClassKey> = {
-  container: {
+const PickersModalDialogRoot = styled(
+  Dialog,
+  {},
+  { skipSx: true },
+)({
+  [`& .${dialogClasses.container}`]: {
     outline: 0,
   },
-  paper: {
+  [`& .${dialogClasses.paper}`]: {
     outline: 0,
     minWidth: DIALOG_WIDTH,
   },
-  content: {
-    '&:first-child': {
-      padding: 0,
-    },
+});
+
+const PickersModalDialogContent = styled(
+  DialogContent,
+  {},
+  { skipSx: true },
+)({
+  '&:first-of-type': {
+    padding: 0,
   },
-  action: {},
-  withAdditionalAction: {
+});
+
+const PickersModalDialogActions = styled(
+  DialogActions,
+  {},
+  { skipSx: true },
+)(({ styleProps = {} }) => ({
+  ...((!!styleProps.clearable || !!styleProps.showTodayButton) && {
     // set justifyContent to default value to fix IE11 layout bug
     // see https://github.com/mui-org/material-ui-pickers/pull/267
     justifyContent: 'flex-start',
-    '& > *:first-child': {
+    '& > *:first-of-type': {
       marginRight: 'auto',
     },
-  },
-};
+  }),
+}));
 
-const PickersModalDialog: React.FC<PickersModalDialogProps & WithStyles<typeof styles>> = (
-  props,
-) => {
+const PickersModalDialog = (props: React.PropsWithChildren<PickersModalDialogProps>) => {
   const {
     cancelText = 'Cancel',
     children,
-    classes,
     clearable = false,
     clearText = 'Clear',
     DialogProps = {},
@@ -103,23 +107,13 @@ const PickersModalDialog: React.FC<PickersModalDialogProps & WithStyles<typeof s
     todayText = 'Today',
   } = props;
 
+  // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
+  const styleProps = { ...props };
+
   return (
-    <Dialog
-      open={open}
-      onClose={onDismiss}
-      {...DialogProps}
-      classes={{
-        ...DialogProps.classes,
-        container: classes.container,
-        paper: classes.paper,
-      }}
-    >
-      <DialogContent className={classes.content}>{children}</DialogContent>
-      <DialogActions
-        className={clsx(classes.action, {
-          [classes.withAdditionalAction]: clearable || showTodayButton,
-        })}
-      >
+    <PickersModalDialogRoot open={open} onClose={onDismiss} {...DialogProps}>
+      <PickersModalDialogContent>{children}</PickersModalDialogContent>
+      <PickersModalDialogActions styleProps={styleProps}>
         {clearable && (
           <Button data-mui-test="clear-action-button" onClick={onClear}>
             {clearText}
@@ -132,9 +126,9 @@ const PickersModalDialog: React.FC<PickersModalDialogProps & WithStyles<typeof s
         )}
         {cancelText && <Button onClick={onDismiss}>{cancelText}</Button>}
         {okText && <Button onClick={onAccept}>{okText}</Button>}
-      </DialogActions>
-    </Dialog>
+      </PickersModalDialogActions>
+    </PickersModalDialogRoot>
   );
 };
 
-export default withStyles(styles, { name: 'PrivatePickersModalDialog' })(PickersModalDialog);
+export default PickersModalDialog;