@patternfly/react-docs 5.21.44 → 5.21.45
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.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.44...@patternfly/react-docs@5.21.45) (2021-09-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [5.21.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.43...@patternfly/react-docs@5.21.44) (2021-09-22)
|
|
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.45",
|
|
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.77",
|
|
27
27
|
"@patternfly/react-charts": "^6.15.23",
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.157.
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.64",
|
|
29
|
+
"@patternfly/react-core": "^4.157.6",
|
|
30
30
|
"@patternfly/react-icons": "^4.11.17",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.6.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.87",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.6.17",
|
|
33
33
|
"@patternfly/react-styles": "^4.11.16",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.6",
|
|
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.83",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.52"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d013adc9687d5873a6733b63ff6bc2d93a2b5915"
|
|
57
57
|
}
|
|
@@ -48,27 +48,32 @@ const pageData = {
|
|
|
48
48
|
{
|
|
49
49
|
"name": "itemOrder",
|
|
50
50
|
"type": "string[]",
|
|
51
|
-
"description": "Order of items in a draggable DataList"
|
|
51
|
+
"description": "Order of items in a draggable DataList",
|
|
52
|
+
"deprecated": true
|
|
52
53
|
},
|
|
53
54
|
{
|
|
54
55
|
"name": "onDragCancel",
|
|
55
56
|
"type": "() => void",
|
|
56
|
-
"description": "Optional informational callback for dragging, fired when dragging is cancelled"
|
|
57
|
+
"description": "Optional informational callback for dragging, fired when dragging is cancelled",
|
|
58
|
+
"deprecated": true
|
|
57
59
|
},
|
|
58
60
|
{
|
|
59
61
|
"name": "onDragFinish",
|
|
60
62
|
"type": "(newItemOrder: string[]) => void",
|
|
61
|
-
"description": "Optional callback to make DataList draggable, fired when dragging ends"
|
|
63
|
+
"description": "Optional callback to make DataList draggable, fired when dragging ends",
|
|
64
|
+
"deprecated": true
|
|
62
65
|
},
|
|
63
66
|
{
|
|
64
67
|
"name": "onDragMove",
|
|
65
68
|
"type": "(oldIndex: number, newIndex: number) => void",
|
|
66
|
-
"description": "Optional informational callback for dragging, fired when an item moves"
|
|
69
|
+
"description": "Optional informational callback for dragging, fired when an item moves",
|
|
70
|
+
"deprecated": true
|
|
67
71
|
},
|
|
68
72
|
{
|
|
69
73
|
"name": "onDragStart",
|
|
70
74
|
"type": "(id: string) => void",
|
|
71
|
-
"description": "Optional informational callback for dragging, fired when dragging starts"
|
|
75
|
+
"description": "Optional informational callback for dragging, fired when dragging starts",
|
|
76
|
+
"deprecated": true
|
|
72
77
|
},
|
|
73
78
|
{
|
|
74
79
|
"name": "onSelectDataListItem",
|
|
@@ -517,8 +522,26 @@ pageData.examples = {
|
|
|
517
522
|
|
|
518
523
|
</Example>,
|
|
519
524
|
'Draggable': props =>
|
|
520
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells\n} from '@patternfly/react-core';\n\
|
|
525
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells,\n DragDrop,\n Draggable,\n Droppable\n} from '@patternfly/react-core';\n\nconst getItems = count =>\n Array.from({ length: count }, (v, k) => k).map(k => ({\n id: `item-${k}`,\n content: `item ${k} `.repeat(k === 4 ? 20 : 1)\n }));\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nDraggableDataList = () => {\n const [items, setItems] = React.useState(getItems(10));\n const [liveText, setLiveText] = React.useState('');\n\n function onDrag(source) {\n setLiveText(`Started dragging ${items[source.index].content}`);\n // Return true to allow drag\n return true;\n }\n\n function onDragMove(source, dest) {\n const newText = dest\n ? `Move ${items[source.index].content} to ${items[dest.index].content}`\n : 'Invalid drop zone';\n if (newText !== liveText) {\n setLiveText(newText);\n }\n }\n\n function onDrop(source, dest) {\n if (dest) {\n const newItems = reorder(\n items,\n source.index,\n dest.index\n );\n setItems(newItems);\n\n setLiveText('Dragging finished.');\n return true; // Signal that this is a valid drop and not to animate the item returning home.\n } else {\n setLiveText('Dragging cancelled. List unchanged.');\n }\n }\n\n return (\n <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>\n <Droppable hasNoWrapper>\n <DataList aria-label=\"draggable data list example\" isCompact>\n {items.map(({id, content}) =>\n <Draggable key={id} hasNoWrapper>\n <DataListItem aria-labelledby={id} ref={React.createRef()}>\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby={id}\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck aria-labelledby={id} name={id} otherControls />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell key={id}>\n <span id={id}>{content}</span>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </Draggable>\n )}\n </DataList>\n </Droppable>\n <div className=\"pf-screen-reader\" aria-live=\"assertive\">\n {liveText}\n </div>\n </DragDrop>\n );\n};","title":"Draggable","lang":"js"}}>
|
|
521
526
|
|
|
527
|
+
<p {...{"className":"ws-p"}}>
|
|
528
|
+
{`Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `}
|
|
529
|
+
|
|
530
|
+
<code {...{"className":"ws-code"}}>
|
|
531
|
+
{`DragDrop`}
|
|
532
|
+
</code>
|
|
533
|
+
{`, `}
|
|
534
|
+
|
|
535
|
+
<code {...{"className":"ws-code"}}>
|
|
536
|
+
{`Draggable`}
|
|
537
|
+
</code>
|
|
538
|
+
{`, and `}
|
|
539
|
+
|
|
540
|
+
<code {...{"className":"ws-code"}}>
|
|
541
|
+
{`Droppable`}
|
|
542
|
+
</code>
|
|
543
|
+
{` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.`}
|
|
544
|
+
</p>
|
|
522
545
|
</Example>,
|
|
523
546
|
'Small grid breakpoint': props =>
|
|
524
547
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListItemRow,\n DataListItemCells,\n DataListCell,\n DataListGridBreakpoint\n} from '@patternfly/react-core';\n\nconst SmallGridBreakpoint = () => (\n <DataList aria-label=\"Simple data list example\" gridBreakpoint=\"sm\">\n <DataListItem aria-labelledby=\"simple-item1\">\n <DataListItemRow>\n <DataListItemCells\n dataListCells={[\n <DataListCell key=\"primary content\">\n <span id=\"simple-item1\">Primary content</span>\n </DataListCell>,\n <DataListCell key=\"secondary content\">\n Really really really really really really really really really really really really really really long\n description that should be truncated before it ends\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n)","title":"Small grid breakpoint","lang":"js"}}>
|
|
@@ -23,6 +23,12 @@ const pageData = {
|
|
|
23
23
|
"description": "Callback for drag event. Return true to allow drag, false to disallow.",
|
|
24
24
|
"defaultValue": "() => true"
|
|
25
25
|
},
|
|
26
|
+
{
|
|
27
|
+
"name": "onDragMove",
|
|
28
|
+
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => void",
|
|
29
|
+
"description": "Callback on mouse move while dragging.",
|
|
30
|
+
"defaultValue": "() => {}"
|
|
31
|
+
},
|
|
26
32
|
{
|
|
27
33
|
"name": "onDrop",
|
|
28
34
|
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean",
|
|
@@ -44,6 +50,17 @@ const pageData = {
|
|
|
44
50
|
"name": "className",
|
|
45
51
|
"type": "string",
|
|
46
52
|
"description": "Class to add to outer div"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "hasNoWrapper",
|
|
56
|
+
"type": "boolean",
|
|
57
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
58
|
+
"defaultValue": "false"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "style",
|
|
62
|
+
"type": "No type info",
|
|
63
|
+
"defaultValue": "{}"
|
|
47
64
|
}
|
|
48
65
|
]
|
|
49
66
|
},
|
|
@@ -67,6 +84,12 @@ const pageData = {
|
|
|
67
84
|
"description": "Id to be passed back on drop events",
|
|
68
85
|
"defaultValue": "'defaultId'"
|
|
69
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"name": "hasNoWrapper",
|
|
89
|
+
"type": "boolean",
|
|
90
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
91
|
+
"defaultValue": "false"
|
|
92
|
+
},
|
|
70
93
|
{
|
|
71
94
|
"name": "zone",
|
|
72
95
|
"type": "string",
|