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
];