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

Catalog updates

Browse Source
This commit is contained in:
Bill 2022-08-18 00:01:13 -04:00
parent dd728d2401
commit 46ff82940e
3 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/catalog/CatalogView.scss
View File

@ -89,8 +89,7 @@
.icon-hc-banner {
width: 68px;
height: 40px;
background: url("../../assets/images/catalog/hc_big.png") center
no-repeat;
background: url("../../assets/images/catalog/hc_big.png") center no-repeat;
}
}
}
@ -122,10 +121,4 @@
.nitro-catalog-header {
width: 290px;
height: 60px;
align-self: center;
display: flex;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}

33
src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
View File

@ -1,33 +1,26 @@
import { FC, useEffect, useMemo, useRef } from 'react';
import { FC, useEffect, useState } from 'react';
import { GetConfiguration } from '../../../../api';
import { Base } from '../../../../common';
import { Flex } from '../../../../common';
export interface CatalogHeaderViewProps
{
image?: string;
imageUrl?: string;
}
export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
{
let { image = null } = props;
const { imageUrl = null } = props;
const [ displayImageUrl, setDisplayImageUrl ] = useState('');
const imageEl = useRef<HTMLImageElement>();
const fallback = useMemo(()=>
useEffect(() =>
{
return ((GetConfiguration<string>('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder'));
},[])
setDisplayImageUrl(imageUrl ?? GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder'));
}, [ imageUrl ]);
useEffect(()=>
{
if(image == null && imageEl !== null) imageEl.current.src = fallback;
},[ image, imageEl,fallback ])
return <Base className="nitro-catalog-header">
<img ref={ imageEl } src={ image } onError={ ({ currentTarget }) =>
return <Flex center shrink className="nitro-catalog-header">
<img src={ displayImageUrl } onError={ ({ currentTarget }) =>
{
currentTarget.src = fallback;
}
} />
</Base>;
currentTarget.src = GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
} } />
</Flex>;
}

56
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { GetConfiguration, ProductTypeEnum } from '../../../../../api';
import { Column, Flex, Grid, Text } from '../../../../../common';
import { Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
import { useCatalog } from '../../../../../hooks';
import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
@ -15,43 +15,45 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
{
const { page = null } = props;
const { currentOffer = null,currentPage } = useCatalog();
const { currentOffer = null, currentPage = null } = useCatalog();
return (
<>
<Grid>
<Column size={ 7 } overflow="hidden">
{ GetConfiguration('catalog.headers') && <CatalogHeaderView image={ currentPage.localization.getImage(0) }/> }
{ GetConfiguration('catalog.headers') &&
<CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
<CatalogItemGridWidgetView />
</Column>
<Column center={ !currentOffer } size={ 5 } overflow="hidden">
{ !currentOffer &&
<>
{ !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
<Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
</> }
<>
{ !!page.localization.getImage(1) &&
<LayoutImage imageUrl={ page.localization.getImage(1) } /> }
<Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
</> }
{ currentOffer &&
<>
<Flex center overflow="hidden" style={ { height: 140 } }>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<>
<CatalogViewProductWidgetView />
<CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
</> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
</Flex>
<Column grow gap={ 1 }>
<Text grow truncate>{ currentOffer.localizationName }</Text>
<Flex justifyContent="between">
<Column gap={ 1 }>
<CatalogSpinnerWidgetView />
</Column>
<CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
<>
<Flex center overflow="hidden" style={ { height: 140 } }>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<>
<CatalogViewProductWidgetView />
<CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
</> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
</Flex>
<CatalogPurchaseWidgetView />
</Column>
</> }
<Column grow gap={ 1 }>
<Text grow truncate>{ currentOffer.localizationName }</Text>
<Flex justifyContent="between">
<Column gap={ 1 }>
<CatalogSpinnerWidgetView />
</Column>
<CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
</Flex>
<CatalogPurchaseWidgetView />
</Column>
</> }
</Column>
</Grid>
</>