Skip to content

[DatePicker] Expose dialog container style #4355

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

Merged
oliviertassinari merged 1 commit into from
Jun 12, 2016
+9 −2
Merged

[DatePicker] Expose dialog container style #4355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions src/DatePicker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@ class DatePicker extends Component {
* prop with `value` taking precedence.
*/
defaultDate: PropTypes.object,
/**
* Override the inline-styles of DatePickerDialog's Container element.
*/
dialogContainerStyle: PropTypes.object,
/**
* Disables the year selection in the date picker.
*/
Expand Down Expand Up @@ -264,6 +268,7 @@ class DatePicker extends Component {
className,
container,
defaultDate, // eslint-disable-line no-unused-vars
dialogContainerStyle,
disableYearSelection,
firstDayOfWeek,
locale,
Expand Down Expand Up @@ -300,6 +305,7 @@ class DatePicker extends Component {
autoOk={autoOk}
cancelLabel={cancelLabel}
container={container}
containerStyle={dialogContainerStyle}
disableYearSelection={disableYearSelection}
firstDayOfWeek={firstDayOfWeek}
initialDate={this.state.dialogDate}
Expand Down
5 changes: 3 additions & 2 deletions src/DatePicker/DatePickerDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class DatePickerDialog extends Component {
autoOk: PropTypes.bool,
cancelLabel: PropTypes.node,
container: PropTypes.oneOf(['dialog', 'inline']),
containerStyle: PropTypes.object,
disableYearSelection: PropTypes.bool,
firstDayOfWeek: PropTypes.number,
initialDate: PropTypes.object,
Expand Down Expand Up @@ -95,6 +96,7 @@ class DatePickerDialog extends Component {
DateTimeFormat,
cancelLabel,
container,
containerStyle,
disableYearSelection,
initialDate,
firstDayOfWeek,
Expand Down Expand Up @@ -127,7 +129,6 @@ class DatePickerDialog extends Component {
return (
<div {...other} ref="root">
<Container
{...other}
anchorEl={this.refs.root} // For Popover
animation={PopoverAnimationFromTop} // For Popover
bodyStyle={styles.dialogBodyContent}
Expand All @@ -136,7 +137,7 @@ class DatePickerDialog extends Component {
repositionOnUpdate={true}
open={open}
onRequestClose={this.handleRequestClose}
style={styles.dialogBodyContent}
style={Object.assign(styles.dialogBodyContent, containerStyle)}
Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari May 27, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait!
What is this <div {...other} ref="root"> for? The {...other} property is spreaded twice 😨 .
Could we just kill the root div and use style instead of containerStyle?

Copy link
Copy Markdown
Contributor Author

@nathantalewis nathantalewis May 27, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like that <div {...other} ref="root"> and the duplication of {...other} were added back in https://github.com/callemall/material-ui/pull/3739/files#r61083381.

There was some conversation there, but nothing that explains why the extra div was needed when they changed from DatePickerInline to Popover. From that conversation, it sounds like a somewhat larger refactoring of this component may be worthwhile as another PR.

Copy link
Copy Markdown
Member

@mbrookes mbrookes May 31, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The extra <div> wrapping Popover came directly from DatePickerInline, and Popover doesn't position correctly without it, but the extra spread seems to be just copy-pasta, it should probably have been removed.

Copy link
Copy Markdown
Contributor Author

@nathantalewis nathantalewis Jun 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oliviertassinari I've updated the PR to remove the duplicate {...other} as mentioned by @mbrookes. Anything else?

Copy link
Copy Markdown

@alancasagrande alancasagrande Jul 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The style is leaking to the body, I think it should be Object.assign({}, styles.dialogBodyContent, containerStyle) or {...styles.dialogBodyContent ...containerStyle}.

Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari Jul 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alancasagrande that regression has already been fixed.

>
<EventListener
target="window"
Expand Down
⚡