Skip to content

Commit 07d1c45

Browse files
avsdavsd
committed
Make it work with Semantic-UI-React v3.
See the roadmap: Semantic-Org/Semantic-UI-React#4409 See the breaking change: Semantic-Org/Semantic-UI-React#4286
1 parent 3df48fb commit 07d1c45

File tree

1 file changed

+137
-135
lines changed

1 file changed

+137
-135
lines changed

‎src/components/calendar/calendar.tsx

Lines changed: 137 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import cn from 'classnames';
22
import React, { Fragment, SyntheticEvent, useEffect, useRef } from 'react';
3-
import { Ref, Segment } from 'semantic-ui-react';
3+
import * as SemanticUiReact from 'semantic-ui-react';
44
import { Locale, RenderProps, SemanticDatepickerProps } from 'types';
55
import { getShortDate, getToday } from '../../utils';
66
import Button from '../button';
@@ -78,148 +78,150 @@ const Calendar: React.FC<CalendarProps> = ({
7878
}
7979
});
8080

81-
return (
82-
<Ref innerRef={rootRef}>
83-
<Segment
84-
{...rootProps}
85-
inverted={inverted}
86-
className={cn('clndr-calendars-segment', {
87-
'clndr-floating': !inline,
88-
[pointings[pointing]]: !inline,
89-
})}
90-
>
91-
<div
92-
className="clndr-calendars-wrapper"
93-
style={{ '--n': calendars.length } as React.CSSProperties}
94-
>
95-
{calendars.map((calendar, calendarIdx) => (
96-
<div key={`${calendar.year}-${calendar.month}`}>
97-
<div className="clndr-control">
98-
<div style={styles.leftBtn}>
99-
{calendarIdx === 0 && (
100-
<Fragment>
101-
<Button
102-
icon="angle double left"
103-
inverted={inverted}
104-
title={previousYear}
105-
type="button"
106-
{...getBackProps({
107-
calendars,
108-
'aria-label': previousYear,
109-
offset: 12,
110-
onClick: onPressBtn,
111-
})}
112-
/>
113-
<Button
114-
icon="angle left"
115-
inverted={inverted}
116-
style={{ marginRight: 0 }}
117-
title={previousMonth}
118-
type="button"
119-
{...getBackProps({
120-
calendars,
121-
'aria-label': previousMonth,
122-
onClick: onPressBtn,
123-
})}
124-
/>
125-
</Fragment>
126-
)}
127-
</div>
81+
const calendarInstance = (
82+
<SemanticUiReact.Segment
83+
{...rootProps}
84+
{...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
85+
inverted={inverted}
86+
className={cn('clndr-calendars-segment', {
87+
'clndr-floating': !inline,
88+
[pointings[pointing]]: !inline,
89+
})}
90+
>
91+
<div
92+
className="clndr-calendars-wrapper"
93+
style={{ '--n': calendars.length } as React.CSSProperties}
94+
>
95+
{calendars.map((calendar, calendarIdx) => (
96+
<div key={`${calendar.year}-${calendar.month}`}>
97+
<div className="clndr-control">
98+
<div style={styles.leftBtn}>
99+
{calendarIdx === 0 && (
100+
<Fragment>
101+
<Button
102+
icon="angle double left"
103+
inverted={inverted}
104+
title={previousYear}
105+
type="button"
106+
{...getBackProps({
107+
calendars,
108+
'aria-label': previousYear,
109+
offset: 12,
110+
onClick: onPressBtn,
111+
})}
112+
/>
113+
<Button
114+
icon="angle left"
115+
inverted={inverted}
116+
style={{ marginRight: 0 }}
117+
title={previousMonth}
118+
type="button"
119+
{...getBackProps({
120+
calendars,
121+
'aria-label': previousMonth,
122+
onClick: onPressBtn,
123+
})}
124+
/>
125+
</Fragment>
126+
)}
127+
</div>
128128

129-
<span title={`${months[calendar.month]} ${calendar.year}`}>
130-
{months[calendar.month].slice(0, 3)} {calendar.year}
131-
</span>
129+
<span title={`${months[calendar.month]} ${calendar.year}`}>
130+
{months[calendar.month].slice(0, 3)} {calendar.year}
131+
</span>
132132

133-
<div style={styles.rightBtn}>
134-
{calendarIdx === calendars.length - 1 && (
135-
<Fragment>
136-
<Button
137-
icon="angle right"
138-
inverted={inverted}
139-
title={nextMonth}
140-
type="button"
141-
{...getForwardProps({
142-
calendars,
143-
'aria-label': nextMonth,
144-
onClick: onPressBtn,
145-
})}
146-
/>
147-
<Button
148-
icon="angle double right"
149-
inverted={inverted}
150-
style={{ marginRight: 0 }}
151-
title={nextYear}
152-
type="button"
153-
{...getForwardProps({
154-
calendars,
155-
'aria-label': nextYear,
156-
offset: 12,
157-
onClick: onPressBtn,
158-
})}
159-
/>
160-
</Fragment>
161-
)}
162-
</div>
163-
</div>
164-
<div className="clndr-days">
165-
{weekdays.map((weekday) => (
166-
<CalendarCell
167-
key={`${calendar.year}-${calendar.month}-${weekday}`}
133+
<div style={styles.rightBtn}>
134+
{calendarIdx === calendars.length - 1 && (
135+
<Fragment>
136+
<Button
137+
icon="angle right"
168138
inverted={inverted}
169-
aria-label={weekday}
170-
title={weekday}
171-
>
172-
{weekday.slice(0, 2)}
173-
</CalendarCell>
174-
))}
175-
{calendar.weeks.map((week) =>
176-
week.map((dateObj, weekIdx) => {
177-
const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
139+
title={nextMonth}
140+
type="button"
141+
{...getForwardProps({
142+
calendars,
143+
'aria-label': nextMonth,
144+
onClick: onPressBtn,
145+
})}
146+
/>
147+
<Button
148+
icon="angle double right"
149+
inverted={inverted}
150+
style={{ marginRight: 0 }}
151+
title={nextYear}
152+
type="button"
153+
{...getForwardProps({
154+
calendars,
155+
'aria-label': nextYear,
156+
offset: 12,
157+
onClick: onPressBtn,
158+
})}
159+
/>
160+
</Fragment>
161+
)}
162+
</div>
163+
</div>
164+
<div className="clndr-days">
165+
{weekdays.map((weekday) => (
166+
<CalendarCell
167+
key={`${calendar.year}-${calendar.month}-${weekday}`}
168+
inverted={inverted}
169+
aria-label={weekday}
170+
title={weekday}
171+
>
172+
{weekday.slice(0, 2)}
173+
</CalendarCell>
174+
))}
175+
{calendar.weeks.map((week) =>
176+
week.map((dateObj, weekIdx) => {
177+
const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
178178

179-
if (!dateObj) {
180-
return <CalendarCell key={key} inverted={inverted} />;
181-
}
179+
if (!dateObj) {
180+
return <CalendarCell key={key} inverted={inverted} />;
181+
}
182182

183-
const selectable =
184-
dateObj.selectable && filterDate(dateObj.date);
185-
const shortDate = getShortDate(dateObj.date);
183+
const selectable =
184+
dateObj.selectable && filterDate(dateObj.date);
185+
const shortDate = getShortDate(dateObj.date);
186186

187-
return (
188-
<CalendarCell
189-
key={key}
190-
{...dateObj}
191-
{...getDateProps({
192-
dateObj: { ...dateObj, selectable },
193-
onClick: onPressBtn,
194-
})}
195-
data-testid={`datepicker-cell-${shortDate}`}
196-
inverted={inverted}
197-
selectable={selectable}
198-
>
199-
{dateObj.date.getDate()}
200-
</CalendarCell>
201-
);
202-
})
203-
)}
204-
</div>
205-
</div>
206-
))}
187+
return (
188+
<CalendarCell
189+
key={key}
190+
{...dateObj}
191+
{...getDateProps({
192+
dateObj: { ...dateObj, selectable },
193+
onClick: onPressBtn,
194+
})}
195+
data-testid={`datepicker-cell-${shortDate}`}
196+
inverted={inverted}
197+
selectable={selectable}
198+
>
199+
{dateObj.date.getDate()}
200+
</CalendarCell>
201+
);
202+
})
203+
)}
204+
</div>
207205
</div>
208-
{showToday ? (
209-
<TodayButton
210-
inverted={inverted}
211-
{...getToday(minDate, maxDate)}
212-
{...getDateProps({
213-
dateObj: getToday(minDate, maxDate),
214-
onClick: onPressBtn,
215-
})}
216-
>
217-
{todayButton}
218-
</TodayButton>
219-
) : null}
220-
</Segment>
221-
</Ref>
206+
))}
207+
</div>
208+
{showToday ? (
209+
<TodayButton
210+
inverted={inverted}
211+
{...getToday(minDate, maxDate)}
212+
{...getDateProps({
213+
dateObj: getToday(minDate, maxDate),
214+
onClick: onPressBtn,
215+
})}
216+
>
217+
{todayButton}
218+
</TodayButton>
219+
) : null}
220+
</SemanticUiReact.Segment>
222221
);
222+
return SemanticUiReact.Ref ? (
223+
<Ref innerRef={rootRef}>{calendarInstance}</Ref>
224+
) : calendarInstance;
223225
};
224226

225227
export default Calendar;

0 commit comments

Comments
 (0)