Merge pull request #1434 from wuxiaojun514/dev

#1430  -  ListItemComments

Author: joaojmendes

docs/documentation/docs/assets/ListItemComments05.png

@@ -35,7 +35,29 @@ import { ListItemComments } from '@pnp/spfx-controls-react/lib/ListItemComments'
                   label="ListItem Comments"
                   />
 ```
+## Use "highlightedCommentId" parameter to support Comment Notification Link
+SharePoint will send a comment notification if someone has been ***"@"*** in the comment. This comment notification mail contains a ***Go to comment*** button. 
 
+![ListItemComments](../assets/ListItemComments05.png)
+
+The "Go to Comment" link is like [https://xxx.sharepoint.com/sites/xxxx/Lists/MyList/DispForm.aspx?ID=1&commentId=1&e=LURoEsg5Zki4cS4SgcIG7w&at=15&CT=1674882847351&OR=OWA-NT&CID=c3a04ee0-40b5-9591-e6a4-3fac33046a64](https://xxx.sharepoint.com/sites/xxxx/Lists/MyList/DispForm.aspx?ID=1&commentId=1&e=LURoEsg5Zki4cS4SgcIG7w&at=15&CT=1674882847351&OR=OWA-NT&CID=c3a04ee0-40b5-9591-e6a4-3fac33046a64), which contains ***commentId*** in url parameter.
+
+The comment whose id is commentId will be highlighted in the OOTB SharePoint List Item page. 
+You can use ***highlightedCommentId*** to specify the comment you want to highlight in `ListItemComments` control.
+
+```TypeScript
+<ListItemComments webUrl='{"https://contoso.sharepoint.com/sites/ThePerspective"}'
+                  listId='dfa283f4-5faf-4d54-b6b8-5bcaf2725af5'
+                  itemId={1}
+                  serviceScope={serviceScope}
+                  numberCommentsPerPage={10}
+                  highlightedCommentId={"1"}
+                  label="ListItem Comments"
+                  />
+```
+
+The specified comment will be highlighted with different border and background color (Use theme color).
+![ListItemComments](../assets/ListItemComments06.png)
 
 ## Implementation
 
@@ -50,6 +72,8 @@ The `ListItemComments` control can be configured with the following properties:
 | webUrl | string | no | URL of the site. By default it uses the current site URL. |
 | label | string | no | Label for control |
 | numberCommentsPerPage | number  | no | number of comments per page possible values 5 | 10 | 15 | 20  default 10 |
+| highlightedCommentId | string | no | The commend Id (e.g. "1") you want to highlight. This selected comment will show with different border and background color based on site theme |
+
 
 ## MSGraph Permissions required
 

docs/documentation/docs/assets/ListItemComments06.png

@@ -7,19 +7,21 @@ import { Theme } from "spfx-uifabric-themes"; // Don't remove this import is nee
 import { CommentsList } from "./components/Comments/CommentsList";
 import { Stack } from "office-ui-fabric-react/lib/Stack";
 import { Text } from "office-ui-fabric-react/lib/Text";
+
 export interface IListItemCommentsProps {
   webUrl?: string;
   listId: string;
   itemId: string;
   serviceScope: ServiceScope;
   numberCommentsPerPage?: 5 | 10 | 15 | 20;
   label?: string;
+  highlightedCommentId?:string;
 }
 const theme = window.__themeState__.theme;
 export const ListItemComments: React.FunctionComponent<IListItemCommentsProps> = (
   props: React.PropsWithChildren<IListItemCommentsProps>
 ) => {
-  const { webUrl, listId, itemId, serviceScope, numberCommentsPerPage, label } = props;
+  const { webUrl, listId, itemId, serviceScope, numberCommentsPerPage, label,highlightedCommentId } = props;
 
   if (!listId && !itemId && !serviceScope) return;
 
@@ -34,6 +36,7 @@ export const ListItemComments: React.FunctionComponent<IListItemCommentsProps> =
             theme: theme,
             serviceScope: serviceScope,
             label: label,
+            highlightedCommentId:highlightedCommentId,
             numberCommentsPerPage: numberCommentsPerPage,
           }}
         >

docs/documentation/docs/controls/ListItemComments.md

@@ -9,4 +9,5 @@ export interface IAppContext {
   itemId: string;
   numberCommentsPerPage?: number;
   label?:string;
+  highlightedCommentId?:string;
 }

src/controls/listItemComments/ListItemComments.tsx

@@ -12,21 +12,22 @@ import { RenderSpinner } from "./RenderSpinner";
 import { useListItemCommentsStyles } from "./useListItemCommentsStyles";
 import { useBoolean } from "@fluentui/react-hooks";
 import { List } from "office-ui-fabric-react/lib/List";
-import { ECommentAction } from "../..";
+import { AppContext, ECommentAction } from "../..";
 
 export interface IRenderCommentsProps { }
 
 export const RenderComments: React.FunctionComponent<IRenderCommentsProps> = () => {
+  const { highlightedCommentId } = useContext(AppContext);
   const { listItemCommentsState, setlistItemCommentsState } = useContext(ListItemCommentsStateContext);
-  const { documentCardStyles, itemContainerStyles, deleteButtonContainerStyles } = useListItemCommentsStyles();
+  const { documentCardStyles,documentCardHighlightedStyles, itemContainerStyles, deleteButtonContainerStyles } = useListItemCommentsStyles();
   const { comments, isLoading } = listItemCommentsState;
 
   const [hideDialog, { toggle: setHideDialog }] = useBoolean(true);
 
   const onRenderCell = useCallback(
     (comment: IComment, index: number): JSX.Element => {
       return (
-        <DocumentCard styles={documentCardStyles} key={index}>
+        <DocumentCard styles={ highlightedCommentId && comment.id===highlightedCommentId? documentCardHighlightedStyles : documentCardStyles} key={index}>
           <Stack horizontal horizontalAlign="end" styles={deleteButtonContainerStyles}>
             <IconButton
               iconProps={{ iconName: "Delete" }}

src/controls/listItemComments/common/IAppContext.ts

@@ -16,6 +16,7 @@ interface returnObjectStyles {
   renderUserContainerStyles: Partial<IStackStyles>;
   documentCardStyles: Partial<IDocumentCardStyles>;
   documentCardDeleteStyles: Partial<IDocumentCardStyles>;
+  documentCardHighlightedStyles: Partial<IDocumentCardStyles>;
   documentCardUserStyles: Partial<IDocumentCardStyles>;
   configurationListClasses: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
@@ -58,6 +59,19 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     } as IStyle,
   };
 
+  const documentCardHighlightedStyles: Partial<IDocumentCardStyles> = {
+    root: {
+      marginBottom: 7,
+      width: 322,
+      backgroundColor: theme.themeLighter,
+      border: "solid 3px "+theme.themePrimary,
+      ":hover": {
+        borderColor: theme.themePrimary,
+        borderWidth: 1,
+      } as IStyle,
+    } as IStyle,
+  };
+
   const documentCardDeleteStyles: Partial<IDocumentCardStyles> = {
     root: {
       marginBottom: 5,
@@ -121,6 +135,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     renderUserContainerStyles,
     documentCardStyles,
     documentCardDeleteStyles,
+    documentCardHighlightedStyles,
     documentCardUserStyles,
     configurationListClasses,
   };