ActionBar
An action bar allows to perform actions against a selectable list.
| Install | yarn add @diallink-corp/convergo-react-button |
|---|---|
| Version | 4.1.2 |
| Usage | import {ActionBar} from '@diallink-corp/convergo-react-button' |
Usage
function Example() {
const columns = [
{ name: 'Foo', key: 'foo' },
{ name: 'Bar', key: 'bar' },
{ name: 'Baz', key: 'baz' }
];
const items = [
{ test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 2', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 3', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 4', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 5', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 6', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 7', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 8', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 9', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 10', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 11', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 12', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 13', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 14', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' },
{ test: 'Test 1', foo: 'Foo 15', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
{ test: 'Test 2', foo: 'Foo 16', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' }
];
const [selectedKeys, setSelectedKeys] = useState(new Set());
const handleAction = (key) => {
alert(`Action triggered`);
};
return (
<ActionBarContainer>
<Table
aria-label="Table"
selectedKeys={selectedKeys}
selectionMode="multiple"
onSelectionChange={(keys) => setSelectedKeys(keys)}
>
<TableHeader columns={columns}>
{(column) => <Column minWidth={220}>{column.name}</Column>}
</TableHeader>
<TableBody items={items}>
{(item) => (
<Row key={item.foo}>{(key) => <Cell>{item[key]}</Cell>}</Row>
)}
</TableBody>
</Table>
<ActionBar
onAction={handleAction}
onClearSelection={() => setSelectedKeys(new Set())}
selectedItemCount={selectedKeys === 'all'
? selectedKeys
: selectedKeys.size}
>
<Item key="edit" textValue="Edit">
<Icon name="PencilIcon" variant="outline" />
<Text>Edit</Text>
</Item>
<Item key="copy" textValue="Copy">
<Icon name="DocumentIcon" variant="outline" />
<Text>Copy</Text>
</Item>
<Item key="delete" textValue="Delete">
<Icon name="XMarkIcon" variant="outline" />
<Text>Delete</Text>
</Item>
<Item key="move" textValue="Move">
<Icon name="ArrowRightIcon" variant="outline" />
<Text>Move</Text>
</Item>
<Item key="duplicate" textValue="Duplicate">
<Icon name="DocumentDuplicateIcon" variant="outline" />
<Text>Duplicate</Text>
</Item>
</ActionBar>
</ActionBarContainer>
);
}
function Example() {
const columns = [
{ name: 'Foo', key: 'foo' },
{ name: 'Bar', key: 'bar' },
{ name: 'Baz', key: 'baz' }
];
const items = [
{
test: 'Test 1',
foo: 'Foo 1',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 2',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 3',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 4',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 5',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 6',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 7',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 8',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 9',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 10',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 11',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 12',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 13',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 14',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 15',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 16',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
}
];
const [selectedKeys, setSelectedKeys] = useState(
new Set()
);
const handleAction = (key) => {
alert(`Action triggered`);
};
return (
<ActionBarContainer>
<Table
aria-label="Table"
selectedKeys={selectedKeys}
selectionMode="multiple"
onSelectionChange={(keys) => setSelectedKeys(keys)}
>
<TableHeader columns={columns}>
{(column) => (
<Column minWidth={220}>{column.name}</Column>
)}
</TableHeader>
<TableBody items={items}>
{(item) => (
<Row key={item.foo}>
{(key) => <Cell>{item[key]}</Cell>}
</Row>
)}
</TableBody>
</Table>
<ActionBar
onAction={handleAction}
onClearSelection={() => setSelectedKeys(new Set())}
selectedItemCount={selectedKeys === 'all'
? selectedKeys
: selectedKeys.size}
>
<Item key="edit" textValue="Edit">
<Icon name="PencilIcon" variant="outline" />
<Text>Edit</Text>
</Item>
<Item key="copy" textValue="Copy">
<Icon name="DocumentIcon" variant="outline" />
<Text>Copy</Text>
</Item>
<Item key="delete" textValue="Delete">
<Icon name="XMarkIcon" variant="outline" />
<Text>Delete</Text>
</Item>
<Item key="move" textValue="Move">
<Icon name="ArrowRightIcon" variant="outline" />
<Text>Move</Text>
</Item>
<Item key="duplicate" textValue="Duplicate">
<Icon
name="DocumentDuplicateIcon"
variant="outline"
/>
<Text>Duplicate</Text>
</Item>
</ActionBar>
</ActionBarContainer>
);
}
function Example() {
const columns = [
{
name: 'Foo',
key: 'foo'
},
{
name: 'Bar',
key: 'bar'
},
{
name: 'Baz',
key: 'baz'
}
];
const items = [
{
test: 'Test 1',
foo: 'Foo 1',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 2',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 3',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 4',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 5',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 6',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 7',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 8',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 9',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 10',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 11',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 12',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 13',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 14',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
},
{
test: 'Test 1',
foo: 'Foo 15',
bar: 'Bar 1',
yay: 'Yay 1',
baz: 'Baz 1'
},
{
test: 'Test 2',
foo: 'Foo 16',
bar: 'Bar 2',
yay: 'Yay 2',
baz: 'Baz 2'
}
];
const [
selectedKeys,
setSelectedKeys
] = useState(
new Set()
);
const handleAction = (
key
) => {
alert(
`Action triggered`
);
};
return (
<ActionBarContainer>
<Table
aria-label="Table"
selectedKeys={selectedKeys}
selectionMode="multiple"
onSelectionChange={(
keys
) =>
setSelectedKeys(
keys
)}
>
<TableHeader
columns={columns}
>
{(column) => (
<Column
minWidth={220}
>
{column
.name}
</Column>
)}
</TableHeader>
<TableBody
items={items}
>
{(item) => (
<Row
key={item
.foo}
>
{(key) => (
<Cell>
{item[
key
]}
</Cell>
)}
</Row>
)}
</TableBody>
</Table>
<ActionBar
onAction={handleAction}
onClearSelection={() =>
setSelectedKeys(
new Set()
)}
selectedItemCount={selectedKeys ===
'all'
? selectedKeys
: selectedKeys
.size}
>
<Item
key="edit"
textValue="Edit"
>
<Icon
name="PencilIcon"
variant="outline"
/>
<Text>
Edit
</Text>
</Item>
<Item
key="copy"
textValue="Copy"
>
<Icon
name="DocumentIcon"
variant="outline"
/>
<Text>
Copy
</Text>
</Item>
<Item
key="delete"
textValue="Delete"
>
<Icon
name="XMarkIcon"
variant="outline"
/>
<Text>
Delete
</Text>
</Item>
<Item
key="move"
textValue="Move"
>
<Icon
name="ArrowRightIcon"
variant="outline"
/>
<Text>
Move
</Text>
</Item>
<Item
key="duplicate"
textValue="Duplicate"
>
<Icon
name="DocumentDuplicateIcon"
variant="outline"
/>
<Text>
Duplicate
</Text>
</Item>
</ActionBar>
</ActionBarContainer>
);
}