Fix build issue and GridView typings

Author: ethanshar

generatedTypes/components/GridListItem/index.d.ts

@@ -0,0 +1,122 @@
+import React, { Component } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import { ImageProps } from '../image';
+export interface GridListItemProps {
+    /**
+     * Image props object for rendering an image item
+     */
+    imageProps?: ImageProps;
+    /**
+     * Custom GridListItem to be rendered in the GridView
+     */
+    renderCustomItem?: () => React.ReactElement;
+    /**
+     * The item size
+     */
+    itemSize?: number | ImageSize;
+    /**
+     * Title content text
+     */
+    title?: string | React.ReactElement;
+    /**
+     * Title content typography
+     */
+    titleTypography?: string;
+    /**
+     * Title content color
+     */
+    titleColor?: string;
+    /**
+     * Title content number of lines
+     */
+    titleLines?: number;
+    /**
+     * Subtitle content text
+     */
+    subtitle?: string | React.ReactElement;
+    /**
+     * Subtitle content typography
+     */
+    subtitleTypography?: string;
+    /**
+     * Subtitle content color
+     */
+    subtitleColor?: string;
+    /**
+     * Subtitle content number of lines
+     */
+    subtitleLines?: number;
+    /**
+     * Description content text
+     */
+    description?: string | React.ReactElement;
+    /**
+     * Description content typography
+     */
+    descriptionTypography?: string;
+    /**
+     * Description content color
+     */
+    descriptionColor?: string;
+    /**
+     * Description content number of lines
+     */
+    descriptionLines?: number;
+    /**
+     * Renders the title, subtitle and description inside the item
+     */
+    overlayText?: boolean;
+    /**
+     * Custom container styling for inline text
+     */
+    overlayTextContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Should content be align to start (default is center)
+     */
+    alignToStart?: boolean;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The item's action handler
+     */
+    onPress?: TouchableOpacityProps['onPress'];
+    /**
+     * Renders an overlay on top of the image
+     */
+    renderOverlay?: () => React.ReactElement;
+    /**
+     * Test ID for component
+     */
+    testID?: string;
+}
+interface RenderContentType {
+    text?: string | React.ReactElement;
+    typography?: string;
+    color?: string;
+    numberOfLines?: number;
+    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
+ */
+declare class GridListItem extends Component<GridListItemProps> {
+    static displayName: string;
+    static defaultProps: {
+        itemSize: number;
+    };
+    state: {};
+    onItemPress: () => void;
+    getItemSizeObj(): ImageSize;
+    renderContent({ text, typography, color, numberOfLines, style, testID }: RenderContentType): JSX.Element | undefined;
+    render(): JSX.Element;
+}
+export default GridListItem;
+interface ImageSize {
+    width?: number;
+    height?: number;
+}

generatedTypes/components/GridView/index.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import UIComponent from '../../commons/UIComponent';
+import { GridListItemProps } from '../gridListItem';
+export interface GridViewProps {
+    /**
+     * The list of items based on GridListItem props
+     */
+    items?: GridListItemProps[];
+    /**
+     * pass the desired grid view width (will improve loading time)
+     */
+    viewWidth?: number;
+    /**
+     * Number of items to show in a row
+     */
+    numColumns?: number;
+    /**
+     * Spacing between each item
+     */
+    itemSpacing?: number;
+    /**
+     * overlay label for the last item
+     */
+    lastItemLabel?: string | number;
+    /**
+     * color of overlay label for the last item
+     */
+    lastItemOverlayColor?: string;
+    /**
+     * whether to keep the items initial size when orientation changes,
+     * in which case the apt number of columns will be calculated automatically.
+     */
+    keepItemSize?: boolean;
+}
+interface State {
+    viewWidth: number;
+    numColumns: number;
+}
+declare 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
+ */
+declare class GridView extends UIComponent<GridViewProps, State> {
+    static displayName: string;
+    static defaultProps: {
+        numColumns: number;
+        itemSpacing: number;
+    };
+    private itemSize?;
+    constructor(props: ExistProps);
+    static getDerivedStateFromProps(nextProps: ExistProps, prevState: State): {
+        viewWidth: number;
+        numColumns: number | undefined;
+    } | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onOrientationChanged: () => void;
+    shouldUpdateItemSize(): boolean;
+    getDefaultViewWidth(): number;
+    getCalculatedNumOfColumns(): number;
+    getItemSize(): number | undefined;
+    getThemeColor(placeColor: string): any;
+    renderLastItemOverlay(): JSX.Element | undefined;
+    renderItem: (item: GridListItemProps, index: number) => JSX.Element;
+    render(): JSX.Element;
+}
+export default GridView;

generatedTypes/helpers/FormattingPresenter.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    shouldAddPlus?: boolean;
+    maxPlusLimit?: number;
+}
+export declare function formatLastItemLabel(label: string | number | undefined, options: Options): string | undefined;
+export {};

src/components/gridView/index.tsx

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