Remove code duplication (#277)

wojtekmaj · Nov 16, 2019 · fd95418 · fd95418
1 parent 25e80e2
commit fd95418
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx
@@ -143,7 +143,7 @@ export default function Navigation({
       </button>
       <button
         aria-label={navigationAriaLabel}
-        className="react-calendar__navigation__label"
+        className={`${className}__label`}
         disabled={!drillUpAvailable}
         onClick={drillUp}
         style={{ flexGrow: 1 }}

diff --git a/src/MonthView/WeekNumber.jsx b/src/MonthView/WeekNumber.jsx
@@ -6,28 +6,31 @@ export default function WeekNumber({
   onClickWeekNumber,
   weekNumber,
 }) {
+  const props = {
+    className: 'react-calendar__tile',
+    style: { flexGrow: 1 },
+  };
+
+  const children = (
+    <span>
+      {weekNumber}
+    </span>
+  );
+
   return (
     onClickWeekNumber
       ? (
         <button
-          className="react-calendar__tile"
+          {...props}
           onClick={() => onClickWeekNumber(weekNumber, date)}
-          style={{ flexGrow: 1 }}
           type="button"
         >
-          <span>
-            {weekNumber}
-          </span>
+          {children}
         </button>
       )
       : (
-        <div
-          className="react-calendar__tile"
-          style={{ flexGrow: 1 }}
-        >
-          <span>
-            {weekNumber}
-          </span>
+        <div {...props}>
+          {children}
         </div>
       )
   );

diff --git a/src/MonthView/Weekdays.jsx b/src/MonthView/Weekdays.jsx
@@ -12,6 +12,8 @@ import { getDayOfWeek } from '../shared/dates';
 import { formatWeekday, formatShortWeekday as defaultFormatShortWeekday } from '../shared/dateFormatter';
 import { isCalendarType } from '../shared/propTypes';
 
+const className = 'react-calendar__month-view__weekdays';
+
 export default function Weekdays(props) {
   const {
     calendarType,
@@ -37,7 +39,7 @@ export default function Weekdays(props) {
     weekdays.push(
       <div
         key={weekday}
-        className="react-calendar__month-view__weekdays__weekday"
+        className={`${className}__weekday`}
       >
         <abbr aria-label={abbr} title={abbr}>
           {formatShortWeekday(locale, weekdayDate).replace('.', '')}
@@ -48,7 +50,7 @@ export default function Weekdays(props) {
 
   return (
     <Flex
-      className="react-calendar__month-view__weekdays"
+      className={className}
       count={7}
       onFocus={onMouseLeave}
       onMouseOver={onMouseLeave}