Skip to content

Commit efd051a

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 18efaaa + 3a6bb2f commit efd051a

File tree

78 files changed

+736
-566
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+736
-566
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ buck-out/
4444
\.buckd/
4545
*.keystore
4646

47-
lib/
4847
.vscode
4948

5049
# fastlane

‎demo/src/screens/ExampleScreenPresenter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ interface RadioGroupOptions {
2222
useValueAsLabel?: boolean;
2323
}
2424

25-
export function renderHeader(title: string, others: TextProps) {
25+
export function renderHeader(title: string, others?: TextProps) {
2626
return (
2727
<Text text30 $textDefault {...others}>
2828
{title}

‎demo/src/screens/MainScreen.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
88
import {
99
Assets,
1010
Colors,
11+
Spacings,
1112
View,
1213
Text,
14+
TextField,
1315
TouchableOpacity,
1416
Icon,
1517
Button,
16-
TabController,
17-
Incubator
18+
TabController
1819
} from 'react-native-ui-lib'; //eslint-disable-line
1920
import {navigationData} from './MenuStructure';
2021

21-
const {TextField} = Incubator;
2222
const settingsIcon = require('../assets/icons/settings.png');
2323
const chevronIcon = require('../assets/icons/chevronRight.png');
2424

@@ -56,8 +56,6 @@ class MainScreen extends Component {
5656
filteredNavigationData: data
5757
};
5858

59-
this.filterExplorerScreens = _.throttle(this.filterExplorerScreens, 300);
60-
6159
Navigation.events().bindComponent(this);
6260
}
6361

@@ -119,11 +117,11 @@ class MainScreen extends Component {
119117
}, 0);
120118
};
121119

122-
updateSearch = filterText => {
120+
updateSearch = _.throttle(filterText => {
123121
this.setState({filterText}, () => {
124122
this.filterExplorerScreens();
125123
});
126-
};
124+
}, 800);
127125

