Skip to content

Commit 9b28382

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents e455eb4 + c95d43f commit 9b28382

37 files changed

+391
-175
lines changed

Diff for: ‎demo/src/screens/MenuStructure.js

+1
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export const navigationData = {
114114
{title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
115115
{title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
116116
{title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
117+
{title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
117118
{title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
118119
{
119120
title: 'withScrollEnabler',

Diff for: ‎demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -3521,8 +3521,8 @@ exports[`TextField Screen renders screen 1`] = `
35213521
"marginLeft": 20,
35223522
"minWidth": 66,
35233523
"opacity": 1,
3524-
"paddingHorizontal": 10,
3525-
"paddingVertical": 2,
3524+
"paddingHorizontal": 11,
3525+
"paddingVertical": 3,
35263526
}
35273527
}
35283528
>

Diff for: ‎demo/src/screens/componentScreens/GridViewScreen.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ class GridViewScreen extends Component {
1212
_.map(contacts, contact => ({
1313
imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
1414
title: _.split(contact.name, ' ')[0],
15+
titleLines: 1,
1516
onPress: () => Alert.alert('My name is ' + contact.name)
1617
})))(conversations),
1718
products: _.flow(products => _.take(products, 8),
@@ -174,7 +175,7 @@ class GridViewScreen extends Component {
174175
<GridView items={pairs} numColumns={2}/>
175176
<Text marginV-s5 text60BO>
176177
Dynamic itemSize
177-
<Text text90> (Using maxItemWidth)</Text>
178+
<Text text90> (Using maxItemWidth)</Text>
178179
</Text>
179180
<GridView items={dynamicLayout} maxItemWidth={120}/>
180181
<Text marginV-s5 text60BO>

Diff for: ‎demo/src/screens/componentScreens/NumberInputScreen.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ const NumberInputScreen = () => {
111111
if (currentData.current?.type === 'valid') {
112112
return currentData.current.number > MINIMUM_PRICE;
113113
}
114+
return false;
114115
}, []);
115116

116117
const isWithinDiscountPercentage = useCallback(() => {
@@ -119,6 +120,7 @@ const NumberInputScreen = () => {
119120
currentData.current.number >= DISCOUNT_PERCENTAGE.min && currentData.current.number <= DISCOUNT_PERCENTAGE.max
120121
);
121122
}
123+
return false;
122124
}, []);
123125

124126
const validate = useMemo((): Incubator.TextFieldProps['validate'] => {

Diff for: ‎demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, {Component} from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {View, Text, Card, Image, TabController} from 'react-native-ui-lib';
4+
import _ from 'lodash';
5+
6+
const IMAGE_URL =
7+
'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=500&dpr=1';
8+
const items = [
9+
{key: 'tab1', label: 'Tab 1'},
10+
{key: 'tab2', label: 'Tab 2'}
11+
];
12+
13+
export default class TabControllerWithStickyHeaderScreen extends Component {
14+
renderHeader = () => {
15+
return (
16+
<View bg-red30 height={280} bottom>
17+
<Image source={{uri: IMAGE_URL}} style={{flex: 1}}/>
18+
</View>
19+
);
20+
};
21+
22+
renderTab1 = () => {
23+
return (
24+
<View bg-green80 paddingT-s5>
25+
{_.times(7, i => {
26+
return (
27+
<Card key={i} height={100} marginB-s5 marginH-s5 center>
28+
<Text text40>item {i}</Text>
29+
</Card>
30+
);
31+
})}
32+
</View>
33+
);
34+
};
35+
36+
renderTab2 = () => {
37+
return (
38+
<View bg-orange40 paddingT-s5>
39+
{_.times(15, i => {
40+
return (
41+
<View key={i} height={100} marginB-s5 marginH-s5 center bg-orange60>
42+
<Text text40> item {i}</Text>
43+
</View>
44+
);
45+
})}
46+
</View>
47+
);
48+
};
49+
50+
render() {
51+
return (
52+
<TabController items={items} nestedInScrollView>
53+
<ScrollView
54+
// stickyHeaderHiddenOnScroll
55+
stickyHeaderIndices={[1]}
56+
>
57+
{this.renderHeader()}
58+
<TabController.TabBar/>
59+
60+
<View flex>
61+
<TabController.TabPage index={0}>{this.renderTab1()}</TabController.TabPage>
62+
<TabController.TabPage index={1}>{this.renderTab2()}</TabController.TabPage>
63+
</View>
64+
</ScrollView>
65+
</TabController>
66+
);
67+
}
68+
}

Diff for: ‎demo/src/screens/componentScreens/index.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function registerScreens(registrar) {
1515
registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
1616
registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
1717
registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
18-
registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
18+
registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
1919
registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
2020
registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
2121
registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +28,7 @@ export function registerScreens(registrar) {
2828
registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
2929
registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
3030
registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
31-
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
31+
registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
3232
registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
3333
registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
3434
registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +38,12 @@ export function registerScreens(registrar) {
3838
registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
3939
registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
4040
registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
41-
registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
41+
registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
4242
registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
4343
registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
4444
registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
4545
registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
46-
registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
46+
registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
4747
registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
4848
registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
4949
registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -55,6 +55,7 @@ export function registerScreens(registrar) {
5555
registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
5656
registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
5757
registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
58+
registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
5859
registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
5960
registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
6061
registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);

Diff for: ‎demo/src/screens/incubatorScreens/PanViewScreen.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,8 @@ class PanViewScreen extends Component {
146146

147147
render() {
148148
const {showToast, showDialog} = this.state;
149-
const Container = showDialog ? View : GestureHandlerRootView;
150149
return (
151-
<Container style={styles.root}>
150+
<GestureHandlerRootView style={styles.root}>
152151
<View marginL-page height={50} centerV>
153152
<Text text50>New Pan View</Text>
154153
</View>
@@ -164,7 +163,7 @@ class PanViewScreen extends Component {
164163
</ScrollView>
165164
{showToast && this.renderToast()}
166165
{showDialog && this.renderDialog()}
167-
</Container>
166+
</GestureHandlerRootView>
168167
);
169168
}
170169
}

Diff for: ‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,12 @@
106106
"react-dom": "^18.2.0",
107107
"react-native": "0.71.12",
108108
"react-native-fs": "^2.20.0",
109-
"react-native-gesture-handler": "2.9.0",
109+
"react-native-gesture-handler": "2.14.1",
110110
"react-native-haptic-feedback": "^1.11.0",
111111
"react-native-linear-gradient": "2.6.2",
112112
"react-native-mmkv": "2.11.0",
113113
"react-native-navigation": "7.32.1",
114-
"react-native-reanimated": "3.4.0",
114+
"react-native-reanimated": "3.8.1",
115115
"react-native-shimmer-placeholder": "^2.0.6",
116116
"react-native-svg": "^13.7.0",
117117
"react-native-svg-transformer": "1.1.0",

Diff for: ‎src/components/WheelPicker/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
349349

350350
return (
351351
<View testID={testID} bg-$backgroundDefault style={style}>
352+
{separators}
352353
<View row centerH>
353354
<View flexG>
354355
<AnimatedFlatList
@@ -383,7 +384,6 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
383384
{label && labelContainer}
384385
{fader(FaderPosition.BOTTOM)}
385386
{fader(FaderPosition.TOP)}
386-
{separators}
387387
</View>
388388
);
389389
};

Diff for: ‎src/components/button/Button.driver.new.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {StyleSheet} from 'react-native';
12
import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
23

34
export const ButtonDriver = (props: ComponentProps) => {
@@ -17,9 +18,17 @@ export const ButtonDriver = (props: ComponentProps) => {
1718
return labelDriver;
1819
};
1920

21+
const getLabelStyle = () => {
22+
return labelDriver?.getStyle();
23+
};
24+
2025
const getIcon = () => {
2126
return iconDriver;
2227
};
2328

24-
return {getLabel, getIcon, ...driver};
29+
const getIconStyle = () => {
30+
return StyleSheet.flatten(iconDriver?.getElement().props.style);
31+
};
32+
33+
return {getLabel, getLabelStyle, getIconStyle, getIcon, ...driver};
2534
};

Diff for: ‎src/components/button/__tests__/__snapshots__/index.spec.js.snap

+20-20
Original file line numberDiff line numberDiff line change
@@ -482,8 +482,8 @@ exports[`Button backgroundColor should return undefined if this button is outlin
482482
"justifyContent": "center",
483483
"minWidth": 90,
484484
"opacity": 1,
485-
"paddingHorizontal": 19,
486-
"paddingVertical": 8.5,
485+
"paddingHorizontal": 20,
486+
"paddingVertical": 9.5,
487487
}
488488
}
489489
>
@@ -1230,8 +1230,8 @@ exports[`Button container size should reduce padding by outlineWidth in case of
12301230
"justifyContent": "center",
12311231
"minWidth": 90,
12321232
"opacity": 1,
1233-
"paddingHorizontal": 18,
1234-
"paddingVertical": 7.5,
1233+
"paddingHorizontal": 20,
1234+
"paddingVertical": 9.5,
12351235
}
12361236
}
12371237
>
@@ -1408,8 +1408,8 @@ exports[`Button container size should return style for large button 2`] = `
14081408
"justifyContent": "center",
14091409
"minWidth": 90,
14101410
"opacity": 1,
1411-
"paddingHorizontal": 19,
1412-
"paddingVertical": 8.5,
1411+
"paddingHorizontal": 20,
1412+
"paddingVertical": 9.5,
14131413
}
14141414
}
14151415
>
@@ -1591,8 +1591,8 @@ exports[`Button container size should return style for medium button 2`] = `
15911591
"justifyContent": "center",
15921592
"minWidth": 77,
15931593
"opacity": 1,
1594-
"paddingHorizontal": 15,
1595-
"paddingVertical": 5.5,
1594+
"paddingHorizontal": 16,
1595+
"paddingVertical": 6.5,
15961596
}
15971597
}
15981598
>
@@ -1867,8 +1867,8 @@ exports[`Button container size should return style for small button 2`] = `
18671867
"justifyContent": "center",
18681868
"minWidth": 70,
18691869
"opacity": 1,
1870-
"paddingHorizontal": 13,
1871-
"paddingVertical": 3.5,
1870+
"paddingHorizontal": 14,
1871+
"paddingVertical": 4.5,
18721872
}
18731873
}
18741874
>
@@ -2055,8 +2055,8 @@ exports[`Button container size should return style for xSmall button 2`] = `
20552055
"justifyContent": "center",
20562056
"minWidth": 66,
20572057
"opacity": 1,
2058-
"paddingHorizontal": 10,
2059-
"paddingVertical": 2,
2058+
"paddingHorizontal": 11,
2059+
"paddingVertical": 3,
20602060
}
20612061
}
20622062
>
@@ -4191,8 +4191,8 @@ exports[`Button outline should render button with an outline 1`] = `
41914191
"justifyContent": "center",
41924192
"minWidth": 90,
41934193
"opacity": 1,
4194-
"paddingHorizontal": 19,
4195-
"paddingVertical": 8.5,
4194+
"paddingHorizontal": 20,
4195+
"paddingVertical": 9.5,
41964196
}
41974197
}
41984198
>
@@ -4371,8 +4371,8 @@ exports[`Button outline should render button with outline and outlineColor 1`] =
43714371
"justifyContent": "center",
43724372
"minWidth": 90,
43734373
"opacity": 1,
4374-
"paddingHorizontal": 19,
4375-
"paddingVertical": 8.5,
4374+
"paddingHorizontal": 20,
4375+
"paddingVertical": 9.5,
43764376
}
43774377
}
43784378
>
@@ -4461,8 +4461,8 @@ exports[`Button outline should return custom borderWidth according to outlineWid
44614461
"justifyContent": "center",
44624462
"minWidth": 90,
44634463
"opacity": 1,
4464-
"paddingHorizontal": 17,
4465-
"paddingVertical": 6.5,
4464+
"paddingHorizontal": 20,
4465+
"paddingVertical": 9.5,
44664466
}
44674467
}
44684468
>
@@ -4551,8 +4551,8 @@ exports[`Button outline should return disabled color for outline if button is di
45514551
"justifyContent": "center",
45524552
"minWidth": 90,
45534553
"opacity": 1,
4554-
"paddingHorizontal": 19,
4555-
"paddingVertical": 8.5,
4554+
"paddingHorizontal": 20,
4555+
"paddingVertical": 9.5,
45564556
}
45574557
}
45584558
>

