2021-12-13 06:43:53 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
|
|
|
import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
|
2022-01-03 06:10:55 +01:00
|
|
|
import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
|
|
|
|
import { Base } from '../Base';
|
2021-12-13 06:43:53 +01:00
|
|
|
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 } /> }
|
2022-01-03 06:10:55 +01:00
|
|
|
{ (itemUniqueNumber > 0) &&
|
|
|
|
<>
|
|
|
|
<Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />
|
|
|
|
<div className="position-absolute bottom-0 unique-item-counter">
|
|
|
|
<LimitedEditionStyledNumberView value={ itemUniqueNumber } />
|
|
|
|
</div>
|
|
|
|
</> }
|
2021-12-13 06:43:53 +01:00
|
|
|
{ children }
|
|
|
|
</Column>
|
|
|
|
);
|
|
|
|
}
|