1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
/*
This file is part of GNU Taler
(C) 2022 Taler Systems S.A.
GNU Taler is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
Foundation; either version 3, or (at your option) any later version.
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
import { TranslatedString } from "@gnu-taler/taler-util";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { Button } from "../mui/Button.js";
import arrowDown from "../svg/chevron-down.inline.svg";
import { ParagraphClickable } from "./styled/index.js";
export interface Props<T> {
label: (s: T) => TranslatedString;
actions: T[];
onClick: (s: T) => Promise<void>;
}
/**
* functionality: it will receive a list of actions, take the first actions as
* the first chosen action
* the user may change the chosen action
* when the user click the button it will call onClick with the chosen action
* as argument
*
* visually: it is a primary button with a select handler on the right
*
* @returns
*/
export function MultiActionButton<T>({
label,
actions,
onClick: doClick,
}: Props<T>): VNode {
const defaultAction = actions.length > 0 ? actions[0] : "" as T;
const [opened, setOpened] = useState(false);
const [selected, setSelected] = useState<T>(defaultAction);
const canChange = actions.length > 1;
const options = canChange ? actions.filter((a) => a !== selected) : [];
function select(m: T): void {
setSelected(m);
setOpened(false);
}
if (!canChange) {
return (
<Button variant="contained" onClick={() => doClick(selected)}>
{label(selected)}
</Button>
);
}
return (
<div style={{ position: "relative", display: "inline-block" }}>
{opened && (
<div
style={{
position: "absolute",
bottom: 32 + 5,
right: 0,
marginLeft: 8,
marginRight: 8,
borderRadius: 5,
border: "1px solid blue",
background: "white",
boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
zIndex: 1,
}}
>
{options.map((m) => (
<ParagraphClickable key={m} onClick={() => select(m)}>
{label(m)}
</ParagraphClickable>
))}
</div>
)}
<Button
variant="contained"
onClick={() => doClick(selected)}
style={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
marginRight: 0,
// maxWidth: 170,
overflowX: "hidden",
textOverflow: "ellipsis",
}}
>
{label(selected)}
</Button>
<Button
variant="outlined"
onClick={async () => setOpened((s) => !s)}
style={{
marginLeft: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
paddingLeft: 4,
paddingRight: 4,
minWidth: "unset",
}}
>
<div
style={{
height: 24,
width: 24,
marginLeft: 4,
marginRight: 4,
// fill: "white",
}}
dangerouslySetInnerHTML={{ __html: arrowDown }}
/>
</Button>
</div>
);
}
|
