fix(multiselect): update multiselect design and fix minor bugs (#296)

* fix(multiselect): update option height and icon

#287

* fix(multiselect): fix chip design and update icon

* fix(multiselect): bug fix on selecting items

* refactor(multiselect): remove dead code

* fix(multiselect): update multiselect design

* fix(multiselect): update selected chip animation

Author: rishichawda

lib/globals/animations.module.scss

@@ -13,6 +13,21 @@
     }
 }
 
+@mixin zoomIn() {
+    -o-animation-name: animateZoom;
+    -moz-animation-name: animateZoom;
+    -webkit-animation-name: animateZoom;
+    animation-name: animateZoom;
+    @keyframes animateZoom {
+        0% {
+            transform: scale(0.1);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+}
+
 @mixin sectionEntry($duration) {
     visibility: hidden;
     opacity: 0;

lib/multiselect/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { themr } from 'react-css-themr';
+import { FaChevronDown } from 'react-icons/fa';
+import { MdClose } from 'react-icons/md';
 import defaultTheme from './theme.module.scss';
 
 const { findDOMNode: findNode } = ReactDOM;
@@ -17,7 +19,6 @@ class MultiSelect extends Component {
       */
       selected: [],
       open: false,
-      input: '',
     };
 
     this.listRef = null;
@@ -31,12 +32,6 @@ class MultiSelect extends Component {
     return { threshold, focusedItem };
   };
 
-  handleInput = ({ target }) => {
-    this.setState({
-      input: target.value,
-    });
-  };
-
   // Handle the click event when user selects / clicks on an option from the dropdown.
   handleSelect = (selectedOption) => {
     const { onSelect } = this.props;
@@ -65,12 +60,7 @@ class MultiSelect extends Component {
   handleKeyPress = (e) => {
     e.preventDefault();
     const { options } = this.props;
-    const { input, selected, focus } = this.state;
-    const isValid = options
-      .filter(opt => opt
-        .label
-        .toLowerCase()
-        .indexOf(input.toLowerCase()) !== -1);
+    const { focus } = this.state;
     switch (e.key) {
       case 'ArrowDown':
         this.setState(
@@ -118,22 +108,7 @@ class MultiSelect extends Component {
         );
         break;
       case 'Enter':
-        if (focus) {
-          this.handleSelect(options[focus]);
-          break;
-        }
-        if (isValid.length) {
-          if (
-            !selected.filter(item => item.label === isValid[0].label).length
-          ) {
-            this.setState({
-              selected: [...selected, isValid[0]],
-            });
-          }
-        }
-        this.setState({
-          input: '',
-        });
+        this.handleSelect(options[focus]);
         break;
       default:
         break;
@@ -204,18 +179,8 @@ class MultiSelect extends Component {
   // Helper function to render options inside the dropdown.
   renderOptions = (options) => {
     const { theme } = this.props;
-    const { selected, input, focus } = this.state;
-    let filteredOptions;
-    if (input.length) {
-      filteredOptions = options
-        .filter(opt => opt
-          .label
-          .toLowerCase()
-          .indexOf(input.toLowerCase()) !== -1);
-    } else {
-      filteredOptions = options;
-    }
-    return filteredOptions.map((option, index) => {
+    const { selected, focus } = this.state;
+    return options.map((option, index) => {
       /* eslint-disable jsx-a11y/click-events-have-key-events */
       /* eslint-disable jsx-a11y/no-static-element-interactions */
       const itemtheme = cx(
@@ -259,7 +224,7 @@ class MultiSelect extends Component {
       >
         <div>
           <span>{option.label}</span>
-          <div
+          <MdClose
             className={theme.close}
             onClick={e => this.removeOption(e, option)}
           />
@@ -290,7 +255,7 @@ class MultiSelect extends Component {
           <div id="selected-options" className={theme.selectedInput}>
             {this.renderSelected()}
           </div>
-          <div className={cx(theme.arrow, open ? theme.up : theme.down)} />
+          <FaChevronDown className={cx(theme.arrow, open ? theme.up : theme.down)} />
         </div>
         {open && (
           <div

lib/multiselect/theme.module.scss

@@ -35,13 +35,14 @@
     display: inline-flex;
     box-sizing: border-box;
     width: 100%;
-    padding: 2% 5% 0%;
+    padding: 5%;
     cursor: pointer;
     outline: none;
     min-height: fit-content;
     min-height: -moz-fit-content;
     &:hover {
-        background: rgba(71, 233, 243, 0.2);
+        background: #c4dfe6;
+        color: #6c757d;
     }
     &>span {
         white-space: nowrap;
@@ -51,7 +52,8 @@
 }
 
 :local(.item-hover) {
-    background: rgba(71, 233, 243, 0.2);
+    background: #c4dfe6 !important;
+    color: #6c757d !important;
 }
 
 :local(.show) {
@@ -77,27 +79,9 @@
 }
 
 :local(.close) {
-    height: 20px;
-    width: 20px;
-    display: flex;
-    align-self: center;
-    justify-content: center;
-    align-items: center;
     cursor: pointer;
-    &:before,
-    &:after {
-        position: absolute;
-        content: "";
-        z-index: 2;
-        border-left: 2px solid #aaa;
-        height: 10px;
-    }
-    &:before {
-        transform: rotate(45deg);
-    }
-    &:after {
-        transform: rotate(-45deg);
-    }
+    align-self: center;
+    padding-left: 0.25em;
 }
 
 :local(.selectInputWrapper) {
@@ -111,18 +95,20 @@
 }
 
 :local(.selected) {
-    min-width: fit-content;
-    padding: 2px;
     box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0.2em;
+    max-width: fit-content;
+    animation-duration: 0.15s;
+    @include zoomIn();
     div {
         flex-direction: row !important;
         display: flex;
         justify-items: space-between;
-        padding: 0 5% 0 10%;
+        padding: 0.38em;
         background: #eee;
         border-radius: 5px;
         min-width: fit-content;
-        padding: 2px;
         position: relative;
         box-sizing: border-box;
         div {
@@ -138,27 +124,23 @@
 }
 
 :local(.selected-option) {
-    background-color: rgba(71, 233, 243, 0.2);
+    background-color: #66a5ad;
+    color: white;
 }
 
 :local(.arrow) {
-    align-self: flex-start;
-    border: none;
-    border-right: 2px solid #1a237e;
-    border-bottom: 2px solid #1a237e;
-    height: 5px;
-    width: 5px;
-    margin-right: -5px;
+    align-self: center;
     transition: 0.3s ease;
-    margin-top: 5%;
+    cursor: pointer;
+    will-change: transform;
 }
 
-:local(.down) {
-    transform: rotate(45deg);
+:local(.up) {
+    transform: rotate(-180deg);
 }
 
-:local(.up) {
-    transform: rotate(-135deg);
+:local(.down) {
+    transform: rotate(0deg);
 }
 
 :local(.border-animation) {
@@ -167,7 +149,7 @@
         position: absolute;
         bottom: -2px;
         left: 0px;
-        background-color: $primary-input-active-border !important;
+        background-color: #c4dfe6 !important;
         height: 2px;
         @include inputFocus();
         animation-duration: 0.5s;