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
|
import { getUnpackedSettings } from "http2";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { Button } from "../mui/Button.js";
import arrowDown from "../svg/chevron-down.svg";
import { ParagraphClickable } from "./styled/index.js";
export interface Props {
label: (s: string) => VNode;
actions: string[];
onClick: (s: string) => 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({
label,
actions,
onClick: doClick,
}: Props): VNode {
const defaultAction = actions.length > 0 ? actions[0] : "";
const [opened, setOpened] = useState(false);
const [selected, setSelected] = useState<string>(defaultAction);
const canChange = actions.length > 1;
const options = canChange ? actions.filter((a) => a !== selected) : [];
function select(m: string): 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>
);
}
|
