Renaming TagsInput to ChipsInput (#955)

* Initial renaming of TagsInput to ChipsInput

* Cosmetics

* Lint

* Updating deprecation warning msg

* Adding ChipsInput typings export

* Removing deprecation from tests

* Update src/index.js

Co-authored-by: Ethan Sharabi <[email protected]>

* Removing extend link

* Updating extends link

* Update src/components/index.js

Co-authored-by: Ethan Sharabi <[email protected]>

* Deleting wrong extend

Co-authored-by: Ethan Sharabi <[email protected]>

Author: ArnonZ

demo/src/index.js

@@ -49,8 +49,8 @@ module.exports = {
       get ExpandableSectionScreen() {
         return require('./screens/componentScreens/ExpandableSectionScreen').default;
       },
-      get TagsInputScreen() {
-        return require('./screens/componentScreens/TagsInputScreen').default;
+      get ChipsInputScreen() {
+        return require('./screens/componentScreens/ChipsInputScreen').default;
       },
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
@@ -106,7 +106,7 @@ module.exports = {
       get TextScreen() {
         return require('./screens/componentScreens/TextScreen').default;
       },
-      // TODO: fix Expo issues (navigation) before un-commenting 
+      // TODO: fix Expo issues (navigation) before un-commenting
       // get TextFieldScreen() {
       //   return require('./screens/componentScreens/TextFieldScreen').default;
       // },
@@ -160,7 +160,7 @@ module.exports = {
       get LoadingScreen() {
         return require('./screens/componentScreens/LoadingScreen').default;
       },
-      // TODO: fix Expo issues (navigation) before un-commenting 
+      // TODO: fix Expo issues (navigation) before un-commenting
       // get ModalScreen() {
       //   return require('./screens/componentScreens/ModalScreen').default;
       // },

demo/src/screens/MenuStructure.js

@@ -58,7 +58,7 @@ 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: 'TagsInput', tags: 'tags input form', screen: 'unicorn.components.TagsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
     ]
   },

demo/src/screens/componentScreens/TagsInputScreen.js renamed to demo/src/screens/componentScreens/ChipsInputScreen.js

@@ -1,21 +1,21 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {View, Colors, Text, Typography, TagsInput} from 'react-native-ui-lib'; // eslint-disable-line
+import {View, Colors, Text, Typography, ChipsInput} from 'react-native-ui-lib'; // eslint-disable-line
 
 
-export default class TagsInputScreen extends Component {
+export default class ChipsInputScreen extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       tags: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
-      tags2: ['Tags', 'Input'],
+      tags2: ['Chips', 'Input'],
       tags3: ['Non', 'Removable', 'Tags']
     };
   }
 
   onTagPress = (tagIndex, markedTagIndex) => {
-    this.customTagsInput.markTagIndex(tagIndex === markedTagIndex ? undefined : tagIndex);
+    this.customChipsInput.markTagIndex(tagIndex === markedTagIndex ? undefined : tagIndex);
   };
 
   renderCustomTag(tag, index, shouldMarkToRemove) {
@@ -31,24 +31,24 @@ export default class TagsInputScreen extends Component {
       <ScrollView keyboardShouldPersistTaps="never">
         <View style={styles.container}>
           <Text text40 marginB-20>
-            TagsInput
+            ChipsInput
           </Text>
 
-          <TagsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags2}/>
+          <ChipsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags2}/>
 
-          <TagsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags}
+          <ChipsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags}
                      validationErrorMessage="error validation message" />
 
-          <TagsInput
+          <ChipsInput
             containerStyle={{marginBottom: 25}}
             placeholder="Editing disabled"
             tags={this.state.tags3}
             disableTagRemoval
             disableTagAdding
           />
 
-          <TagsInput
-            ref={r => (this.customTagsInput = r)}
+          <ChipsInput
+            ref={r => (this.customChipsInput = r)}
             containerStyle={{marginBottom: 25}}
             placeholder="With custom tags"
             tags={this.state.tags}

demo/src/screens/componentScreens/index.js

@@ -16,7 +16,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.DialogScreen', () => require('./DialogScreen').default);
   registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
   registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
-  registrar('unicorn.components.TagsInputScreen', () => require('./TagsInputScreen').default);
+  registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);

generatedTypes/index.d.ts

@@ -63,6 +63,7 @@ export {
   ColorSliderGroup,
   Stepper,
   TagsInput,
+  ChipsInput,
   SharedTransition,
   StackAggregator,
   Toast,

src/components/tagsInput/__tests__/index.spec.js renamed to src/components/chipsInput/__tests__/index.spec.js

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import {Constants} from '../../../helpers';
-import TagsInput from '../index';
+import ChipsInput from '../index';
 
-describe('TagsInput', () => {
+describe('ChipsInput', () => {
   let uut;
   beforeEach(() => {
-    uut = new TagsInput({});
+    uut = new ChipsInput({});
     uut.setState = jest.fn(state => _.assign(uut.state, state));
     _.set(uut.state, 'tags', [{}, {}, {}]);
   });
@@ -23,13 +23,13 @@ describe('TagsInput', () => {
 
     it('should return the label according to getLabel callback provided in props', () => {
       const getLabel = jest.fn(item => item.value);
-      uut = new TagsInput({getLabel});
+      uut = new ChipsInput({getLabel});
       expect(uut.getLabel({value: 'label', label: 'bla'})).toBe('label');
     });
 
     it('should return the label according to getLabel callback even if item is a string', () => {
       const getLabel = jest.fn(item => `${item}1`);
-      uut = new TagsInput({getLabel});
+      uut = new ChipsInput({getLabel});
       expect(uut.getLabel('label')).toBe('label1');
     });
   });
@@ -82,7 +82,7 @@ describe('TagsInput', () => {
     it('should invoke onKeyPress callback provided in props with the event', () => {
       const pressEvent = {nativeEvent: {key: 'space'}};
       const onKeyPressCallback = jest.fn();
-      uut = new TagsInput({onKeyPress: onKeyPressCallback});
+      uut = new ChipsInput({onKeyPress: onKeyPressCallback});
 
       uut.onKeyPress(pressEvent);
       expect(onKeyPressCallback).toHaveBeenCalledWith(pressEvent);