Fix GridView and GridListItem folder names and add exports for the component

Author: ethanshar

demo/src/screens/componentScreens/GridViewScreen.tsx

@@ -1,12 +1,10 @@
 import _ from 'lodash';
-import {View, Text, Colors, Constants, Avatar} from 'react-native-ui-lib';
+import {View, Text, Colors, Constants, Avatar, GridView} from 'react-native-ui-lib';
 import React, {Component} from 'react';
 import {Alert, ScrollView} from 'react-native';
-import GridView from '../../../../src/components/GridView';
 import conversations from '../../data/conversations';
 import products from '../../data/products';
 
-
 class GridViewScreen extends Component {
   state = {
     contacts: _.chain(conversations)
@@ -26,12 +24,7 @@ class GridViewScreen extends Component {
         onPress: () => Alert.alert('My price is ' + product.formattedPrice),
         renderOverlay: () => {
           if (index < 7) {
-            return (
-              <Text
-                text={product.price}
-                style={{alignSelf: 'center', marginTop: 3}}
-              />
-            );
+            return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
           }
         }
       }))
@@ -94,18 +87,17 @@ class GridViewScreen extends Component {
         renderOverlay: () => {
           if (index === 0) {
             return (
-              <Text
-                margin-10 text80BO
-                style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}
-              >{product.formattedPrice}</Text>
+              <Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
+                {product.formattedPrice}
+              </Text>
             );
           }
         }
       }))
       .value(),
     avatars: _.chain(conversations)
       .take(9)
-      .map((item) => ({
+      .map(item => ({
         renderCustomItem: () => {
           const imageElementElement = item.thumbnail;
           return (
@@ -168,27 +160,15 @@ class GridViewScreen extends Component {
           <Text margin-30 text60BO>
             Pairs
           </Text>
-          <GridView
-            items={pairs}
-            numColumns={2}
-            useCustomTheme
-          />
+          <GridView items={pairs} numColumns={2} useCustomTheme/>
           <Text margin-30 text60BO>
             Dynamic itemSize
           </Text>
-          <GridView
-            items={dynamicLayout}
-            numColumns={2}
-            useCustomTheme
-          />
+          <GridView items={dynamicLayout} numColumns={2} useCustomTheme/>
           <Text margin-30 text60BO>
             OverlayText
           </Text>
-          <GridView
-            items={overlayText}
-            numColumns={2}
-            useCustomTheme
-          />
+          <GridView items={overlayText} numColumns={2} useCustomTheme/>
           <Text margin-30 text60BO>
             Custom content (Avatars)
           </Text>

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

@@ -8,7 +8,7 @@ import Text from '../text';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Image, {ImageProps} from '../image';
 
-export interface GridItemProps {
+export interface GridListItemProps {
   /**
    * Image props object for rendering an image item
    */
@@ -112,7 +112,7 @@ interface RenderContentType {
  * @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 Component<GridItemProps> {
+class GridListItem extends Component<GridListItemProps> {
   static displayName = 'GridListItem';
 
   static defaultProps = {

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

@@ -7,14 +7,14 @@ import {Colors, Spacings} from 'style';
 import View from '../view';
 import Text from '../text';
 import {Constants} from 'helpers';
-import GridListItem, {GridItemProps} from '../GridListItem';
+import GridListItem, {GridListItemProps} from '../gridListItem';
 import {formatLastItemLabel} from '../../helpers/FormattingPresenter';
 
-interface Props {
+export interface GridViewProps {
   /**
    * The list of items based on GridListItem props
    */
-  items?: GridItemProps[];
+  items?: GridListItemProps[];
   /**
    * pass the desired grid view width (will improve loading time)
    */
@@ -48,12 +48,12 @@ interface State {
 }
 
 
-type ExistProps = Props & State
+type ExistProps = GridViewProps & State
 /**
  * @description: A auto-generated grid view that calculate item size according to given props
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
  */
-class GridView extends UIComponent<Props, State> {
+class GridView extends UIComponent<GridViewProps, State> {
   static displayName = 'GridView';
 
   static defaultProps = {
@@ -171,7 +171,7 @@ class GridView extends UIComponent<Props, State> {
     );
   }
 
-  renderItem = (item: GridItemProps, index: number) => {
+  renderItem = (item: GridListItemProps, index: number) => {
     const {items, itemSpacing} = this.props;
     const {numColumns} = this.state;
     const itemsCount = _.size(items);

src/index.js

@@ -66,6 +66,12 @@ export default {
   get FeatureHighlight() {
     return require('./components/featureHighlight').default;
   },
+  get GridListItem() {
+    return require('./components/gridListItem').default;
+  },
+  get GridView() {
+    return require('./components/gridView').default;
+  },
   get Hint() {
     return require('./components/hint').default;
   },

src/index.ts

@@ -37,6 +37,8 @@ export {default as ColorPicker, ColorPickerProps} from './components/colorPicker
 export {default as ColorPalette, ColorPaletteProps} from './components/colorPicker/ColorPalette';
 export {default as ColorSwatch, ColorSwatchProps} from './components/colorPicker/ColorSwatch';
 export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
+export {default as GridListItem, GridListItemProps} from './components/gridListItem';
+export {default as GridView, GridViewProps} from './components/gridView';
 export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes, RadioButtonProps} from './components/radioButton';