From 1f08d2c6191c8aebe27899ea4378a7ef356dca1e Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 20 Nov 2024 22:53:09 -0500 Subject: [PATCH] chore(docs): fix console warnings, codesandbox builds --- .../demos/ComplexToolbarLogViewer.jsx | 6 +- .../react-log-viewer/demos/LogViewer.md | 2 +- .../examples/ANSIColorLogViewer.jsx | 20 +++---- .../examples/BasicLogViewer.jsx | 6 +- .../examples/BasicSearchLogViewer.jsx | 32 +++++----- .../examples/CustomControlLogViewer.jsx | 6 +- .../examples/FooterComponentLogViewer.jsx | 6 +- .../examples/HeaderComponentLogViewer.jsx | 22 ++++--- .../react-log-viewer/examples/basic.md | 2 +- .../log-viewer/design-guidelines.js | 60 +++++++++---------- .../extensions/log-viewer/react-demos.js | 5 +- .../generated/extensions/log-viewer/react.js | 15 +++-- 12 files changed, 83 insertions(+), 99 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx index b2d21e4..561cf34 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { data } from '../examples/realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { Badge, @@ -22,7 +22,7 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; -const ComplexToolbarLogViewer = () => { +export const ComplexToolbarLogViewer = () => { const dataSources = { 'container-1': { type: 'C', id: 'data1' }, 'container-2': { type: 'D', id: 'data2' }, @@ -273,5 +273,3 @@ const ComplexToolbarLogViewer = () => { /> ); }; - -export default ComplexToolbarLogViewer; diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md index 4921ae6..732aed8 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md @@ -4,7 +4,7 @@ section: extensions source: react-demos --- -import { data } from '../examples/realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { Badge, diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx index 944f2ed..45eb2d6 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/ANSIColorLogViewer.jsx @@ -1,14 +1,12 @@ import React from 'react'; -import { data } from './realTestData.js'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer } from '@patternfly/react-log-viewer'; -const ANSIColorLogViewer = () => ( - - ); - - export default ANSIColorLogViewer; \ No newline at end of file +export const ANSIColorLogViewer = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx index 2655370..a734776 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicLogViewer.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer } from '@patternfly/react-log-viewer'; import { Checkbox } from '@patternfly/react-core'; -const BasicLogViewer = () => { +export const BasicLogViewer = () => { const [isDarkTheme, setIsDarkTheme] = React.useState(false); return ( @@ -20,5 +20,3 @@ const BasicLogViewer = () => { ); }; - -export default BasicLogViewer; \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx index bdd1e8f..3437e32 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/BasicSearchLogViewer.jsx @@ -1,21 +1,19 @@ import React from 'react'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'; -const BasicSearchLogViewer = () => ( - - - - - - - - } - /> - ); - -export default BasicSearchLogViewer; \ No newline at end of file +export const BasicSearchLogViewer = () => ( + + + + + + + + } + /> +); diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx index 7a730d7..c3c281f 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/CustomControlLogViewer.jsx @@ -1,10 +1,10 @@ /* eslint-disable no-console */ import React from 'react'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { Toolbar, ToolbarContent, ToolbarItem, Button, Checkbox } from '@patternfly/react-core'; -const CustomControlLogViewer = () => { +export const CustomControlLogViewer = () => { const [isTextWrapped, setIsTextWrapped] = React.useState(false); const onActionClick = () => { console.log('clicked test action button'); @@ -43,5 +43,3 @@ const CustomControlLogViewer = () => { /> ); }; - -export default CustomControlLogViewer; \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx index 07ddbe5..d348ed4 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/FooterComponentLogViewer.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer } from '@patternfly/react-log-viewer'; import { Button } from '@patternfly/react-core'; -const FooterComponentLogViewer = () => { +export const FooterComponentLogViewer = () => { const logViewerRef = React.useRef(); const FooterButton = () => { const handleClick = () => { @@ -23,5 +23,3 @@ const FooterComponentLogViewer = () => { /> ); }; - -export default FooterComponentLogViewer; \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx index ad24dfa..4497b24 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/HeaderComponentLogViewer.jsx @@ -1,16 +1,14 @@ import React from 'react'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer } from '@patternfly/react-log-viewer'; import { Banner } from '@patternfly/react-core'; -const HeaderComponentLogViewer = () => ( - 5019 lines} - /> - ); - -export default HeaderComponentLogViewer; \ No newline at end of file +export const HeaderComponentLogViewer = () => ( + 5019 lines} + /> +); diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md index d417911..a8236de 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md @@ -16,7 +16,7 @@ propComponents: [LogViewer, LogViewerSearch] import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer'; import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'; -import { data } from './realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; ## Examples diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js index 3638197..c1385ea 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js @@ -1,10 +1,10 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -import srcImport0 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewer.png'; -import srcImport1 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerdark.png'; -import srcImport2 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerclear.png'; -import srcImport3 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewercog.png'; -import srcImport4 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewersearch.png'; +import srcImport5 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewer.png'; +import srcImport6 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerdark.png'; +import srcImport7 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewerclear.png'; +import srcImport8 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewercog.png'; +import srcImport9 from '../../../content/extensions/react-log-viewer/design-guidelines/./img/logviewersearch.png'; const pageData = { "id": "Log viewer", "section": "extensions", @@ -26,7 +26,7 @@ pageData.examples = { const Component = () => ( -

+

{`A `} {`log viewer`} @@ -36,52 +36,52 @@ const Component = () => ( {`Light theme log viewer`} - + -

    -
  1. +
      +
    1. {`Type of log dropdown menu:`} {` Allow users to switch between different types of logs.`}
      2. -
    2. +
    3. {`Search bar:`} {` Use to look up historical logs. The results will be highlighted in the log.`}
      4. -
    4. +
    5. {`Pause button:`} {` Play and stop your log content viewing, instead of scrolling through.`}
      6. -
    6. +
    7. {`Clear log:`} {` Clear the displayed log output.`}
      8. -
    8. +
    9. {`Cog:`} {` House settings such as wrapping lines, showing timestamps, and displaying line numbers.`}
      10. -
    10. +
    11. {`Export:`} {` Export log content.`}
      12. -
    12. +
    13. {`Download:`} {` Download the log file.`}
      14. -
    14. +
    15. {`Fullscreen:`} @@ -91,29 +91,29 @@ const Component = () => ( {`Dark theme log viewer`} -

      +

      {`We recommend using the light theme editor by default, but there is also a dark theme log viewer available. All log viewer functionality remains the same whether a light or dark theme is used.`}

      - + {`Usability`} -

      +

      {`Use a log viewer when:`}

      -
        -
      • +
          +
        • {`The user can manipulate 1 large log file or multiple log files at the same time.`}
          • -
        • +
        • {`You want to create a more readable and accessible environment for the user.`}
          • -
        • +
        • {`The user may actively search for specific logs within a large log file.`}
          • -
        • +
        • {`The user shares files frequently with other users or teams.`}
        @@ -123,26 +123,26 @@ available. All log viewer functionality remains the same whether a light or dark {`With popover`} -

        +

        {`The clear log button opens up a popover with further options, to prevent a user from accidentally clearing their log content.`}

        - + {`With dropdown, drilldown, and search expanded`} -

        +

        {`The cog icon in the log viewer toolbar allows you to store content options such as timestamps or line numbers for better orientation within the log viewer.`}

        - + {`With search results`} -

        +

        {`The search bar provides highlighted search results for better findability within a log viewer’s content.`}

        - + ); diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js index d721261..6079b62 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js @@ -1,6 +1,6 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -import { data } from '../../../content/extensions/react-log-viewer/demos/../examples/realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { Badge, @@ -63,10 +63,9 @@ pageData.liveContext = { EllipsisVIcon, DownloadIcon }; -pageData.relativeImports = "import { data } from 'content/extensions/react-log-viewer/demos/../examples/realTestData';" pageData.examples = { 'With complex toolbar': props => - {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount((itemCount) => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n // Listening escape key on full screen mode.\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n const isFullscreen =\n document.fullscreenElement ||\n document.mozFullScreenElement ||\n document.webkitFullscreenElement ||\n document.msFullscreenElement;\n\n setIsFullScreen(!!isFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('mozfullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('mozfullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\n }, []);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onToggleClick = () => {\n setSelectDataSourceOpen(!selectDataSourceOpen);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n icon={isPaused ? : }\n >\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n\n const toggle = (toggleRef) => (\n \n {selectDataSourcePlaceholder}\n \n );\n\n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = (_e) => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n\nexport default ComplexToolbarLogViewer;\n","title":"With complex toolbar","lang":"js","className":""}}> + {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount((itemCount) => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n // Listening escape key on full screen mode.\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n const isFullscreen =\n document.fullscreenElement ||\n document.mozFullScreenElement ||\n document.webkitFullscreenElement ||\n document.msFullscreenElement;\n\n setIsFullScreen(!!isFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('mozfullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('mozfullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\n }, []);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onToggleClick = () => {\n setSelectDataSourceOpen(!selectDataSourceOpen);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n icon={isPaused ? : }\n >\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n\n const toggle = (toggleRef) => (\n \n {selectDataSourcePlaceholder}\n \n );\n\n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = (_e) => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n","title":"With complex toolbar","lang":"js","className":""}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js index c5b5211..80a5476 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js @@ -2,7 +2,7 @@ import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer'; import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core'; -import { data } from '../../../content/extensions/react-log-viewer/examples/./realTestData'; +import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js'; const pageData = { "id": "Log viewer", "section": "extensions", @@ -156,30 +156,29 @@ pageData.liveContext = { ToolbarItem, data }; -pageData.relativeImports = "import { data } from 'content/extensions/react-log-viewer/examples/./realTestData';" pageData.examples = { 'Basic': props => - {\n const [isDarkTheme, setIsDarkTheme] = React.useState(false);\n\n return (\n \n setIsDarkTheme(value)}\n aria-label=\"toggle dark theme checkbox\"\n id=\"toggle-dark-theme\"\n name=\"toggle-dark-theme\"\n />\n \n \n );\n};\n\nexport default BasicLogViewer;","title":"Basic","lang":"js","className":""}}> + {\n const [isDarkTheme, setIsDarkTheme] = React.useState(false);\n\n return (\n \n setIsDarkTheme(value)}\n aria-label=\"toggle dark theme checkbox\"\n id=\"toggle-dark-theme\"\n name=\"toggle-dark-theme\"\n />\n \n \n );\n};\n","title":"Basic","lang":"js","className":""}}> , 'With search': props => - (\n \n \n \n \n \n \n \n }\n />\n );\n\nexport default BasicSearchLogViewer;","title":"With search","lang":"js","className":""}}> + (\n \n \n \n \n \n \n \n }\n />\n);\n","title":"With search","lang":"js","className":""}}> , 'With complex toolbar': props => - {\n const [isTextWrapped, setIsTextWrapped] = React.useState(false);\n const onActionClick = () => {\n console.log('clicked test action button');\n };\n\n const onPrintClick = () => {\n console.log('clicked console print button');\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setIsTextWrapped(value)} />\n \n \n \n }\n />\n );\n};\n\nexport default CustomControlLogViewer;","title":"With complex toolbar","lang":"js","className":""}}> + {\n const [isTextWrapped, setIsTextWrapped] = React.useState(false);\n const onActionClick = () => {\n console.log('clicked test action button');\n };\n\n const onPrintClick = () => {\n console.log('clicked console print button');\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setIsTextWrapped(value)} />\n \n \n \n }\n />\n );\n};\n","title":"With complex toolbar","lang":"js","className":""}}> , 'With header component': props => - (\n 5019 lines}\n />\n );\n\nexport default HeaderComponentLogViewer;","title":"With header component","lang":"js","className":""}}> + (\n 5019 lines}\n />\n);\n","title":"With header component","lang":"js","className":""}}> , 'With footer component': props => - {\n const logViewerRef = React.useRef();\n const FooterButton = () => {\n const handleClick = () => {\n logViewerRef.current.scrollToBottom();\n };\n return ;\n };\n\n return (\n }\n />\n );\n};\n\nexport default FooterComponentLogViewer;","title":"With footer component","lang":"js","className":""}}> + {\n const logViewerRef = React.useRef();\n const FooterButton = () => {\n const handleClick = () => {\n logViewerRef.current.scrollToBottom();\n };\n return ;\n };\n\n return (\n }\n />\n );\n};\n","title":"With footer component","lang":"js","className":""}}> , 'With ANSI color logs': props => - (\n \n );\n\n export default ANSIColorLogViewer;","title":"With ANSI color logs","lang":"js","className":""}}> + (\n \n);\n","title":"With ANSI color logs","lang":"js","className":""}}> };