Skip to content

Commit

Permalink
Merge branch 'master' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
@M-i-k-e-l
M-i-k-e-l committed May 28, 2024
2 parents a5a20a3 + f2151e1 commit b95fe8f
Show file tree
Hide file tree
Showing 32 changed files with 515 additions and 440 deletions.
Binary file added demo/src/assets/icons/exclamationFillSmall.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/src/assets/icons/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/src/assets/icons/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/src/assets/icons/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/src/assets/icons/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion demo/src/configurations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,5 @@ export const loadDemoConfigurations = () => {
});

/* Components */
TextField.defaultProps = {...TextField.defaultProps, preset: TextField.presets.UNDERLINE};
TextField.defaultProps = {preset: TextField.presets.UNDERLINE, ...TextField.defaultProps};
};
7 changes: 2 additions & 5 deletions demo/src/screens/SettingsScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,8 @@ class SettingsScreen extends Component {
value={defaultScreen?.value}
label={'Default Screen'}
onChange={this.setDefaultScreen}
>
{_.map(filteredScreens, screen => (
<Picker.Item key={screen.value} value={screen.value} label={screen.label}/>
))}
</Picker>
items={filteredScreens}
/>

<View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
<View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
Expand Down
152 changes: 49 additions & 103 deletions demo/src/screens/componentScreens/PickerScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,39 @@ const tagIcon = require('../../assets/icons/tags.png');
const dropdown = require('../../assets/icons/chevronDown.png');
const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;

const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
const renderContact = (contactValue: any, props: any) => {
const contact = contacts[contactValue as number];
return (
<View
style={{
height: 56,
borderBottomWidth: 1,
borderColor: Colors.$backgroundNeutral
}}
paddingH-15
row
centerV
spread
>
<View row centerV>
<Avatar size={35} source={{uri: contact?.thumbnail}}/>
<Text marginL-10 text70 $textDefault>
{contact?.name}
</Text>
</View>
{props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
</View>
);
};

const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name, renderItem: renderContact}));

const options = [
{label: 'JavaScript', value: 'js'},
{label: 'Java', value: 'java'},
{label: 'Python', value: 'python'},
{label: 'C++', value: 'c++', disabled: true},
{label: 'Perl', value: 'perl'}
{label: 'JavaScript', value: 'js', labelStyle: Typography.text65},
{label: 'Java', value: 'java', labelStyle: Typography.text65},
{label: 'Python', value: 'python', labelStyle: Typography.text65},
{label: 'C++', value: 'c++', disabled: true, labelStyle: Typography.text65},
{label: 'Perl', value: 'perl', labelStyle: Typography.text65}
];

