Skip to content

Commit

Permalink
Make it work with Semantic-UI-React v3.
Browse files Browse the repository at this point in the history 
See the roadmap: Semantic-Org/Semantic-UI-React#4409
See the breaking change: Semantic-Org/Semantic-UI-React#4286
  • Loading branch information
@avsd
avsd committed Mar 21, 2023
1 parent 3df48fb commit 07d1c45
Showing 1 changed file with 137 additions and 135 deletions.
272 changes: 137 additions & 135 deletions src/components/calendar/calendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cn from 'classnames';
import React, { Fragment, SyntheticEvent, useEffect, useRef } from 'react';
import { Ref, Segment } from 'semantic-ui-react';
import * as SemanticUiReact from 'semantic-ui-react';
import { Locale, RenderProps, SemanticDatepickerProps } from 'types';
import { getShortDate, getToday } from '../../utils';
import Button from '../button';
Expand Down Expand Up @@ -78,148 +78,150 @@ const Calendar: React.FC<CalendarProps> = ({
}
});

return (
<Ref innerRef={rootRef}>
<Segment
{...rootProps}
inverted={inverted}
className={cn('clndr-calendars-segment', {
'clndr-floating': !inline,
[pointings[pointing]]: !inline,
})}
>
<div
className="clndr-calendars-wrapper"
style={{ '--n': calendars.length } as React.CSSProperties}
>
{calendars.map((calendar, calendarIdx) => (
<div key={`${calendar.year}-${calendar.month}`}>
<div className="clndr-control">
<div style={styles.leftBtn}>
{calendarIdx === 0 && (
<Fragment>
<Button
icon="angle double left"
inverted={inverted}
title={previousYear}
type="button"
{...getBackProps({
calendars,
'aria-label': previousYear,
offset: 12,
onClick: onPressBtn,
})}
/>
<Button
icon="angle left"
inverted={inverted}
style={{ marginRight: 0 }}
title={previousMonth}
type="button"
{...getBackProps({
calendars,
'aria-label': previousMonth,
onClick: onPressBtn,
})}
/>
</Fragment>
)}
</div>
const calendarInstance = (
<SemanticUiReact.Segment
{...rootProps}
{...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
inverted={inverted}
className={cn('clndr-calendars-segment', {
'clndr-floating': !inline,
[pointings[pointing]]: !inline,
})}
>
<div
className="clndr-calendars-wrapper"
style={{ '--n': calendars.length } as React.CSSProperties}
>
{calendars.map((calendar, calendarIdx) => (
<div key={`${calendar.year}-${calendar.month}`}>
<div className="clndr-control">
<div style={styles.leftBtn}>
{calendarIdx === 0 && (
<Fragment>
<Button
icon="angle double left"
inverted={inverted}
title={previousYear}
type="button"
{...getBackProps({
calendars,
'aria-label': previousYear,
offset: 12,
onClick: onPressBtn,
})}
/>
<Button
icon="angle left"
inverted={inverted}
style={{ marginRight: 0 }}
title={previousMonth}
type="button"
{...getBackProps({
calendars,
'aria-label': previousMonth,
onClick: onPressBtn,
})}
/>
</Fragment>
)}
</div>

<span title={`${months[calendar.month]} ${calendar.year}`}>
{months[calendar.month].slice(0, 3)} {calendar.year}
</span>
<span title={`${months[calendar.month]} ${calendar.year}`}>
{months[calendar.month].slice(0, 3)} {calendar.year}
</span>

<div style={styles.rightBtn}>
{calendarIdx === calendars.length - 1 && (
<Fragment>
<Button
icon="angle right"
inverted={inverted}
title={nextMonth}
type="button"
{...getForwardProps({
calendars,
'aria-label': nextMonth,
onClick: onPressBtn,
})}
/>
<Button
icon="angle double right"
inverted={inverted}
style={{ marginRight: 0 }}
title={nextYear}
type="button"
{...getForwardProps({
calendars,
'aria-label': nextYear,
offset: 12,
onClick: onPressBtn,
})}
/>
</Fragment>
)}
</div>
</div>
<div className="clndr-days">
{weekdays.map((weekday) => (
<CalendarCell
key={`${calendar.year}-${calendar.month}-${weekday}`}
<div style={styles.rightBtn}>
{calendarIdx === calendars.length - 1 && (
<Fragment>
<Button
icon="angle right"
inverted={inverted}
aria-label={weekday}
title={weekday}
>
{weekday.slice(0, 2)}
</CalendarCell>
))}
{calendar.weeks.map((week) =>
week.map((dateObj, weekIdx) => {
const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
title={nextMonth}
type="button"
{...getForwardProps({
calendars,
'aria-label': nextMonth,
onClick: onPressBtn,
})}
/>
<Button
icon="angle double right"
inverted={inverted}
style={{ marginRight: 0 }}
title={nextYear}
type="button"
{...getForwardProps({
calendars,
'aria-label': nextYear,
offset: 12,
onClick: onPressBtn,
})}
/>
</Fragment>
)}
</div>
</div>
<div className="clndr-days">
{weekdays.map((weekday) => (
<CalendarCell
key={`${calendar.year}-${calendar.month}-${weekday}`}
inverted={inverted}
aria-label={weekday}
title={weekday}
>
{weekday.slice(0, 2)}
</CalendarCell>
))}
{calendar.weeks.map((week) =>
week.map((dateObj, weekIdx) => {
const key = `${calendar.year}-${calendar.month}-${weekIdx}`;

if (!dateObj) {
return <CalendarCell key={key} inverted={inverted} />;
}
if (!dateObj) {
return <CalendarCell key={key} inverted={inverted} />;
}

const selectable =
dateObj.selectable && filterDate(dateObj.date);
const shortDate = getShortDate(dateObj.date);
const selectable =
dateObj.selectable && filterDate(dateObj.date);
const shortDate = getShortDate(dateObj.date);

return (
<CalendarCell
key={key}
{...dateObj}
{...getDateProps({
dateObj: { ...dateObj, selectable },
onClick: onPressBtn,
})}
data-testid={`datepicker-cell-${shortDate}`}
inverted={inverted}
selectable={selectable}
>
{dateObj.date.getDate()}
</CalendarCell>
);
})
)}
</div>
</div>
))}
return (
<CalendarCell
key={key}
{...dateObj}
{...getDateProps({
dateObj: { ...dateObj, selectable },
onClick: onPressBtn,
})}
data-testid={`datepicker-cell-${shortDate}`}
inverted={inverted}
selectable={selectable}
>
{dateObj.date.getDate()}
</CalendarCell>
);
})
)}
</div>
</div>
{showToday ? (
<TodayButton
inverted={inverted}
{...getToday(minDate, maxDate)}
{...getDateProps({
dateObj: getToday(minDate, maxDate),
onClick: onPressBtn,
})}
>
{todayButton}
</TodayButton>
) : null}
</Segment>
</Ref>
))}
</div>
{showToday ? (
<TodayButton
inverted={inverted}
{...getToday(minDate, maxDate)}
{...getDateProps({
dateObj: getToday(minDate, maxDate),
onClick: onPressBtn,
})}
>
{todayButton}
</TodayButton>
) : null}
</SemanticUiReact.Segment>
);
return SemanticUiReact.Ref ? (
<Ref innerRef={rootRef}>{calendarInstance}</Ref>
) : calendarInstance;
};

export default Calendar;

0 comments on commit 07d1c45

Please sign in to comment.