add PinIndicator components to team and livestream messages

Author: DanC5

src/components/Message/MessageLivestream.js

@@ -36,7 +36,12 @@ import {
 } from './hooks';
 import { areMessagePropsEqual } from './utils';
 import { MessageActions } from '../MessageActions';
-import { ReactionIcon, ThreadIcon, ErrorIcon } from './icons';
+import {
+  ErrorIcon,
+  PinIndicator as DefaultPinIndicator,
+  ReactionIcon,
+  ThreadIcon,
+} from './icons';
 import MessageTimestamp from './MessageTimestamp';
 
 /**
@@ -76,6 +81,7 @@ const MessageLivestreamComponent = (props) => {
     t: propT,
     tDateTimeParser: propTDateTimeParser,
     MessageDeleted,
+    PinIndicator = DefaultPinIndicator,
   } = props;
   const { t: contextT } = useContext(TranslationContext);
   const t = propT || contextT;
@@ -163,6 +169,11 @@ const MessageLivestreamComponent = (props) => {
 
   return (
     <React.Fragment>
+      {message?.pinned && (
+        <div className="str-chat__message-livestream-pin-indicator">
+          <PinIndicator message={message} t={t} />
+        </div>
+      )}
       <div
         data-testid="message-livestream"
         className={`str-chat__message-livestream str-chat__message-livestream--${firstGroupStyle} str-chat__message-livestream--${
@@ -421,6 +432,12 @@ MessageLivestreamComponent.propTypes = {
    * Defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.js)
    * */
   EditMessageInput: /** @type {PropTypes.Validator<React.FC<import("types").MessageInputProps>>} */ (PropTypes.elementType),
+  /**
+   * Custom UI component to override default pinned message indicator
+   *
+   * Defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icon.js)
+   * */
+  PinIndicator: /** @type {PropTypes.Validator<React.FC<import("types").PinIndicatorProps>>} */ (PropTypes.elementType),
   /**
    *
    * @deprecated Its not recommended to use this anymore. All the methods in this HOC are provided explicitly.

src/components/Message/MessageTeam.js

@@ -32,10 +32,11 @@ import {
 } from './hooks';
 import { areMessagePropsEqual, getReadByTooltipText } from './utils';
 import {
+  DeliveredCheckIcon,
+  ErrorIcon,
+  PinIndicator as DefaultPinIndicator,
   ReactionIcon,
   ThreadIcon,
-  ErrorIcon,
-  DeliveredCheckIcon,
 } from './icons';
 import MessageTimestamp from './MessageTimestamp';
 
@@ -60,6 +61,7 @@ const MessageTeam = (props) => {
     Avatar = DefaultAvatar,
     EditMessageInput = DefaultEditMessageForm,
     MessageDeleted,
+    PinIndicator = DefaultPinIndicator,
     ReactionsList = DefaultReactionsList,
     ReactionSelector = DefaultReactionSelector,
     editing: propEditing,
@@ -162,6 +164,11 @@ const MessageTeam = (props) => {
 
   return (
     <React.Fragment>
+      {message?.pinned && (
+        <div className="str-chat__message-team-pin-indicator">
+          <PinIndicator message={message} t={t} />
+        </div>
+      )}
       <div
         data-testid="message-team"
         className={`str-chat__message-team str-chat__message-team--${firstGroupStyle} str-chat__message-team--${
@@ -509,6 +516,12 @@ MessageTeam.propTypes = {
    * Defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.js)
    * */
   EditMessageInput: /** @type {PropTypes.Validator<React.FC<import("types").MessageInputProps>>} */ (PropTypes.elementType),
+  /**
+   * Custom UI component to override default pinned message indicator
+   *
+   * Defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icon.js)
+   * */
+  PinIndicator: /** @type {PropTypes.Validator<React.FC<import("types").PinIndicatorProps>>} */ (PropTypes.elementType),
   /**
    *
    * @deprecated Its not recommended to use this anymore. All the methods in this HOC are provided explicitly.

src/components/Message/icons.js

@@ -52,3 +52,36 @@ export const ErrorIcon = () => (
     />
   </svg>
 );
+
+export const PinIcon = () => (
+  <svg
+    width="14"
+    height="13"
+    viewBox="0 0 14 13"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.3518 6.686L6.75251 0.0866699L5.80984 1.02867L6.75318 1.972V1.97334L3.45318 5.272L3.45251 5.27334L2.50984 4.32934L1.56718 5.27267L4.39584 8.10067L0.624512 11.8713L1.56718 12.814L5.33851 9.04334L8.16718 11.8713L9.10984 10.9293L8.16718 9.986L11.4672 6.686L12.4098 7.62867L13.3518 6.686ZM7.22451 9.04267L7.22385 9.04334L4.39584 6.21467L7.69518 2.91467L10.5232 5.74267L7.22451 9.04267Z"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+/** @type {React.FC<import("types").PinIndicatorProps>} */
+export const PinIndicator = ({ message, t }) => {
+  if (!message || !t) return null;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <PinIcon />
+      <div
+        style={{
+          marginBottom: '0',
+          marginTop: '0',
+          marginLeft: '8px',
+          fontSize: '14px',
+        }}
+      >{`${t('Pinned by')} ${message.name || message.id}`}</div>
+    </div>
+  );
+};

src/styles/MessageLivestream.scss

@@ -7,6 +7,10 @@
   border: 1px solid rgba(0, 0, 0, 0);
   position: relative;
 
+  &-pin-indicator {
+    padding-left: 10px;
+  }
+
   &-left {
     width: 30px;
     .str-chat__avatar {

src/styles/MessageTeam.scss

@@ -14,6 +14,10 @@
         margin-right: 0;
       }
 
+      &-pin-indicator {
+        padding-left: 40px;
+      }
+
       &-actions {
         $actionsBorderColor: #e0e0e0;
         $actionsHeight: 24px;

types/index.d.ts

@@ -956,7 +956,14 @@ export interface MessageUIComponentProps
   additionalMessageInputProps?: object;
   initialMessage?: boolean;
   EditMessageInput?: React.FC<MessageInputProps>;
+  PinIndicator?: React.FC<PinIndicatorProps>;
 }
+
+export type PinIndicatorProps = {
+  message?: StreamChatReactMessageResponse;
+  t?: i18next.TFunction;
+};
+
 export interface MessageDeletedProps extends TranslationContextValue {
   /** The message object */
   message: Client.MessageResponse;
@@ -1418,7 +1425,8 @@ export class MessageTeam extends React.PureComponent<
   MessageTeamState
 > {}
 
-export interface MessageSimpleProps extends MessageUIComponentProps {}
+export interface MessageSimpleProps
+  extends Omit<MessageUIComponentProps, 'PinIndicator'> {}
 export interface MessageTimestampProps {
   customClass?: string;
   message?: Client.MessageResponse;