feat(react-scheduler): redesign AppointmentTooltip #2474
Conversation
|
FPR |
|
Can we add a padding top (or something else)? I think 2px would enough |
| const Header = withStyles(style, { name: 'Header' })(({ | ||
| children, appointmentData, classes, ...restProps | ||
| }) => ( | ||
| <AppointmentTooltip.Header | ||
| {...restProps} | ||
| className={classes.header} | ||
| > | ||
| <span role="img" aria-label="Clock" className={classes.icon}>🕒</span> | ||
| <div className={classes.title}> | ||
| {appointmentData.title} | ||
| </div> | ||
| <AppointmentTooltip.Header {...restProps}> | ||
| {/* eslint-disable-next-line no-alert */} | ||
| <IconButton onClick={() => alert(JSON.stringify(appointmentData))}> | ||
| <MoreIcon /> | ||
| </IconButton> | ||
| </AppointmentTooltip.Header> |
There was a problem hiding this comment.
Should we use withStyles here? And why we should not pass appointmentData property farther?
| /** A React node used to render the tooltip header. */ | ||
| children?: React.ReactNode; |
There was a problem hiding this comment.
A React node used to render the additional part into tooltip header.
|
FPR |
| paddingLeft: spacing(1), | ||
| paddingRight: spacing(0.5), | ||
| paddingTop: spacing(0.25), | ||
| minHeight: spacing(3), |
There was a problem hiding this comment.
minHeight: spacing(3) -> minHeight: spacing(1.5), // 12 px would be better
|
FPR |
|
FPR |
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
packages/dx-react-scheduler/docs/reference/appointment-tooltip.md
Outdated
Show resolved
Hide resolved
Co-Authored-By: RomanTsukanov <[email protected]>
| @@ -64,22 +65,30 @@ showDeleteButton | boolean | Specifies the Delete button's visibility. | |||
| commandButtonIds | Array<string> | A command button's identifier list. | |||
There was a problem hiding this comment.
"The command button", if you are talking about a specific button.
| onHide?: () => void; | ||
| /** A component that renders a command button. */ | ||
| commandButtonComponent: React.ComponentType<AppointmentTooltip.CommandButtonProps>; | ||
| /** A React node used to render the additional part of the tooltip header. */ |
There was a problem hiding this comment.
There's only one additional part? If there can be different parts, use "an additional part".
| formatDate: FormatterFn; | ||
| /** A component that renders an icon for recurring appointments inside the AppointmentTooltip. */ | ||
| recurringIconComponent: React.ComponentType<object>; | ||
| /** A React node used to render the additional part of the tooltip content. */ |
|
Hi, Is there a way to remove the default tooltipcontent?
|
Before:
After:
BREAKING CHANGE:
We have extended the
headerComponentandcontentComponentin theAppointmentTooltipplugin with new properties. If you use these components, add the following properties in your code:... <AppointmentTooltip headerComponent={({ + commandButtonComponent + showOpenButton + showCloseButton + showDeleteButton + commandBottonIds ...restProps }) => ( <AppointmentTooltip.Header + commandButtonComponent={commandButtonComponent} + showOpenButton={showOpenButton} + showCloseButton={showCloseButton} + showDeleteButton={showDeleteButton} + commandBottonIds={commandBottonIds} {...restProps} /> )} contentComponent={({ + formatDate ...restProps }) => ( <AppointmentTooltip.Content + formatDate={formatDate} {...restProps} /> )} /> ...