Merge pull request #126 from microsoft/feature

1. Added Password field support

Author: kushalmehrotra713

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-editable-grid",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "license": "MIT",
   "description": "Wrapper over the existing DetailsList that makes in-place editability work like a dream(among many other new features)",
   "main": "dist/index.js",

src/Examples/gridconsumer/gridconfig.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import React from "react";
 import { NumberAndDateOperators, StringOperators } from "../../libs/types/cellstyleruletype";
 import { IColumnConfig } from "../../libs/types/columnconfigtype";
 import { EditControlType } from "../../libs/types/editcontroltype";
@@ -50,6 +51,20 @@ export const GridColumnConfig : IColumnConfig[] =
         includeColumnInSearch: true,
         applyColumnFilter: true
     },
+    {
+        key: 'password',
+        name: 'Password',
+        text: 'Password',
+        editable: true,
+        dataType: 'string',
+        minWidth: 100,
+        maxWidth: 100,
+        isResizable: true,
+        includeColumnInExport: true,
+        includeColumnInSearch: true,
+        applyColumnFilter: true,
+        inputType: EditControlType.Password
+    },
     {
         key: 'age',
         name: 'Age',
@@ -192,6 +207,7 @@ export interface GridItemsType {
     id: number;
     customerhovercol: string;
     name: string;
+    password: string;
     age: number;
     designation: string;
     salary: number;

src/Examples/gridconsumer/gridconsumer.tsx

@@ -151,6 +151,7 @@ const Consumer = () => {
                 id: i,
                 customerhovercol: 'Hover Me',
                 name: 'Name'+ GetRandomInt(1, 10),
+                password: "somepassword",
                 age: GetRandomInt(20,40),
                 designation: 'Designation' + GetRandomInt(1, 15),
                 salary: GetRandomInt(35000, 75000),
@@ -224,7 +225,7 @@ const Consumer = () => {
     };
 
     const onCheckboxChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean): void => {
-        setGridConfigOptions({...gridConfigOptions, [(ev.target as Element).id]: !gridConfigOptions[(ev.target as Element).id] })
+        setGridConfigOptions({...gridConfigOptions, [(ev!.target as Element).id]: !gridConfigOptions[(ev!.target as Element).id] })
     };
 
     return (
@@ -350,7 +351,7 @@ const Consumer = () => {
                 <TeachingBubble
                 target={teachingBubblePropsConfig?.config.target}
                 primaryButtonProps={teachingBubblePropsConfig?.id < teachingBubbleConfig.length - 1 ? nextBubbleProps : closeButtonProps}
-                secondaryButtonProps={teachingBubblePropsConfig?.id > 0 ? previousBubbleProps : null}
+                secondaryButtonProps={teachingBubblePropsConfig?.id > 0 ? previousBubbleProps : undefined}
                 onDismiss={toggleTeachingBubbleVisible}
                 footerContent={teachingBubblePropsConfig?.config.footerContent} 
                 headline={teachingBubblePropsConfig?.config.headline}

src/libs/editablegrid/editablegrid.tsx

@@ -1252,6 +1252,37 @@ const EditableGrid = (props: Props) => {
                                     (RenderLinkSpan(props, index, rowNum, column, item, EditCellValue))
                                 )
                                 }</span>
+                        case EditControlType.Password:
+                            return <span>{
+                                (ShouldRenderSpan()) 
+                                ? 
+                                (column?.hoverComponentOptions?.enable ? 
+                                    (<HoverCard
+                                      type={HoverCardType.plain}
+                                      plainCardProps={{
+                                        onRenderPlainCard: () => onRenderPlainCard(column, rowNum!, item),
+                                    }}
+                                      instantOpenOnClick
+                                    >
+                                      {RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue)}
+                                    </HoverCard>) 
+                                    :
+                                    (RenderPasswordFieldSpan(props, index, rowNum, column, item, EditCellValue))
+                                )
+                                : 
+                                (<TextField
+                                    errorMessage={activateCellEdit[rowNum!]['properties'][column.key].error}
+                                    label={item.text}
+                                    ariaLabel={column.key}
+                                    styles={textFieldStyles}
+                                    onChange={(ev, text) => onCellValueChange(ev, text!, item, rowNum!, column.key, column)}
+                                    autoFocus={!props.enableDefaultEditMode && !editMode && !(activateCellEdit?.[Number(item['_grid_row_id_'])!]?.['isActivated'])}
+                                    value={activateCellEdit[rowNum!]['properties'][column.key].value}
+                                    onKeyDown={(event) => onKeyDownEvent(event, column, rowNum!, false)}
+                                    maxLength={column.maxLength != null ? column.maxLength : 1000}
+                                    type="password"
+                                    canRevealPassword
+                                />)}</span>
                         default:
                             return <span>{
                                 (ShouldRenderSpan()) 
@@ -1633,6 +1664,17 @@ const EditableGrid = (props: Props) => {
     const RenderTextFieldSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick);
     }
+
+    const RenderPasswordFieldSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
+        return <span
+            id={`id-${props.id}-col-${index}-row-${rowNum}`}
+            className={GetDynamicSpanStyles(column, item[column.key])}
+            onClick={HandleCellOnClick(props, column, EditCellValue, rowNum)}
+            onDoubleClick={HandleCellOnDoubleClick(props, column, EditCellValue, rowNum)}
+            >
+                {item[column.key].replace(/./g, '*')}
+            </span>;
+    }
 
     const RenderPickerSpan = (props: Props, index: number, rowNum: number, column: IColumnConfig, item: any, EditCellValue: (key: string, rowNum: number, activateCurrentCell: boolean) => void): React.ReactNode => {
         return RenderSpan(props, index, rowNum, column, item, HandleCellOnClick, EditCellValue, HandleCellOnDoubleClick);

src/libs/types/editcontroltype.tsx

@@ -9,5 +9,6 @@ export enum EditControlType {
     MultilineTextField,
     DateTime,
     Picker,
-    Link
+    Link,
+    Password
 }