@patternfly/react-docs 5.21.46 → 5.21.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.21.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.46...@patternfly/react-docs@5.21.47) (2021-09-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [5.21.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.45...@patternfly/react-docs@5.21.46) (2021-09-24)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "5.21.
|
|
4
|
+
"version": "5.21.47",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease-v4"
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@patternfly/patternfly": "4.135.2",
|
|
26
|
-
"@patternfly/react-catalog-view-extension": "^4.12.
|
|
26
|
+
"@patternfly/react-catalog-view-extension": "^4.12.78",
|
|
27
27
|
"@patternfly/react-charts": "^6.15.24",
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.157.
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.65",
|
|
29
|
+
"@patternfly/react-core": "^4.157.7",
|
|
30
30
|
"@patternfly/react-icons": "^4.11.17",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.88",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.7.0",
|
|
33
33
|
"@patternfly/react-styles": "^4.11.16",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.7",
|
|
35
35
|
"@patternfly/react-tokens": "^4.12.18",
|
|
36
|
-
"@patternfly/react-topology": "^4.9.
|
|
37
|
-
"@patternfly/react-virtualized-extension": "^4.9.
|
|
36
|
+
"@patternfly/react-topology": "^4.9.84",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.53"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-dom": "^17.0.0",
|
|
45
45
|
"rimraf": "^2.6.3",
|
|
46
46
|
"shx": "^0.3.2",
|
|
47
|
-
"theme-patternfly-org": "0.
|
|
47
|
+
"theme-patternfly-org": "0.7.0"
|
|
48
48
|
},
|
|
49
49
|
"keywords": [
|
|
50
50
|
"gatsby"
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "5f9040577f273d41cd087ff136b68af185115824"
|
|
57
57
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components';
|
|
3
|
-
import { LogViewer, LogViewerSearch
|
|
3
|
+
import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
|
|
4
4
|
import {
|
|
5
5
|
Badge,
|
|
6
6
|
Button,
|
|
@@ -36,7 +36,6 @@ const pageData = {
|
|
|
36
36
|
pageData.liveContext = {
|
|
37
37
|
LogViewer,
|
|
38
38
|
LogViewerSearch,
|
|
39
|
-
LogViewerContext,
|
|
40
39
|
Badge,
|
|
41
40
|
Button,
|
|
42
41
|
Select,
|
|
@@ -59,7 +58,7 @@ pageData.liveContext = {
|
|
|
59
58
|
};
|
|
60
59
|
pageData.examples = {
|
|
61
60
|
'With complex toolbar': props =>
|
|
62
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData';\nimport { LogViewer, LogViewerSearch
|
|
61
|
+
<Example {...pageData} {...props} {...{"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 <SelectOption\n key={value}\n value={value}\n isSelected={selectedDataSource === value}\n isChecked={selectedDataSource === value}\n >\n <Badge key={value}>{type}</Badge>\n {` ${value}`}\n </SelectOption>\n ));\n\n const selectDataSourcePlaceholder = (\n <React.Fragment>\n <Badge>{dataSources[selectedDataSource].type}</Badge>\n {` ${selectedDataSource}`}\n </React.Fragment>\n );\n\n const ControlButton = () => {\n return (\n <Button\n variant={isPaused ? 'plain' : 'link'}\n onClick={() => {\n setIsPaused(!isPaused);\n }}\n >\n {isPaused ? <PlayIcon /> : <PauseIcon />}\n {isPaused ? ` Resume Log` : ` Pause Log`}\n </Button>\n );\n };\n\n const leftAlignedToolbarGroup = (\n <React.Fragment>\n <ToolbarToggleGroup toggleIcon={<EllipsisVIcon />} breakpoint=\"md\">\n <ToolbarItem variant=\"search-filter\">\n <Select\n onToggle={isOpen => 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 </Select>\n </ToolbarItem>\n <ToolbarItem variant=\"search-filter\">\n <LogViewerSearch onFocus={e => setIsPaused(true)} placeholder=\"Search\" />\n </ToolbarItem>\n </ToolbarToggleGroup>\n <ToolbarItem>\n <ControlButton />\n </ToolbarItem>\n </React.Fragment>\n );\n\n const rightAlignedToolbarGroup = (\n <React.Fragment>\n <ToolbarGroup variant=\"icon-button-group\">\n <ToolbarItem>\n <Tooltip position=\"top\" content={<div>Download</div>}>\n <Button onClick={onDownloadClick} variant=\"plain\" aria-label=\"Download current logs\">\n <DownloadIcon />\n </Button>\n </Tooltip>\n </ToolbarItem>\n <ToolbarItem>\n <Tooltip position=\"top\" content={<div>Expand</div>}>\n <Button onClick={onExpandClick} variant=\"plain\" aria-label=\"View log viewer in full screen\">\n <ExpandIcon />\n </Button>\n </Tooltip>\n </ToolbarItem>\n </ToolbarGroup>\n </React.Fragment>\n );\n\n const FooterButton = () => {\n const handleClick = e => {\n setIsPaused(false);\n };\n return (\n <Button onClick={handleClick} isBlock>\n <OutlinedPlayCircleIcon />\n resume {linesBehind === 0 ? null : `and show ${linesBehind} lines`}\n </Button>\n );\n };\n return (\n <LogViewer\n data={renderData}\n id=\"complex-toolbar-demo\"\n scrollToRow={currentItemCount}\n innerRef={logViewerRef}\n toolbar={\n <Toolbar>\n <ToolbarContent>\n <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedToolbarGroup}</ToolbarGroup>\n <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedToolbarGroup}</ToolbarGroup>\n </ToolbarContent>\n </Toolbar>\n }\n overScanCount={10}\n footer={isPaused && <FooterButton />}\n onScroll={onScroll}\n />\n );\n};","title":"With complex toolbar","lang":"js"}}>
|
|
63
62
|
|
|
64
63
|
</Example>
|
|
65
64
|
};
|
|
@@ -17,8 +17,7 @@ const pageData = {
|
|
|
17
17
|
{
|
|
18
18
|
"name": "data",
|
|
19
19
|
"type": "string",
|
|
20
|
-
"description": "String data being sent by the consumer"
|
|
21
|
-
"defaultValue": "''"
|
|
20
|
+
"description": "String data being sent by the consumer"
|
|
22
21
|
},
|
|
23
22
|
{
|
|
24
23
|
"name": "footer",
|
|
@@ -28,8 +27,7 @@ const pageData = {
|
|
|
28
27
|
{
|
|
29
28
|
"name": "hasLineNumbers",
|
|
30
29
|
"type": "boolean",
|
|
31
|
-
"description": "Flag to enable or disable line numbers on the log viewer."
|
|
32
|
-
"defaultValue": "true"
|
|
30
|
+
"description": "Flag to enable or disable line numbers on the log viewer."
|
|
33
31
|
},
|
|
34
32
|
{
|
|
35
33
|
"name": "hasToolbar",
|
|
@@ -44,20 +42,22 @@ const pageData = {
|
|
|
44
42
|
{
|
|
45
43
|
"name": "height",
|
|
46
44
|
"type": "number",
|
|
47
|
-
"description": "Height in pixels of the log viewer."
|
|
48
|
-
|
|
45
|
+
"description": "Height in pixels of the log viewer."
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "innerRef",
|
|
49
|
+
"type": "React.RefObject<any>",
|
|
50
|
+
"description": "Forwarded ref"
|
|
49
51
|
},
|
|
50
52
|
{
|
|
51
53
|
"name": "itemCount",
|
|
52
54
|
"type": "number",
|
|
53
|
-
"description": "Number of rows to display in the log viewer"
|
|
54
|
-
"defaultValue": "undefined"
|
|
55
|
+
"description": "Number of rows to display in the log viewer"
|
|
55
56
|
},
|
|
56
57
|
{
|
|
57
58
|
"name": "loadingContent",
|
|
58
59
|
"type": "React.ReactNode",
|
|
59
|
-
"description": "Content displayed while the log viewer is loading"
|
|
60
|
-
"defaultValue": "''"
|
|
60
|
+
"description": "Content displayed while the log viewer is loading"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "onScroll",
|
|
@@ -67,20 +67,17 @@ const pageData = {
|
|
|
67
67
|
{
|
|
68
68
|
"name": "overScanCount",
|
|
69
69
|
"type": "number",
|
|
70
|
-
"description": "Rows rendered outside of view. The more rows are rendered, the higher impact on performance"
|
|
71
|
-
"defaultValue": "10"
|
|
70
|
+
"description": "Rows rendered outside of view. The more rows are rendered, the higher impact on performance"
|
|
72
71
|
},
|
|
73
72
|
{
|
|
74
73
|
"name": "scrollToRow",
|
|
75
74
|
"type": "number",
|
|
76
|
-
"description": "Row index to scroll to"
|
|
77
|
-
"defaultValue": "0"
|
|
75
|
+
"description": "Row index to scroll to"
|
|
78
76
|
},
|
|
79
77
|
{
|
|
80
78
|
"name": "theme",
|
|
81
79
|
"type": "'dark' | 'light'",
|
|
82
|
-
"description": "Flag indicating that log viewer is dark themed"
|
|
83
|
-
"defaultValue": "'light'"
|
|
80
|
+
"description": "Flag indicating that log viewer is dark themed"
|
|
84
81
|
},
|
|
85
82
|
{
|
|
86
83
|
"name": "toolbar",
|
|
@@ -144,7 +141,7 @@ pageData.examples = {
|
|
|
144
141
|
|
|
145
142
|
</Example>,
|
|
146
143
|
'With footer component': props =>
|
|
147
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData.js';\nimport { LogViewer, LogViewerContext } from '@patternfly/react-log-viewer';\nimport { Button } from '@patternfly/react-core';\n\nFooterComponentLogViewer = () => {\n const
|
|
144
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { data } from './realTestData.js';\nimport { LogViewer, LogViewerContext } from '@patternfly/react-log-viewer';\nimport { Button } from '@patternfly/react-core';\n\nFooterComponentLogViewer = () => {\n const logViewerRef = React.useRef();\n const FooterButton = () => {\n const handleClick = e => {\n logViewerRef.current.scrollToBottom();\n };\n return <Button onClick={handleClick}>Jump to the bottom</Button>;\n };\n\n return (\n <React.Fragment>\n <LogViewer\n ref={logViewerRef}\n hasLineNumbers={false}\n height={300}\n data={data.data}\n theme=\"dark\"\n footer={<FooterButton />}\n />\n </React.Fragment>\n );\n};","title":"With footer component","lang":"js"}}>
|
|
148
145
|
|
|
149
146
|
</Example>
|
|
150
147
|
};
|