From 07d1c452220f883686c039adb995d0ff2ab4fe5e Mon Sep 17 00:00:00 2001
From: David Avsajanishvili <david@davidavs.com>
Date: Tue, 21 Mar 2023 19:57:34 +0000
Subject: [PATCH] Make it work with Semantic-UI-React v3.

See the roadmap: https://github.com/Semantic-Org/Semantic-UI-React/issues/4409
See the breaking change: https://github.com/Semantic-Org/Semantic-UI-React/pull/4286
---
 src/components/calendar/calendar.tsx | 272 ++++++++++++++-------------
 1 file changed, 137 insertions(+), 135 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 65aa6587..a7262d05 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -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';
@@ -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;