Fix issue with GridView lastItemOverlayColor error when undefined (#1900)

* Fix issue with GridView lastItemOverlayColor error when undefined

* Update code snippet of GridView

Author: ethanshar

demo/src/screens/componentScreens/GridViewScreen.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {View, Text, Image, Colors, Constants, Avatar, GridView, Shadows, Card} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Constants, Avatar, GridView, Card} from 'react-native-ui-lib';
 import React, {Component} from 'react';
 import {Alert, ScrollView} from 'react-native';
 import conversations from '../../data/conversations';
@@ -153,7 +153,7 @@ class GridViewScreen extends Component {
             items={contacts}
             // viewWidth={300}
             numColumns={6}
-            lastItemOverlayColor={Colors.primary}
+            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
             lastItemLabel={7}
           />
 
@@ -163,7 +163,7 @@ class GridViewScreen extends Component {
           <GridView
             items={products}
             numColumns={4}
-            lastItemOverlayColor={Colors.primary}
+            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
             lastItemLabel={42}
             keepItemSize
           />

generatedTypes/src/components/gridView/index.d.ts

@@ -73,7 +73,6 @@ declare class GridView extends UIComponent<GridViewProps, GridViewState> {
     getGridContainerWidth(): number;
     calcNumberOfColumns(): number;
     calcItemSize(): number;
-    getThemeColor(placeColor: string): any;
     renderLastItemOverlay(): JSX.Element | undefined;
     renderItem: (item: GridListItemProps, index: number) => JSX.Element;
     render(): JSX.Element;

src/components/gridView/gridView.api.json

@@ -30,6 +30,7 @@
     " items={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}, ]$1}",
     " numColumns={2$2}",
     " lastItemLabel={'+'$3}",
+    " lastItemOverlayColor={'Colors.rgba(Colors.blue30)'$4}",
     "/>"
   ]
 }

src/components/gridView/index.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, Spacings} from 'style';
+import {Spacings} from 'style';
 // TODO: we should use asBaseComponent here instead of using UIComponent directly
 import UIComponent from '../../commons/UIComponent';
 import View from '../view';
@@ -145,19 +145,8 @@ class GridView extends UIComponent<GridViewProps, GridViewState> {
     return (containerWidth - itemSpacing * (numColumns - 1)) / numColumns;
   }
 
-  getThemeColor(placeColor: string) {
-    if (_.toLower(placeColor) === _.toLower(Colors.white)) {
-      return Colors.black;
-    } else if (Colors.isDark(placeColor)) {
-      return placeColor;
-    } else {
-      return Colors.getColorTint(placeColor, 30);
-    }
-  }
-
   renderLastItemOverlay() {
-    const {lastItemLabel, items} = this.props;
-    const overlayColor = this.getThemeColor(this.props.lastItemOverlayColor ?? '');
+    const {lastItemLabel, items, lastItemOverlayColor} = this.props;
     const formattedLabel = formatLastItemLabel(lastItemLabel, {shouldAddPlus: true});
 
     if (!lastItemLabel) {
@@ -166,12 +155,7 @@ class GridView extends UIComponent<GridViewProps, GridViewState> {
 
     const imageBorderRadius = _.flow(_.first, item => _.get(item, 'imageProps.borderRadius'))(items);
     return (
-      <View
-        style={[
-          styles.overlayContainer,
-          {backgroundColor: Colors.rgba(overlayColor, 0.6), borderRadius: imageBorderRadius}
-        ]}
-      >
+      <View style={[styles.overlayContainer, {backgroundColor: lastItemOverlayColor, borderRadius: imageBorderRadius}]}>
         <Text mainBold white>
           {formattedLabel}
         </Text>