/
controlled.jsx
121 lines (111 loc) · 2.75 KB
/
controlled.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import * as React from 'react';
import {
Appointments,
AppointmentTooltip,
Scheduler,
WeekView,
} from '@devexpress/dx-react-scheduler-material-ui';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import { withStyles } from '@material-ui/core/styles';
import appointments from '../../../demo-data/today-appointments';
const styles = theme => ({
button: {
color: theme.palette.background.default,
padding: 0,
},
text: {
paddingTop: theme.spacing.unit,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
});
const AppointmentBase = ({
children,
data,
onClick,
classes,
toggleVisibility,
onAppointmentMetaChange,
...restProps
}) => (
<Appointments.Appointment
{...restProps}
>
<React.Fragment>
<IconButton
className={classes.button}
onClick={({ target }) => {
toggleVisibility();
onAppointmentMetaChange({ target: target.parentElement.parentElement, data });
}}
>
<InfoIcon fontSize="small" />
</IconButton>
{children}
</React.Fragment>
</Appointments.Appointment>
);
const Appointment = withStyles(styles, { name: 'Appointment' })(AppointmentBase);
export default class Demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: appointments,
visible: false,
appointmentMeta: {
target: null,
data: {},
},
};
this.toggleVisibility = () => {
const { visible: tooltipVisibility } = this.state;
this.setState({ visible: !tooltipVisibility });
};
this.onAppointmentMetaChange = ({ data, target }) => {
this.setState({ appointmentMeta: { data, target } });
};
this.myAppointment = this.myAppointment.bind(this);
}
myAppointment(props) {
return (
<Appointment
{...props}
toggleVisibility={this.toggleVisibility}
onAppointmentMetaChange={this.onAppointmentMetaChange}
/>
);
}
render() {
const {
data,
appointmentMeta,
visible,
} = this.state;
return (
<Paper>
<Scheduler
data={data}
height={660}
>
<WeekView
startDayHour={9}
endDayHour={19}
/>
<Appointments
appointmentComponent={this.myAppointment}
/>
<AppointmentTooltip
showCloseButton
visible={visible}
appointmentMeta={appointmentMeta}
onAppointmentMetaChange={this.onAppointmentMetaChange}
onVisibilityChange={this.toggleVisibility}
/>
</Scheduler>
</Paper>
);
}
}