@stellar-expert/ui-framework 1.19.1 → 1.19.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/interaction/dialog.js +10 -4
- package/interaction/dialog.scss +13 -1
- package/package.json +1 -1
package/interaction/dialog.js
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
+
import {createPortal} from 'react-dom'
|
|
2
3
|
import PropTypes from 'prop-types'
|
|
4
|
+
import cn from 'classnames'
|
|
3
5
|
import './dialog.scss'
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* Modal dialog
|
|
7
9
|
* @param {boolean} dialogOpen - Whether a dialog is shown
|
|
10
|
+
* @param {boolean} [big] - Increases dialog max-width to 42em
|
|
11
|
+
* @param {string} [className] - Extra CSS classes for the dialog container
|
|
8
12
|
* @param {*} children - Dialog content
|
|
9
13
|
* @return {JSX.Element|null}
|
|
10
14
|
* @constructor
|
|
11
15
|
*/
|
|
12
|
-
export const Dialog = React.memo(function Dialog({dialogOpen, children}) {
|
|
16
|
+
export const Dialog = React.memo(function Dialog({dialogOpen, big, className, children}) {
|
|
13
17
|
if (!dialogOpen)
|
|
14
18
|
return null
|
|
15
|
-
return <div className="dialog">
|
|
19
|
+
return createPortal(<div className="dialog">
|
|
16
20
|
<div className="dialog-backdrop"/>
|
|
17
21
|
<div className="dialog-content container">
|
|
18
|
-
<div className=
|
|
22
|
+
<div className={cn('container', {big}, className)}>
|
|
19
23
|
{children}
|
|
20
24
|
</div>
|
|
21
25
|
</div>
|
|
22
|
-
</div
|
|
26
|
+
</div>, document.body)
|
|
23
27
|
})
|
|
24
28
|
|
|
25
29
|
Dialog.propTypes = {
|
|
26
30
|
dialogOpen: PropTypes.bool,
|
|
31
|
+
big: PropTypes.bool,
|
|
32
|
+
className: PropTypes.string,
|
|
27
33
|
children: PropTypes.any
|
|
28
34
|
}
|
package/interaction/dialog.scss
CHANGED
|
@@ -20,16 +20,28 @@
|
|
|
20
20
|
> .dialog-content {
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: column;
|
|
23
|
-
|
|
23
|
+
align-items: center;
|
|
24
|
+
overflow-y: auto;
|
|
24
25
|
height: 100%;
|
|
25
26
|
|
|
27
|
+
&::before,
|
|
28
|
+
&::after {
|
|
29
|
+
content: '';
|
|
30
|
+
flex: 1 0 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
26
33
|
> .container {
|
|
34
|
+
margin: $space-standard 0;
|
|
27
35
|
background: var(--color-bg);
|
|
28
36
|
border: 1px solid var(--color-contrast-border);
|
|
29
37
|
border-radius: $border-radius-input;
|
|
30
38
|
box-shadow: 0 2px 4px 0 var(--color-modal-bg);
|
|
31
39
|
padding: $space-micro $space-standard $space-standard;
|
|
32
40
|
max-width: 32em;
|
|
41
|
+
|
|
42
|
+
&.big {
|
|
43
|
+
max-width: 42em;
|
|
44
|
+
}
|
|
33
45
|
}
|
|
34
46
|
}
|
|
35
47
|
}
|