128126
clearSearch = () => {
129127
this.updateSearch('');
@@ -164,8 +162,8 @@ class MainScreen extends Component {
164162
return (
165163
<TextField
166164
migrate
165+
preset={null}
167166
ref={r => (this.input = r)}
168-
value={filterText}
169167
testID="uilib.search_for_component"
170168
placeholder="Search for your component..."
171169
onChangeText={this.updateSearch}
@@ -178,9 +176,9 @@ class MainScreen extends Component {
178176
text70
179177
trailingAccessory={
180178
filterText ? (
181-
<Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
179+
<Button link iconSource={Assets.icons.demo.close} $iconDefault onPress={this.clearSearch}/>
182180
) : (
183-
<Icon source={Assets.icons.demo.search}/>
181+
<Icon tintColor={Colors.$iconDefault} source={Assets.icons.demo.search}/>
184182
)
185183
}
186184
/>
@@ -204,7 +202,7 @@ class MainScreen extends Component {
204202
paddingV-s2
205203
onPress={() => this.openScreen(item)}
206204
onLongPress={() => this.setDefaultScreen(item)}
207-
activeBackgroundColor={Colors.primary}
205+
activeBackgroundColor={Colors.$backgroundPrimaryHeavy}
208206
activeOpacity={1}
209207
>
210208
<Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
@@ -230,7 +228,7 @@ class MainScreen extends Component {
230228
keyboardShouldPersistTaps="always"
231229
data={flatData}
232230
contentContainerStyle={{paddingTop: 20}}
233-
keyExtractor={(item, index) => index.toString()}
231+
keyExtractor={(_item, index) => index.toString()}
234232
renderItem={this.renderItem}
235233
/>
236234
);
@@ -299,12 +297,13 @@ const styles = StyleSheet.create({
299297
textDecorationLine: 'line-through'
300298
},
301299
searchContainer: {
302-
padding: 16,
303-
paddingBottom: 0
300+
padding: Spacings.s4,
301+
paddingBottom: 0,
302+
marginBottom: Spacings.s2
304303
},
305304
searchField: {
306-
padding: 12,
307-
backgroundColor: Colors.grey80,
305+
padding: Spacings.s3,
306+
backgroundColor: Colors.$backgroundNeutralLight,
308307
borderRadius: 8
309308
}
310309
});

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
1919

2020
render() {
2121
return (
22-
<View flex bg-grey80>
22+
<View flex bg-$backgroundNeutralLight>
2323
<PageControl
2424
containerStyle={[styles.pageControl, styles.absoluteContainer]}
2525
numOfPages={6}
2626
currentPage={this.state.currentPage}
27-
color={Colors.grey10}
27+
color={Colors.$backgroundInverted}
2828
size={15}
2929
/>
3030
<Carousel
@@ -35,7 +35,7 @@ export default class ActionBarScreen extends Component {
3535
<View style={styles.page}>
3636
<ActionBar
3737
actions={[
38-
{label: 'Delete', onPress: () => Alert.alert('delete'), red30: true},
38+
{label: 'Delete', onPress: () => Alert.alert('delete'), $textDangerLight: true},
3939
{label: 'Replace Photo', onPress: () => Alert.alert('replace photo')},
4040
{label: 'Edit', onPress: () => Alert.alert('edit')}
4141
]}
@@ -44,17 +44,17 @@ export default class ActionBarScreen extends Component {
4444

4545
<View style={styles.page}>
4646
<ActionBar
47-
backgroundColor={Colors.primary}
47+
backgroundColor={Colors.$backgroundPrimaryHeavy}
4848
actions={[
49-
{label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
50-
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},
51-
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true}
49+
{label: 'Hide', onPress: () => Alert.alert('hide'), $textDefaultLight: true},
50+
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), $textDefaultLight: true},
51+
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), $textDefaultLight: true}
5252
]}
5353
/>
5454
</View>
5555

5656
<View style={styles.page}>
57-
<ActionBar actions={[{label: 'Delete', red30: true}, {label: 'Edit'}]}/>
57+
<ActionBar actions={[{label: 'Delete', $textDangerLight: true}, {label: 'Edit'}]}/>
5858
</View>
5959

6060
<View style={styles.page}>
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
6565
<ActionBar
6666
centered
6767
actions={[
68-
{label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
69-
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
70-
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
68+
{label: 'Bold', labelStyle: {color: Colors.$textDefault, ...Typography.text60, fontWeight: '400'}},
69+
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.$textDefault}},
70+
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.$textDefault}}
7171
]}
7272
/>
7373
</View>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const examples = [
6565
icon: star,
6666
size: 14,
6767
borderWidth: 1.5,
68-
borderColor: Colors.$outlineLight,
68+
borderColor: Colors.$outlineInverted,
6969
iconStyle: {backgroundColor: Colors.$backgroundWarningHeavy}
7070
}
7171
},
@@ -107,7 +107,7 @@ const examples = [
107107
label: '+2',
108108
size: 24,
109109
borderWidth: 1.5,
110-
borderColor: Colors.$outlineLight
110+
borderColor: Colors.$outlineInverted
111111
}
112112
}
113113
];

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
9797
style={{marginBottom: 15}}
9898
onPress={() => {}}
9999
borderRadius={borderRadius}
100-
useNative
101100
bg-$backgroundElevated
102101
activeOpacity={1}
103102
activeScale={isImageOnLeft ? 0.96 : 1.04}
@@ -136,7 +135,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
136135

