🔥 removing lively from MonthPicker (#703)

packages/loot-design/src/components/budget/index.js

@@ -1,7 +1,5 @@
 import React, { useContext, useState, useMemo } from 'react';
 
-import { scope } from '@jlongster/lively';
-
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { styles, colors } from '../../style';
@@ -1243,182 +1241,159 @@ export const BudgetPageHeader = React.memo(
   },
 );
 
-export const MonthPicker = scope(lively => {
-  function getRangeForYear(year) {
-    return monthUtils.rangeInclusive(
-      monthUtils.getYearStart(year),
-      monthUtils.getYearEnd(year),
-    );
-  }
+function getRangeForYear(year) {
+  return monthUtils.rangeInclusive(
+    monthUtils.getYearStart(year),
+    monthUtils.getYearEnd(year),
+  );
+}
 
-  function getMonth(year, idx) {
-    return monthUtils.addMonths(year, idx);
-  }
+function getMonth(year, idx) {
+  return monthUtils.addMonths(year, idx);
+}
 
-  function getCurrentMonthName(startMonth, currentMonth) {
-    return monthUtils.getYear(startMonth) === monthUtils.getYear(currentMonth)
-      ? monthUtils.format(currentMonth, 'MMM')
-      : null;
-  }
+function getCurrentMonthName(startMonth, currentMonth) {
+  return monthUtils.getYear(startMonth) === monthUtils.getYear(currentMonth)
+    ? monthUtils.format(currentMonth, 'MMM')
+    : null;
+}
 
-  function getInitialState({ props: { startMonth, monthBounds } }) {
-    const currentMonth = monthUtils.currentMonth();
-    const range = getRangeForYear(currentMonth);
-    const monthNames = range.map(month => {
-      return monthUtils.format(month, 'MMM');
-    });
+export const MonthPicker = ({
+  startMonth,
+  numDisplayed,
+  monthBounds,
+  style,
+  onSelect,
+}) => {
+  const currentMonth = monthUtils.currentMonth();
+  const range = getRangeForYear(currentMonth);
+  const monthNames = range.map(month => {
+    return monthUtils.format(month, 'MMM');
+  });
+  const currentMonthName = getCurrentMonthName(startMonth, currentMonth);
+  const year = monthUtils.getYear(startMonth);
+  const selectedIndex = monthUtils.getMonthIndex(startMonth);
 
-    return {
-      monthNames,
-      currentMonthName: getCurrentMonthName(startMonth, currentMonth),
-    };
-  }
-
-  function componentWillReceiveProps({ props }, nextProps) {
-    if (
-      monthUtils.getYear(props.startMonth) !==
-      monthUtils.getYear(nextProps.startMonth)
-    ) {
-      return {
-        currentMonthName: getCurrentMonthName(
-          nextProps.startMonth,
-          monthUtils.currentMonth(),
-        ),
-      };
-    }
-  }
-
-  function MonthPicker({
-    state: { monthNames, currentMonthName },
-    props: { startMonth, numDisplayed, monthBounds, style, onSelect },
-  }) {
-    const year = monthUtils.getYear(startMonth);
-    const selectedIndex = monthUtils.getMonthIndex(startMonth);
-
-    return (
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        },
+        style,
+      ]}
+    >
       <View
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          },
-          style,
+        style={{
+          padding: '3px 0px',
+          margin: '3px 0',
+          fontWeight: 'bold',
+          fontSize: 14,
+          flex: '0 0 40px',
+        }}
+      >
+        {monthUtils.format(year, 'yyyy')}
+      </View>
+      <ElementQuery
+        sizes={[
+          { width: 320, size: 'small' },
+          { width: 400, size: 'medium' },
+          { size: 'big' },
         ]}
       >
-        <View
-          style={{
-            padding: '3px 0px',
-            margin: '3px 0',
-            fontWeight: 'bold',
-            fontSize: 14,
-            flex: '0 0 40px',
-          }}
-        >
-          {monthUtils.format(year, 'yyyy')}
-        </View>
-        <ElementQuery
-          sizes={[
-            { width: 320, size: 'small' },
-            { width: 400, size: 'medium' },
-            { size: 'big' },
-          ]}
-        >
-          {(matched, ref) => (
-            <View
-              innerRef={ref}
-              style={{
-                flexDirection: 'row',
-                flex: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {monthNames.map((monthName, idx) => {
-                const lastSelectedIndex = selectedIndex + numDisplayed;
-                const selected =
-                  idx >= selectedIndex && idx < lastSelectedIndex;
-                const current = monthName === currentMonthName;
-                const month = getMonth(year, idx);
-                const isMonthBudgeted =
-                  month >= monthBounds.start && month <= monthBounds.end;
+        {(matched, ref) => (
+          <View
+            innerRef={ref}
+            style={{
+              flexDirection: 'row',
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {monthNames.map((monthName, idx) => {
+              const lastSelectedIndex = selectedIndex + numDisplayed;
+              const selected = idx >= selectedIndex && idx < lastSelectedIndex;
+              const current = monthName === currentMonthName;
+              const month = getMonth(year, idx);
+              const isMonthBudgeted =
+                month >= monthBounds.start && month <= monthBounds.end;
 
-                return (
-                  <View
-                    key={monthName}
-                    style={[
-                      {
-                        marginRight: 1,
-                        padding:
-                          matched && matched.size === 'big'
-                            ? '3px 5px'
-                            : '3px 3px',
-                        textAlign: 'center',
-                        cursor: 'default',
-                        borderRadius: 2,
-                        ':hover': isMonthBudgeted && {
-                          backgroundColor: colors.p6,
-                          color: 'white',
-                        },
-                      },
-                      !isMonthBudgeted && { color: colors.n7 },
-                      styles.smallText,
-                      selected && {
+              return (
+                <View
+                  key={monthName}
+                  style={[
+                    {
+                      marginRight: 1,
+                      padding:
+                        matched && matched.size === 'big'
+                          ? '3px 5px'
+                          : '3px 3px',
+                      textAlign: 'center',
+                      cursor: 'default',
+                      borderRadius: 2,
+                      ':hover': isMonthBudgeted && {
                         backgroundColor: colors.p6,
                         color: 'white',
-                        borderRadius: 0,
                       },
-                      idx === selectedIndex && {
-                        borderTopLeftRadius: 2,
-                        borderBottomLeftRadius: 2,
+                    },
+                    !isMonthBudgeted && { color: colors.n7 },
+                    styles.smallText,
+                    selected && {
+                      backgroundColor: colors.p6,
+                      color: 'white',
+                      borderRadius: 0,
+                    },
+                    idx === selectedIndex && {
+                      borderTopLeftRadius: 2,
+                      borderBottomLeftRadius: 2,
+                    },
+                    idx === lastSelectedIndex - 1 && {
+                      borderTopRightRadius: 2,
+                      borderBottomRightRadius: 2,
+                    },
+                    idx >= selectedIndex &&
+                      idx < lastSelectedIndex - 1 && {
+                        marginRight: 0,
+                        borderRight: 'solid 1px',
+                        borderColor: colors.p6,
                       },
-                      idx === lastSelectedIndex - 1 && {
-                        borderTopRightRadius: 2,
-                        borderBottomRightRadius: 2,
-                      },
-                      idx >= selectedIndex &&
-                        idx < lastSelectedIndex - 1 && {
-                          marginRight: 0,
-                          borderRight: 'solid 1px',
-                          borderColor: colors.p6,
-                        },
-                      current && { textDecoration: 'underline' },
-                    ]}
-                    onClick={() => onSelect(month)}
-                  >
-                    {matched && matched.size === 'small'
-                      ? monthName[0]
-                      : monthName}
-                  </View>
-                );
-              })}
-            </View>
-          )}
-        </ElementQuery>
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: '0 0 50px',
-            justifyContent: 'flex-end',
-          }}
+                    current && { textDecoration: 'underline' },
+                  ]}
+                  onClick={() => onSelect(month)}
+                >
+                  {matched && matched.size === 'small'
+                    ? monthName[0]
+                    : monthName}
+                </View>
+              );
+            })}
+          </View>
+        )}
+      </ElementQuery>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          flex: '0 0 50px',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <Button
+          onClick={() => onSelect(monthUtils.subMonths(startMonth, 1))}
+          bare
         >
-          <Button
-            onClick={() => onSelect(monthUtils.subMonths(startMonth, 1))}
-            bare
-          >
-            <ArrowThinLeft width={12} height={12} />
-          </Button>
-          <Button
-            onClick={() => onSelect(monthUtils.addMonths(startMonth, 1))}
-            bare
-          >
-            <ArrowThinRight width={12} height={12} />
-          </Button>
-        </View>
+          <ArrowThinLeft width={12} height={12} />
+        </Button>
+        <Button
+          onClick={() => onSelect(monthUtils.addMonths(startMonth, 1))}
+          bare
+        >
+          <ArrowThinRight width={12} height={12} />
+        </Button>
       </View>
-    );
-  }
-
-  return lively(MonthPicker, { getInitialState, componentWillReceiveProps });
-});
+    </View>
+  );
+};