Migrate ChipsInput to Incubator ChipsInput

demo/src/screens/MenuStructure.js

@@ -71,7 +71,6 @@ export const navigationData = {
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
-      {title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
     ]
   },
@@ -175,7 +174,7 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
-      {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},

demo/src/screens/componentScreens/ChipsInputScreen.tsx

@@ -1,176 +1,60 @@
 import React, {Component} from 'react';
-import {StyleSheet, ScrollView} from 'react-native';
-import {View, Colors, Text, Typography, ChipsInput, ChipsInputChipProps} from 'react-native-ui-lib'; // eslint-disable-line
+import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
+import _ from 'lodash';
 
-interface State {
-  chips: Array<ChipsInputChipProps>;
-  namesChips: Array<ChipsInputChipProps>;
-  nonRemovalChips: Array<ChipsInputChipProps>;
-  customChips: Array<string>;
-  tags: Array<string | any>;
-  tags2: Array<string>;
-  tags3: Array<string>;
-}
-
-export default class ChipsInputScreen extends Component<{}, State> {
-  // @ts-ignore
-  customChipsInput = React.createRef<ChipsInput>();
-
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      chips: [{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}, {label: 'Coca Cola', invalid: true}],
-      namesChips: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
-      nonRemovalChips: [{label: 'Non'}, {label: 'Removable'}, {label: 'Tags'}],
-      customChips: ['Chips', 'Input'],
-      tags: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
-      tags2: ['Non', 'Removable', 'Tags'],
-      tags3: ['Change', 'Typography']
-    };
-  }
-
-  onTagPress = (tagIndex: number, markedTagIndex: number) => {
-    this.customChipsInput.current?.markTagIndex(tagIndex === markedTagIndex ? undefined : tagIndex);
+export default class ChipsInputScreen extends Component {
+  state = {
+    chips: [{label: 'one'}, {label: 'two'}],
+    chips2: []
   };
 
-  renderCustomTag(tag: any, _: number, shouldMarkToRemove: boolean) {
-    return (
-      <View style={[styles.customTag, shouldMarkToRemove && {backgroundColor: Colors.purple70}]}>
-        <Text white>{tag.label}</Text>
-      </View>
-    );
-  }
-
-  renderLeftElement = () => {
+  render() {
     return (
-      <View center height={40} marginR-s2 style={{alignItems: 'flex-start'}}>
-        <Text grey30 text70M>
-          To:
+      <View flex padding-20>
+        <Text h1 marginB-s4>
+          ChipsInput
         </Text>
-      </View>
-    );
-  };
-
-  renderSearchTypeInput = () => {
-    return (
-      <>
-        <Text marginB-10 text60>Search Type</Text>
-        <View bg-grey60>
-          <ChipsInput
-            placeholder={'Enter Tags'}
-            chips={this.state.chips}
-            leftElement={this.renderLeftElement()}
-            hideUnderline
-            maxHeight={100}
-          />
-        </View>
-      </>
-    );
-  };
-
-  renderFormTypeInput = () => {
-    return (
-      <View marginT-40>
-        <Text marginB-10 text60>Form Type</Text>
         <ChipsInput
-          placeholder={'Enter Tags'}
-          title={'Mendy'}
+          placeholder="Enter chips"
+          defaultChipProps={{
+            backgroundColor: Colors.$backgroundPrimaryHeavy,
+            labelStyle: {color: Colors.$textDefaultLight},
+            containerStyle: {borderWidth: 0},
+            dismissColor: Colors.$iconDefaultLight
+          }}
+          invalidChipProps={{
+            dismissColor: Colors.$iconDanger,
+            labelStyle: {color: Colors.$textDanger},
+            backgroundColor: Colors.$backgroundDefault,
+            containerStyle: {borderColor: Colors.$outlineDanger}
+          }}
           chips={this.state.chips}
-          maxLength={4}
+          leadingAccessory={<Text>TO: </Text>}
+          onChange={newChips => {
+            _.flow(newChips => _.groupBy(newChips, 'label'),
+              newChips =>
+                _.forEach(newChips, group => {
+                  if (group.length === 1) {
+                    delete group[0].invalid;
+                  } else {
+                    group[group.length - 1].invalid = true;
+                  }
+                }),
+              _.values,
+              _.flatten)(newChips);
+
+            this.setState({chips: newChips});
+          }}
         />
-      </View>
-    );
-  };
-
-  onCreateTag = (value: string) => {
-    return {label: value};
-  }
-
-  render() {
-    return (
-      <ScrollView keyboardShouldPersistTaps="never">
-        <View style={styles.container}>
-          <Text text40 marginB-20>
-            ChipsInput
-          </Text>
-
 
-          {this.renderSearchTypeInput()}
-
-          {this.renderFormTypeInput()}
-
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            chips={this.state.namesChips}
-            validationErrorMessage="error validation message"
-          />
-
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Editing disabled"
-            chips={this.state.nonRemovalChips}
-            disableTagRemoval
-            disableTagAdding
-          />
-
-          <Text text50 marginV-20>Old Usage</Text>
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            tags={this.state.tags}
-            validationErrorMessage="error validation message"
-          />
-
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Editing disabled"
-            tags={this.state.tags2}
-            disableTagRemoval
-            disableTagAdding
-          />
-          <ChipsInput
-            ref={this.customChipsInput}
-            containerStyle={styles.bottomMargin}
-            placeholder="With custom tags"
-            tags={this.state.tags}
-            renderTag={this.renderCustomTag}
-            onCreateTag={this.onCreateTag}
-            onTagPress={this.onTagPress}
-            inputStyle={styles.customInput}
-          />
-          <ChipsInput 
-            text60
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            tags={this.state.tags3}
-          />
-
-        </View>
-      </ScrollView>
+        <ChipsInput
+          label="Max 3 chips"
+          placeholder="Enter chips..."
+          chips={this.state.chips2}
+          onChange={newChips => this.setState({chips2: newChips})}
+          maxChips={3}
+        />
+      </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 15
-  },
-  customInput: {
-    ...Typography.text60,
-    color: Colors.blue30
-  },
-  bottomMargin: {
-    marginBottom: 25
-  },
-  customTag: {
-    backgroundColor: Colors.purple30,
-    paddingVertical: 2,
-    paddingHorizontal: 8,
-    borderRadius: 3,
-    marginRight: 10,
-    marginBottom: 10
-  }
-});

demo/src/screens/incubatorScreens/index.js

@@ -2,7 +2,6 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
-  registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
   registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);