137136
renderCoupon = (cardProps: CardProps) => {
138137
return (
139-
<Card {...cardProps} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
138+
<Card {...cardProps} flex height={160} onPress={() => {}} activeOpacity={1} activeScale={0.96}>
140139
<Card.Section
141140
bg-$backgroundDangerHeavy
142141
padding-20
@@ -169,7 +168,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
169168

170169
renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
171170
return (
172-
<Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
171+
<Card {...cardProps} flex marginV-10 onPress={() => {}} activeOpacity={1} activeScale={0.96}>
173172
{image}
174173
<Card.Section
175174
bg-$backgroundElevated

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ class CarouselScreen extends Component<Props, State> {
8787

8888
return (
8989
<ScrollView showsVerticalScrollIndicator={false}>
90-
<Text h1 margin-20>
90+
<Text h1 margin-20 $textDefault>
9191
Carousel
9292
</Text>
9393

@@ -115,7 +115,6 @@ class CarouselScreen extends Component<Props, State> {
115115
containerStyle={{height: 160}}
116116
pageControlPosition={Carousel.pageControlPositions.UNDER}
117117
pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
118-
// showCounter
119118
allowAccessibleLayout
120119
>
121120
{_.map([...Array(numberOfPagesShown)], (item, index) => (
@@ -143,6 +142,7 @@ class CarouselScreen extends Component<Props, State> {
143142
containerStyle: styles.loopCarousel
144143
}}
145144
pageControlPosition={Carousel.pageControlPositions.OVER}
145+
showCounter
146146
>
147147
{IMAGES.map((image, i) => {
148148
return (

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
1818
renderItem = (index: number) => {
1919
return (
2020
<View key={index} style={styles.item}>
21-
<Text>{index + 1}</Text>
21+
<Text $textDefault>{index + 1}</Text>
2222
</View>
2323
);
2424
};
@@ -31,7 +31,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
3131
: !scrollReachedProps.isScrollAtStart;
3232

3333
return (
34-
<View margin-10>
34+
<View padding-10>
3535
{renderHeader('Fader', {'marginB-10': true})}
3636
<View center>
3737
<View style={styles.container}>
@@ -69,8 +69,8 @@ const styles = StyleSheet.create({
6969
item: {
7070
height: itemHeight,
7171
width: itemWidth,
72-
backgroundColor: Colors.grey60,
73-
borderColor: Colors.grey40,
72+
backgroundColor: Colors.$backgroundDefault,
73+
borderColor: Colors.$outlineDisabled,
7474
borderWidth: 2,
7575
alignItems: 'center',
7676
justifyContent: 'center'

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import {
1313
PanningProvider,
1414
Typography,
1515
PickerProps,
16-
DialogProps
16+
PickerMethods,
17+
DialogProps,
18+
Button
1719
} from 'react-native-ui-lib'; //eslint-disable-line
1820
import contactsData from '../../data/conversations';
1921
import {longOptions} from './PickerScreenLongOptions';
@@ -38,6 +40,7 @@ const filters = [
3840
];
3941

4042
export default class PickerScreen extends Component {
43+
picker = React.createRef<PickerMethods>();
4144
state = {
4245
itemsCount: 1,
4346
// language: {value: 'java', label: 'Java'},
@@ -260,6 +263,8 @@ export default class PickerScreen extends Component {
260263

261264
<Picker
262265
migrate
266+
// @ts-expect-error
267+
ref={this.picker}
263268
migrateTextField
264269
label="Language"
265270
placeholder="Favorite Language"
@@ -270,13 +275,20 @@ export default class PickerScreen extends Component {
270275
searchPlaceholder={'Search a language'}
271276
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
272277
marginT-s4
278+
enableErrors={false}
273279
// mode={Picker.modes.MULTI}
274280
// useNativePicker
275281
>
276282
{_.map(options, option => (
277283
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
278284
))}
279285
</Picker>
286+
<Button
287+
label="Open Picker Manually"
288+
link
289+
style={{alignSelf: 'flex-start'}}
290+
onPress={() => this.picker.current?.openExpandable?.()}
291+
/>
280292
</View>
281293
</ScrollView>
282294
);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,22 +41,22 @@ export default class ProgressBarScreen extends Component {
4141

4242
return (
4343
<ScrollView>
44-
<View flex bg-grey80 spread paddingV-18>
44+
<View flex bg-$backgroundNeutralLight spread paddingV-18>
4545
<View paddingL-18 marginB-18>
46-
<Text text40 grey10>
46+
<Text $textDefault text40>
4747
ProgressBar
4848
</Text>
4949
</View>
5050

51-
<Text text70 style={styles.text}>
51+
<Text $textDefault text70 style={styles.text}>
5252
Default
5353
</Text>
5454
<ProgressBar
5555
progress={progresses[0]}
5656
style={styles.progressBar}
5757
/>
5858

59-
<Text text70 style={styles.text}>
59+
<Text $textDefault text70 style={styles.text}>
6060
FullWidth
6161
</Text>
6262
<ProgressBar
@@ -65,7 +65,7 @@ export default class ProgressBarScreen extends Component {
6565
fullWidth
6666
/>
6767

68-
<Text text70 style={styles.text}>
68+
<Text $textDefault text70 style={styles.text}>
6969
Styled
7070
</Text>
7171
<ProgressBar
@@ -74,7 +74,7 @@ export default class ProgressBarScreen extends Component {
7474
progressColor={Colors.purple70}
7575
/>
7676

77-
<Text text70 style={styles.text}>
77+
<Text $textDefault text70 style={styles.text}>
7878
Custom Element
7979
</Text>
8080
<ProgressBar

0 commit comments

Comments
 (0)