-
Notifications
You must be signed in to change notification settings - Fork 374
/
monthly.jsx
103 lines (96 loc) · 3.2 KB
/
monthly.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
import * as React from 'react';
import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
import {
MONTHLY_RADIO_GROUP,
getRecurrenceOptions,
changeRecurrenceOptions,
checkIsNaturalNumber,
} from '@devexpress/dx-scheduler-core';
import { IntervalEditor } from './interval-editor';
const PREFIX = 'Monthly';
export const classes = {
container: `${PREFIX}-container`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`&.${classes.container}`]: {
marginBottom: theme.spacing(1),
},
}));
export const Monthly = ({
radioGroupComponent: RadioGroup,
textEditorComponent,
labelComponent,
getMessage,
readOnly,
onFieldChange,
appointmentData,
selectComponent,
weeklyRecurrenceSelectorComponent,
formatDate,
firstDayOfWeek,
...restProps
}) => {
const { rRule } = appointmentData;
const recurrenceOptions = React.useMemo(() => getRecurrenceOptions(rRule) || {}, [rRule]);
const changeRecurrenceInterval = React.useCallback(
interval => checkIsNaturalNumber(interval) && onFieldChange({
rRule: changeRecurrenceOptions({ ...recurrenceOptions, interval }),
}), [recurrenceOptions, onFieldChange],
);
return (
<StyledDiv {...restProps}>
<IntervalEditor
className={classes.container}
repeatEveryLabel={getMessage('repeatEveryLabel')}
repeatIntervalLabel={getMessage('monthsLabel')}
textEditorComponent={textEditorComponent}
labelComponent={labelComponent}
changeRecurrenceInterval={changeRecurrenceInterval}
interval={recurrenceOptions.interval}
readOnly={readOnly}
{...restProps}
/>
<RadioGroup
type={MONTHLY_RADIO_GROUP}
readOnly={readOnly}
getMessage={getMessage}
textEditorComponent={textEditorComponent}
labelComponent={labelComponent}
onFieldChange={onFieldChange}
appointmentData={appointmentData}
selectComponent={selectComponent}
formatDate={formatDate}
dateEditorComponent={() => null}
firstDayOfWeek={firstDayOfWeek}
/>
</StyledDiv>
);
};
Monthly.propTypes = {
labelComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
radioGroupComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
textEditorComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
selectComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
weeklyRecurrenceSelectorComponent: PropTypes.oneOfType([
PropTypes.func, PropTypes.object,
]).isRequired,
appointmentData: PropTypes.shape({
title: PropTypes.string,
startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
rRule: PropTypes.string,
notes: PropTypes.string,
additionalInformation: PropTypes.string,
allDay: PropTypes.bool,
}).isRequired,
onFieldChange: PropTypes.func,
getMessage: PropTypes.func.isRequired,
readOnly: PropTypes.bool,
formatDate: PropTypes.func.isRequired,
firstDayOfWeek: PropTypes.number.isRequired,
};
Monthly.defaultProps = {
onFieldChange: () => undefined,
readOnly: false,
};