[G2M] Multiple search delete button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eqworks/lumen-labs",
-  "version": "0.1.0-alpha.123",
+  "version": "0.1.0-alpha.134",
   "description": "",
   "main": "dist/index.js",
   "source": "src/index.js",

src/base-components/input-base.js

@@ -22,6 +22,7 @@ const InputBase = forwardRef(({
   required = false,
   disabled = false,
   refocus = false,
+  isPlaceholderValue = false,
   ...rest
 }, ref) => {
   const baseClasses = Object.freeze({
@@ -92,7 +93,7 @@ const InputBase = forwardRef(({
       />
       {suffix && <span className={classes.suffix}>{suffix}</span>}
       {endIcon && !((value || _value) && hideIcon) && <div className={classes.endIcon}>{endIcon}</div>}
-      {deleteButton && (value || _value) &&
+      {deleteButton && (value || _value || isPlaceholderValue) &&
         <div className={classes.endIcon} onMouseDown={handleDelete}>
           <Delete className='fill-current text-secondary-600 cursor-pointer' size={size}/>
         </div>
@@ -119,6 +120,7 @@ InputBase.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   refocus: PropTypes.bool,
+  isPlaceholderValue: PropTypes.bool,
 }
 
 InputBase.displayName = 'InputBase'

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 { includesAny } from '../utils/string'
 
 
 const DropdownMultiSearch = ({
@@ -31,32 +32,42 @@ const DropdownMultiSearch = ({
   onOpenClose = () => {},
   noOptionsMessage = '',
   clearSearch = true,
+  deleteButton = true,
+  initOpen = false,
   ...rest
 }) => {
   const { ref, componentIsActive, setComponentIsActive } = useComponentIsActive()
   const [searchTerm, setSearchTerm] = useState('')
-  const [openMenu, setOpenMnu] = useState(false)
   const [filteredOptions, setFilteredOptions] = useState(data || [])
   const [selectedFilters, setSelectedFilters] = useState([])
 
   const defaultOption = 'any value'
   const displayValue = selectedFilters?.length ? selectedFilters.join(' or ') : defaultOption
-  const inputPlaceholder = openMenu ? 'Type to search' : `is ${displayValue}`
+  const inputPlaceholder = componentIsActive ? 'Type to search' : `is ${displayValue}`
 
   const styles = makeStyles({
     root: {
       position: 'relative',
+      heigh: '100%',
+      display: 'flex',
+      alignItems: 'center',
+
       '.dropdown-multi-search-textfield-root': {
         height: '2.35rem',
       },
       '.dropdown-multi-search-textfield-input': {
-        cursor: openMenu ? 'text' : 'pointer',
-        caretColor: openMenu ? 'inherit' : 'transparent',
+        cursor: componentIsActive ? 'text' : 'pointer',
+        caretColor: componentIsActive ? 'inherit' : 'transparent',
         '&::placeholder': {
-          color: openMenu || displayValue === defaultOption ? '#C8C8C8' : 'inherit',
+          color: componentIsActive || displayValue === defaultOption ? '#C8C8C8' : 'inherit',
+        },
+      },
+      '.dropdown-multi-search-textfield-container': {
+        '& .textfield__end-icon-container': {
+          display: 'flex',
+          alignItems: 'center',
         },
       },
-      '.dropdown-multi-search-textfield-container': {},
       '.dropdown-multi-search-dropdown-root':{
         position: 'absolute',
         display: 'block',
@@ -102,7 +113,6 @@ const DropdownMultiSearch = ({
   const handleOnClick = () => {
     onClick()
     setComponentIsActive( (state) => !state)
-    setOpenMnu(!openMenu)
   }
 
   const handleOnSelect = (_, selected) => {
@@ -114,15 +124,40 @@ const DropdownMultiSearch = ({
     }
   }
 
+  const handleDelete = (e) => {
+    if (searchTerm) {
+      setSearchTerm('')
+      onDelete(e, 'search')
+    }
+
+    if (!searchTerm && selectedFilters.length > 0) {
+      setSelectedFilters([])
+      onDelete(e, 'select')
+    }
+  }
+
   useEffect(() => {
     setFilteredOptions(data)
   }, [data])
 
-  if (!componentIsActive && openMenu) {
-    setOpenMnu(false)
-    setSearchTerm('')
-    setFilteredOptions(data)
-  }
+  useEffect(() => {
+    if (value.length > 0) {
+      setSelectedFilters(value)
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (!componentIsActive) {
+      setSearchTerm('')
+      setFilteredOptions(data)
+    }
+  }, [componentIsActive, data])
+
+  useEffect(() => {
+    if (initOpen) {
+      setComponentIsActive(true)
+    }
+  }, [initOpen, setComponentIsActive])
 
   return (
     <div className={styles.root} ref={ref}>
@@ -139,12 +174,15 @@ const DropdownMultiSearch = ({
         refocus={componentIsActive}
         size={size}
         disabled={disabled}
+        isPlaceholderValue={!componentIsActive && includesAny(displayValue, selectedFilters)}
+        onDelete={handleDelete}
+        deleteButton={deleteButton}
       />
       <DropdownSelect
         simple
         multiSelect={true}
         classes={{
-          root: `${openMenu ? 'dropdown-multi-search-dropdown-root' : 'dropdown-multi-search-dropdown-root-close'} ${classes.dropdownRoot}`,
+          root: `${componentIsActive ? 'dropdown-multi-search-dropdown-root' : 'dropdown-multi-search-dropdown-root-close'} ${classes.dropdownRoot}`,
           button: `dropdown-multi-search-dropdown-button ${classes.dropdownButton}`,
           content: `dropdown-multi-search-dropdown-content ${classes.dropdownContent}`,
           innerButton: `dropdown-multi-search-dropdown-inner-button ${classes.dropdownInnerButton}`,
@@ -159,11 +197,12 @@ const DropdownMultiSearch = ({
         limit={data?.length}
         size={size}
         defaultValue={defaultValue}
-        value={value}
+        value={selectedFilters}
         onDelete={onDelete}
         startIcon={startIcon}
         endIcon={endIcon}
         onOpenClose={onOpenClose}
+        initOpen={initOpen}
         {...rest}
       />
     </div>
@@ -193,6 +232,8 @@ DropdownMultiSearch.propTypes = {
   disabled: PropTypes.bool,
   noOptionsMessage: PropTypes.string,
   clearSearch: PropTypes.bool,
+  deleteButton: PropTypes.bool,
+  initOpen: PropTypes.bool,
 }
 
 DropdownMultiSearch.displayName = 'DropdownMultiSearch'

src/components/dropdown-select.js

@@ -9,14 +9,14 @@ import { useComponentIsActive } from '../hooks'
 import clsx from 'clsx'
 
 
-const _contentSize = (size) => {
+const _contentSize = (size, hideSelected) => {
   let contentSize = ''
 
   switch(size) {
   case 'lg':
     contentSize = {
       optionSize: 'mb-9px',
-      itemContainer: 'py-5px',
+      itemContainer: hideSelected ? '' : 'py-5px',
       contentContainer: 'py-5px',
       type: 'py-2.5',
       description: 'text-xs',
@@ -26,7 +26,7 @@ const _contentSize = (size) => {
   case 'md':
     contentSize = {
       optionSize: 'mb-5px',
-      itemContainer: 'py-3px',
+      itemContainer: hideSelected ? '' : 'py-3px',
       contentContainer: 'py-3px',
       type: 'py-1.5',
       description: 'text-11px',
@@ -76,9 +76,11 @@ const DropdownSelect = ({
   allowClear = true,
   simple = false,
   preventDeselect = false,
+  hideSelected = false,
   onOpenClose = () => {},
   alwaysOpen = false,
   noOptionsMessage = 'No options',
+  initOpen = false,
   ...rest
 }) => {
   const [options, setOptions] = useState([])
@@ -98,6 +100,13 @@ const DropdownSelect = ({
     }
   }, [fallbackEmptyValue, uncontrolled, value])
 
+  useEffect(() => {
+    if (initOpen && ref.current) {
+      setComponentIsActive(true)
+      setOpen(true)
+    }
+  }, [initOpen, ref, setComponentIsActive])
+
   const simpleData = useMemo(() => ([{ items: data.map(d => ({ title: d })) }]), [data])
   const simpleSelectedOptions = useMemo(() => (
     multiSelect
@@ -108,7 +117,7 @@ const DropdownSelect = ({
   const finalSelectedOptions = useMemo(() => simple ? simpleSelectedOptions : selectedOptions, [selectedOptions, simple, simpleSelectedOptions])
   const finalData = useMemo(() => simple ? simpleData : data, [data, simple, simpleData])
 
-  const contentSize = _contentSize(size)
+  const contentSize = _contentSize(size, hideSelected)
   const dropdownSelectClasses = Object.freeze({
     listContainer: `dropdown-select__list-containercapitalize ${classes.listContainer}`,
     itemContainer: `dropdown-select__item-container text-secondary-600 ${contentSize.itemContainer}`,
@@ -117,11 +126,11 @@ 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',
-    selected: 'dropdown-select__selected font-semibold text-secondary-900 bg-interactive-100 hover:text-secondary-900 hover:bg-interactive-100',
+    selected: `dropdown-select__selected font-semibold text-secondary-900 bg-interactive-100 hover:text-secondary-900 hover:bg-interactive-100 ${hideSelected ? 'hidden' : ''}`,
     selectedOptionTitle: `dropdown-select__selected-title-container ${classes.selectedOptionTitle ? classes.selectedOptionTitle : 'mr-2.5 text-secondary-800'}`,
     noOptionsMessage: `dropdown-select__no-options-message-container  text-secondary-600 flex items-center justify-center p-2.5 text-center ${classes.noOptionsMessage}`,
   })
@@ -186,7 +195,7 @@ const DropdownSelect = ({
   }
 
   const renderList = ({ items, type }) => (
-    items.map((item, index) =>
+    items.map((item, index) => (
       <div
         key={`item-container-${index}`}
         className={`item-container-${index} ${dropdownSelectClasses.itemContainer}`}
@@ -201,8 +210,8 @@ const DropdownSelect = ({
           {renderListItem(item)}
           {item.description && <div className={`description-container-${index} ${dropdownSelectClasses.description}`}>{item.description}</div>}
         </div>
-      </div>,
-    )
+      </div>
+    ))
   )
 
   const renderListItem = (item) => {
@@ -273,12 +282,13 @@ const DropdownSelect = ({
   const onClickClose = (e, value) => {
     e.stopPropagation()
     handleOnClick('', value, 'chip')
+    onDelete(e, 'multi', value)
   }
 
   const onClickDelete = (e) => {
     e.stopPropagation()
     setSelectedOptions('')
-    onDelete(e)
+    onDelete(e, 'select')
   }
 
   return (
@@ -318,8 +328,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>}
+                {el.divider && <div className={`divider-container-${index} ${dropdownSelectClasses.dividerContainer}`} onClick={el.divider.onClick}>{renderListItem(el.divider)}</div>}
                 {renderList(el)}
-                {el.divider && <div className={`divider-container-${index} ${dropdownSelectClasses.dividerContainer}`}>{renderListItem(el.divider)}</div>}
               </Menu.Item>
             )
           })}
@@ -351,6 +361,7 @@ DropdownSelect.propTypes = {
           title: PropTypes.string,
           startIcon: PropTypes.node,
           endIcon: PropTypes.node,
+          onClcik: PropTypes.func,
         }),
       }),
     ),
@@ -383,6 +394,8 @@ DropdownSelect.propTypes = {
   onOpenClose: PropTypes.func,
   alwaysOpen: PropTypes.bool,
   noOptionsMessage: PropTypes.string,
+  initOpen: PropTypes.bool,
+  hideSelected: PropTypes.bool,
 }
 
 DropdownSelect.displayName = 'DropdownSelect'