Merge pull request #15 from RedMadRobot/multiselect

Multiselect

Author: pbuba

example/MultiSelect/MultiSelect.css

@@ -9,16 +9,38 @@
 }
 
 .wrapper {
+  position: relative;
   border: 1px solid #ccc;
   border-radius: 15px;
   min-width: 400px;
   max-width: 700px;
   padding: 2px 5px;
+  padding-right: 50px;
   display: flex;
   flex-wrap: wrap;
   background-color: #fff;
 }
 
+.wrapper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translate(0, -50%) rotate(0deg);
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-image: url('./img/chevron-down.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+
+.wrapper-open::before {
+  transform: translate(0, -50%) rotate(180deg);
+}
+
 .input {
   width: 100px;
   flex-grow: 1;
@@ -43,21 +65,21 @@
 }
 
 .item.selected::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 5px;
   right: 5px;
   width: 10px;
   height: 10px;
-  background-image: url("./check.svg");
+  background-image: url('./img/check.svg');
   background-repeat: no-repeat;
 }
 
 .multivalue {
   display: flex;
   justify-content: space-between;
   margin: 2px;
-  padding: 5px 10px;
+  padding: 2px 10px;
   padding-right: 5px;
   border: 1px solid #413d51;
   border-radius: 15px;
@@ -72,13 +94,33 @@
   border: none;
   border-radius: 50%;
   background-color: transparent;
-  background-image: url("./close.svg");
+  background-image: url('./img/close.svg');
   background-size: 10px 10px;
-  background-position: center center;
+  background-position: center;
   background-repeat: no-repeat;
 }
 
 .remove:hover {
   outline: 1px solid #413d51;
   cursor: pointer;
 }
+
+.reset {
+  position: absolute;
+  top: 50%;
+  right: 30px;
+  width: 16px;
+  height: 16px;
+  border: none;
+  cursor: pointer;
+  background-image: url('./img/x-circle.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  transform: translate(0, -50%);
+}
+
+.reset:hover,
+.reset:focus {
+  opacity: 0.5;
+}

example/MultiSelect/MultiSelect.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { ChangeEvent, KeyboardEvent, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { DropdownState, ReducerAction, StateChangeType, useDropdown } from '../../src';
 import './MultiSelect.css';
 
@@ -103,6 +104,11 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
     }
   };
 
+  const handleResetClick = (event) => {
+    event.stopPropagation();
+    onSelect([]);
+  };
+
   const handleRemoveClick = (item: Item) => (event) => {
     event.stopPropagation();
     const newArr = values.filter((el) => el.value !== item.value);
@@ -120,7 +126,7 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
 
   return (
     <div
-      className="wrapper"
+      className={classNames('wrapper', { 'wrapper-open': isOpen })}
       {...getWrapperProps()}
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
@@ -154,26 +160,37 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
         autoComplete="off"
       />
 
-      {isOpen && (
-        <ul className="menu" {...(getMenuProps() as any)}>
-          {options.length === 0 ? (
-            <li>No data</li>
-          ) : (
-            options.map((item: Item, index) => (
-              <li
-                key={item.value}
-                className={classNames('item', {
-                  active: highlightedIndex === index,
-                  selected: values.some((el) => el.value === item.value),
-                })}
-                {...getItemProps(item, index)}
-              >
-                {item.name}
-              </li>
-            ))
-          )}
-        </ul>
+      {values.length === 0 ? null : (
+        <button
+          className="reset"
+          onClick={handleResetClick}
+          type="button"
+          aria-label="Clear all values"
+        ></button>
       )}
+
+      {isOpen &&
+        createPortal(
+          <ul className="menu" {...(getMenuProps() as any)}>
+            {options.length === 0 ? (
+              <li>No data</li>
+            ) : (
+              options.map((item: Item, index) => (
+                <li
+                  key={item.value}
+                  className={classNames('item', {
+                    active: highlightedIndex === index,
+                    selected: values.some((el) => el.value === item.value),
+                  })}
+                  {...getItemProps(item, index)}
+                >
+                  {item.name}
+                </li>
+              ))
+            )}
+          </ul>,
+          document.body
+        )}
     </div>
   );
 };