const filters = [
Expand Down Expand Up @@ -76,7 +101,6 @@ export default class PickerScreen extends Component {

renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
const {visible, children, toggleModal, onDone} = modalProps;

return (
<Incubator.Dialog
visible={visible}
Expand Down Expand Up @@ -116,11 +140,8 @@ export default class PickerScreen extends Component {
searchPlaceholder={'Search a language'}
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
// onSearchChange={value => console.warn('value', value)}
>
{_.map(longOptions, option => (
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
))}
</Picker>
items={longOptions}
/>

<Picker
placeholder="Favorite Languages (up to 3)"
Expand All @@ -129,11 +150,8 @@ export default class PickerScreen extends Component {
mode={Picker.modes.MULTI}
selectionLimit={3}
trailingAccessory={dropdownIcon}
>
{_.map(options, option => (
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
))}
</Picker>
items={options}
/>

<Picker
label="Wheel Picker"
Expand All @@ -142,20 +160,8 @@ export default class PickerScreen extends Component {
value={this.state.nativePickerValue}
onChange={nativePickerValue => this.setState({nativePickerValue})}
trailingAccessory={<Icon source={dropdown}/>}
// containerStyle={{marginTop: 20}}
// renderPicker={() => {
// return (
// <View>
// <Text>Open Native Picker!</Text>
// </View>
// );
// }}
// topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
>
{_.map(options, option => (
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
))}
</Picker>
items={options}
/>

<Picker
label="Custom modal"
Expand All @@ -165,17 +171,8 @@ export default class PickerScreen extends Component {
mode={Picker.modes.MULTI}
trailingAccessory={dropdownIcon}
renderCustomModal={this.renderDialog}
>
{_.map(options, option => (
<Picker.Item
key={option.value}
value={option.value}
label={option.label}
labelStyle={Typography.text65}
disabled={option.disabled}
/>
))}
</Picker>
items={options}
/>

<Picker
label="Dialog Picker"
Expand All @@ -195,12 +192,8 @@ export default class PickerScreen extends Component {
customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
showSearch
searchPlaceholder={'Search a language'}
>
{_.map(dialogOptions, option => (
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
))}
</Picker>

items={dialogOptions}
/>
<Text marginB-10 text70 $textDefault>
Custom Picker:
</Text>
Expand All @@ -221,12 +214,8 @@ export default class PickerScreen extends Component {
</View>
);
}}
>
{_.map(filters, filter => (
<Picker.Item key={filter.value} value={filter.value} label={filter.label}/>
))}
</Picker>

items={filters}
/>
<Text marginT-20 marginB-10 text70 $textDefault>
Custom Picker Items:
</Text>
Expand All @@ -236,7 +225,6 @@ export default class PickerScreen extends Component {
onChange={contact => {
this.setState({contact});
}}
// getItemValue={contact => contact?.value}
renderPicker={(contactValue?: number) => {
const contact = contacts[contactValue!] ?? undefined;
return (
Expand All @@ -256,78 +244,36 @@ export default class PickerScreen extends Component {
</View>
);
}}
>
{_.map(contacts, contact => (
<Picker.Item
key={contact.name}
value={contact.value}
label={contact.label}
renderItem={(contactValue, props) => {
const contact = contacts[contactValue as number];
return (
<View
style={{
height: 56,
borderBottomWidth: 1,
borderColor: Colors.$backgroundNeutral
}}
paddingH-15
row
centerV
spread
>
<View row centerV>
<Avatar size={35} source={{uri: contact?.thumbnail}}/>
<Text marginL-10 text70 $textDefault>
{contact?.name}
</Text>
</View>
{props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
</View>
);
}}
getItemLabel={contactValue => contacts[contactValue as number]?.name}
/>
))}
</Picker>

items={contacts}
/>
<Button
label="Open Picker Manually"
link
style={{alignSelf: 'flex-start'}}
onPress={() => this.picker.current?.openExpandable?.()}
/>

<Text text60 marginT-s5>
Different Field Types
</Text>
<Text text80 marginB-s5>
(Form/Filter/Settings)
</Text>

<Picker
value={this.state.filter}
onChange={value => this.setState({filter: value})}
placeholder="Filter posts"
fieldType={Picker.fieldTypes.filter}
marginB-s3
>
{filters.map(filter => (
<Picker.Item key={filter.value} {...filter}/>
))}
</Picker>

items={filters}
/>
<Picker
value={this.state.scheme}
onChange={value => this.setState({scheme: value})}
label="Color Scheme"
placeholder="Filter posts"
fieldType={Picker.fieldTypes.settings}
>
{schemes.map(scheme => (
<Picker.Item key={scheme.value} {...scheme}/>
))}
</Picker>
items={schemes}
/>
</View>
</ScrollView>
);
Expand Down
59 changes: 40 additions & 19 deletions demo/src/screens/componentScreens/SegmentedControlScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, {useCallback} from 'react';
import React, {useCallback, useState} from 'react';
import {StyleSheet} from 'react-native';
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography} from 'react-native-ui-lib';
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography, SegmentedControlItemProps} from 'react-native-ui-lib';

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

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

return (
<View flex bottom padding-page>
Expand All @@ -32,39 +34,58 @@ const SegmentedControlScreen = () => {
</Text>
<View flex marginT-s8>
<View center>
<SegmentedControl segments={segments.first}/>
<View row gap-s10 bottom>
<Text text70>Preset:</Text>
<SegmentedControl
segments={segments.first}
preset={screenPreset}
onChangeIndex={index =>
setScreenPreset(index === 0 ? SegmentedControl.presets.DEFAULT : SegmentedControl.presets.FORM)
}
initialIndex={screenPreset === SegmentedControl.presets.DEFAULT ? 0 : 1}
/>
</View>
<SegmentedControl
onChangeIndex={onChangeIndex}
containerStyle={styles.container}
segments={segments.second}
initialIndex={2}
preset={screenPreset}
/>
<SegmentedControl
containerStyle={styles.container}
activeColor={Colors.$textDangerLight}
outlineColor={Colors.$textDangerLight}
segments={segments.third}
/>
<SegmentedControl
containerStyle={styles.container}
segments={segments.forth}
activeColor={Colors.$textDefault}
borderRadius={BorderRadiuses.br20}
backgroundColor={Colors.$backgroundInverted}
activeBackgroundColor={Colors.$backgroundNeutralIdle}
inactiveColor={Colors.$textDisabled}
style={styles.customStyle}
segmentsStyle={styles.customSegmentsStyle}
preset={screenPreset}
/>
</View>
<SegmentedControl containerStyle={styles.container} segments={segments.fifth}/>
<SegmentedControl containerStyle={styles.container} segments={segments.sixth}/>
<SegmentedControl containerStyle={styles.container} segments={segments.fifth} preset={screenPreset}/>
<SegmentedControl containerStyle={styles.container} segments={segments.sixth} preset={screenPreset}/>
<Text marginT-s4 center>
Custom Typography
</Text>
<SegmentedControl
containerStyle={styles.container}
segments={segments.seventh}
segmentLabelStyle={styles.customTypography}
preset={screenPreset}
/>
<Text center marginT-s4>With Icons</Text>
<SegmentedControl segments={segments.eighth} preset={screenPreset}/>
<Text marginT-s4 center>
Custom Styling
</Text>
<SegmentedControl
containerStyle={styles.container}
segments={segments.forth}
activeColor={Colors.$textDefault}
borderRadius={BorderRadiuses.br20}
backgroundColor={Colors.$backgroundInverted}
activeBackgroundColor={Colors.$backgroundNeutralIdle}
inactiveColor={Colors.$textDisabled}
style={styles.customStyle}
segmentsStyle={styles.customSegmentsStyle}
/>
</View>
</View>
Expand Down
Loading

0 comments on commit b95fe8f

Please sign in to comment.