dropdown-multi-search - add delete button

src/components/dropdown-multi-search.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 
 import { DropdownSelect, TextField, makeStyles } from '..'
 import { useComponentIsActive } from '../hooks'
+import { Delete } from '../icons'
 
 
 const DropdownMultiSearch = ({
@@ -31,6 +32,7 @@ const DropdownMultiSearch = ({
   onOpenClose = () => {},
   noOptionsMessage = '',
   clearSearch = true,
+  deleteButton = true,
   ...rest
 }) => {
   const { ref, componentIsActive, setComponentIsActive } = useComponentIsActive()
@@ -46,6 +48,10 @@ const DropdownMultiSearch = ({
   const styles = makeStyles({
     root: {
       position: 'relative',
+      heigh: '100%',
+      display: 'flex',
+      alignItems: 'center',
+
       '.dropdown-multi-search-textfield-root': {
         height: '2.35rem',
       },
@@ -114,10 +120,20 @@ const DropdownMultiSearch = ({
     }
   }
 
+  const handleDelete = () => {
+    setSelectedFilters([])
+  }
+
   useEffect(() => {
     setFilteredOptions(data)
   }, [data])
 
+  useEffect(() => {
+    if (value.length > 0) {
+      setSelectedFilters(value)
+    }
+  }, [value])
+
   if (!componentIsActive && openMenu) {
     setOpenMnu(false)
     setSearchTerm('')
@@ -159,13 +175,18 @@ const DropdownMultiSearch = ({
         limit={data?.length}
         size={size}
         defaultValue={defaultValue}
-        value={value}
+        value={selectedFilters}
         onDelete={onDelete}
         startIcon={startIcon}
         endIcon={endIcon}
         onOpenClose={onOpenClose}
         {...rest}
       />
+      {deleteButton && selectedFilters.length > 0 &&
+        <div className={classes.endIcon} onMouseDown={handleDelete}>
+          <Delete className='ml-2 fill-current text-secondary-600 cursor-pointer' size={size}/>
+        </div>
+      }
     </div>
   )
 }
@@ -193,6 +214,7 @@ DropdownMultiSearch.propTypes = {
   disabled: PropTypes.bool,
   noOptionsMessage: PropTypes.string,
   clearSearch: PropTypes.bool,
+  deleteButton: PropTypes.bool,
 }
 
 DropdownMultiSearch.displayName = 'DropdownMultiSearch'

src/components/dropdown-select.js

@@ -117,7 +117,7 @@ const DropdownSelect = ({
     contentHeader: `dropdown-select__content-header w-full flex flex-row items-center justify-between cursor-pointer ${classes.contentHeader}`,
     type: `dropdown-select__type-container px-5px flex items-center font-semibold text-secondary-400 ${contentSize.type} ${classes.type}`,
     description: `dropdown-select__description-container pt-5px font-normal text-secondary-500 ${contentSize.description} ${classes.description}`,
-    dividerContainer: `dropdown-select__divider-container px-2.5 flex flex-row items-center font-bold text-secondary-600 border-t border-secondary-300 cursor-pointer 
+    dividerContainer: `dropdown-select__divider-container px-2.5 flex flex-row items-center font-bold text-secondary-600 border-b border-secondary-300 cursor-pointer 
       ${contentSize.dividerContainer} ${classes.dividerContainer}`,
     startIcon: 'dropdown-select__start-icon-container mr-2.5 fill-current stroke-current',
     endIcon: 'dropdown-select__end-icon-container ml-2.5 fill-current stroke-current',
@@ -318,8 +318,8 @@ const DropdownSelect = ({
                 className={`list-container-${index} ${dropdownSelectClasses.listContainer}`}
               >
                 {showType && el.type && <label className={`type-container-${index} ${dropdownSelectClasses.type}`} htmlFor="span">{renderListItem(el.type)}</label>}
-                {renderList(el)}
                 {el.divider && <div className={`divider-container-${index} ${dropdownSelectClasses.dividerContainer}`} onClick={el.divider.onClick}>{renderListItem(el.divider)}</div>}
+                {renderList(el)}
               </Menu.Item>
             )
           })}
@@ -351,6 +351,7 @@ DropdownSelect.propTypes = {
           title: PropTypes.string,
           startIcon: PropTypes.node,
           endIcon: PropTypes.node,
+          onClcik: PropTypes.func,
         }),
       }),
     ),

stories/data/dropdown-data.js

@@ -68,7 +68,7 @@ export const sampleDataDivider = [
     ],
     divider: {
       title: 'Reset',
-      onClick: () => { console.log('click divider')}
+      onClick: () => {},
     },
   },
 ]

stories/dropdown.stories.js

@@ -138,6 +138,7 @@ export const Simple = () => {
  *      title: string, name of the dividir
  *      startIcon: node, icon on left side of divider title
  *      endIcon: node, icon on right side of divider title
+ *      onClick: func, callback function onClick divider item
  *    }
  * [button] - node, custom onClick element to trigger select/dropdown menu
  * [size] - string, control component size - supported sizes ['md', 'lg'], default = 'md'