From 59e5393843e795243fa99f26bc50a30165eb93fa Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Mon, 21 Nov 2022 14:18:11 -0600 Subject: [PATCH 1/6] add action bar examples to tableview and listview --- .../@react-spectrum/list/docs/ListView.mdx | 52 ++++++++++++++ .../@react-spectrum/table/docs/TableView.mdx | 70 ++++++++++++++++++- 2 files changed, 121 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 84c39fd67f5..4395ca792ac 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -30,6 +30,9 @@ import {Image} from '@react-spectrum/image'; import Info from '@spectrum-icons/workflow/Info'; import {Item, ListView} from '@react-spectrum/list'; import {Link} from '@react-spectrum/link'; +import Copy from '@spectrum-icons/workflow/Copy'; +import Edit from '@spectrum-icons/workflow/Edit'; +import Delete from '@spectrum-icons/workflow/Delete'; ``` --- @@ -363,6 +366,55 @@ This behavior is slightly different in the highlight selection style, where sing ``` + +### Action bar + +An ActionBar can be used when a user needs to perform actions on one or more items at the same time. + +```tsx example keepIndividualImports +import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; + +function Example() { + let items = [ + {key: 0, name: 'Adobe Photoshop'}, + {key: 1, name: 'Adobe Illustrator'}, + {key: 2, name: 'Adobe XD'} + ]; + + let [selectedKeys, setSelectedKeys] = React.useState(new Set([0])); + + return ( + + + {(item) => ( + + {item.name} + + )} + + alert(`Action: ${key}`)} + onClearSelection={() => setSelectedKeys(new Set([]))}> + + + Edit + + + + Copy + + + + Delete + + + + ); +} +``` + ## Drag and drop To enable drag and drop in a ListView, you must provide the drag and drop hooks sourced from to the ListView's `dragAndDropHooks` prop. diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 53d62f70a56..cc50a9215c8 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-spectrum/table'; import tableTypes from 'docs:@react-types/table/src/index.d.ts'; -import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; +import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-spectrum/table/package.json'; @@ -21,6 +21,10 @@ import {ActionButton} from '@react-spectrum/button'; import Add from '@spectrum-icons/workflow/Add'; import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table'; import {Flex} from '@react-spectrum/layout'; +import Copy from '@spectrum-icons/workflow/Copy'; +import Edit from '@spectrum-icons/workflow/Edit'; +import Delete from '@spectrum-icons/workflow/Delete'; +import {Text} from '@react-spectrum/text'; ``` --- @@ -500,6 +504,70 @@ This behavior is slightly different in the highlight selection style, where sing ``` +### Action bar + +An ActionBar can be used when a user needs to perform actions on one or more rows at the same time. + +```tsx example keepIndividualImports +import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; + +function Example() { + let columns = [ + {name: 'Name', uid: 'name'}, + {name: 'Type', uid: 'type'}, + {name: 'Level', uid: 'level'} + ]; + + let rows = [ + {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'}, + {id: 2, name: 'Blastoise', type: 'Water', level: '56'}, + {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'}, + {id: 4, name: 'Pikachu', type: 'Electric', level: '100'} + ]; + + let [selectedKeys, setSelectedKeys] = React.useState(new Set([1])); + + return ( + + + + {column => {column.name}} + + + {item => ( + + {key => {item[key]}} + + )} + + + setSelectedKeys(new Set())} + onAction={(key) => alert(`Action: ${key}`)}> + + + Edit + + + + Copy + + + + Delete + + + + ); +} +``` + ## Sorting TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with From 8a73cd14e02b2b75e7a8d0061e3845971ccc7486 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Mon, 21 Nov 2022 18:17:49 -0600 Subject: [PATCH 2/6] add height to table --- packages/@react-spectrum/table/docs/TableView.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index cc50a9215c8..2560e65a1e5 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -528,12 +528,13 @@ function Example() { let [selectedKeys, setSelectedKeys] = React.useState(new Set([1])); return ( - + + onSelectionChange={setSelectedKeys} + height="size-3000"> {column => {column.name}} From 38582e193038cab171498b4604de865e57c424bd Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 22 Nov 2022 11:22:21 -0600 Subject: [PATCH 3/6] remove maxWidth from ListView --- packages/@react-spectrum/list/docs/ListView.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 4395ca792ac..0296bc87fe5 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -385,7 +385,7 @@ function Example() { return ( - + {(item) => ( {item.name} From f2409108f0b56ec181c6723c46224b17139aa883 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 22 Nov 2022 11:57:03 -0600 Subject: [PATCH 4/6] add link to actionbar docs --- packages/@react-spectrum/list/docs/ListView.mdx | 2 +- packages/@react-spectrum/table/docs/TableView.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 0296bc87fe5..595a7a4e9ee 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -369,7 +369,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An ActionBar can be used when a user needs to perform actions on one or more items at the same time. +An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more items at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 2560e65a1e5..febc9cef337 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -506,7 +506,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An ActionBar can be used when a user needs to perform actions on one or more rows at the same time. +An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more rows at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; From 527b5b605c462dc44e1912ddbfaf44a2dc9400af Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 22 Nov 2022 14:27:46 -0600 Subject: [PATCH 5/6] remove actionbar links --- packages/@react-spectrum/list/docs/ListView.mdx | 2 +- packages/@react-spectrum/table/docs/TableView.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 595a7a4e9ee..0296bc87fe5 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -369,7 +369,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more items at the same time. +An ActionBar can be used when a user needs to perform actions on one or more items at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index febc9cef337..2560e65a1e5 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -506,7 +506,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more rows at the same time. +An ActionBar can be used when a user needs to perform actions on one or more rows at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; From b11b9ac4b41b2d73c3d546e5fe18b29e38eb74f2 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 23 Nov 2022 15:07:39 -0600 Subject: [PATCH 6/6] added back links --- packages/@react-spectrum/list/docs/ListView.mdx | 2 +- packages/@react-spectrum/table/docs/TableView.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/list/docs/ListView.mdx b/packages/@react-spectrum/list/docs/ListView.mdx index 0296bc87fe5..4073cd41253 100644 --- a/packages/@react-spectrum/list/docs/ListView.mdx +++ b/packages/@react-spectrum/list/docs/ListView.mdx @@ -369,7 +369,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An ActionBar can be used when a user needs to perform actions on one or more items at the same time. +An [Action bar](ActionBar.html) can be used when a user needs to perform actions on one or more items at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'; diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 2560e65a1e5..60706735dd2 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -506,7 +506,7 @@ This behavior is slightly different in the highlight selection style, where sing ### Action bar -An ActionBar can be used when a user needs to perform actions on one or more rows at the same time. +An [Action bar](ActionBar.html) can be used when a user needs to perform actions on one or more rows at the same time. ```tsx example keepIndividualImports import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar';