From 64d051947d0710c4cb8cb20649b694d0a13f9c23 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 13 Dec 2021 00:43:53 -0500
Subject: [PATCH] Add LayoutGridItem

---
 src/App.scss                         |  2 +
 src/common/Grid.tsx                  |  8 +++-
 src/common/index.scss                | 15 +++++++
 src/common/layout/LayoutGridItem.tsx | 61 ++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 src/common/index.scss
 create mode 100644 src/common/layout/LayoutGridItem.tsx

diff --git a/src/App.scss b/src/App.scss
index 2849b9bf..d1e9c211 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -61,5 +61,7 @@ $nitropedia-height: 400px;
     height: 100%;
 }
 
+@import './common';
 @import "./layout/Layout";
+@import './components';
 @import "./views/Styles";
diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx
index dd91cbd1..9c7e93bd 100644
--- a/src/common/Grid.tsx
+++ b/src/common/Grid.tsx
@@ -6,6 +6,7 @@ export interface GridProps extends BaseProps<HTMLDivElement>
 {
     columnCount?: number;
     columnMinWidth?: number;
+    columnMinHeight?: number;
     grow?: boolean;
     inline?: boolean;
     gap?: SpacingType;
@@ -13,7 +14,7 @@ export interface GridProps extends BaseProps<HTMLDivElement>
 
 export const Grid: FC<GridProps> = props =>
 {
-    const { columnCount = 0, columnMinWidth = 45, grow = false, inline = false, gap = 2, classNames = [], style = {}, ...rest } = props;
+    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, inline = false, gap = 2, classNames = [], style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -43,13 +44,16 @@ export const Grid: FC<GridProps> = props =>
         if(grow)
         {
             newStyle['--nitro-grid-column-min-width'] = (columnMinWidth + 'px');
+            newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
             newStyle.gridTemplateColumns = 'repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr)';
         }
 
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
 
         return newStyle;
-    }, [ columnCount, columnMinWidth, grow, style ]);
+    }, [ columnCount, columnMinWidth, columnMinHeight, grow, style ]);
+
+    console.log('render')
 
     return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
 }
diff --git a/src/common/index.scss b/src/common/index.scss
new file mode 100644
index 00000000..35e018f9
--- /dev/null
+++ b/src/common/index.scss
@@ -0,0 +1,15 @@
+.layout-grid-item {
+    height: var(--nitro-grid-column-min-height, 45px);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: $grid-bg-color;
+
+    &.active {
+        border-color: $grid-active-border-color !important;
+        background-color: $grid-active-bg-color !important;
+    }
+
+    &.unseen {
+        background-color: rgba($success, 0.4);
+    }
+}
diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx
new file mode 100644
index 00000000..63b153e2
--- /dev/null
+++ b/src/common/layout/LayoutGridItem.tsx
@@ -0,0 +1,61 @@
+import { FC, useMemo } from 'react';
+import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
+import { Column, ColumnProps } from '../Column';
+
+export interface LayoutGridItemProps extends ColumnProps
+{
+    itemImage?: string;
+    itemColor?: string;
+    itemActive?: boolean;
+    itemCount?: number;
+    itemCountMinimum?: number;
+    itemUniqueNumber?: number;
+    itemUnseen?: boolean;
+}
+
+export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
+{
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-muted', 'rounded' ];
+
+        if(itemActive) newClassNames.push('active');
+
+        if(itemUniqueNumber === -1) newClassNames.push('unique-item', 'sold-out');
+
+        if(itemUniqueNumber > 0) newClassNames.push('unique-item');
+
+        if(itemUnseen) newClassNames.push('unseen');
+
+        if(itemImage === null) newClassNames.push('icon', 'loading-icon');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ itemActive, itemUniqueNumber, itemUnseen, itemImage, classNames ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
+
+        if(itemColor) newStyle.backgroundColor = itemColor;
+
+        return newStyle;
+    }, [ style, itemImage, itemColor ]);
+
+    return (
+        <Column center pointer position={ position } overflow={ overflow } classNames={ getClassNames } style={ getStyle } { ...rest }>
+            { (itemCount > itemCountMinimum) &&
+                <ItemCountView count={ itemCount } /> }
+            {/* { (itemUniqueNumber > 0) && 
+                <div className="position-absolute unique-item-counter">
+                    <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                </div> } */}
+            { children }
+        </Column>
+    );
+}