Skip to content

Commit ec7f414

Browse files
ethansharethanshar
committed
Update generatetypes for GridView
1 parent bb5099f commit ec7f414

File tree

3 files changed

+192
-0
lines changed

3 files changed

+192
-0
lines changed

‎generatedTypes/components/gridListItem/index.d.ts

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React, { Component } from 'react';
2+
import { StyleProp, ViewStyle } from 'react-native';
3+
import { TouchableOpacityProps } from '../touchableOpacity';
4+
import { ImageProps } from '../image';
5+
export interface GridListItemProps {
6+
/**
7+
* Image props object for rendering an image item
8+
*/
9+
imageProps?: ImageProps;
10+
/**
11+
* Custom GridListItem to be rendered in the GridView
12+
*/
13+
renderCustomItem?: () => React.ReactElement;
14+
/**
15+
* The item size
16+
*/
17+
itemSize?: number | ImageSize;
18+
/**
19+
* Title content text
20+
*/
21+
title?: string | React.ReactElement;
22+
/**
23+
* Title content typography
24+
*/
25+
titleTypography?: string;
26+
/**
27+
* Title content color
28+
*/
29+
titleColor?: string;
30+
/**
31+
* Title content number of lines
32+
*/
33+
titleLines?: number;
34+
/**
35+
* Subtitle content text
36+
*/
37+
subtitle?: string | React.ReactElement;
38+
/**
39+
* Subtitle content typography
40+
*/
41+
subtitleTypography?: string;
42+
/**
43+
* Subtitle content color
44+
*/
45+
subtitleColor?: string;
46+
/**
47+
* Subtitle content number of lines
48+
*/
49+
subtitleLines?: number;
50+
/**
51+
* Description content text
52+
*/
53+
description?: string | React.ReactElement;
54+
/**
55+
* Description content typography
56+
*/
57+
descriptionTypography?: string;
58+
/**
59+
* Description content color
60+
*/
61+
descriptionColor?: string;
62+
/**
63+
* Description content number of lines
64+
*/
65+
descriptionLines?: number;
66+
/**
67+
* Renders the title, subtitle and description inside the item
68+
*/
69+
overlayText?: boolean;
70+
/**
71+
* Custom container styling for inline text
72+
*/
73+
overlayTextContainerStyle?: StyleProp<ViewStyle>;
74+
/**
75+
* Should content be align to start (default is center)
76+
*/
77+
alignToStart?: boolean;
78+
/**
79+
* Custom container style
80+
*/
81+
containerStyle?: StyleProp<ViewStyle>;
82+
/**
83+
* The item's action handler
84+
*/
85+
onPress?: TouchableOpacityProps['onPress'];
86+
/**
87+
* Renders an overlay on top of the image
88+
*/
89+
renderOverlay?: () => React.ReactElement;
90+
/**
91+
* Test ID for component
92+
*/
93+
testID?: string;
94+
}
95+
interface RenderContentType {
96+
text?: string | React.ReactElement;
97+
typography?: string;
98+
color?: string;
99+
numberOfLines?: number;
100+
style?: StyleProp<ViewStyle>;
101+
testID?: string;
102+
}
103+
/**
104+
* @description: A single grid view/list item component
105+
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
106+
*/
107+
declare class GridListItem extends Component<GridListItemProps> {
108+
static displayName: string;
109+
static defaultProps: {
110+
itemSize: number;
111+
};
112+
state: {};
113+
onItemPress: () => void;
114+
getItemSizeObj(): ImageSize;
115+
renderContent({ text, typography, color, numberOfLines, style, testID }: RenderContentType): JSX.Element | undefined;
116+
render(): JSX.Element;
117+
}
118+
export default GridListItem;
119+
interface ImageSize {
120+
width?: number;
121+
height?: number;
122+
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/// <reference types="react" />
2+
import UIComponent from '../../commons/UIComponent';
3+
import { GridListItemProps } from '../gridListItem';
4+
export interface GridViewProps {
5+
/**
6+
* The list of items based on GridListItem props
7+
*/
8+
items?: GridListItemProps[];
9+
/**
10+
* pass the desired grid view width (will improve loading time)
11+
*/
12+
viewWidth?: number;
13+
/**
14+
* Number of items to show in a row
15+
*/
16+
numColumns?: number;
17+
/**
18+
* Spacing between each item
19+
*/
20+
itemSpacing?: number;
21+
/**
22+
* overlay label for the last item
23+
*/
24+
lastItemLabel?: string | number;
25+
/**
26+
* color of overlay label for the last item
27+
*/
28+
lastItemOverlayColor?: string;
29+
/**
30+
* whether to keep the items initial size when orientation changes,
31+
* in which case the apt number of columns will be calculated automatically.
32+
*/
33+
keepItemSize?: boolean;
34+
}
35+
interface State {
36+
viewWidth: number;
37+
numColumns: number;
38+
}
39+
declare type ExistProps = GridViewProps & State;
40+
/**
41+
* @description: A auto-generated grid view that calculate item size according to given props
42+
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
43+
*/
44+
declare class GridView extends UIComponent<GridViewProps, State> {
45+
static displayName: string;
46+
static defaultProps: {
47+
numColumns: number;
48+
itemSpacing: number;
49+
};
50+
private itemSize?;
51+
constructor(props: ExistProps);
52+
static getDerivedStateFromProps(nextProps: ExistProps, prevState: State): {
53+
viewWidth: number;
54+
numColumns: number | undefined;
55+
} | null;
56+
componentDidMount(): void;
57+
componentWillUnmount(): void;
58+
onOrientationChanged: () => void;
59+
shouldUpdateItemSize(): boolean;
60+
getDefaultViewWidth(): number;
61+
getCalculatedNumOfColumns(): number;
62+
getItemSize(): number | undefined;
63+
getThemeColor(placeColor: string): any;
64+
renderLastItemOverlay(): JSX.Element | undefined;
65+
renderItem: (item: GridListItemProps, index: number) => JSX.Element;
66+
render(): JSX.Element;
67+
}
68+
export default GridView;

‎generatedTypes/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export {default as ColorSwatch, ColorSwatchProps} from './components/colorPicker
4242
export {default as Drawer, DrawerProps, DrawerItemProps} from './components/drawer';
4343
export {default as FeatureHighlight, FeatureHighlightProps} from './components/featureHighlight';
4444
export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
45+
export {default as GridListItem, GridListItemProps} from './components/gridListItem';
46+
export {default as GridView, GridViewProps} from './components/gridView';
4547
export {default as Hint, HintProps} from './components/hint';
4648
export {default as Image, ImageProps} from './components/image';
4749
export {default as Overlay, OverlayTypes} from './components/overlay';

0 commit comments

Comments
 (0)