Skip to content

Commit 5f86d5e

Browse files
mendyEdriInbal-Tish
mendyEdri
and
Inbal-Tish
authored
Feat/chips input v2 (#1490)
* index.js -> index.tsx * added chips-input presenter * set disable color logic code * demo screen changes * migrate to typescript, added new chip usage supporting code * Fixed namings on tests * typings * build ts * build ts * remove old typings * rename chipsProps to chips * export new typings * renaming * export from generatedTypes * fixed export path * added key for performance * rename method * missing import * rename method name in demo screen * ChipsInputScreen.js -> ChipsInputScreen.tsx * migrate ChipsInputScreen to typescript * add missing export prop * change spread position to override the default labelStyle * Export chipsProps * Kept old usage for later reference, export new prop that contains `valid` + ChipProp * added deprecation note * use ChipsInputChipProp to have `invalid` prop in this type * Extract inline style * change array decleration to transpile with typescript * PR Comments * removed ref inline function * move code inside other function * make CI great again * Update src/components/chipsInput/index.tsx Co-authored-by: Inbal Tish <[email protected]>
1 parent b1c91d4 commit 5f86d5e

File tree

12 files changed

+1034
-592
lines changed

12 files changed

+1034
-592
lines changed

‎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+
});

‎generatedTypes/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export {default as TouchableOpacity, TouchableOpacityProps} from './src/componen
3737
export {default as Button, ButtonSize, ButtonProps} from './src/components/button';
3838
export {default as Stepper, StepperProps} from './src/components/stepper';
3939
export {default as Checkbox, CheckboxProps} from './src/components/checkbox';
40+
export {default as ChipsInput, ChipsInputProps, ChipsInputChipProps} from './src/components/chipsInput';
4041
export {default as Chip, ChipProps} from './src/components/chip';
4142
export {default as ColorPicker, ColorPickerProps} from './src/components/colorPicker';
4243
export {default as ColorPalette, ColorPaletteProps} from './src/components/colorPicker/ColorPalette';
@@ -93,7 +94,6 @@ export {
9394
TextArea,
9495
MaskedInput,
9596
ColorSliderGroup,
96-
ChipsInput,
9797
SharedTransition,
9898
Toast,
9999
WheelPickerDialog,

‎generatedTypes/src/components/chipsInput/Presenter.d.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ChipsInputChipProps, ChipsInputProps } from './index';
2+
export declare const isContainsInvalid: (chips: Array<ChipsInputChipProps>) => boolean;
3+
export declare const getValidationBasedColor: (chips: Array<ChipsInputChipProps>, defaultChip?: ChipsInputChipProps | undefined) => string;
4+
export declare const getCounterTextColor: (stateChips: Array<ChipsInputChipProps>, props: ChipsInputProps) => string;
5+
export declare const getCounterText: (count: number, maxLength: number) => string;
6+
export declare const getChipDismissColor: (chip: ChipsInputChipProps, isSelected: boolean, defaultChipProps?: ChipsInputChipProps | undefined) => string;
7+
export declare const isDisabled: (props: ChipsInputProps) => boolean;

0 commit comments

Comments
 (0)