Skip to content

Commit 4a2859f

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-ui-lib into release
2 parents 57da214 + 174313f commit 4a2859f

Some content is hidden

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

63 files changed

+2075
-1318
lines changed

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

447 Bytes
Loading

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

875 Bytes
Loading

‎demo/src/configurations.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const loadDemoConfigurations = () => {
1111
plus: require('./assets/icons/plus.png'),
1212
refresh: require('./assets/icons/refresh.png'),
1313
search: require('./assets/icons/search.png'),
14+
settings: require('./assets/icons/settings.png'),
1415
share: require('./assets/icons/share.png')
1516
});
1617

‎demo/src/screens/ExampleScreenPresenter.js

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import _ from 'lodash';
22
import React from 'react';
33
import {StyleSheet} from 'react-native';
4-
import {Checkbox, Switch, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from 'react-native-ui-lib';
4+
import {
5+
Checkbox,
6+
Switch,
7+
ColorPalette,
8+
Colors,
9+
RadioButton,
10+
RadioGroup,
11+
Slider,
12+
SegmentedControl,
13+
Text,
14+
View
15+
} from 'react-native-ui-lib';
516

617
export function renderHeader(title, others) {
718
return (
@@ -15,7 +26,7 @@ export function renderBooleanOption(title, key) {
1526
const value = this.state[key];
1627
return (
1728
<View row centerV spread marginB-s4 key={key}>
18-
<Text text70 style={{flex: 1}}>
29+
<Text flex>
1930
{title}
2031
</Text>
2132
<Switch
@@ -63,9 +74,11 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
6374
const value = this.state[key];
6475
return (
6576
<View marginB-s2>
66-
{!_.isUndefined(title) && <Text text70M marginB-s2>
67-
{title}
68-
</Text>}
77+
{!_.isUndefined(title) && (
78+
<Text text70M marginB-s2>
79+
{title}
80+
</Text>
81+
)}
6982
<RadioGroup
7083
row={isRow}
7184
style={isRow && styles.rowWrap}
@@ -132,6 +145,22 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
132145
);
133146
}
134147

148+
export function renderMultipleSegmentOptions(title, key, options) {
149+
const value = this.state[key];
150+
const index = _.findIndex(options, {value});
151+
152+
return (
153+
<View row centerV spread marginB-s4 key={key}>
154+
<Text marginR-s2>{title}</Text>
155+
<SegmentedControl
156+
initialIndex={index}
157+
segments={options}
158+
onChangeIndex={index => this.setState({[key]: options[index].value})}
159+
/>
160+
</View>
161+
);
162+
}
163+
135164
const styles = StyleSheet.create({
136165
rowWrap: {
137166
flexWrap: 'wrap'

‎demo/src/screens/componentScreens/ChipsInputScreen.js

Lines changed: 0 additions & 95 deletions
This file was deleted.

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

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, ScrollView} from 'react-native';
3+
import {View, Colors, Text, Typography, ChipsInput, ChipsInputChipProps} from 'react-native-ui-lib'; // eslint-disable-line
4+
5+
interface State {
6+
chips: Array<ChipsInputChipProps>;
7+
namesChips: Array<ChipsInputChipProps>;
8+
nonRemovalChips: Array<ChipsInputChipProps>;
9+
customChips: Array<string>;
10+
tags: Array<string | any>;
11+
tags2: Array<string>;
12+
tags3: Array<string>;
13+
}
14+
15+
export default class ChipsInputScreen extends Component<{}, State> {
16+
// @ts-ignore
17+
customChipsInput = React.createRef<ChipsInput>();
18+
19+
constructor(props: any) {
20+
super(props);
21+
22+
this.state = {
23+
chips: [{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}, {label: 'Coca Cola', invalid: true}],
24+
namesChips: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
25+
nonRemovalChips: [{label: 'Non'}, {label: 'Removable'}, {label: 'Tags'}],
26+
customChips: ['Chips', 'Input'],
27+
tags: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
28+
tags2: ['Non', 'Removable', 'Tags'],
29+
tags3: ['Change', 'Typography']
30+
};
31+
}
32+
33+
onTagPress = (tagIndex: number, markedTagIndex: number) => {
34+
this.customChipsInput.current?.markTagIndex(tagIndex === markedTagIndex ? undefined : tagIndex);
35+
};
36+
37+
renderCustomTag(tag: any, _: number, shouldMarkToRemove: boolean) {
38+
return (
39+
<View style={[styles.customTag, shouldMarkToRemove && {backgroundColor: Colors.purple70}]}>
40+
<Text white>{tag.label}</Text>
41+
</View>
42+
);
43+
}
44+
45+
renderLeftElement = () => {
46+
return (
47+
<View center height={40} marginR-s2 style={{alignItems: 'flex-start'}}>
48+
<Text grey30 text70M>
49+
To:
50+
</Text>
51+
</View>
52+
);
53+
};
54+
55+
renderSearchTypeInput = () => {
56+
return (
57+
<>
58+
<Text marginB-10 text60>Search Type</Text>
59+
<View bg-grey60>
60+
<ChipsInput
61+
placeholder={'Enter Tags'}
62+
chips={this.state.chips}
63+
leftElement={this.renderLeftElement()}
64+
hideUnderline
65+
maxHeight={100}
66+
/>
67+
</View>
68+
</>
69+
);
70+
};
71+
72+
renderFormTypeInput = () => {
73+
return (
74+
<View marginT-40>
75+
<Text marginB-10 text60>Form Type</Text>
76+
<ChipsInput
77+
placeholder={'Enter Tags'}
78+
title={'Mendy'}
79+
chips={this.state.chips}
80+
maxLength={4}
81+
/>
82+
</View>
83+
);
84+
};
85+
86+
onCreateTag = (value: string) => {
87+
return {label: value};
88+
}
89+
90+
render() {
91+
return (
92+
<ScrollView keyboardShouldPersistTaps="never">
93+
<View style={styles.container}>
94+
<Text text40 marginB-20>
95+
ChipsInput
96+
</Text>
97+
98+
99+
{this.renderSearchTypeInput()}
100+
101+
{this.renderFormTypeInput()}
102+
103+
<ChipsInput
104+
containerStyle={styles.bottomMargin}
105+
placeholder="Enter Tags"
106+
chips={this.state.namesChips}
107+
validationErrorMessage="error validation message"
108+
/>
109+
110+
<ChipsInput
111+
containerStyle={styles.bottomMargin}
112+
placeholder="Editing disabled"
113+
chips={this.state.nonRemovalChips}
114+
disableTagRemoval
115+
disableTagAdding
116+
/>
117+
118+
<Text text50 marginV-20>Old Usage</Text>
119+
<ChipsInput
120+
containerStyle={styles.bottomMargin}
121+
placeholder="Enter Tags"
122+
tags={this.state.tags}
123+
validationErrorMessage="error validation message"
124+
/>
125+
126+
<ChipsInput
127+
containerStyle={styles.bottomMargin}
128+
placeholder="Editing disabled"
129+
tags={this.state.tags2}
130+
disableTagRemoval
131+
disableTagAdding
132+
/>
133+
<ChipsInput
134+
ref={this.customChipsInput}
135+
containerStyle={styles.bottomMargin}
136+
placeholder="With custom tags"
137+
tags={this.state.tags}
138+
renderTag={this.renderCustomTag}
139+
onCreateTag={this.onCreateTag}
140+
onTagPress={this.onTagPress}
141+
inputStyle={styles.customInput}
142+
/>
143+
<ChipsInput
144+
text60
145+
containerStyle={styles.bottomMargin}
146+
placeholder="Enter Tags"
147+
tags={this.state.tags3}
148+
/>
149+
150+
</View>
151+
</ScrollView>
152+
);
153+
}
154+
}
155+
156+
const styles = StyleSheet.create({
157+
container: {
158+
flex: 1,
159+
padding: 15
160+
},
161+
customInput: {
162+
...Typography.text60,
163+
color: Colors.blue30
164+
},
165+
bottomMargin: {
166+
marginBottom: 25
167+
},
168+
customTag: {
169+
backgroundColor: Colors.purple30,
170+
paddingVertical: 2,
171+
paddingHorizontal: 8,
172+
borderRadius: 3,
173+
marginRight: 10,
174+
marginBottom: 10
175+
}
176+
});

0 commit comments

Comments
 (0)