fix: some code enhancements

nexxtway · May 21, 2020 · b3b3bc9 · b3b3bc9
1 parent f7b783b
commit b3b3bc9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 41 deletions.
diff --git a/src/components/Calendar/hooks/useWeeksBuilder.js b/src/components/Calendar/hooks/useWeeksBuilder.js
@@ -1,29 +1,22 @@
 import React, { useMemo } from 'react';
-import { addDays } from '../helpers';
+import { addDays, getLastDayMonth } from '../helpers';
 import Week from '../week';
 
-export default function useWeeksBuilder(
-    value,
-    firstDayMonth,
-    lastDayMonth,
-    minDate,
-    maxDate,
-    onChange,
-) {
+export default function useWeeksBuilder(value, firstDayMonth, minDate, maxDate, onChange) {
     return useMemo(() => {
-        let date = new Date(firstDayMonth);
-        const weeks = [];
+        const date = new Date(firstDayMonth);
+        const lastDayMonth = getLastDayMonth(firstDayMonth);
         const dayOfWeek = date.getDay();
-        const daysAfter = 6 - dayOfWeek;
+        const totalWeeks = (lastDayMonth.getDate() + dayOfWeek + 6 - lastDayMonth.getDay()) / 7;
+        const week = addDays(date, -dayOfWeek);
 
-        while (date <= lastDayMonth || addDays(date, -dayOfWeek) <= lastDayMonth) {
-            const startDate = addDays(date, -dayOfWeek);
-            const endDate = addDays(date, daysAfter);
+        return Array.from(Array(totalWeeks), (_, index) => {
+            const startDate = addDays(week, 7 * index);
+            const endDate = addDays(startDate, 6);
 
             startDate.setHours(0, 0, 0, 0);
             endDate.setHours(11, 59, 59, 999);
-
-            weeks.push(
+            return (
                 <Week
                     value={value}
                     startDate={startDate}
@@ -32,13 +25,10 @@ export default function useWeeksBuilder(
                     maxDate={maxDate}
                     firstDayMonth={firstDayMonth}
                     lastDayMonth={lastDayMonth}
-                    key={date.getTime()}
+                    key={startDate.getTime()}
                     onChange={onChange}
-                />,
+                />
             );
-
-            date = addDays(date, 7);
-        }
-        return weeks;
-    }, [value, firstDayMonth, lastDayMonth, minDate, maxDate, onChange]);
+        });
+    }, [value, firstDayMonth, minDate, maxDate, onChange]);
 }
diff --git a/src/components/Calendar/month.js b/src/components/Calendar/month.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getLastDayMonth } from './helpers';
 import { useWeeksBuilder } from './hooks';
 
 export default function Month(props) {
     const { firstDayMonth, value, minDate, maxDate, onChange } = props;
-    const lastDayMonth = getLastDayMonth(firstDayMonth);
-    const Weeks = useWeeksBuilder(value, firstDayMonth, lastDayMonth, minDate, maxDate, onChange);
+    const weeks = useWeeksBuilder(value, firstDayMonth, minDate, maxDate, onChange);
 
-    return <tbody>{Weeks}</tbody>;
+    return <tbody>{weeks}</tbody>;
 }
 
 Month.propTypes = {

diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js
@@ -6,7 +6,6 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     font: inherit;
     border: none;
     outline: none;
-    transition: all 0.2s ease;
     background-color: transparent;
     border-radius: 48px;
     line-height: 36px;
@@ -19,11 +18,14 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     text-transform: none;
     appearance: button;
 
-    &:hover {
-        transition: all 0.2s ease;
-        background-color: transparent;
-        border: 1px solid ${props => props.palette.brand.main};
-    }
+    ${props =>
+        !props.isHovered &&
+        `
+        &:hover {
+            background-color: transparent;
+            border: 1px solid ${props.palette.brand.main};
+        }
+        `}
 
     &:active {
         transform: scale(0.85);
@@ -70,14 +72,8 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     ${props =>
         props.isHovered &&
         `
-        transition: all 0.2s ease;
         color: ${props.palette.getContrastText(props.palette.brand.main)};
-        background-color: ${props.palette.brand.main};
-
-        :hover {
-            color: ${props.palette.getContrastText(props.palette.brand.main)};
-            background-color: ${props.palette.brand.main};    
-        }
+        background-color: ${props.palette.brand.dark};
         `};
 `;