Skip to content

Commit b37684d

Browse files
adids1221adids1221
authored
Migrate ChipsInput to Incubator ChipsInput (#2483)
* Migrate ChipsInput to Incubator ChipsInput * removed old ChipsInput componenet * Moved Incubator ChipsInput to components, fixed review notes
1 parent 942ca88 commit b37684d

File tree

16 files changed

+208
-1272
lines changed

16 files changed

+208
-1272
lines changed

‎demo/src/screens/MenuStructure.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ export const navigationData = {
7070
{title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
7171
{title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
7272
{title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
73-
{title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
7473
{title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
7574
]
7675
},
@@ -173,7 +172,7 @@ export const navigationData = {
173172
title: 'Incubator (Experimental)',
174173
screens: [
175174
{title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
176-
{title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
175+
{title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
177176
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
178177
{title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
179178
{title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},

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

Lines changed: 47 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,60 @@
11
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
2+
import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
3+
import _ from 'lodash';
44

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);
5+
export default class ChipsInputScreen extends Component {
6+
state = {
7+
chips: [{label: 'one'}, {label: 'two'}],
8+
chips2: []
359
};
3610

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 = () => {
11+
render() {
4612
return (
47-
<View center height={40} marginR-s2 style={{alignItems: 'flex-start'}}>
48-
<Text grey30 text70M>
49-
To:
13+
<View flex padding-20>
14+
<Text h1 marginB-s4>
15+
ChipsInput
5016
</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>
7617
<ChipsInput
77-
placeholder={'Enter Tags'}
78-
title={'Mendy'}
18+
placeholder="Enter chips"
19+
defaultChipProps={{
20+
backgroundColor: Colors.$backgroundPrimaryHeavy,
21+
labelStyle: {color: Colors.$textDefaultLight},
22+
containerStyle: {borderWidth: 0},
23+
dismissColor: Colors.$iconDefaultLight
24+
}}
25+
invalidChipProps={{
26+
dismissColor: Colors.$iconDanger,
27+
labelStyle: {color: Colors.$textDanger},
28+
backgroundColor: Colors.$backgroundDefault,
29+
containerStyle: {borderColor: Colors.$outlineDanger}
30+
}}
7931
chips={this.state.chips}
80-
maxLength={4}
32+
leadingAccessory={<Text>TO: </Text>}
33+
onChange={newChips => {
34+
_.flow(newChips => _.groupBy(newChips, 'label'),
35+
newChips =>
36+
_.forEach(newChips, group => {
37+
if (group.length === 1) {
38+
delete group[0].invalid;
39+
} else {
40+
group[group.length - 1].invalid = true;
41+
}
42+
}),
43+
_.values,
44+
_.flatten)(newChips);
45+
46+
this.setState({chips: newChips});
47+
}}
8148
/>
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-
9849

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>
50+
<ChipsInput
51+
label="Max 3 chips"
52+
placeholder="Enter chips..."
53+
chips={this.state.chips2}
54+
onChange={newChips => this.setState({chips2: newChips})}
55+
maxChips={3}
56+
/>
57+
</View>
15258
);
15359
}
15460
}
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-
});

‎demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

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

‎demo/src/screens/incubatorScreens/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
22

33
export function registerScreens(registrar) {
44
registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
5-
registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
65
registrar('unicorn.incubator.TouchableOpacityScreen', () =>
76
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
87
registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);

‎src/components/chipsInput/Presenter.ts

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

0 commit comments

Comments
 (0)