/
index.jsx
102 lines (93 loc) · 2.95 KB
/
index.jsx
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
import React, { forwardRef } from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import { makeStyles } from '../styles'
import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
import { AlertPropTypes, AlertDefaultProps } from '../Alert'
import Alert from '../Alert'
const useStyles = makeStyles(theme => ({
top: {
// create the arrow
borderLeft: '0.75rem solid transparent',
borderRight: '0.75rem solid transparent',
borderBottom: ({ variant, severity }) =>
`0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
// position the arrow
position: 'absolute',
top: '-0.75rem',
left: ({ position }) => position,
marginLeft: '-0.75rem'
},
bottom: {
// create the arrow
borderLeft: '0.75rem solid transparent',
borderRight: '0.75rem solid transparent',
borderTop: ({ variant, severity }) =>
`0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
// position the arrow
position: 'absolute',
bottom: '-0.75rem',
left: ({ position }) => position,
marginLeft: '-0.75rem'
},
left: {
// create the arrow
borderTop: '0.75rem solid transparent',
borderBottom: '0.75rem solid transparent',
borderRight: ({ variant, severity }) =>
`0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
// position the arrow
position: 'absolute',
left: '-0.75rem',
top: ({ position }) => position,
marginTop: '-0.75rem'
},
right: {
// create the arrow
borderTop: '0.75rem solid transparent',
borderBottom: '0.75rem solid transparent',
borderLeft: ({ variant, severity }) =>
`0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
// position the arrow
position: 'absolute',
right: '-0.75rem',
top: ({ position }) => position,
marginTop: '-0.75rem'
}
}))
const PointerAlert = forwardRef(
(
{ className, variant, severity, children, direction, position, ...props },
ref
) => {
const styles = useStyles({ variant, severity, position })
return (
<Alert
ref={ref}
className={cx(className, 'u-pos-relative')}
variant={variant}
severity={severity}
{...props}
>
{children}
<span className={styles[direction]}></span>
</Alert>
)
}
)
PointerAlert.displayName = 'PointerAlert'
PointerAlert.propTypes = {
...AlertPropTypes,
/** Direction of the arrow.*/
direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
/** Position of the arrow. Can be any length or percentage value like "100px" or "30%".
* If you want to position the arrow on the edge, you need to pay attention to the arrow width.
* For example, "calc(0% + 0.75rem)" will position the arrow at the starting edge. */
position: PropTypes.string
}
PointerAlert.defaultProps = {
...AlertDefaultProps,
direction: 'bottom',
position: '50%'
}
export default PointerAlert