Skip to content

Commit b95fe8f

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents a5a20a3 + f2151e1 commit b95fe8f

32 files changed

+515
-440
lines changed

‎demo/src/assets/icons/exclamationFillSmall.png

479 Bytes
Loading

‎demo/src/assets/icons/[email protected]

652 Bytes
Loading

‎demo/src/assets/icons/[email protected]

831 Bytes
Loading

‎demo/src/assets/icons/[email protected]

1.25 KB
Loading

‎demo/src/assets/icons/[email protected]

1.77 KB
Loading

‎demo/src/configurations.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ export const loadDemoConfigurations = () => {
3333
});
3434

3535
/* Components */
36-
TextField.defaultProps = {...TextField.defaultProps, preset: TextField.presets.UNDERLINE};
36+
TextField.defaultProps = {preset: TextField.presets.UNDERLINE, ...TextField.defaultProps};
3737
};

‎demo/src/screens/SettingsScreen.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,8 @@ class SettingsScreen extends Component {
8080
value={defaultScreen?.value}
8181
label={'Default Screen'}
8282
onChange={this.setDefaultScreen}
83-
>
84-
{_.map(filteredScreens, screen => (
85-
<Picker.Item key={screen.value} value={screen.value} label={screen.label}/>
86-
))}
87-
</Picker>
83+
items={filteredScreens}
84+
/>
8885

8986
<View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
9087
<View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>

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

Lines changed: 49 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,39 @@ const tagIcon = require('../../assets/icons/tags.png');
2424
const dropdown = require('../../assets/icons/chevronDown.png');
2525
const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
2626

27-
const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
27+
const renderContact = (contactValue: any, props: any) => {
28+
const contact = contacts[contactValue as number];
29+
return (
30+
<View
31+
style={{
32+
height: 56,
33+
borderBottomWidth: 1,
34+
borderColor: Colors.$backgroundNeutral
35+
}}
36+
paddingH-15
37+
row
38+
centerV
39+
spread
40+
>
41+
<View row centerV>
42+
<Avatar size={35} source={{uri: contact?.thumbnail}}/>
43+
<Text marginL-10 text70 $textDefault>
44+
{contact?.name}
45+
</Text>
46+
</View>
47+
{props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
48+
</View>
49+
);
50+
};
51+
52+
const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name, renderItem: renderContact}));
2853

2954
const options = [
30-
{label: 'JavaScript', value: 'js'},
31-
{label: 'Java', value: 'java'},
32-
{label: 'Python', value: 'python'},
33-
{label: 'C++', value: 'c++', disabled: true},
34-
{label: 'Perl', value: 'perl'}
55+
{label: 'JavaScript', value: 'js', labelStyle: Typography.text65},
56+
{label: 'Java', value: 'java', labelStyle: Typography.text65},
57+
{label: 'Python', value: 'python', labelStyle: Typography.text65},
58+
{label: 'C++', value: 'c++', disabled: true, labelStyle: Typography.text65},
59+
{label: 'Perl', value: 'perl', labelStyle: Typography.text65}
3560
];
3661

