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