From 7dc062ab84ae337430548c42271574cc37a5d2a5 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Tue, 10 Nov 2020 16:29:39 +0200
Subject: [PATCH] Render TileGroup using css grid, fixes #222

---
 src/Calendar.less      | 10 ++++++++++
 src/MonthView/Days.jsx |  1 -
 src/TileGroup.jsx      | 15 +++++----------
 src/TileGroup.spec.jsx | 28 ++++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/TileGroup.spec.jsx

diff --git a/src/Calendar.less b/src/Calendar.less
index 0c0acac7..ae1f9778 100644
--- a/src/Calendar.less
+++ b/src/Calendar.less
@@ -83,6 +83,9 @@
     }
 
     &__days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+
       &__day {
         &--weekend {
           color: rgb(209, 0, 0);
@@ -103,6 +106,13 @@
     }
   }
 
+  &__year-view__months,
+  &__decade-view__years,
+  &__century-view__decades {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   &__tile {
     max-width: 100%;
     text-align: center;
diff --git a/src/MonthView/Days.jsx b/src/MonthView/Days.jsx
index 0e74ff6d..d23bed36 100644
--- a/src/MonthView/Days.jsx
+++ b/src/MonthView/Days.jsx
@@ -66,7 +66,6 @@ export default function Days(props) {
     <TileGroup
       {...otherProps}
       className="react-calendar__month-view__days"
-      count={7}
       currentMonthIndex={monthIndex}
       dateTransform={(day) => {
         const date = new Date();
diff --git a/src/TileGroup.jsx b/src/TileGroup.jsx
index 1640b1df..47486c7b 100644
--- a/src/TileGroup.jsx
+++ b/src/TileGroup.jsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Flex from './Flex';
-
 import { getTileClasses } from './shared/utils';
 import { tileGroupProps } from './shared/propTypes';
 
 export default function TileGroup({
   className,
-  count = 3,
   dateTransform,
   dateType,
   end,
@@ -22,8 +19,9 @@ export default function TileGroup({
   ...tileProps
 }) {
   const tiles = [];
-  for (let point = start; point <= end; point += step) {
+  for (let point = start, i = 0; point <= end; point += step, i++) {
     const date = dateTransform(point);
+    const style = i === 0 && offset ? { gridColumn: offset + 1 } : null;
 
     tiles.push(
       <Tile
@@ -33,27 +31,24 @@ export default function TileGroup({
         })}
         date={date}
         point={point}
+        style={style}
         {...tileProps}
       />,
     );
   }
 
   return (
-    <Flex
+    <div
       className={className}
-      count={count}
-      offset={offset}
-      wrap
     >
       {tiles}
-    </Flex>
+    </div>
   );
 }
 
 TileGroup.propTypes = {
   ...tileGroupProps,
   activeStartDate: PropTypes.instanceOf(Date),
-  count: PropTypes.number,
   dateTransform: PropTypes.func.isRequired,
   offset: PropTypes.number,
   step: PropTypes.number,
diff --git a/src/TileGroup.spec.jsx b/src/TileGroup.spec.jsx
new file mode 100644
index 00000000..e36f11b0
--- /dev/null
+++ b/src/TileGroup.spec.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import TileGroup from './TileGroup';
+
+describe('<TileGroup /> component', () => {
+  const defaultProps = {
+    start: -5,
+    end: 36,
+    value: new Date(),
+    valueType: 'day',
+    date: new Date(),
+    dateType: 'day',
+    hover: null,
+    tile: () => null,
+    dateTransform: () => new Date(),
+  };
+
+  it('add style of offset if given', () => {
+    const offset = 2;
+    const component = shallow(
+      <TileGroup {...defaultProps} offset={offset} />,
+    );
+    const tiles = component.find('div').prop('children');
+
+    expect(tiles[0].props).toHaveProperty('style', { gridColumn: offset + 1 });
+  });
+});