Diff for: ‎src/components/button/index.tsx

+1-20
Original file line numberDiff line numberDiff line change
@@ -149,16 +149,8 @@ class Button extends PureComponent<Props, ButtonState> {
149149
}
150150

151151
getContainerSizeStyle() {
152-
const {
153-
outline,
154-
avoidMinWidth,
155-
avoidInnerPadding,
156-
round,
157-
size: propsSize,
158-
outlineWidth: propsOutlineWidth
159-
} = this.props;
152+
const {avoidMinWidth, avoidInnerPadding, round, size: propsSize} = this.props;
160153
const size = propsSize || DEFAULT_SIZE;
161-
const outlineWidth = propsOutlineWidth || 1;
162154

163155
const CONTAINER_STYLE_BY_SIZE: Dictionary<any> = {};
164156
CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round
@@ -190,17 +182,6 @@ class Button extends PureComponent<Props, ButtonState> {
190182
minWidth: MIN_WIDTH.LARGE
191183
};
192184

193-
if (outline) {
194-
_.forEach(CONTAINER_STYLE_BY_SIZE, style => {
195-
if (round) {
196-
style.padding -= outlineWidth; // eslint-disable-line
197-
} else {
198-
style.paddingVertical -= outlineWidth; // eslint-disable-line
199-
style.paddingHorizontal -= outlineWidth; // eslint-disable-line
200-
}
201-
});
202-
}
203-
204185
const containerSizeStyle = CONTAINER_STYLE_BY_SIZE[size];
205186

206187
if (this.isLink || (this.isIconButton && !round)) {

Diff for: ‎src/components/chip/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type ChipProps = ViewProps &
1717
/**
1818
* Chip's size. Number or a width and height object.
1919
*/
20-
size?: number | {width: number; height: number};
20+
size?: number | Partial<{width: number; height: number}>;
2121
/**
2222
* On Chip press callback
2323
*/

0 commit comments

Comments
 (0)