Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[pickers] Migrate PickersModalDialog to emotion #26355

Merged
merged 2 commits into from
May 19, 2021
Merged

[pickers] Migrate PickersModalDialog to emotion #26355

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0404f29
migrate to emotion
siriwatknp May 18, 2021
9df05fb
replace :first-child with :first-of-type
siriwatknp May 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 39 additions & 45 deletions packages/material-ui-lab/src/internal/pickers/PickersModalDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 = {},
Expand All @@ -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}
Expand All @@ -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;