-
Notifications
You must be signed in to change notification settings - Fork 375
/
vertical-appointment.jsx
102 lines (97 loc) · 2.57 KB
/
vertical-appointment.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import { HOUR_MINUTE_OPTIONS } from '@devexpress/dx-scheduler-core';
const styles = ({ palette, spacing }) => ({
title: {
fontWeight: 'bold',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
textContainer: {
lineHeight: `${spacing.unit * 1.5}px`,
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
time: {
display: 'inline-block',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: {
color: palette.common.white,
padding: `${spacing.unit / 2}px ${spacing.unit}px`,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
},
container: {
width: '100%',
},
recurringContainer: {
width: `calc(100% - ${spacing.unit * 2}px)`,
},
imageContainer: {
width: `${spacing.unit * 2}px`,
height: `${spacing.unit * 2}px`,
},
image: {
width: '100%',
height: '100%',
},
});
const VerticalAppointmentBase = ({
classes,
data,
children,
className,
formatDate,
recurringIconComponent: RecurringIcon,
...restProps
}) => {
const repeat = !!data.rRule;
return (
children || (
<div className={classNames(classes.content, className)} {...restProps}>
<div className={repeat ? classes.recurringContainer : classes.container}>
<div className={classes.title}>
{data.title}
</div>
<div className={classes.textContainer}>
<div className={classes.time}>
{formatDate(data.startDate, HOUR_MINUTE_OPTIONS)}
</div>
<div className={classes.time}>
{' - '}
</div>
<div className={classes.time}>
{formatDate(data.endDate, HOUR_MINUTE_OPTIONS)}
</div>
</div>
</div>
{repeat ? (
<div className={classes.imageContainer}>
<RecurringIcon className={classes.image} />
</div>
) : undefined}
</div>
)
);
};
VerticalAppointmentBase.propTypes = {
recurringIconComponent: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
formatDate: PropTypes.func.isRequired,
children: PropTypes.node,
className: PropTypes.string,
};
VerticalAppointmentBase.defaultProps = {
children: undefined,
className: undefined,
};
export const VerticalAppointment = withStyles(styles, { name: 'VerticalAppointment' })(VerticalAppointmentBase);