Advanced

Action Bar

1
import {
2
ACTION_SEPARATOR,
3
ActionBarConnected,
4
addActionsToActionBar,
5
Button,
6
IActionOptions,
7
IDispatch,
8
PlasmaState,
9
IActionBarState,
10
} from '@coveord/plasma-react';
11
import {EditSize24Px, UnavailableSize24Px} from '@coveord/plasma-react-icons';
12
import {useDispatch, useSelector} from 'react-redux';
13
14
const MY_ID = 'action-bar-id';
15
16
const Demo = () => {
17
const dispatch: IDispatch = useDispatch();
18
19
const actions = useSelector(
20
(state: PlasmaState) =>
21
state.actionBars.find((actionBar: IActionBarState) => actionBar.id === MY_ID)?.actions ?? [],
22
);
23
24
const toggleActions = () => {
25
if (actions.length) {
26
dispatch(addActionsToActionBar(MY_ID, []));
27
} else {
28
dispatch(addActionsToActionBar(MY_ID, BIG_LIST_OF_ACTIONS));
29
}
30
};
31
return (
32
<>
33
<Button onClick={toggleActions} classes="mb2">
34
Toggle actions
35
</Button>
36
<ActionBarConnected id={MY_ID} />
37
</>
38
);
39
};
40
export default Demo;
41
42
const BIG_LIST_OF_ACTIONS: IActionOptions[] = [
43
ACTION_SEPARATOR,
44
{
45
name: 'Link to Coveo',
46
link: 'http://coveo.com',
47
target: '_blank',
48
icon: EditSize24Px,
49
primary: true,
50
enabled: true,
51
},
52
ACTION_SEPARATOR,
53
{
54
name: 'Confirm Me',
55
trigger: () => alert('You confirmed this action !'),
56
target: '_blank',
57
icon: UnavailableSize24Px,
58
primary: true,
59
enabled: true,
60
requiresConfirmation: {
61
confirmLabel: 'Want to do this action ?',
62
confirmType: 'danger',
63
buttonLabels: {
64
confirm: 'sure !',
65
cancel: 'never !',
66
},
67
},
68
},
69
ACTION_SEPARATOR,
70
{
71
name: 'Action 1',
72
trigger: () => alert('Action 1 was triggered'),
73
enabled: true,
74
icon: EditSize24Px,
75
requiresConfirmation: {
76
confirmType: 'danger',
77
buttonLabels: {
78
confirm: 'Yes',
79
cancel: 'Cancel',
80
},
81
},
82
},
83
ACTION_SEPARATOR,
84
ACTION_SEPARATOR,
85
{
86
name: 'Action 2',
87
trigger: () => alert('Action 2 was triggered'),
88
enabled: true,
89
requiresConfirmation: {
90
confirmType: 'danger',
91
buttonLabels: {
92
confirm: 'Pretty sure!',
93
cancel: 'Cancel',
94
},
95
},
96
},
97
{
98
name: 'Action 4',
99
trigger: () => alert('Action 4 was triggered'),
100
enabled: true,
101
},
102
ACTION_SEPARATOR,
103
{
104
name: 'Link to Coveo (disabled)',
105
link: 'http://coveo.com',
106
target: '_blank',
107
icon: EditSize24Px,
108
primary: true,
109
enabled: false,
110
hideDisabled: false,
111
},
112
ACTION_SEPARATOR,
113
];

Props

NameTypeDefaultDescription
childrenReactNode
React component to add after the actions
disabledboolean
Whether the action bar is disabled
extraContainerClassesstring[][]
List of additionnal CSS classes to add on the container
idstring
The unique identifier of the action bar
moreLabelstringMore
Label of the button that displays the actions that aren't primary
prefixContentIContentProps
Content to add before the filter and actions
removeDefaultContainerClassesboolean
Whether to remove the default container classes
widthnumbernull
Override for the width of the action bar. By default, it takes the full width
withSmallActionsbooleanfalse
Whether to display smaller actions
itemFilterCropLengthdeprecatednumber
do not use
itemFilterLabeldeprecatedstring
do not use
itemTooltipPropsdeprecatedITooltipProps
do not use
onClearItemFilterdeprecated() => void
do not use

No guidelines exist for ActionBarConnected yet.

Create guidelines