| 1 | import * as React from 'react';
|
| 2 | import type { IStyle } from '../../Styling';
|
| 3 | import type { IRenderFunction } from '../../Utilities';
|
| 4 | import type { IPersonaSharedProps } from '../../Persona';
|
| 5 | /**
|
| 6 | * {@docCategory ActivityItem}
|
| 7 | */
|
| 8 | export interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement> {
|
| 9 | /**
|
| 10 | * An element describing the activity that took place. If no `activityDescription`, `activityDescriptionText`, or
|
| 11 | * `onRenderActivityDescription` are included, no description of the activity is shown.
|
| 12 | */
|
| 13 | activityDescription?: React.ReactNode[] | React.ReactNode;
|
| 14 | /**
|
| 15 | * Text describing the activity that occurred and naming the people involved in it.
|
| 16 | * @deprecated Use `activityDescription` instead.
|
| 17 | */
|
| 18 | activityDescriptionText?: string;
|
| 19 | /**
|
| 20 | * An element containing an icon shown next to the activity item.
|
| 21 | */
|
| 22 | activityIcon?: React.ReactNode;
|
| 23 | /**
|
| 24 | * If `activityIcon` is not set, the personas in this array will be used as the icon for the this activity item.
|
| 25 | */
|
| 26 | activityPersonas?: IPersonaSharedProps[];
|
| 27 | /**
|
| 28 | * An element containing the text of comments or \@mention messages.
|
| 29 | * If no `comments`, `commentText`, or `onRenderComments` are included, no comments are shown.
|
| 30 | */
|
| 31 | comments?: React.ReactNode[] | React.ReactNode;
|
| 32 | /**
|
| 33 | * Text of comments or \@mention messages.
|
| 34 | * @deprecated Use `comments` instead.
|
| 35 | */
|
| 36 | commentText?: string;
|
| 37 | /**
|
| 38 | * Indicated if the compact styling should be used.
|
| 39 | */
|
| 40 | isCompact?: boolean;
|
| 41 | /**
|
| 42 | * A renderer for the description of the current activity.
|
| 43 | */
|
| 44 | onRenderActivityDescription?: IRenderFunction<IActivityItemProps>;
|
| 45 | /**
|
| 46 | * A renderer that adds the text of a comment below the activity description.
|
| 47 | */
|
| 48 | onRenderComments?: IRenderFunction<IActivityItemProps>;
|
| 49 | /**
|
| 50 | * A renderer to create the icon next to the activity item.
|
| 51 | */
|
| 52 | onRenderIcon?: IRenderFunction<IActivityItemProps>;
|
| 53 | /**
|
| 54 | * Custom renderer for a time stamp. If not included, `timeStamp` is shown as plain text below the activity.
|
| 55 | */
|
| 56 | onRenderTimeStamp?: IRenderFunction<IActivityItemProps>;
|
| 57 | /**
|
| 58 | * Optional styling for the elements within the activity item.
|
| 59 | */
|
| 60 | styles?: IActivityItemStyles;
|
| 61 | /**
|
| 62 | * Element shown as a timestamp on this activity. If not included, no timestamp is shown.
|
| 63 | */
|
| 64 | timeStamp?: string | React.ReactNode[] | React.ReactNode;
|
| 65 | /**
|
| 66 | * Beacon color one
|
| 67 | */
|
| 68 | beaconColorOne?: string;
|
| 69 | /**
|
| 70 | * Beacon color two
|
| 71 | */
|
| 72 | beaconColorTwo?: string;
|
| 73 | /**
|
| 74 | * Enables/disables the beacon that radiates from the center of the center of the activity icon.
|
| 75 | * Signals an activity has started.
|
| 76 | * @defaultvalue false
|
| 77 | */
|
| 78 | animateBeaconSignal?: boolean;
|
| 79 | }
|
| 80 | /**
|
| 81 | * {@docCategory ActivityItem}
|
| 82 | */
|
| 83 | export interface IActivityItemStyles {
|
| 84 | /**
|
| 85 | * Styles applied to the root activity item container.
|
| 86 | */
|
| 87 | root?: IStyle;
|
| 88 | /**
|
| 89 | * Styles applied to the root activity item container.
|
| 90 | */
|
| 91 | pulsingBeacon?: IStyle;
|
| 92 | /**
|
| 93 | * Styles applied to the main container of the activity's description.
|
| 94 | */
|
| 95 | activityContent?: IStyle;
|
| 96 | /**
|
| 97 | * Styles applied to the persona of the user that did this activity.
|
| 98 | */
|
| 99 | activityPersona?: IStyle;
|
| 100 | /**
|
| 101 | * Styles applied to the activity's description.
|
| 102 | */
|
| 103 | activityText?: IStyle;
|
| 104 | /**
|
| 105 | * Styles applied to the icon indicating the type of the activity. Only shown when personas are unavailable.
|
| 106 | */
|
| 107 | activityTypeIcon?: IStyle;
|
| 108 | /**
|
| 109 | * Styles applied to the text of comments.
|
| 110 | */
|
| 111 | commentText?: IStyle;
|
| 112 | /**
|
| 113 | * Styles applied to personas when two users are involved in a single activity.
|
| 114 | */
|
| 115 | doublePersona?: IStyle;
|
| 116 | /**
|
| 117 | * Styles applied to root in the compact variant.
|
| 118 | */
|
| 119 | isCompactRoot?: IStyle;
|
| 120 | /**
|
| 121 | * Styles applied to personas and icons in the compact variant.
|
| 122 | */
|
| 123 | isCompactIcon?: IStyle;
|
| 124 | /**
|
| 125 | * Styles applied to main text container in the compact variant.
|
| 126 | */
|
| 127 | isCompactContent?: IStyle;
|
| 128 | /**
|
| 129 | * Styles applied to personas in the compact variant.
|
| 130 | */
|
| 131 | isCompactPersona?: IStyle;
|
| 132 | /**
|
| 133 | * Styles applied to a wrapper around personas in the compact variant.
|
| 134 | */
|
| 135 | isCompactPersonaContainer?: IStyle;
|
| 136 | /**
|
| 137 | * Styles applied to the container of the persona image or activity type icon.
|
| 138 | */
|
| 139 | personaContainer?: IStyle;
|
| 140 | /**
|
| 141 | * Styles applied to the timestamp at the end of each activity item.
|
| 142 | */
|
| 143 | timeStamp?: IStyle;
|
| 144 | /**
|
| 145 | * Styles applied to the timestamp in compact mode.
|
| 146 | * This can occur if a host overrides the render behavior to force the timestamp to render.
|
| 147 | */
|
| 148 | isCompactTimeStamp?: IStyle;
|
| 149 | }
|