Skip to content

Commit f710846

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents 5d79cb8 + 9fc096a commit f710846

36 files changed

+212
-132
lines changed

‎demo/src/screens/componentScreens/GridListScreen.tsx‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,76 @@
11
import React, {Component} from 'react';
22
import {StyleSheet} from 'react-native';
3-
import {View, Text, Constants, GridList, Card, Spacings, BorderRadiuses, GridListProps} from 'react-native-ui-lib';
3+
import {
4+
View,
5+
Text,
6+
Constants,
7+
GridList,
8+
Card,
9+
Spacings,
10+
BorderRadiuses,
11+
GridListProps,
12+
GridListItem
13+
} from 'react-native-ui-lib';
414
import products from '../../data/products';
15+
import {renderBooleanOption} from '../ExampleScreenPresenter';
516

617
class GridListScreen extends Component {
718
state = {
8-
orientation: Constants.orientation
19+
orientation: Constants.orientation,
20+
useGridListItem: false
921
};
1022

11-
renderItem: GridListProps<typeof products[0]>['renderItem'] = ({item}) => {
23+
renderHeader = () => {
1224
return (
13-
<Card flex>
14-
<Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
15-
<View padding-s2>
16-
<Text $textDefault>{item.name}</Text>
17-
<Text $textDefault>{item.formattedPrice}</Text>
18-
{item.inventory.status === 'Out of Stock' && (
19-
<Text text90M $textDangerLight>
20-
{item.inventory.status}
21-
</Text>
22-
)}
23-
</View>
24-
</Card>
25+
<View>
26+
<Text h1 marginB-s5>
27+
GridList
28+
</Text>
29+
{renderBooleanOption.call(this, 'UseGridListItem', 'useGridListItem')}
30+
</View>
2531
);
2632
};
2733

34+
renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({item}) => {
35+
const {useGridListItem} = this.state;
36+
37+
if (useGridListItem) {
38+
return (
39+
<GridListItem
40+
// containerStyle={{width: '100%', borderWidth: 1}}
41+
itemSize={{width: '100%', height: 200}}
42+
imageProps={{source: {uri: item.mediaUrl}}}
43+
title="Title"
44+
subtitle="Subitle"
45+
overlayText
46+
/>
47+
);
48+
} else {
49+
return (
50+
<Card flex>
51+
<Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
52+
<View padding-s2>
53+
<Text $textDefault>{item.name}</Text>
54+
<Text $textDefault>{item.formattedPrice}</Text>
55+
{item.inventory.status === 'Out of Stock' && (
56+
<Text text90M $textDangerLight>
57+
{item.inventory.status}
58+
</Text>
59+
)}
60+
</View>
61+
</Card>
62+
);
63+
}
64+
};
65+
2866
render() {
2967
return (
30-
<GridList<typeof products[0]>
31-
ListHeaderComponent={
32-
<Text h1 marginB-s5>
33-
GridList
34-
</Text>
35-
}
68+
<GridList<(typeof products)[0]>
69+
ListHeaderComponent={() => this.renderHeader()}
3670
data={products}
3771
renderItem={this.renderItem}
38-
// numColumns={2}
39-
maxItemWidth={140}
72+
numColumns={2}
73+
// maxItemWidth={140}
4074
itemSpacing={Spacings.s3}
4175
listPadding={Spacings.s5}
4276
// keepItemSize

‎demo/src/screens/componentScreens/NumberInputScreen.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ const NumberInputScreen = () => {
152152
label,
153153
labelStyle: styles.label,
154154
style: textStyle,
155+
maxLength: 6,
155156
validate,
156157
validationMessage,
157158
validationMessageStyle: Typography.text80M,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"@types/jest": "^29.2.1",
7777
"@types/lodash": "^4.0.0",
7878
"@types/prop-types": "^15.5.3",
79-
"@types/react": "^18.2.15",
79+
"@types/react": "18.2.72",
8080
"@types/react-native": "0.71.2",
8181
"@types/tinycolor2": "^1.4.2",
8282
"@types/url-parse": "^1.4.3",

‎src/components/WheelPicker/WheelPicker.driver.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import {FlatListProps} from 'react-native';
2-
import {WheelPickerProps, WheelPickerItemProps, ITEM_HEIGHT} from './index';
1+
import {ITEM_HEIGHT} from './index';
32
import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
43
import {useScrollableDriver} from '../../testkit/new/useScrollable.driver';
54
import {TextDriver} from '../../components/text/Text.driver.new';
65

76
export const WheelPickerDriver = (props: ComponentProps) => {
8-
const driver = useComponentDriver<WheelPickerProps>(props);
7+
const driver = useComponentDriver(props);
98

10-
const listDriver = useScrollableDriver<FlatListProps<WheelPickerItemProps>>(useComponentDriver({
9+
const listDriver = useScrollableDriver(useComponentDriver({
1110
renderTree: props.renderTree,
1211
testID: `${props.testID}.list`
1312
}));
1413

15-
const itemsLength = listDriver.getProps().data?.length ?? 0;
14+
const itemsLength = listDriver.getElement().props.data?.length ?? 0;
1615

1716
const moveToItem = (index: number, itemHeight: number = ITEM_HEIGHT, numberOfRows: number = itemsLength) => {
1817
listDriver.triggerEvent('onMomentumScrollEnd', {
@@ -23,8 +22,7 @@ export const WheelPickerDriver = (props: ComponentProps) => {
2322
};
2423

2524
const getListHeight = () => {
26-
//@ts-expect-error
27-
return listDriver.getProps().height;
25+
return listDriver.getElement().props.height;
2826
};
2927

3028
const labelDriver = TextDriver({

‎src/components/WheelPicker/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,8 @@ const WheelPicker = ({
335335
);
336336
}, []);
337337

338+
const offsets = useMemo(() => items.map((_, i) => i * itemHeight), [items, itemHeight]);
339+
338340
return (
339341
<View testID={testID} bg-$backgroundDefault style={style}>
340342
<View row centerH>
@@ -356,7 +358,7 @@ const WheelPicker = ({
356358
ref={scrollView}
357359
// @ts-expect-error
358360
contentContainerStyle={contentContainerStyle}
359-
snapToInterval={itemHeight}
361+
snapToOffsets={offsets}
360362
decelerationRate={Constants.isAndroid ? 0.98 : 'normal'}
361363
renderItem={renderItem}
362364
getItemLayout={getItemLayout}

‎src/components/button/Button.driver.new.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import {ButtonProps} from './ButtonTypes';
21
import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
32

43
export const ButtonDriver = (props: ComponentProps) => {
5-
const driver = usePressableDriver<ButtonProps>(useComponentDriver(props));
4+
const driver = usePressableDriver(useComponentDriver(props));
65

76
const labelDriver = TextDriver({
87
renderTree: props.renderTree,

‎src/components/carousel/Carousel.driver.new.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import {CarouselProps} from './types';
21
import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
32
import {useScrollableDriver, ScrollProps} from '../../testkit/new/useScrollable.driver';
43

54
export const CarouselDriver = (props: ComponentProps) => {
6-
const driver = useScrollableDriver<CarouselProps>(useComponentDriver(props));
5+
const driver = useScrollableDriver(useComponentDriver(props));
76

87
const scroll = (props: ScrollProps) => {
98
return driver.scroll(props);

‎src/components/checkbox/Checkbox.driver.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import {CheckboxProps} from './index';
21
import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
32
import {usePressableDriver} from '../../testkit/new/usePressable.driver';
43
import {TextDriver} from '../text/Text.driver.new';
54

65
export const CheckboxDriver = (props: ComponentProps) => {
7-
const driver = usePressableDriver<CheckboxProps>(useComponentDriver(props));
6+
const driver = usePressableDriver(useComponentDriver(props));
87

98
const labelDriver = TextDriver({
109
renderTree: props.renderTree,

‎src/components/floatingButton/__tests__/index.spec.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TestCase = (props) => {
1919
};
2020
export const FloatingButtonDriver = (props: ComponentProps) => {
2121
const driver = useComponentDriver(props);
22-
const getStyle = () => driver.getProps().style as ViewStyle;
22+
const getStyle = () => driver.getElement().props.style as ViewStyle;
2323
return {...driver, getStyle};
2424
};
2525

@@ -72,7 +72,7 @@ describe('FloatingButton', () => {
7272
const renderTree = render(<TestCase {...props}/>);
7373
const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
7474

75-
expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s8);
75+
expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s8);
7676
});
7777

7878
it('should have default bottom margin for both buttons', () => {
@@ -81,16 +81,16 @@ describe('FloatingButton', () => {
8181
const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
8282
const buttonDriver2 = ButtonDriver({renderTree, testID: `${TEST_ID}.secondaryButton`});
8383

84-
expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s4);
85-
expect(buttonDriver2.getProps()?.style?.marginBottom).toBe(Spacings.s7);
84+
expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
85+
expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(Spacings.s7);
8686
});
8787

8888
it('should have bottom margin that match bottomMargin prop', () => {
8989
const props = {visible: true, bottomMargin: 10};
9090
const renderTree = render(<TestCase {...props}/>);
9191
const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
9292

93-
expect(buttonDriver.getProps()?.style?.marginBottom).toBe(10);
93+
expect(buttonDriver.getElement().props.style?.marginBottom).toBe(10);
9494
});
9595

9696
it('should have bottom margin for secondary button that match bottomMarginProp', () => {
@@ -99,8 +99,8 @@ describe('FloatingButton', () => {
9999
const buttonDriver = ButtonDriver({renderTree, testID: `${TEST_ID}.button`});
100100
const buttonDriver2 = ButtonDriver({renderTree, testID: `${TEST_ID}.secondaryButton`});
101101

102-
expect(buttonDriver.getProps()?.style?.marginBottom).toBe(Spacings.s4);
103-
expect(buttonDriver2.getProps()?.style?.marginBottom).toBe(10);
102+
expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
103+
expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(10);
104104
});
105105
});
106106

‎src/components/gridList/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,19 @@ function GridList<T = any>(props: GridListProps<T>) {
1313
listPadding = 0,
1414
keepItemSize,
1515
containerWidth,
16+
style,
1617
contentContainerStyle,
1718
...others
1819
} = props;
1920

20-
const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout({
21+
const {itemContainerStyle, numberOfColumns, listStyle} = useGridLayout({
2122
numColumns,
2223
itemSpacing,
2324
maxItemWidth,
2425
listPadding,
2526
keepItemSize,
2627
containerWidth,
28+
style,
2729
contentContainerStyle
2830
});
2931

@@ -37,7 +39,10 @@ function GridList<T = any>(props: GridListProps<T>) {
3739
<FlatList
3840
key={numberOfColumns}
3941
{...others}
40-
contentContainerStyle={listContentStyle}
42+
/* NOTE: Using style instead of contentContainerStyle because of RN issue with a flatlist nested in another flatlist
43+
losing their contentContainerStyle */
44+
style={listStyle}
45+
// contentContainerStyle={listContentStyle}
4146
renderItem={_renderItem}
4247
numColumns={numberOfColumns}
4348
/>

0 commit comments

Comments
 (0)