Fix imports in GridView and GridListItem components

Author: ethanshar

src/components/GridListItem/index.tsx renamed to src/components/gridListItem_/index.tsx

@@ -1,16 +1,11 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
-import {
-  BaseComponent,
-  Colors,
-  Spacings,
-  Text,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  Typography,
-  View
-} from 'react-native-ui-lib';
 import _ from 'lodash';
+import * as Modifiers from '../../commons/modifiers';
+import {Colors, Spacings, Typography} from 'style';
+import View from '../view';
+import Text from '../text';
+import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Image, {ImageProps} from '../image';
 
 export interface GridItemProps {
@@ -109,16 +104,15 @@ interface RenderContentType {
   typography?: string;
   color?: string;
   numberOfLines?: number;
-  style?: StyleProp<ViewStyle>,
-  testID?: string
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 /**
  * @description: A single grid view/list item component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
  */
-class GridListItem extends BaseComponent<GridItemProps> {
-
+class GridListItem extends Component<GridItemProps> {
   static displayName = 'GridListItem';
 
   static defaultProps = {
@@ -195,15 +189,14 @@ class GridListItem extends BaseComponent<GridItemProps> {
         style={[styles.container, alignToStart && styles.containerAlignedToStart, {width}, containerStyle]}
         onPress={hasPress ? this.onItemPress : undefined}
         accessible={renderCustomItem ? true : undefined}
-        {...this.extractAccessibilityProps()}
+        {...Modifiers.extractAccessibilityProps(this.props)}
       >
-        {imageProps &&
-        <View
-          style={[{borderRadius: imageBorderRadius}, imageStyle]}
-        >
-          <Image style={imageStyle} {...imageProps}/>
-          {children}
-        </View>}
+        {imageProps && (
+          <View style={[{borderRadius: imageBorderRadius}, imageStyle]}>
+            <Image style={imageStyle} {...imageProps}/>
+            {children}
+          </View>
+        )}
         {!_.isNil(renderCustomItem) && <View style={{width}}>{renderCustomItem()}</View>}
         {hasOverlay && <View style={[styles.overlay, this.getItemSizeObj()]}>{renderOverlay?.()}</View>}
         <TextContainer {...textContainerStyle}>

src/components/GridView/index.tsx renamed to src/components/gridView_/index.tsx

@@ -1,7 +1,12 @@
 import _ from 'lodash';
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {Colors, Constants, Spacings, Text, UIComponent, View} from 'react-native-ui-lib';
+// TODO: we should use asBaseComponent here instead of using UIComponent directly
+import {UIComponent} from 'react-native-ui-lib';
+import {Colors, Spacings} from 'style';
+import View from '../view';
+import Text from '../text';
+import {Constants} from 'helpers';
 import GridListItem, {GridItemProps} from '../GridListItem';
 import {formatLastItemLabel} from '../../helpers/FormattingPresenter';