feat: 🎨 adding close icon to clear field

pnp · Jun 22, 2024 · 17e42b5 · 17e42b5
1 parent bf61b7a
commit 17e42b5
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/src/controls/sitePicker/SitePicker.tsx b/src/controls/sitePicker/SitePicker.tsx
@@ -30,6 +30,7 @@ import {
   ISite,
   ISitePickerProps,
 } from './ISitePicker';
+import { Icon } from '@fluentui/react';
 
 const styles = mergeStyleSets({
   loadingSpinnerContainer: {
@@ -66,6 +67,10 @@ const styles = mergeStyleSets({
     fontWeight: '300',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
+  },
+  customChevronContainer : {
+    display: 'flex',
+    gap:'10px'
   }
 });
 
@@ -113,6 +118,27 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     setFilteredSites(newFilteredSites);
   }, [allSites]);
 
+  const clearItems = React.useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    event.stopPropagation();
+    return setSites([]);
+  },[sites]);
+
+  const CustomChevron = () => {
+    if(sites && sites.length > 0){
+      return (
+        <div className={styles.customChevronContainer} >
+          <Icon iconName="Cancel" onClick={clearItems} />
+          <Icon iconName="ChevronDown" />
+        </div>
+      )
+    }
+    return (
+      <div className={styles.customChevronContainer} >
+          <Icon iconName="ChevronDown" />
+      </div>
+    )
+  }
+
   const onSelectionChange = React.useCallback((e, item: IDropdownOption, index: number) => {
     let newSelectedSites: ISite[] = [];
     if (multiSelect !== false) {
@@ -300,9 +326,10 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       <Dropdown
         label={label}
         placeholder={placeholder}
+        onRenderCaretDown={CustomChevron}
         options={getOptions()}
-        selectedKey={multiSelect === false && !!sites && !!sites[0] ? sites[0].url : undefined}
-        selectedKeys={multiSelect !== false && !!sites ? sites.map(s => s.url) : undefined}
+        selectedKey={multiSelect === false && !!sites && !!sites[0] ? sites[0].url : []}
+        selectedKeys={multiSelect !== false && !!sites ? sites.map(s => s.url) : []}
         disabled={disabled}
         multiSelect={multiSelect !== false}
         onRenderOption={onRenderOption}