-
Notifications
You must be signed in to change notification settings - Fork 19
/
button-icon-action-element.tsx
79 lines (73 loc) · 1.87 KB
/
button-icon-action-element.tsx
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
import React, { useState } from 'react'
import { Menu, MenuAlign, MenuData } from '../../../menu/menu'
import Tooltip from '../../../tooltip/tooltip'
export interface ButtonIconActionElementProps {
triggerTooltip?: string
iconLeft?: React.ReactNode
iconRight?: React.ReactNode
onClick?: () => void
menus?: MenuData
menusClassName?: string
menuAlign?: MenuAlign
triggerClassName?: string
}
export function ButtonIconActionElement(props: ButtonIconActionElementProps) {
const {
triggerTooltip,
iconLeft,
iconRight,
onClick,
menus,
menusClassName = '',
triggerClassName = '',
menuAlign = MenuAlign.START,
} = props
const [open, setOpen] = useState(false)
const tooltipWrapper = (content: React.ReactNode, withRightBorder = false) => {
if (triggerTooltip) {
return (
<Tooltip content={triggerTooltip} delayDuration={100}>
<span className={`flex ${withRightBorder ? 'border-r border-r-element-light-lighter-500' : ''}`}>
{content}
</span>
</Tooltip>
)
} else {
return content
}
}
if (menus) {
return (
<Menu
className={menusClassName}
menus={menus}
arrowAlign={menuAlign}
width={248}
onOpen={(isOpen) => setOpen(isOpen)}
trigger={
<div
data-testid="element"
className={`btn-icon-action__element ${triggerClassName} ${open ? 'is-active' : ''}`}
>
{iconLeft}
{iconRight}
</div>
}
triggerTooltip={triggerTooltip}
/>
)
} else {
return (
<>
{tooltipWrapper(
<div data-testid="element" className="btn-icon-action__element" onClick={onClick}>
{iconLeft}
{iconRight}
</div>,
true
)}
</>
)
}
}
export default ButtonIconActionElement