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

Add highlight option to grid items

Browse Source
This commit is contained in:
Bill 2022-02-22 00:24:45 -05:00
parent 5f28cf65c1
commit b86e468eef
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/common/index.scss
View File

@ -6,7 +6,7 @@
&.active { &.active {
border-color: $grid-active-border-color !important; border-color: $grid-active-border-color !important;
background-color: $grid-active-bg-color !important; background-color: $grid-active-bg-color;
} }
&.disabled { &.disabled {
@ -25,4 +25,19 @@
.avatar-image { .avatar-image {
background-position-y: -35px; background-position-y: -35px;
} }
&.has-highlight {
&:after {
content: "";
z-index: 2;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background-color: $white;
opacity: 0.1;
}
}
} }

7
src/common/layout/LayoutGridItem.tsx
View File

@ -14,12 +14,13 @@ export interface LayoutGridItemProps extends ColumnProps
itemUniqueSoldout?: boolean; itemUniqueSoldout?: boolean;
itemUniqueNumber?: number; itemUniqueNumber?: number;
itemUnseen?: boolean; itemUnseen?: boolean;
itemHighlight?: boolean;
disabled?: boolean; disabled?: boolean;
} }
export const LayoutGridItem: FC<LayoutGridItemProps> = props => export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
{ {
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props; const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
@ -33,6 +34,8 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
if(itemUnseen) newClassNames.push('unseen'); if(itemUnseen) newClassNames.push('unseen');
if(itemHighlight) newClassNames.push('has-highlight');
if(disabled) newClassNames.push('disabled') if(disabled) newClassNames.push('disabled')
if(itemImage === null) newClassNames.push('icon', 'loading-icon'); if(itemImage === null) newClassNames.push('icon', 'loading-icon');
@ -40,7 +43,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
if(classNames.length) newClassNames.push(...classNames); if(classNames.length) newClassNames.push(...classNames);
return newClassNames; return newClassNames;
}, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, disabled, itemImage, classNames ]); }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemHighlight, disabled, itemImage, classNames ]);
const getStyle = useMemo(() => const getStyle = useMemo(() =>
{ {