ChipsInput - Removing UNSAFE method (#1018)

* ChipsInput - Removing UNSAFE method

* export for tests

* fix tests

* Fix add tag function and keep component as controlled component

* Fix example screen

Author: Inbal-Tish

demo/src/screens/componentScreens/ChipsInputScreen.js

@@ -10,7 +10,8 @@ export default class ChipsInputScreen extends Component {
     this.state = {
       tags: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
       tags2: ['Chips', 'Input'],
-      tags3: ['Non', 'Removable', 'Tags']
+      tags3: ['Non', 'Removable', 'Tags'],
+      tags4: ['Change', 'Typography']
     };
   }
 
@@ -34,10 +35,18 @@ export default class ChipsInputScreen extends Component {
             ChipsInput
           </Text>
 
-          <ChipsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags2}/>
+          <ChipsInput
+            containerStyle={{marginBottom: 25}}
+            placeholder="Enter Tags"
+            tags={this.state.tags2}
+          />
 
-          <ChipsInput containerStyle={{marginBottom: 25}} placeholder="Enter Tags" tags={this.state.tags}
-                     validationErrorMessage="error validation message" />
+          <ChipsInput
+            containerStyle={{marginBottom: 25}}
+            placeholder="Enter Tags"
+            tags={this.state.tags}
+            validationErrorMessage="error validation message"
+          />
 
           <ChipsInput
             containerStyle={{marginBottom: 25}}
@@ -57,6 +66,13 @@ export default class ChipsInputScreen extends Component {
             onTagPress={this.onTagPress}
             inputStyle={{...Typography.text60, color: Colors.blue30}}
           />
+
+          <ChipsInput
+            text60
+            containerStyle={{marginBottom: 25}}
+            placeholder="Enter Tags"
+            tags={this.state.tags4}
+          />
         </View>
       </ScrollView>
     );

src/components/chipsInput/__tests__/index.spec.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import {Constants} from '../../../helpers';
-import ChipsInput from '../index';
+import {ChipsInput} from '../index';
 
 describe('ChipsInput', () => {
   let uut;

src/components/chipsInput/index.js

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component} from 'react';
 import ReactNative, {NativeModules, StyleSheet, ViewPropTypes, Image, DeviceEventEmitter} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses, ThemeManager, Typography} from '../../style';
 import Assets from '../../assets';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import {TextField} from '../inputs';
@@ -15,6 +15,7 @@ import Text from '../text';
 // TODO: support char array as tag creators (like comma)
 // TODO: add notes to Docs about the Android fix for onKeyPress
 
+
 const GUTTER_SPACING = 8;
 
 /**
@@ -25,7 +26,7 @@ const GUTTER_SPACING = 8;
  * @extends: TextField
  * @extendsLink: https://github.com/wix/react-native-ui-lib/blob/master/src/components/inputs/TextField.js
  */
-export default class ChipsInput extends BaseComponent {
+class ChipsInput extends Component {
   static displayName = 'ChipsInput';
 
   static propTypes = {
@@ -91,18 +92,11 @@ export default class ChipsInput extends BaseComponent {
   constructor(props) {
     super(props);
 
-    this.addTag = this.addTag.bind(this);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.renderTagWrapper = this.renderTagWrapper.bind(this);
-    this.renderTag = this.renderTag.bind(this);
-    this.getLabel = this.getLabel.bind(this);
-    this.onKeyPress = this.onKeyPress.bind(this);
-    this.markTagIndex = this.markTagIndex.bind(this);
-
     this.state = {
       value: props.value,
       tags: _.cloneDeep(props.tags) || [],
-      tagIndexToRemove: undefined
+      tagIndexToRemove: undefined,
+      initialTags: props.tags
     };
   }
 
@@ -122,16 +116,18 @@ export default class ChipsInput extends BaseComponent {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.tags !== this.state.tags) {
-      this.setState({
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.tags !== prevState.initialTags) {
+      return {
+        initialTags: nextProps.tags,
         tags: nextProps.tags
-      });
+      };
     }
+    return null;
   }
 
-  addTag() {
-    const {onCreateTag, disableTagAdding} = this.getThemeProps();
+  addTag = () => {
+    const {onCreateTag, disableTagAdding} = this.props;
     const {value, tags} = this.state;
 
     if (disableTagAdding) {
@@ -143,10 +139,12 @@ export default class ChipsInput extends BaseComponent {
 
     const newTag = _.isFunction(onCreateTag) ? onCreateTag(value) : value;
     const newTags = [...tags, newTag];
+
     this.setState({
       value: '',
       tags: newTags
     });
+
     _.invoke(this.props, 'onChangeTags', newTags, ChipsInput.onChangeTagsActions.ADDED, newTag);
     this.clear();
   }
@@ -162,15 +160,16 @@ export default class ChipsInput extends BaseComponent {
         tags,
         tagIndexToRemove: undefined
       });
+
       _.invoke(this.props, 'onChangeTags', tags, ChipsInput.onChangeTagsActions.REMOVED, removedTag);
     }
   }
 
-  markTagIndex(tagIndex) {
+  markTagIndex = (tagIndex) => {
     this.setState({tagIndexToRemove: tagIndex});
   }
 
-  onChangeText(value) {
+  onChangeText = (value) => {
     this.setState({value, tagIndexToRemove: undefined});
     _.invoke(this.props, 'onChangeText', value);
   }
@@ -201,10 +200,10 @@ export default class ChipsInput extends BaseComponent {
     return isLastTagMarked;
   }
 
-  onKeyPress(event) {
+  onKeyPress = (event) => {
     _.invoke(this.props, 'onKeyPress', event);
 
-    const {disableTagRemoval} = this.getThemeProps();
+    const {disableTagRemoval} = this.props;
     if (disableTagRemoval) {
       return;
     }
@@ -227,7 +226,7 @@ export default class ChipsInput extends BaseComponent {
     }
   }
 
-  getLabel(item) {
+  getLabel = (item) => {
     const {getLabel} = this.props;
 
     if (getLabel) {
@@ -240,7 +239,7 @@ export default class ChipsInput extends BaseComponent {
   }
 
   renderLabel(tag, shouldMarkTag) {
-    const typography = this.extractTypographyValue();
+    const {typography} = this.props.modifiers;
     const label = this.getLabel(tag);
 
     return (
@@ -261,8 +260,8 @@ export default class ChipsInput extends BaseComponent {
     );
   }
 
-  renderTag(tag, index) {
-    const {tagStyle, renderTag} = this.getThemeProps();
+  renderTag = (tag, index) => {
+    const {tagStyle, renderTag} = this.props;
     const {tagIndexToRemove} = this.state;
     const shouldMarkTag = tagIndexToRemove === index;
 
@@ -288,7 +287,7 @@ export default class ChipsInput extends BaseComponent {
     );
   }
 
-  renderTagWrapper(tag, index) {
+  renderTagWrapper = (tag, index) => {
     return (
       <TouchableOpacity
         key={index}
@@ -302,7 +301,7 @@ export default class ChipsInput extends BaseComponent {
   }
 
   renderTextInput() {
-    const {inputStyle, selectionColor, ...others} = this.getThemeProps();
+    const {inputStyle, selectionColor, ...others} = this.props;
     const {value} = this.state;
     const isLastTagMarked = this.isLastTagMarked();
 
@@ -332,7 +331,7 @@ export default class ChipsInput extends BaseComponent {
   }
 
   render() {
-    const {disableTagRemoval, containerStyle, hideUnderline, validationErrorMessage} = this.getThemeProps();
+    const {disableTagRemoval, containerStyle, hideUnderline, validationErrorMessage} = this.props;
     const tagRenderFn = disableTagRemoval ? this.renderTag : this.renderTagWrapper;
     const {tags, tagIndexToRemove} = this.state;
 
@@ -366,6 +365,11 @@ export default class ChipsInput extends BaseComponent {
     this.input.clear();
   }
 }
+
+export {ChipsInput}; // For tests
+export default asBaseComponent(ChipsInput);
+
+
 const basicTagStyle = {
   borderRadius: BorderRadiuses.br100,
   paddingVertical: 4.5,
@@ -374,12 +378,6 @@ const basicTagStyle = {
   marginVertical: GUTTER_SPACING / 2
 };
 
-const basicIconStyle = {
-  width: 10,
-  height: 10,
-  marginRight: 6
-};
-
 const styles = StyleSheet.create({
   withUnderline: {
     borderBottomWidth: StyleSheet.hairlineWidth,
@@ -411,7 +409,9 @@ const styles = StyleSheet.create({
   },
   removeIcon: {
     tintColor: Colors.white,
-    ...basicIconStyle
+    width: 10,
+    height: 10,
+    marginRight: 6
   },
   inValidTagRemoveIcon: {
     tintColor: Colors.red10