fix: Update class (#456)

Author: harshithmullapudi

__tests__/reactTags.test.js

@@ -58,6 +58,23 @@ describe('Test ReactTags', () => {
     expect($el.props().children.props).to.deep.equal(expectedProps);
   });
 
+  test('should update the class when the prop classNames changes', () => {
+    let $el = mount(
+      mockItem({
+        classNames: {
+          tag: 'tag',
+        },
+      })
+    );
+    expect($el.find('.tag').length).to.equal(1);
+    $el.setProps({
+      classNames: {
+        tag: 'changed',
+      },
+    });
+    expect($el.find('.changed').length).to.equal(1);
+  });
+
   test('focus on input by default', () => {
     const $el = mount(mockItem());
     expect(document.activeElement.tagName).to.equal('INPUT');

package-lock.json

@@ -37,6 +37,7 @@
     "classnames": "^2.2.6",
     "core-js": "2.6.0",
     "lodash": "4.17.11",
+    "memoize-one": "^5.0.0",
     "prop-types": "15.6.1",
     "react": "16.4.2",
     "react-dnd": "5.0.0",

package.json

@@ -6,7 +6,7 @@ import uniq from 'lodash/uniq';
 import Suggestions from './Suggestions';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
-
+import memoizeOne from 'memoize-one';
 import Tag from './Tag';
 
 import { buildRegExpFromDelimiters } from './utils';
@@ -21,6 +21,13 @@ import {
 
 import '../styles/react-tags.scss';
 
+const updateClassNames  = memoizeOne((classNames) =>
+{
+  return {
+    classNames : {...DEFAULT_CLASSNAMES,...classNames},
+  };
+});
+
 class ReactTags extends Component {
   static propTypes = {
     placeholder: PropTypes.string,
@@ -95,7 +102,7 @@ class ReactTags extends Component {
       selectionMode: false,
       classNames: { ...DEFAULT_CLASSNAMES, ...classNames },
     };
-
+    // TODO : remove classNames from state and change updateClassNames to instance function
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -105,6 +112,13 @@ class ReactTags extends Component {
     this.resetAndFocusInput = this.resetAndFocusInput.bind(this);
     this.handleSuggestionHover = this.handleSuggestionHover.bind(this);
     this.handleSuggestionClick = this.handleSuggestionClick.bind(this);
+
+  }
+
+  static getDerivedStateFromProps(props)
+  {
+    const { classNames } = props;
+    return updateClassNames(classNames);
   }
 
   componentDidMount() {