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
export default () => {
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
41
const BIG_LIST_OF_ACTIONS: IActionOptions[] = [
42
ACTION_SEPARATOR,
43
{
44
name: 'Link to Coveo',
45
link: 'http://coveo.com',
46
target: '_blank',
47
icon: EditSize24Px,
48
primary: true,
49
enabled: true,
50
},
51
ACTION_SEPARATOR,
52
{
53
name: 'Confirm Me',
54
trigger: () => alert('You confirmed this action !'),
55
target: '_blank',
56
icon: UnavailableSize24Px,
57
primary: true,
58
enabled: true,
59
requiresConfirmation: {
60
confirmLabel: 'Want to do this action ?',
61
confirmType: 'danger',
62
buttonLabels: {
63
confirm: 'sure !',
64
cancel: 'never !',
65
},
66
},
67
},
68
ACTION_SEPARATOR,
69
{
70
name: 'Action 1',
71
trigger: () => alert('Action 1 was triggered'),
72
enabled: true,
73
icon: EditSize24Px,
74
requiresConfirmation: {
75
confirmType: 'danger',
76
buttonLabels: {
77
confirm: 'Yes',
78
cancel: 'Cancel',
79
},
80
},
81
},
82
ACTION_SEPARATOR,
83
ACTION_SEPARATOR,
84
{
85
name: 'Action 2',
86
trigger: () => alert('Action 2 was triggered'),
87
enabled: true,
88
requiresConfirmation: {
89
confirmType: 'danger',
90
buttonLabels: {
91
confirm: 'Pretty sure!',
92
cancel: 'Cancel',
93
},
94
},
95
},
96
{
97
name: 'Action 4',
98
trigger: () => alert('Action 4 was triggered'),
99
enabled: true,
100
},
101
ACTION_SEPARATOR,
102
{
103
name: 'Link to Coveo (disabled)',
104
link: 'http://coveo.com',
105
target: '_blank',
106
icon: EditSize24Px,
107
primary: true,
108
enabled: false,
109
hideDisabled: false,
110
},
111
ACTION_SEPARATOR,
112
];

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