added MessageGenericPreview component

added PreviewBlock fixed link visibility styling remaining
RocketChat · Feb 27, 2024 · 9fe12a7 · 9fe12a7
1 parent eddc138
commit 9fe12a7
Show file tree

Hide file tree

Showing 11 changed files with 319 additions and 12 deletions.
diff --git a/packages/react/src/components/Markup/elements/BoldSpan.js b/packages/react/src/components/Markup/elements/BoldSpan.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import PlainSpan from './PlainSpan';
 import ItalicSpan from './ItalicSpan';
 import StrikeSpan from './StrikeSpan';
+import LinkSpan from './LinkSpan';
 
 const BoldSpan = ({ contents }) => (
   <strong>
@@ -16,6 +17,18 @@ const BoldSpan = ({ contents }) => (
 
         case 'ITALIC':
           return <ItalicSpan key={index} contents={content.value} />;
+        case 'LINK':
+          return (
+            <LinkSpan
+              key={index}
+              href={content.value.src.value}
+              label={
+                Array.isArray(content.value.label)
+                  ? content.value.label
+                  : [content.value.label]
+              }
+            />
+          );
 
         default:
           return null;

diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreview.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreview.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreview = (props, className = '', style = {}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreview'
+  );
+  const messageGenericPreviewStyles = css`
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #cbced1;
+  `;
+  return (
+    <div
+      css={messageGenericPreviewStyles}
+      className={`ec-message-generic-preview ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    />
+  );
+};
+
+export default MessageGenericPreview;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewContent.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewContent.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewContent = ({
+  className = '',
+  style = {},
+  thumb,
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewContent'
+  );
+
+  const MessageGenericPreviewContentCss = css`
+    display: flex;
+    flex-direction: row;
+  `;
+
+  return (
+    <div
+      css={MessageGenericPreviewContentCss}
+      className={`ec-message-generic-preview__content ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+    >
+      {thumb}
+      <div className="ec-message-generic-preview__content-wrapper" {...props} />
+    </div>
+  );
+};
+
+export default MessageGenericPreviewContent;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewCoverImage.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewCoverImage.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewCoverImage = ({
+  className = '',
+  style = {},
+  url,
+  width,
+  height,
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewCoverImage'
+  );
+
+  const previewCoverImageCss = css`
+    background-image: url(${url});
+    max-width: 100%;
+  `;
+
+  return (
+    <div
+      css={previewCoverImageCss}
+      className={`ec-message-generic-preview__preview ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      <div style={{ paddingTop: `${(height / width) * 100}%` }} />
+    </div>
+  );
+};
+
+export default MessageGenericPreviewCoverImage;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewDescription.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewDescription.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewDescription = ({
+  children,
+  clamp = false,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewDescription'
+  );
+
+  return (
+    <div
+      className={`ec-message-generic-preview__description ${
+        clamp ? 'ec-message-generic-preview__description--clamp' : ''
+      } ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MessageGenericPreviewDescription;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewFooter.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewFooter.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewFooter = ({
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewFooter'
+  );
+
+  return (
+    <div
+      className={`ec-message-generic-preview__footer ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MessageGenericPreviewFooter;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewThumb.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewThumb.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewThumb = (className = '', style = {}, ...props) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewThumb'
+  );
+  return (
+    <div
+      className={`ec-message-generic-preview__thumb ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    />
+  );
+};
+
+export default MessageGenericPreviewThumb;
diff --git a/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewTitle.js b/packages/react/src/components/MessageGenericPreview/MessageGenericPreviewTitle.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import useComponentOverrides from '../../theme/useComponentOverrides';
+
+const MessageGenericPreviewTitle = ({
+  externalUrl,
+  children,
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const { classNames, styleOverrides } = useComponentOverrides(
+    'MessageGenericPreviewTitle'
+  );
+
+  if (externalUrl) {
+    return (
+      <a
+        className={`ec-message-generic-preview__title ${className} ${classNames}`}
+        style={{ ...style, ...styleOverrides }}
+        href={externalUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <span
+      className={`ec-message-generic-preview__title ${className} ${classNames}`}
+      style={{ ...style, ...styleOverrides }}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default MessageGenericPreviewTitle;
diff --git a/packages/react/src/components/MessageGenericPreview/index.js b/packages/react/src/components/MessageGenericPreview/index.js
@@ -0,0 +1,7 @@
+export { default as MessageGenericPreview } from './MessageGenericPreview';
+export { default as MessageGenericPreviewCoverImage } from './MessageGenericPreviewCoverImage';
+export { default as MessageGenericPreviewThumb } from './MessageGenericPreviewThumb';
+export { default as MessageGenericPreviewTitle } from './MessageGenericPreviewTitle';
+export { default as MessageGenericPreviewContent } from './MessageGenericPreviewContent';
+export { default as MessageGenericPreviewDescription } from './MessageGenericPreviewDescription';
+export { default as MessageGenericPreviewFooter } from './MessageGenericPreviewFooter';
diff --git a/packages/react/src/components/uiKit/blocks/PreviewBlock.js b/packages/react/src/components/uiKit/blocks/PreviewBlock.js
@@ -1,3 +1,88 @@
+import * as UiKit from '@rocket.chat/ui-kit';
+import {
+  isPreviewBlockWithThumb,
+  isPreviewBlockWithPreview,
+} from '@rocket.chat/ui-kit';
+import React, { memo } from 'react';
+import { Box } from '../../Box';
+import {
+  MessageGenericPreviewCoverImage,
+  MessageGenericPreview,
+  MessageGenericPreviewThumb,
+  MessageGenericPreviewContent,
+  MessageGenericPreviewTitle,
+  MessageGenericPreviewDescription,
+  MessageGenericPreviewFooter,
+} from '../../MessageGenericPreview';
+
+import ContextBlock from './ContextBlock';
+
+const PreviewBlock = ({ block, surfaceRenderer }) => (
+  <Box>
+    <MessageGenericPreview>
+      {isPreviewBlockWithPreview(block) && block.preview?.dimensions && (
+        <MessageGenericPreviewCoverImage
+          width={block.preview.dimensions.width}
+          height={block.preview.dimensions.height}
+          url={block.preview.url}
+        />
+      )}
+      <MessageGenericPreviewContent
+        thumb={
+          isPreviewBlockWithThumb(block) ? (
+            <MessageGenericPreviewThumb>
+              <MessageGenericPreviewCoverImage
+                height={192}
+                width={368}
+                url={block.thumb.url}
+              />
+            </MessageGenericPreviewThumb>
+          ) : undefined
+        }
+      >
+        {Array.isArray(block.title) ? (
+          <MessageGenericPreviewTitle
+            externalUrl={
+              isPreviewBlockWithPreview(block) ? block.externalUrl : undefined
+            }
+          >
+            {block.title.map((title, index) =>
+              surfaceRenderer.renderTextObject(
+                title,
+                index,
+                UiKit.BlockContext.NONE
+              )
+            )}
+          </MessageGenericPreviewTitle>
+        ) : null}
+        {Array.isArray(block.description) ? (
+          <MessageGenericPreviewDescription clamp>
+            {block.description.map((description) =>
+              surfaceRenderer.renderTextObject(
+                description,
+                0,
+                UiKit.BlockContext.NONE
+              )
+            )}
+          </MessageGenericPreviewDescription>
+        ) : null}
+        {block.footer && (
+          <MessageGenericPreviewFooter>
+            <ContextBlock
+              block={block.footer}
+              surfaceRenderer={surfaceRenderer}
+              context={UiKit.BlockContext.BLOCK}
+              index={0}
+            />
+          </MessageGenericPreviewFooter>
+        )}
+      </MessageGenericPreviewContent>
+    </MessageGenericPreview>
+  </Box>
+);
+
+export default memo(PreviewBlock);
+
 // import {
 //   MessageGenericPreview,
 //   MessageGenericPreviewContent,

diff --git a/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js b/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js
@@ -6,7 +6,7 @@ import ContextBlock from '../blocks/ContextBlock';
 import DividerBlock from '../blocks/DividerBlock';
 import ImageBlock from '../blocks/ImageBlock';
 import InputBlock from '../blocks/InputBlock';
-// import PreviewBlock from '../blocks/PreviewBlock';
+import PreviewBlock from '../blocks/PreviewBlock';
 import SectionBlock from '../blocks/SectionBlock';
 import ButtonElement from '../elements/ButtonElement';
 import DatePickerElement from '../elements/DatePickerElement';
@@ -79,18 +79,16 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer {
     if (context !== UiKit.BlockContext.BLOCK) {
       return null;
     }
-    return null;
 
-    // TODO: Implement this without fuselage.
-    // return (
-    //   <PreviewBlock
-    //     key={index}
-    //     block={block}
-    //     context={context}
-    //     index={index}
-    //     surfaceRenderer={this}
-    //   />
-    // );
+    return (
+      <PreviewBlock
+        key={index}
+        block={block}
+        context={context}
+        index={index}
+        surfaceRenderer={this}
+      />
+    );
   }
 
   context(block, context, index) {