3762
const filters = [
@@ -76,7 +101,6 @@ export default class PickerScreen extends Component {
76101

77102
renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
78103
const {visible, children, toggleModal, onDone} = modalProps;
79-
80104
return (
81105
<Incubator.Dialog
82106
visible={visible}
@@ -116,11 +140,8 @@ export default class PickerScreen extends Component {
116140
searchPlaceholder={'Search a language'}
117141
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
118142
// onSearchChange={value => console.warn('value', value)}
119-
>
120-
{_.map(longOptions, option => (
121-
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
122-
))}
123-
</Picker>
143+
items={longOptions}
144+
/>
124145

125146
<Picker
126147
placeholder="Favorite Languages (up to 3)"
@@ -129,11 +150,8 @@ export default class PickerScreen extends Component {
129150
mode={Picker.modes.MULTI}
130151
selectionLimit={3}
131152
trailingAccessory={dropdownIcon}
132-
>
133-
{_.map(options, option => (
134-
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
135-
))}
136-
</Picker>
153+
items={options}
154+
/>
137155

138156
<Picker
139157
label="Wheel Picker"
@@ -142,20 +160,8 @@ export default class PickerScreen extends Component {
142160
value={this.state.nativePickerValue}
143161
onChange={nativePickerValue => this.setState({nativePickerValue})}
144162
trailingAccessory={<Icon source={dropdown}/>}
145-
// containerStyle={{marginTop: 20}}
146-
// renderPicker={() => {
147-
// return (
148-
// <View>
149-
// <Text>Open Native Picker!</Text>
150-
// </View>
151-
// );
152-
// }}
153-
// topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
154-
>
155-
{_.map(options, option => (
156-
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
157-
))}
158-
</Picker>
163+
items={options}
164+
/>
159165

160166
<Picker
161167
label="Custom modal"
@@ -165,17 +171,8 @@ export default class PickerScreen extends Component {
165171
mode={Picker.modes.MULTI}
166172
trailingAccessory={dropdownIcon}
167173
renderCustomModal={this.renderDialog}
168-
>
169-
{_.map(options, option => (
170-
<Picker.Item
171-
key={option.value}
172-
value={option.value}
173-
label={option.label}
174-
labelStyle={Typography.text65}
175-
disabled={option.disabled}
176-
/>
177-
))}
178-
</Picker>
174+
items={options}
175+
/>
179176

180177
<Picker
181178
label="Dialog Picker"
@@ -195,12 +192,8 @@ export default class PickerScreen extends Component {
195192
customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
196193
showSearch
197194
searchPlaceholder={'Search a language'}
198-
>
199-
{_.map(dialogOptions, option => (
200-
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
201-
))}
202-
</Picker>
203-
195+
items={dialogOptions}
196+
/>
204197
<Text marginB-10 text70 $textDefault>
205198
Custom Picker:
206199
</Text>
@@ -221,12 +214,8 @@ export default class PickerScreen extends Component {
221214
</View>
222215
);
223216
}}
224-
>
225-
{_.map(filters, filter => (
226-
<Picker.Item key={filter.value} value={filter.value} label={filter.label}/>
227-
))}
228-
</Picker>
229-
217+
items={filters}
218+
/>
230219
<Text marginT-20 marginB-10 text70 $textDefault>
231220
Custom Picker Items:
232221
</Text>
@@ -236,7 +225,6 @@ export default class PickerScreen extends Component {
236225
onChange={contact => {
237226
this.setState({contact});
238227
}}
239-
// getItemValue={contact => contact?.value}
240228
renderPicker={(contactValue?: number) => {
241229
const contact = contacts[contactValue!] ?? undefined;
242230
return (
@@ -256,78 +244,36 @@ export default class PickerScreen extends Component {
256244
</View>
257245
);
258246
}}
259-
>
260-
{_.map(contacts, contact => (
261-
<Picker.Item
262-
key={contact.name}
263-
value={contact.value}
264-
label={contact.label}
265-
renderItem={(contactValue, props) => {
266-
const contact = contacts[contactValue as number];
267-
return (
268-
<View
269-
style={{
270-
height: 56,
271-
borderBottomWidth: 1,
272-
borderColor: Colors.$backgroundNeutral
273-
}}
274-
paddingH-15
275-
row
276-
centerV
277-
spread
278-
>
279-
<View row centerV>
280-
<Avatar size={35} source={{uri: contact?.thumbnail}}/>
281-
<Text marginL-10 text70 $textDefault>
282-
{contact?.name}
283-
</Text>
284-
</View>
285-
{props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
286-
</View>
287-
);
288-
}}
289-
getItemLabel={contactValue => contacts[contactValue as number]?.name}
290-
/>
291-
))}
292-
</Picker>
293-
247+
items={contacts}
248+
/>
294249
<Button
295250
label="Open Picker Manually"
296251
link
297252
style={{alignSelf: 'flex-start'}}
298253
onPress={() => this.picker.current?.openExpandable?.()}
299254
/>
300-
301255
<Text text60 marginT-s5>
302256
Different Field Types
303257
</Text>
304258
<Text text80 marginB-s5>
305259
(Form/Filter/Settings)
306260
</Text>
307-
308261
<Picker
309262
value={this.state.filter}
310263
onChange={value => this.setState({filter: value})}
311264
placeholder="Filter posts"
312265
fieldType={Picker.fieldTypes.filter}
313266
marginB-s3
314-
>
315-
{filters.map(filter => (
316-
<Picker.Item key={filter.value} {...filter}/>
317-
))}
318-
</Picker>
319-
267+
items={filters}
268+
/>
320269
<Picker
321270
value={this.state.scheme}
322271
onChange={value => this.setState({scheme: value})}
323272
label="Color Scheme"
324273
placeholder="Filter posts"
325274
fieldType={Picker.fieldTypes.settings}
326-
>
327-
{schemes.map(scheme => (
328-
<Picker.Item key={scheme.value} {...scheme}/>
329-
))}
330-
</Picker>
275+
items={schemes}
276+
/>
331277
</View>
332278
</ScrollView>
333279
);

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

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, {useCallback} from 'react';
1+
import React, {useCallback, useState} from 'react';
22
import {StyleSheet} from 'react-native';
3-
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography} from 'react-native-ui-lib';
3+
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography, SegmentedControlItemProps} from 'react-native-ui-lib';
44

5-
const segments = {
6-
first: [{label: 'Left'}, {label: 'Right'}],
5+
const segments: Record<string, Array<SegmentedControlItemProps>> = {
6+
first: [{label: 'Default'}, {label: 'Form'}],
77
second: [{label: '1'}, {label: '2'}, {label: '3'}, {label: Assets.emojis.airplane}, {label: '5'}],
88
third: [
99
{
@@ -17,13 +17,15 @@ const segments = {
1717
forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
1818
fifth: [{label: 'Full'}, {label: 'Width'}],
1919
sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
20-
seventh: [{label: '$'}, {label: '%'}]
20+
seventh: [{label: '$'}, {label: '%'}],
21+
eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}]
2122
};
2223

2324
const SegmentedControlScreen = () => {
2425
const onChangeIndex = useCallback((index: number) => {
2526
console.warn('Index ' + index + ' of the second segmentedControl was pressed');
2627
}, []);
28+
const [screenPreset, setScreenPreset] = useState(SegmentedControl.presets.DEFAULT);
2729

2830
return (
2931
<View flex bottom padding-page>
@@ -32,39 +34,58 @@ const SegmentedControlScreen = () => {
3234
</Text>
3335
<View flex marginT-s8>
3436
<View center>
35-
<SegmentedControl segments={segments.first}/>
37+
<View row gap-s10 bottom>
38+
<Text text70>Preset:</Text>
39+
<SegmentedControl
40+
segments={segments.first}
41+
preset={screenPreset}
42+
onChangeIndex={index =>
43+
setScreenPreset(index === 0 ? SegmentedControl.presets.DEFAULT : SegmentedControl.presets.FORM)
44+
}
45+
initialIndex={screenPreset === SegmentedControl.presets.DEFAULT ? 0 : 1}
46+
/>
47+
</View>
3648
<SegmentedControl
3749
onChangeIndex={onChangeIndex}
3850
containerStyle={styles.container}
3951
segments={segments.second}
4052
initialIndex={2}
53+
preset={screenPreset}
4154
/>
4255
<SegmentedControl
4356
containerStyle={styles.container}
4457
activeColor={Colors.$textDangerLight}
58+
outlineColor={Colors.$textDangerLight}
4559
segments={segments.third}
46-
/>
47-
<SegmentedControl
48-
containerStyle={styles.container}
49-
segments={segments.forth}
50-
activeColor={Colors.$textDefault}
51-
borderRadius={BorderRadiuses.br20}
52-
backgroundColor={Colors.$backgroundInverted}
53-
activeBackgroundColor={Colors.$backgroundNeutralIdle}
54-
inactiveColor={Colors.$textDisabled}
55-
style={styles.customStyle}
56-
segmentsStyle={styles.customSegmentsStyle}
60+
preset={screenPreset}
5761
/>
5862
</View>
59-
<SegmentedControl containerStyle={styles.container} segments={segments.fifth}/>
60-
<SegmentedControl containerStyle={styles.container} segments={segments.sixth}/>
63+
<SegmentedControl containerStyle={styles.container} segments={segments.fifth} preset={screenPreset}/>
64+
<SegmentedControl containerStyle={styles.container} segments={segments.sixth} preset={screenPreset}/>
6165
<Text marginT-s4 center>
6266
Custom Typography
6367
</Text>
6468
<SegmentedControl
6569
containerStyle={styles.container}
6670
segments={segments.seventh}
6771
segmentLabelStyle={styles.customTypography}
72+
preset={screenPreset}
73+
/>
74+
<Text center marginT-s4>With Icons</Text>
75+
<SegmentedControl segments={segments.eighth} preset={screenPreset}/>
76+
<Text marginT-s4 center>
77+
Custom Styling
78+
</Text>
79+
<SegmentedControl
80+
containerStyle={styles.container}
81+
segments={segments.forth}
82+
activeColor={Colors.$textDefault}
83+
borderRadius={BorderRadiuses.br20}
84+
backgroundColor={Colors.$backgroundInverted}
85+
activeBackgroundColor={Colors.$backgroundNeutralIdle}
86+
inactiveColor={Colors.$textDisabled}
87+
style={styles.customStyle}
88+
segmentsStyle={styles.customSegmentsStyle}
6889
/>
6990
</View>
7091
</View>

0 commit comments

Comments
 (0)