Add clear selected items button (#153)

* Add clear selected items button

* Add conditional rendering and type to clear selected button

* ♻️ cleanup

Co-authored-by: harshzalavadiya <[email protected]>

Author: Kannndev

README.md

@@ -81,6 +81,7 @@ export default Example;
 | `valueRenderer`       | custom dropdown header [docs](#-custom-value-renderer) | `function`                   |                |
 | `ItemRenderer`        | custom dropdown option [docs](#-custom-item-renderer)  | `function`                   |                |
 | `ClearIcon`           | Custom Clear Icon for Search                           | `string|function`            |                |
+| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string|function`            |                |
 
 ## 🔍 Custom filter logic
 

src/lib/get-string.tsx

@@ -4,6 +4,7 @@ const strings = {
   selectAll: "Select All",
   search: "Search",
   clearSearch: "Clear Search",
+  clearSelected: "Clear Selected",
 };
 
 export default function getString(key: string, overrideStrings?): string {

src/lib/interfaces.ts

@@ -35,4 +35,5 @@ export interface ISelectProps {
   className?: string;
   onMenuToggle?;
   ClearIcon?: string | Function;
+  ClearSelectedIcon?: string | Function;
 }

src/multi-select/dropdown.tsx

@@ -6,6 +6,8 @@
 import { css } from "goober";
 import React, { useEffect, useRef, useState } from "react";
 
+import getString from "../lib/get-string";
+import Cross from "../select-panel/cross";
 import Arrow from "./arrow";
 import Loading from "./loading";
 
@@ -19,6 +21,7 @@ interface IDropdownProps {
   labelledBy?: string;
   onMenuToggle?;
   ArrowRenderer?;
+  ClearSelectedIcon?;
 }
 
 const PanelContainer = css({
@@ -65,6 +68,13 @@ const DropdownHeading = css({
   },
 });
 
+const ClearSelectedButton = css({
+  cursor: "pointer",
+  background: "none",
+  border: 0,
+  padding: 0,
+});
+
 const Dropdown = ({
   children,
   contentComponent: ContentComponent,
@@ -75,6 +85,7 @@ const Dropdown = ({
   labelledBy,
   onMenuToggle,
   ArrowRenderer,
+  ClearSelectedIcon,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
@@ -125,6 +136,11 @@ const Dropdown = ({
   const toggleExpanded = () =>
     setExpanded(isLoading || disabled ? false : !expanded);
 
+  const handleClearSelected = (e) => {
+    e.stopPropagation();
+    contentProps["onChange"]([]);
+  };
+
   return (
     <div
       tabIndex={0}
@@ -146,6 +162,19 @@ const Dropdown = ({
       >
         <div className="dropdown-heading-value">{children}</div>
         {isLoading && <Loading />}
+        {contentProps["value"].length > 0 && (
+          <button
+            type="button"
+            className={`${ClearSelectedButton} clear-selected-button`}
+            onClick={handleClearSelected}
+            aria-label={getString(
+              "clearSelected",
+              contentProps["overrideStrings"]
+            )}
+          >
+            {ClearSelectedIcon || <Cross />}
+          </button>
+        )}
         <FinalArrow expanded={expanded} />
       </div>
       {expanded && (

src/multi-select/index.tsx

@@ -46,6 +46,7 @@ const MultiSelect = ({
   labelledBy,
   onMenuToggle,
   ClearIcon,
+  ClearSelectedIcon,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -72,6 +73,7 @@ const MultiSelect = ({
         labelledBy={labelledBy}
         onMenuToggle={onMenuToggle}
         ArrowRenderer={ArrowRenderer}
+        ClearSelectedIcon={ClearSelectedIcon}
       >
         <DropdownHeader
           value={nvalue}