nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix busted grids

Browse Source
This commit is contained in:
Bill 2022-02-16 12:09:38 -05:00
parent 8f20bf5299
commit 95596b6a9a
9 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/utils.scss
View File

@ -86,3 +86,7 @@ ul {
.flex-basis-fit-content {
flex-basis: fit-content;
}
.flex-basis-max-content {
flex-basis: max-content;
}

2
src/common/AutoGrid.tsx
View File

@ -9,7 +9,7 @@ export interface AutoGridProps extends GridProps
export const AutoGrid: FC<AutoGridProps> = props =>
{
const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, overflow = 'auto', style = {}, ...rest } = props;
const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, maxContent = true, overflow = 'auto', style = {}, ...rest } = props;
const getStyle = useMemo(() =>
{

8
src/common/Grid.tsx
View File

@ -26,10 +26,12 @@ export const Grid: FC<GridProps> = props =>
if(gap) newClassNames.push('gap-' + gap);
else if(gap === 0) newClassNames.push('gap-0');
if(maxContent) newClassNames.push('flex-basis-max-content');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ inline, gap, classNames ]);
}, [ inline, gap, maxContent, classNames ]);
const getStyle = useMemo(() =>
{
@ -37,12 +39,10 @@ export const Grid: FC<GridProps> = props =>
if(columnCount) newStyle['--bs-columns'] = columnCount.toString();
if(maxContent) newStyle.gridTemplateRows = 'max-content';
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle;
}, [ columnCount, maxContent, style ]);
}, [ columnCount, style ]);
return (
<GridContextProvider value={ { isCssGrid: true } }>

2
src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
View File

@ -30,7 +30,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
}, [ model, category, setMaxPaletteCount ]);
return (
<AutoGrid grow columnCount={ 3 } columnMinHeight={ 50 } overflow="auto">
<AutoGrid columnCount={ 3 } columnMinHeight={ 50 }>
{ (category.parts.length > 0) && category.parts.map((item, index) =>
<AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
</AutoGrid>

2
src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
View File

@ -27,7 +27,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
}, [ model, category, paletteSet, paletteIndex ]);
return (
<AutoGrid grow columnCount={ 4 } columnMinWidth={ 30 } overflow="auto">
<AutoGrid columnCount={ 4 } columnMinWidth={ 30 }>
{ (paletteSet.length > 0) && paletteSet.map((item, index) =>
<AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
</AutoGrid>

6
src/components/catalog/views/navigation/CatalogNavigationView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { AutoGrid } from '../../../../common/AutoGrid';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
import { useCatalogContext } from '../../CatalogContext';
import { ICatalogNode } from '../../common/ICatalogNode';
import { CatalogSearchView } from '../page/common/CatalogSearchView';
@ -21,14 +21,14 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
<>
<CatalogSearchView />
<Column fullHeight className="nitro-catalog-navigation-grid-container p-1" overflow="hidden">
<Grid gap={ 1 } columnCount={ 1 } overflow="auto">
<AutoGrid gap={ 1 } columnCount={ 1 }>
{ searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
{
return <CatalogNavigationItemView key={ index } node={ n } />;
})}
{ !searchResult &&
<CatalogNavigationSetView node={ node } /> }
</Grid>
</AutoGrid>
</Column>
</>
);

4
src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
View File

@ -17,7 +17,7 @@ interface CatalogBadgeSelectorWidgetViewProps extends AutoGridProps
export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewProps> = props =>
{
const { grow = true, columnCount = 5, overflow = 'auto', ...rest } = props;
const { columnCount = 5, ...rest } = props;
const [ badges, setBadges ] = useState<string[]>([]);
const [ currentBadge, setCurrentBadge ] = useState<string>(null);
const { currentOffer = null, setPurchaseOptions = null } = useCatalogContext();
@ -59,7 +59,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
}, []);
return (
<AutoGrid grow={ grow } columnCount={ columnCount } overflow={ overflow } { ...rest }>
<AutoGrid columnCount={ columnCount } { ...rest }>
{ badges && (badges.length > 0) && badges.map(code =>
{
return (

4
src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
View File

@ -10,13 +10,13 @@ interface CatalogBundleGridWidgetViewProps extends AutoGridProps
export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> = props =>
{
const { children = null, ...rest } = props;
const { columnCount = 5, children = null, ...rest } = props;
const { currentOffer = null } = useCatalogContext();
if(!currentOffer) return null;
return (
<AutoGrid grow columnCount={ 5 } overflow="auto" { ...rest }>
<AutoGrid columnCount={ 5 } { ...rest }>
{ currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
{ children }
</AutoGrid>

2
src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
View File

@ -92,7 +92,7 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
{
return (
<Column fit overflow="hidden" className="bg-muted p-2 rounded">
<AutoGrid fullWidth grow columnCount={ 4 } overflow="auto" className="nitro-catalog-layout-bundle-grid">
<AutoGrid fullWidth columnCount={ 4 } className="nitro-catalog-layout-bundle-grid">
{ (currentOffer.products.length > 0) && currentOffer.products.map((product, index) =>
{
return <LayoutGridItem key={ index } itemImage={ product.getIconUrl(currentOffer) } itemCount={ product.productCount } />;