[EuiCodeBlock] Virtualized option (#4952)

* virtualized code block * docs * test * clean up * listrow * CL * comment * comment * sample json * height for % values * review comments * Added flyout example * copy Co-authored-by: cchaos <caroline.horn@elastic.co>
elastic · Jul 26, 2021 · d4b843e · d4b843e
1 parent c2d1882
commit d4b843e
Show file tree

Hide file tree

Showing 11 changed files with 2,087 additions and 147 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4663))
 - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663))
 - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663))
+- Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952))
 
 ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0)
 

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { renderToHtml } from '../../services';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
@@ -14,20 +13,27 @@ import { codeBlockConfig, codeConfig } from './playground';
 
 import Code from './code';
 const codeSource = require('!!raw-loader!./code');
-const codeHtml = renderToHtml(Code);
 const codeSnippet = '<EuiCode>Text to be formatted</EuiCode>';
 
 import CodeBlock from './code_block';
 const codeBlockSource = require('!!raw-loader!./code_block');
-const codeBlockHtml = renderToHtml(CodeBlock);
 const codeBlockSnippet = `<EuiCodeBlock language="html" paddingSize="s" isCopyable>
 { \`<h1>Title</h1>\` }
 </EuiCodeBlock>
 `;
 
+import CodeBlockVirtualized from './virtualized';
+const codeBlockVirtualizedSource = require('!!raw-loader!./virtualized');
+const codeBlockVirtualizedSnippet = `<EuiCodeBlock language="json" isVirtualized overflowHeight={300}>
+{ \`{}\` }
+</EuiCodeBlock>
+`;
+
+import CodeBlockVirtualizedFlyout from './virtualized_flyout';
+const codeBlockVirtualizedFlyoutSource = require('!!raw-loader!./virtualized_flyout');
+
 import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
-const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
 export const CodeExample = {
   title: 'Code',
@@ -37,7 +43,7 @@ export const CodeExample = {
         <p>
           The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong>{' '}
           components support{' '}
-          <EuiLink external href="https://github.com/wooorm/refractor#syntaxes">
+          <EuiLink external href="https://prismjs.com/#supported-languages">
             all language syntaxes
           </EuiLink>{' '}
           supported by the
@@ -67,10 +73,6 @@ export const CodeExample = {
           type: GuideSectionTypes.JS,
           code: codeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeHtml,
-        },
       ],
       text: (
         <p>
@@ -90,10 +92,6 @@ export const CodeExample = {
           type: GuideSectionTypes.JS,
           code: codeBlockSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockHtml,
-        },
       ],
       text: (
         <p>
@@ -109,15 +107,48 @@ export const CodeExample = {
       playground: codeBlockConfig,
     },
     {
-      title: 'Code block and white-space',
+      title: 'Code block virtualization',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: codeBlockPreSource,
+          code: codeBlockVirtualizedSource,
+        },
+      ],
+      text: (
+        <p>
+          For large blocks of code, add <EuiCode>isVirtualized</EuiCode> to
+          reduce the number of rendered rows and improve load times. Note that{' '}
+          <EuiCode>overflowHeight</EuiCode> is required when using this
+          configuration.
+        </p>
+      ),
+      props: { EuiCodeBlock },
+      snippet: codeBlockVirtualizedSnippet,
+      demo: <CodeBlockVirtualized />,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: codeBlockVirtualizedFlyoutSource,
         },
+      ],
+      text: (
+        <p>
+          In places like <Link to="/layout/flyout">flyouts</Link>, you can use{' '}
+          <EuiCode language="tsx">{'overflowHeight="100%"'}</EuiCode> to stretch
+          the code block to fill the space. Just be sure that it&apos;s parent
+          container is also <EuiCode language="css">{'height: 100%'}</EuiCode>.
+        </p>
+      ),
+      demo: <CodeBlockVirtualizedFlyout />,
+    },
+    {
+      title: 'Code block and white-space',
+      source: [
         {
-          type: GuideSectionTypes.HTML,
-          code: codeBlockPreHtml,
+          type: GuideSectionTypes.JS,
+          code: codeBlockPreSource,
         },
       ],
       text: (