{"ast":null,"code":"function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport React from 'react';\nimport { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';\nimport { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';\nimport { Badge, Button, Select, SelectOption, PageSection, PageSectionVariants, Tooltip, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';\nimport { data } from '../../../content/extensions/log-viewer/demos/../examples/realTestData.js';\nimport { OutlinedPlayCircleIcon } from '@patternfly/react-icons';\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\nimport EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';\nvar pageData = {\n \"id\": \"Log viewer\",\n \"section\": \"extensions\",\n \"source\": \"extensions\",\n \"slug\": \"/extensions/log-viewer/extensions\",\n \"sourceLink\": \"https://github.com/patternfly/patternfly-org/blob/main/packages/react-log-viewer/patternfly-docs/content/extensions/log-viewer/demos/LogViewer.md\",\n \"beta\": true,\n \"examples\": [\"With complex toolbar\"]\n};\npageData.liveContext = {\n LogViewer: LogViewer,\n LogViewerSearch: LogViewerSearch,\n Badge: Badge,\n Button: Button,\n Select: Select,\n SelectOption: SelectOption,\n PageSection: PageSection,\n PageSectionVariants: PageSectionVariants,\n Tooltip: Tooltip,\n Toolbar: Toolbar,\n ToolbarContent: ToolbarContent,\n ToolbarGroup: ToolbarGroup,\n ToolbarItem: ToolbarItem,\n ToolbarToggleGroup: ToolbarToggleGroup,\n data: data,\n OutlinedPlayCircleIcon: OutlinedPlayCircleIcon,\n ExpandIcon: ExpandIcon,\n PauseIcon: PauseIcon,\n DownloadIcon: DownloadIcon,\n PlayIcon: PlayIcon,\n EllipsisVIcon: EllipsisVIcon\n};\npageData.examples = {\n 'With complex toolbar': function WithComplexToolbar(props) {\n return React.createElement(Example, _extends({}, pageData, props, {\n \"code\": \"import React from 'react';\\nimport { data } from './realTestData';\\nimport { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';\\nimport {\\n Badge,\\n Button,\\n Select,\\n SelectOption,\\n Tooltip,\\n Toolbar,\\n ToolbarContent,\\n ToolbarGroup,\\n ToolbarItem,\\n ToolbarToggleGroup\\n} from '@patternfly/react-core';\\nimport OutlinedPlayCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';\\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\\nimport EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';\\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\\n\\nComplexToolbarLogViewer = () => {\\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 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 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 return (\\n {\\n setIsPaused(!isPaused);\\n }}\\n >\\n {isPaused ? : }\\n {isPaused ? ` Resume Log` : ` Pause Log`}\\n \\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\",\n \"lang\": \"js\"\n }));\n }\n};\n\nvar Component = function Component() {\n return React.createElement(React.Fragment, null, React.createElement(pageData.examples[\"With complex toolbar\"]));\n};\n\nComponent.displayName = 'ExtensionsLogViewerExtensionsDocs';\nComponent.pageData = pageData;\nexport default Component;","map":{"version":3,"names":["React","AutoLinkHeader","Example","Link","PatternflyThemeLink","LogViewer","LogViewerSearch","Badge","Button","Select","SelectOption","PageSection","PageSectionVariants","Tooltip","Toolbar","ToolbarContent","ToolbarGroup","ToolbarItem","ToolbarToggleGroup","data","OutlinedPlayCircleIcon","ExpandIcon","PauseIcon","DownloadIcon","PlayIcon","EllipsisVIcon","pageData","liveContext","examples","props","Component","createElement","displayName"],"sources":["/Users/ausulliv/repos/temp/patternfly-react/packages/react-log-viewer/patternfly-docs/generated/extensions/log-viewer/extensions.js"],"sourcesContent":["import React from 'react';\nimport { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';\nimport { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';\nimport {\nBadge,\nButton,\nSelect,\nSelectOption,\nPageSection,\nPageSectionVariants,\nTooltip,\nToolbar,\nToolbarContent,\nToolbarGroup,\nToolbarItem,\nToolbarToggleGroup\n} from '@patternfly/react-core';\nimport { data } from '../../../content/extensions/log-viewer/demos/../examples/realTestData.js';\nimport { OutlinedPlayCircleIcon } from '@patternfly/react-icons';\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\nimport EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';\nconst pageData = {\n \"id\": \"Log viewer\",\n \"section\": \"extensions\",\n \"source\": \"extensions\",\n \"slug\": \"/extensions/log-viewer/extensions\",\n \"sourceLink\": \"https://github.com/patternfly/patternfly-org/blob/main/packages/react-log-viewer/patternfly-docs/content/extensions/log-viewer/demos/LogViewer.md\",\n \"beta\": true,\n \"examples\": [\n \"With complex toolbar\"\n ]\n};\npageData.liveContext = {\n LogViewer,\n LogViewerSearch,\n Badge,\n Button,\n Select,\n SelectOption,\n PageSection,\n PageSectionVariants,\n Tooltip,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n ToolbarToggleGroup,\n data,\n OutlinedPlayCircleIcon,\n ExpandIcon,\n PauseIcon,\n DownloadIcon,\n PlayIcon,\n EllipsisVIcon\n};\npageData.examples = {\n 'With complex toolbar': props => \n {\\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 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 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 return (\\n {\\n setIsPaused(!isPaused);\\n }}\\n >\\n {isPaused ? : }\\n {isPaused ? ` Resume Log` : ` Pause Log`}\\n \\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};\",\"title\":\"With complex toolbar\",\"lang\":\"js\"}}>\n \n \n};\n\nconst Component = () => (\n \n {React.createElement(pageData.examples[\"With complex toolbar\"])}\n \n);\nComponent.displayName = 'ExtensionsLogViewerExtensionsDocs';\nComponent.pageData = pageData;\n\nexport default Component;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,cAAT,EAAyBC,OAAzB,EAAkCC,IAAI,IAAIC,mBAA1C,QAAqE,gDAArE;AACA,SAASC,SAAT,EAAoBC,eAApB,QAA2C,8BAA3C;AACA,SACAC,KADA,EAEAC,MAFA,EAGAC,MAHA,EAIAC,YAJA,EAKAC,WALA,EAMAC,mBANA,EAOAC,OAPA,EAQAC,OARA,EASAC,cATA,EAUAC,YAVA,EAWAC,WAXA,EAYAC,kBAZA,QAaO,wBAbP;AAcA,SAASC,IAAT,QAAqB,0EAArB;AACA,SAASC,sBAAT,QAAuC,yBAAvC;AACA,OAAOC,UAAP,MAAuB,oDAAvB;AACA,OAAOC,SAAP,MAAsB,mDAAtB;AACA,OAAOC,YAAP,MAAyB,sDAAzB;AACA,OAAOC,QAAP,MAAqB,kDAArB;AACA,OAAOC,aAAP,MAA0B,wDAA1B;AACA,IAAMC,QAAQ,GAAG;EACf,MAAM,YADS;EAEf,WAAW,YAFI;EAGf,UAAU,YAHK;EAIf,QAAQ,mCAJO;EAKf,cAAc,mJALC;EAMf,QAAQ,IANO;EAOf,YAAY,CACV,sBADU;AAPG,CAAjB;AAWAA,QAAQ,CAACC,WAAT,GAAuB;EACrBtB,SAAS,EAATA,SADqB;EAErBC,eAAe,EAAfA,eAFqB;EAGrBC,KAAK,EAALA,KAHqB;EAIrBC,MAAM,EAANA,MAJqB;EAKrBC,MAAM,EAANA,MALqB;EAMrBC,YAAY,EAAZA,YANqB;EAOrBC,WAAW,EAAXA,WAPqB;EAQrBC,mBAAmB,EAAnBA,mBARqB;EASrBC,OAAO,EAAPA,OATqB;EAUrBC,OAAO,EAAPA,OAVqB;EAWrBC,cAAc,EAAdA,cAXqB;EAYrBC,YAAY,EAAZA,YAZqB;EAarBC,WAAW,EAAXA,WAbqB;EAcrBC,kBAAkB,EAAlBA,kBAdqB;EAerBC,IAAI,EAAJA,IAfqB;EAgBrBC,sBAAsB,EAAtBA,sBAhBqB;EAiBrBC,UAAU,EAAVA,UAjBqB;EAkBrBC,SAAS,EAATA,SAlBqB;EAmBrBC,YAAY,EAAZA,YAnBqB;EAoBrBC,QAAQ,EAARA,QApBqB;EAqBrBC,aAAa,EAAbA;AArBqB,CAAvB;AAuBAC,QAAQ,CAACE,QAAT,GAAoB;EAClB,wBAAwB,4BAAAC,KAAK;IAAA,OAC3B,oBAAC,OAAD,eAAaH,QAAb,EAA2BG,KAA3B,EAAsC;MAAC,QAAO,g0PAAR;MAAy0P,SAAQ,sBAAj1P;MAAw2P,QAAO;IAA/2P,CAAtC,EAD2B;EAAA;AADX,CAApB;;AAOA,IAAMC,SAAS,GAAG,SAAZA,SAAY;EAAA,OAChB,oBAAC,KAAD,CAAO,QAAP,QACG9B,KAAK,CAAC+B,aAAN,CAAoBL,QAAQ,CAACE,QAAT,CAAkB,sBAAlB,CAApB,CADH,CADgB;AAAA,CAAlB;;AAKAE,SAAS,CAACE,WAAV,GAAwB,mCAAxB;AACAF,SAAS,CAACJ,QAAV,GAAqBA,QAArB;AAEA,eAAeI,SAAf"},"metadata":{},"sourceType":"module"}