@instructure/ui-modal 8.25.1-snapshot-7 → 8.25.1-snapshot-10
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/CHANGELOG.md +1 -1
- package/es/Modal/ModalBody/index.js +20 -19
- package/es/Modal/ModalFooter/index.js +14 -13
- package/es/Modal/ModalHeader/index.js +21 -20
- package/es/Modal/index.js +45 -39
- package/lib/Modal/ModalBody/index.js +21 -20
- package/lib/Modal/ModalFooter/index.js +14 -13
- package/lib/Modal/ModalHeader/index.js +21 -20
- package/lib/Modal/index.js +45 -39
- package/package.json +20 -20
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Modal/ModalLocator.d.ts +19 -19
- package/types/Modal/index.d.ts +1 -1
- package/types/Modal/index.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [8.25.1-snapshot-
|
|
6
|
+
## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-modal
|
|
9
9
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
|
|
3
3
|
|
|
4
|
-
var _dec, _dec2, _class
|
|
4
|
+
var _dec, _dec2, _class;
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* The MIT License (MIT)
|
|
@@ -44,20 +44,25 @@ id: Modal.Body
|
|
|
44
44
|
---
|
|
45
45
|
@tsProps
|
|
46
46
|
**/
|
|
47
|
-
let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class =
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class ModalBody extends Component {
|
|
48
|
+
static displayName = "ModalBody";
|
|
49
|
+
static componentId = 'Modal.Body';
|
|
50
|
+
static propTypes = propTypes;
|
|
51
|
+
static allowedProps = allowedProps;
|
|
52
|
+
static defaultProps = {
|
|
53
|
+
padding: 'medium',
|
|
54
|
+
as: 'div',
|
|
55
|
+
variant: 'default'
|
|
56
|
+
};
|
|
57
|
+
ref = null;
|
|
58
|
+
handleRef = el => {
|
|
59
|
+
const elementRef = this.props.elementRef;
|
|
60
|
+
this.ref = el;
|
|
51
61
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
if (typeof elementRef === 'function') {
|
|
57
|
-
elementRef(el);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
}
|
|
62
|
+
if (typeof elementRef === 'function') {
|
|
63
|
+
elementRef(el);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
61
66
|
|
|
62
67
|
componentDidMount() {
|
|
63
68
|
var _this$props$makeStyle, _this$props;
|
|
@@ -98,10 +103,6 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
|
|
|
98
103
|
}), children);
|
|
99
104
|
}
|
|
100
105
|
|
|
101
|
-
}
|
|
102
|
-
padding: 'medium',
|
|
103
|
-
as: 'div',
|
|
104
|
-
variant: 'default'
|
|
105
|
-
}, _class2)) || _class) || _class);
|
|
106
|
+
}) || _class) || _class);
|
|
106
107
|
export default ModalBody;
|
|
107
108
|
export { ModalBody };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["children"];
|
|
3
3
|
|
|
4
|
-
var _dec, _dec2, _class
|
|
4
|
+
var _dec, _dec2, _class;
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* The MIT License (MIT)
|
|
@@ -43,15 +43,18 @@ id: Modal.Footer
|
|
|
43
43
|
---
|
|
44
44
|
@tsProps
|
|
45
45
|
**/
|
|
46
|
-
let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class =
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class ModalFooter extends Component {
|
|
47
|
+
static displayName = "ModalFooter";
|
|
48
|
+
static componentId = 'Modal.Footer';
|
|
49
|
+
static propTypes = propTypes;
|
|
50
|
+
static allowedProps = allowedProps;
|
|
51
|
+
static defaultProps = {
|
|
52
|
+
variant: 'default'
|
|
53
|
+
};
|
|
54
|
+
ref = null;
|
|
55
|
+
handleRef = el => {
|
|
56
|
+
this.ref = el;
|
|
57
|
+
};
|
|
55
58
|
|
|
56
59
|
componentDidMount() {
|
|
57
60
|
var _this$props$makeStyle, _this$props;
|
|
@@ -79,8 +82,6 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
79
82
|
}), children);
|
|
80
83
|
}
|
|
81
84
|
|
|
82
|
-
}
|
|
83
|
-
variant: 'default'
|
|
84
|
-
}, _class2)) || _class) || _class);
|
|
85
|
+
}) || _class) || _class);
|
|
85
86
|
export default ModalFooter;
|
|
86
87
|
export { ModalFooter };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["children"];
|
|
3
3
|
|
|
4
|
-
var _dec, _dec2, _class
|
|
4
|
+
var _dec, _dec2, _class;
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* The MIT License (MIT)
|
|
@@ -44,21 +44,19 @@ id: Modal.Header
|
|
|
44
44
|
---
|
|
45
45
|
@tsProps
|
|
46
46
|
**/
|
|
47
|
-
let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class =
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
};
|
|
61
|
-
}
|
|
47
|
+
let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class ModalHeader extends Component {
|
|
48
|
+
static displayName = "ModalHeader";
|
|
49
|
+
static componentId = 'Modal.Header';
|
|
50
|
+
static propTypes = propTypes;
|
|
51
|
+
static allowedProps = allowedProps;
|
|
52
|
+
static defaultProps = {
|
|
53
|
+
variant: 'default',
|
|
54
|
+
spacing: 'default'
|
|
55
|
+
};
|
|
56
|
+
ref = null;
|
|
57
|
+
handleRef = el => {
|
|
58
|
+
this.ref = el;
|
|
59
|
+
};
|
|
62
60
|
|
|
63
61
|
componentDidMount() {
|
|
64
62
|
var _this$props$makeStyle, _this$props;
|
|
@@ -72,6 +70,12 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
72
70
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
|
|
73
71
|
}
|
|
74
72
|
|
|
73
|
+
makeStyleProps = () => {
|
|
74
|
+
return {
|
|
75
|
+
withCloseButton: this.usesCloseButton
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
|
|
75
79
|
get usesCloseButton() {
|
|
76
80
|
let hasCloseButton = false;
|
|
77
81
|
React.Children.forEach(this.props.children, child => {
|
|
@@ -96,9 +100,6 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
96
100
|
}), children);
|
|
97
101
|
}
|
|
98
102
|
|
|
99
|
-
}
|
|
100
|
-
variant: 'default',
|
|
101
|
-
spacing: 'default'
|
|
102
|
-
}, _class2)) || _class) || _class);
|
|
103
|
+
}) || _class) || _class);
|
|
103
104
|
export default ModalHeader;
|
|
104
105
|
export { ModalHeader };
|
package/es/Modal/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
|
|
3
3
|
|
|
4
|
-
var _dec, _dec2, _class
|
|
4
|
+
var _dec, _dec2, _class;
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* The MIT License (MIT)
|
|
@@ -51,40 +51,40 @@ tags: overlay, portal, dialog
|
|
|
51
51
|
---
|
|
52
52
|
@tsProps
|
|
53
53
|
**/
|
|
54
|
-
let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class =
|
|
54
|
+
let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Modal extends Component {
|
|
55
|
+
static displayName = "Modal";
|
|
56
|
+
static componentId = 'Modal';
|
|
57
|
+
static propTypes = propTypes;
|
|
58
|
+
static allowedProps = allowedProps;
|
|
59
|
+
static defaultProps = {
|
|
60
|
+
open: false,
|
|
61
|
+
size: 'auto',
|
|
62
|
+
variant: 'default',
|
|
63
|
+
transition: 'fade',
|
|
64
|
+
insertAt: 'bottom',
|
|
65
|
+
shouldCloseOnDocumentClick: true,
|
|
66
|
+
shouldReturnFocus: true,
|
|
67
|
+
constrain: 'window',
|
|
68
|
+
overflow: 'scroll'
|
|
69
|
+
};
|
|
70
|
+
static Header = ModalHeader;
|
|
71
|
+
static Body = ModalBody;
|
|
72
|
+
static Footer = ModalFooter;
|
|
73
|
+
|
|
55
74
|
constructor(props) {
|
|
56
75
|
super(props);
|
|
57
|
-
this._DOMNode = null;
|
|
58
|
-
this._content = null;
|
|
59
|
-
this.ref = null;
|
|
60
|
-
|
|
61
|
-
this.handleRef = el => {
|
|
62
|
-
this.ref = el;
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
this.handlePortalOpen = DOMNode => {
|
|
66
|
-
this.DOMNode = DOMNode;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
this.handleTransitionExited = () => {
|
|
70
|
-
this.setState({
|
|
71
|
-
transitioning: false
|
|
72
|
-
});
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
this.contentRef = el => {
|
|
76
|
-
this._content = el;
|
|
77
|
-
|
|
78
|
-
if (typeof this.props.contentRef === 'function') {
|
|
79
|
-
this.props.contentRef(el);
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
|
|
83
76
|
this.state = {
|
|
84
77
|
transitioning: false
|
|
85
78
|
};
|
|
86
79
|
}
|
|
87
80
|
|
|
81
|
+
_DOMNode = null;
|
|
82
|
+
_content = null;
|
|
83
|
+
ref = null;
|
|
84
|
+
handleRef = el => {
|
|
85
|
+
this.ref = el;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
88
|
componentDidMount() {
|
|
89
89
|
var _this$props$makeStyle, _this$props;
|
|
90
90
|
|
|
@@ -124,6 +124,22 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
|
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
handlePortalOpen = DOMNode => {
|
|
128
|
+
this.DOMNode = DOMNode;
|
|
129
|
+
};
|
|
130
|
+
handleTransitionExited = () => {
|
|
131
|
+
this.setState({
|
|
132
|
+
transitioning: false
|
|
133
|
+
});
|
|
134
|
+
};
|
|
135
|
+
contentRef = el => {
|
|
136
|
+
this._content = el;
|
|
137
|
+
|
|
138
|
+
if (typeof this.props.contentRef === 'function') {
|
|
139
|
+
this.props.contentRef(el);
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
|
|
127
143
|
renderChildren() {
|
|
128
144
|
const _this$props3 = this.props,
|
|
129
145
|
children = _this$props3.children,
|
|
@@ -226,16 +242,6 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
|
|
|
226
242
|
}, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
|
|
227
243
|
}
|
|
228
244
|
|
|
229
|
-
}
|
|
230
|
-
open: false,
|
|
231
|
-
size: 'auto',
|
|
232
|
-
variant: 'default',
|
|
233
|
-
transition: 'fade',
|
|
234
|
-
insertAt: 'bottom',
|
|
235
|
-
shouldCloseOnDocumentClick: true,
|
|
236
|
-
shouldReturnFocus: true,
|
|
237
|
-
constrain: 'window',
|
|
238
|
-
overflow: 'scroll'
|
|
239
|
-
}, _class2.Header = ModalHeader, _class2.Body = ModalBody, _class2.Footer = ModalFooter, _class2)) || _class) || _class);
|
|
245
|
+
}) || _class) || _class);
|
|
240
246
|
export default Modal;
|
|
241
247
|
export { Modal, ModalHeader, ModalBody, ModalFooter };
|
|
@@ -27,7 +27,7 @@ var _props = require("./props");
|
|
|
27
27
|
|
|
28
28
|
const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
|
|
29
29
|
|
|
30
|
-
var _dec, _dec2, _class
|
|
30
|
+
var _dec, _dec2, _class;
|
|
31
31
|
|
|
32
32
|
/**
|
|
33
33
|
---
|
|
@@ -36,20 +36,25 @@ id: Modal.Body
|
|
|
36
36
|
---
|
|
37
37
|
@tsProps
|
|
38
38
|
**/
|
|
39
|
-
let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class ModalBody extends _react.Component {
|
|
40
|
+
static displayName = "ModalBody";
|
|
41
|
+
static componentId = 'Modal.Body';
|
|
42
|
+
static propTypes = _props.propTypes;
|
|
43
|
+
static allowedProps = _props.allowedProps;
|
|
44
|
+
static defaultProps = {
|
|
45
|
+
padding: 'medium',
|
|
46
|
+
as: 'div',
|
|
47
|
+
variant: 'default'
|
|
48
|
+
};
|
|
49
|
+
ref = null;
|
|
50
|
+
handleRef = el => {
|
|
51
|
+
const elementRef = this.props.elementRef;
|
|
52
|
+
this.ref = el;
|
|
53
|
+
|
|
54
|
+
if (typeof elementRef === 'function') {
|
|
55
|
+
elementRef(el);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
53
58
|
|
|
54
59
|
componentDidMount() {
|
|
55
60
|
var _this$props$makeStyle, _this$props;
|
|
@@ -91,11 +96,7 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
91
96
|
}), children);
|
|
92
97
|
}
|
|
93
98
|
|
|
94
|
-
}
|
|
95
|
-
padding: 'medium',
|
|
96
|
-
as: 'div',
|
|
97
|
-
variant: 'default'
|
|
98
|
-
}, _class2)) || _class) || _class);
|
|
99
|
+
}) || _class) || _class);
|
|
99
100
|
exports.ModalBody = ModalBody;
|
|
100
101
|
var _default = ModalBody;
|
|
101
102
|
exports.default = _default;
|
|
@@ -25,7 +25,7 @@ var _props = require("./props");
|
|
|
25
25
|
|
|
26
26
|
const _excluded = ["children"];
|
|
27
27
|
|
|
28
|
-
var _dec, _dec2, _class
|
|
28
|
+
var _dec, _dec2, _class;
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
---
|
|
@@ -34,15 +34,18 @@ id: Modal.Footer
|
|
|
34
34
|
---
|
|
35
35
|
@tsProps
|
|
36
36
|
**/
|
|
37
|
-
let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class ModalFooter extends _react.Component {
|
|
38
|
+
static displayName = "ModalFooter";
|
|
39
|
+
static componentId = 'Modal.Footer';
|
|
40
|
+
static propTypes = _props.propTypes;
|
|
41
|
+
static allowedProps = _props.allowedProps;
|
|
42
|
+
static defaultProps = {
|
|
43
|
+
variant: 'default'
|
|
44
|
+
};
|
|
45
|
+
ref = null;
|
|
46
|
+
handleRef = el => {
|
|
47
|
+
this.ref = el;
|
|
48
|
+
};
|
|
46
49
|
|
|
47
50
|
componentDidMount() {
|
|
48
51
|
var _this$props$makeStyle, _this$props;
|
|
@@ -69,9 +72,7 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
69
72
|
}), children);
|
|
70
73
|
}
|
|
71
74
|
|
|
72
|
-
}
|
|
73
|
-
variant: 'default'
|
|
74
|
-
}, _class2)) || _class) || _class);
|
|
75
|
+
}) || _class) || _class);
|
|
75
76
|
exports.ModalFooter = ModalFooter;
|
|
76
77
|
var _default = ModalFooter;
|
|
77
78
|
exports.default = _default;
|
|
@@ -31,7 +31,7 @@ var _props = require("./props");
|
|
|
31
31
|
|
|
32
32
|
const _excluded = ["children"];
|
|
33
33
|
|
|
34
|
-
var _dec, _dec2, _class
|
|
34
|
+
var _dec, _dec2, _class;
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
37
|
---
|
|
@@ -40,21 +40,19 @@ id: Modal.Header
|
|
|
40
40
|
---
|
|
41
41
|
@tsProps
|
|
42
42
|
**/
|
|
43
|
-
let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
};
|
|
57
|
-
}
|
|
43
|
+
let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class ModalHeader extends _react.Component {
|
|
44
|
+
static displayName = "ModalHeader";
|
|
45
|
+
static componentId = 'Modal.Header';
|
|
46
|
+
static propTypes = _props.propTypes;
|
|
47
|
+
static allowedProps = _props.allowedProps;
|
|
48
|
+
static defaultProps = {
|
|
49
|
+
variant: 'default',
|
|
50
|
+
spacing: 'default'
|
|
51
|
+
};
|
|
52
|
+
ref = null;
|
|
53
|
+
handleRef = el => {
|
|
54
|
+
this.ref = el;
|
|
55
|
+
};
|
|
58
56
|
|
|
59
57
|
componentDidMount() {
|
|
60
58
|
var _this$props$makeStyle, _this$props;
|
|
@@ -68,6 +66,12 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
68
66
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
|
|
69
67
|
}
|
|
70
68
|
|
|
69
|
+
makeStyleProps = () => {
|
|
70
|
+
return {
|
|
71
|
+
withCloseButton: this.usesCloseButton
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
|
|
71
75
|
get usesCloseButton() {
|
|
72
76
|
let hasCloseButton = false;
|
|
73
77
|
|
|
@@ -93,10 +97,7 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
93
97
|
}), children);
|
|
94
98
|
}
|
|
95
99
|
|
|
96
|
-
}
|
|
97
|
-
variant: 'default',
|
|
98
|
-
spacing: 'default'
|
|
99
|
-
}, _class2)) || _class) || _class);
|
|
100
|
+
}) || _class) || _class);
|
|
100
101
|
exports.ModalHeader = ModalHeader;
|
|
101
102
|
var _default = ModalHeader;
|
|
102
103
|
exports.default = _default;
|
package/lib/Modal/index.js
CHANGED
|
@@ -66,7 +66,7 @@ var _props = require("./props");
|
|
|
66
66
|
|
|
67
67
|
const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
|
|
68
68
|
|
|
69
|
-
var _dec, _dec2, _class
|
|
69
|
+
var _dec, _dec2, _class;
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
---
|
|
@@ -75,40 +75,40 @@ tags: overlay, portal, dialog
|
|
|
75
75
|
---
|
|
76
76
|
@tsProps
|
|
77
77
|
**/
|
|
78
|
-
let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class =
|
|
78
|
+
let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class Modal extends _react.Component {
|
|
79
|
+
static displayName = "Modal";
|
|
80
|
+
static componentId = 'Modal';
|
|
81
|
+
static propTypes = _props.propTypes;
|
|
82
|
+
static allowedProps = _props.allowedProps;
|
|
83
|
+
static defaultProps = {
|
|
84
|
+
open: false,
|
|
85
|
+
size: 'auto',
|
|
86
|
+
variant: 'default',
|
|
87
|
+
transition: 'fade',
|
|
88
|
+
insertAt: 'bottom',
|
|
89
|
+
shouldCloseOnDocumentClick: true,
|
|
90
|
+
shouldReturnFocus: true,
|
|
91
|
+
constrain: 'window',
|
|
92
|
+
overflow: 'scroll'
|
|
93
|
+
};
|
|
94
|
+
static Header = _ModalHeader.ModalHeader;
|
|
95
|
+
static Body = _ModalBody.ModalBody;
|
|
96
|
+
static Footer = _ModalFooter.ModalFooter;
|
|
97
|
+
|
|
79
98
|
constructor(props) {
|
|
80
99
|
super(props);
|
|
81
|
-
this._DOMNode = null;
|
|
82
|
-
this._content = null;
|
|
83
|
-
this.ref = null;
|
|
84
|
-
|
|
85
|
-
this.handleRef = el => {
|
|
86
|
-
this.ref = el;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
this.handlePortalOpen = DOMNode => {
|
|
90
|
-
this.DOMNode = DOMNode;
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
this.handleTransitionExited = () => {
|
|
94
|
-
this.setState({
|
|
95
|
-
transitioning: false
|
|
96
|
-
});
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
this.contentRef = el => {
|
|
100
|
-
this._content = el;
|
|
101
|
-
|
|
102
|
-
if (typeof this.props.contentRef === 'function') {
|
|
103
|
-
this.props.contentRef(el);
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
|
|
107
100
|
this.state = {
|
|
108
101
|
transitioning: false
|
|
109
102
|
};
|
|
110
103
|
}
|
|
111
104
|
|
|
105
|
+
_DOMNode = null;
|
|
106
|
+
_content = null;
|
|
107
|
+
ref = null;
|
|
108
|
+
handleRef = el => {
|
|
109
|
+
this.ref = el;
|
|
110
|
+
};
|
|
111
|
+
|
|
112
112
|
componentDidMount() {
|
|
113
113
|
var _this$props$makeStyle, _this$props;
|
|
114
114
|
|
|
@@ -148,6 +148,22 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
|
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
+
handlePortalOpen = DOMNode => {
|
|
152
|
+
this.DOMNode = DOMNode;
|
|
153
|
+
};
|
|
154
|
+
handleTransitionExited = () => {
|
|
155
|
+
this.setState({
|
|
156
|
+
transitioning: false
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
contentRef = el => {
|
|
160
|
+
this._content = el;
|
|
161
|
+
|
|
162
|
+
if (typeof this.props.contentRef === 'function') {
|
|
163
|
+
this.props.contentRef(el);
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
|
|
151
167
|
renderChildren() {
|
|
152
168
|
const _this$props3 = this.props,
|
|
153
169
|
children = _this$props3.children,
|
|
@@ -249,17 +265,7 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
|
|
|
249
265
|
}, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
|
|
250
266
|
}
|
|
251
267
|
|
|
252
|
-
}
|
|
253
|
-
open: false,
|
|
254
|
-
size: 'auto',
|
|
255
|
-
variant: 'default',
|
|
256
|
-
transition: 'fade',
|
|
257
|
-
insertAt: 'bottom',
|
|
258
|
-
shouldCloseOnDocumentClick: true,
|
|
259
|
-
shouldReturnFocus: true,
|
|
260
|
-
constrain: 'window',
|
|
261
|
-
overflow: 'scroll'
|
|
262
|
-
}, _class2.Header = _ModalHeader.ModalHeader, _class2.Body = _ModalBody.ModalBody, _class2.Footer = _ModalFooter.ModalFooter, _class2)) || _class) || _class);
|
|
268
|
+
}) || _class) || _class);
|
|
263
269
|
exports.Modal = Modal;
|
|
264
270
|
var _default = Modal;
|
|
265
271
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-modal",
|
|
3
|
-
"version": "8.25.1-snapshot-
|
|
3
|
+
"version": "8.25.1-snapshot-10",
|
|
4
4
|
"description": "A component for displaying content in a dialog overlay",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,31 +24,31 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.13.10",
|
|
27
|
-
"@instructure/console": "8.25.1-snapshot-
|
|
28
|
-
"@instructure/emotion": "8.25.1-snapshot-
|
|
29
|
-
"@instructure/shared-types": "8.25.1-snapshot-
|
|
30
|
-
"@instructure/ui-buttons": "8.25.1-snapshot-
|
|
31
|
-
"@instructure/ui-dialog": "8.25.1-snapshot-
|
|
32
|
-
"@instructure/ui-motion": "8.25.1-snapshot-
|
|
33
|
-
"@instructure/ui-overlays": "8.25.1-snapshot-
|
|
34
|
-
"@instructure/ui-portal": "8.25.1-snapshot-
|
|
35
|
-
"@instructure/ui-prop-types": "8.25.1-snapshot-
|
|
36
|
-
"@instructure/ui-react-utils": "8.25.1-snapshot-
|
|
37
|
-
"@instructure/ui-testable": "8.25.1-snapshot-
|
|
38
|
-
"@instructure/ui-utils": "8.25.1-snapshot-
|
|
39
|
-
"@instructure/ui-view": "8.25.1-snapshot-
|
|
27
|
+
"@instructure/console": "8.25.1-snapshot-10",
|
|
28
|
+
"@instructure/emotion": "8.25.1-snapshot-10",
|
|
29
|
+
"@instructure/shared-types": "8.25.1-snapshot-10",
|
|
30
|
+
"@instructure/ui-buttons": "8.25.1-snapshot-10",
|
|
31
|
+
"@instructure/ui-dialog": "8.25.1-snapshot-10",
|
|
32
|
+
"@instructure/ui-motion": "8.25.1-snapshot-10",
|
|
33
|
+
"@instructure/ui-overlays": "8.25.1-snapshot-10",
|
|
34
|
+
"@instructure/ui-portal": "8.25.1-snapshot-10",
|
|
35
|
+
"@instructure/ui-prop-types": "8.25.1-snapshot-10",
|
|
36
|
+
"@instructure/ui-react-utils": "8.25.1-snapshot-10",
|
|
37
|
+
"@instructure/ui-testable": "8.25.1-snapshot-10",
|
|
38
|
+
"@instructure/ui-utils": "8.25.1-snapshot-10",
|
|
39
|
+
"@instructure/ui-view": "8.25.1-snapshot-10",
|
|
40
40
|
"prop-types": "^15"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": ">=16.8 <=17"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@instructure/ui-babel-preset": "8.25.1-snapshot-
|
|
47
|
-
"@instructure/ui-color-utils": "8.25.1-snapshot-
|
|
48
|
-
"@instructure/ui-position": "8.25.1-snapshot-
|
|
49
|
-
"@instructure/ui-test-locator": "8.25.1-snapshot-
|
|
50
|
-
"@instructure/ui-test-utils": "8.25.1-snapshot-
|
|
51
|
-
"@instructure/ui-themes": "8.25.1-snapshot-
|
|
46
|
+
"@instructure/ui-babel-preset": "8.25.1-snapshot-10",
|
|
47
|
+
"@instructure/ui-color-utils": "8.25.1-snapshot-10",
|
|
48
|
+
"@instructure/ui-position": "8.25.1-snapshot-10",
|
|
49
|
+
"@instructure/ui-test-locator": "8.25.1-snapshot-10",
|
|
50
|
+
"@instructure/ui-test-utils": "8.25.1-snapshot-10",
|
|
51
|
+
"@instructure/ui-themes": "8.25.1-snapshot-10"
|
|
52
52
|
},
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|