Merge pull request #129 from microsoft/feature

1. Added functionality to plug in custom command bar items

Author: kushalmehrotra713

README.md

@@ -307,6 +307,16 @@ This starts the project on port 3000 and you are ready to play around with the E
                 enableBulkEdit={true}
                 enableColumnEdit={true}
                 enableSave={true}
+                customCommandBarItems={[
+                    {
+                        key: "CustomCommandBarItem1",
+                        name: "Custom Command Bar Item1",
+                        iconProps: { iconName: "Download" },
+                        onClick: () => {
+                          alert('Clicked');
+                        },
+                    }
+                ]}
             />
         </Fabric>
     );

package-lock.json

@@ -38,7 +38,7 @@
     "office-ui-fabric-react": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "5.0.0",
     "react-toastify": "^7.0.4",
     "typescript": "^4.3.5",
     "web-vitals": "^1.1.2",
@@ -47,12 +47,12 @@
     "y18n": "^3.2.2"
   },
   "devDependencies": {
+    "immer": ">=9.0.6",
     "just-scripts": "^0.27.0",
     "just-stack-react": "^1.0.0",
-    "immer": ">=9.0.6",
-    "tar": ">=6.1.9",
     "marked": ">=4.0.10",
-    "nth-check": ">=2.0.1"
+    "nth-check": ">=2.0.1",
+    "tar": ">=6.1.9"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -345,6 +345,16 @@ const Consumer = () => {
                 }}
                 onGridUpdate={onGridUpdate}
                 enableDefaultEditMode={gridConfigOptions.enableDefaultEditMode}
+                customCommandBarItems={[
+                    {
+                        key: "CustomCommandBarItem1",
+                        name: "Custom Command Bar Item1",
+                        iconProps: { iconName: "Download" },
+                        onClick: () => {
+                          alert('Clicked');
+                        },
+                    }
+                ]}
             />
 
             {teachingBubbleVisible && (

src/Examples/gridconsumer/gridconsumer.tsx

@@ -1553,6 +1553,10 @@ const EditableGrid = (props: Props) => {
                 onClick: () => ResetGridData()
             });
         }
+
+        if(props.customCommandBarItems && props.customCommandBarItems.length > 0){
+            return [...commandBarItems, ...props.customCommandBarItems];
+        }
 
         return commandBarItems;
     };
@@ -1593,9 +1597,18 @@ const EditableGrid = (props: Props) => {
         return commandBarItems;
     };
 
+    const CreateCommandBarOverflowItemsProps = () : ICommandBarItemProps[] => {
+        if(props.customCommandBarOverflowItems && props.customCommandBarOverflowItems.length > 0){
+            return [...props.customCommandBarOverflowItems];
+        };
+
+        return [];
+    };
+
     const GridColumns = CreateColumnConfigs();
     const CommandBarItemProps = CreateCommandBarItemProps();
     const CommandBarFarItemProps = CreateCommandBarFarItemProps(); 
+    const CommandBarOverflowItemsProps = CreateCommandBarOverflowItemsProps();
     function _getSelectionDetails() : string {
         const count = _selection.getSelectedCount();
         setSelectionCount(count);
@@ -1777,6 +1790,7 @@ const EditableGrid = (props: Props) => {
             {props.enableCommandBar === undefined || props.enableCommandBar === true ? <CommandBar
                 items={CommandBarItemProps}
                 ariaLabel="Command Bar"
+                overflowItems={CommandBarOverflowItemsProps}
                 farItems={CommandBarFarItemProps}
                 /> : null}
             {showSpinner ? 

src/libs/editablegrid/editablegrid.tsx

@@ -4,6 +4,11 @@
 import { ExportType } from "../types/exporttype";
 import * as XLSX from 'xlsx';
 import * as FileSaver from 'file-saver';
+declare global {
+    interface Navigator {
+        msSaveBlob?: (blob: any, defaultName?: string) => boolean
+    }
+}
 
 export const ExportToExcelUtil = (exportData : any[], fileName : string): void => 
 {

src/libs/editablegrid/gridexportutil.tsx

@@ -16,12 +16,12 @@ const SearchableDropdown = (props: Props) => {
     const [placeholder, setPlaceHolder] = React.useState<string>();
 
     useEffect(() => {
-        setDropdownOptions(props.options);
+        setDropdownOptions(props.options as IDropdownOption[]);
         setPlaceHolder(props.placeholder);
     }, [props.options]);
 
     const onFilterTextUpdate = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, searchText: string | undefined): void => {
-        var dropdownOptionsTmp : IDropdownOption[] = [...props.options.filter(x => x.itemType != DropdownMenuItemType.Header)];
+        var dropdownOptionsTmp : IDropdownOption[] = [...(props.options as IDropdownOption[]).filter(x => x.itemType != DropdownMenuItemType.Header)];
         var matches : IDropdownOption[] = dropdownOptionsTmp.filter(x => x.text.toLowerCase().indexOf(searchText?.toLowerCase() ?? '') > -1);
         setPlaceHolder(`[${matches.length.toString()} match${matches.length != 1 ? 'es' : ''} found]`);
         setDropdownOptions(matches);

src/libs/editablegrid/searchabledropdown/searchabledropdown.tsx

@@ -1,3 +1,4 @@
+import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import { ConstrainMode } from "office-ui-fabric-react/lib/components/DetailsList";
 import { IDetailsListProps } from "office-ui-fabric-react/lib/components/DetailsList/DetailsList";
 import { IColumnConfig } from "./columnconfigtype";
@@ -40,4 +41,6 @@ export interface Props extends IDetailsListProps {
     onGridStatusMessageCallback?: any;
     gridCopyOptions?: IGridCopy;
     enableDefaultEditMode?: boolean;
+    customCommandBarItems?: ICommandBarItemProps[];
+    customCommandBarOverflowItems?: ICommandBarItemProps[];
 }