@instructure/ui-drawer-layout 8.33.2-snapshot-0 → 8.33.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/CHANGELOG.md +1 -5
- package/es/DrawerLayout/DrawerContent/DrawerContentLocator.js +3 -1
- package/es/DrawerLayout/DrawerContent/index.js +7 -26
- package/es/DrawerLayout/DrawerContent/props.js +1 -0
- package/es/DrawerLayout/DrawerContent/styles.js +0 -1
- package/es/DrawerLayout/DrawerContent/theme.js +0 -1
- package/es/DrawerLayout/DrawerLayoutLocator.js +3 -3
- package/es/DrawerLayout/DrawerTray/DrawerTrayLocator.js +3 -1
- package/es/DrawerLayout/DrawerTray/index.js +33 -64
- package/es/DrawerLayout/DrawerTray/props.js +1 -0
- package/es/DrawerLayout/DrawerTray/styles.js +0 -1
- package/es/DrawerLayout/DrawerTray/theme.js +5 -5
- package/es/DrawerLayout/__examples__/DrawerLayout.examples.js +1 -1
- package/es/DrawerLayout/__fixtures__/DrawerLayout.fixture.js +6 -7
- package/es/DrawerLayout/index.js +3 -41
- package/es/DrawerLayout/locator.js +1 -0
- package/es/DrawerLayout/props.js +1 -0
- package/es/DrawerLayout/styles.js +0 -1
- package/es/index.js +1 -0
- package/lib/DrawerLayout/DrawerContent/DrawerContentLocator.js +1 -3
- package/lib/DrawerLayout/DrawerContent/index.js +7 -36
- package/lib/DrawerLayout/DrawerContent/props.js +1 -3
- package/lib/DrawerLayout/DrawerContent/styles.js +0 -2
- package/lib/DrawerLayout/DrawerContent/theme.js +0 -2
- package/lib/DrawerLayout/DrawerLayoutLocator.js +1 -7
- package/lib/DrawerLayout/DrawerTray/DrawerTrayLocator.js +1 -3
- package/lib/DrawerLayout/DrawerTray/index.js +33 -78
- package/lib/DrawerLayout/DrawerTray/props.js +1 -5
- package/lib/DrawerLayout/DrawerTray/styles.js +0 -2
- package/lib/DrawerLayout/DrawerTray/theme.js +5 -6
- package/lib/DrawerLayout/__examples__/DrawerLayout.examples.js +0 -6
- package/lib/DrawerLayout/__fixtures__/DrawerLayout.fixture.js +5 -14
- package/lib/DrawerLayout/index.js +3 -62
- package/lib/DrawerLayout/locator.js +0 -2
- package/lib/DrawerLayout/props.js +1 -7
- package/lib/DrawerLayout/styles.js +0 -2
- package/lib/index.js +0 -1
- package/package.json +21 -21
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -1,46 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.DrawerTray = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _emotion = require("@instructure/emotion");
|
|
15
|
-
|
|
16
11
|
var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
|
|
17
|
-
|
|
18
12
|
var _Transition = require("@instructure/ui-motion/lib/Transition");
|
|
19
|
-
|
|
20
13
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
21
|
-
|
|
22
14
|
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
23
|
-
|
|
24
15
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
25
|
-
|
|
26
16
|
var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
|
|
27
|
-
|
|
28
17
|
var _Portal = require("@instructure/ui-portal/lib/Portal");
|
|
29
|
-
|
|
30
18
|
var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
|
|
31
|
-
|
|
32
19
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
33
|
-
|
|
34
20
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
35
|
-
|
|
36
21
|
var _index = require("../index");
|
|
37
|
-
|
|
38
22
|
var _props = require("./props");
|
|
39
|
-
|
|
40
23
|
const _excluded = ["label", "children", "render", "placement", "open", "onOpen", "onClose", "border", "shadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "contentRef", "mountNode", "defaultFocusElement", "liveRegion", "onDismiss", "onTransition", "shouldReturnFocus", "shouldCloseOnEscape", "shouldCloseOnDocumentClick", "shouldContainFocus", "styles"];
|
|
41
|
-
|
|
42
24
|
var _dec, _dec2, _dec3, _class, _class2;
|
|
43
|
-
|
|
44
25
|
/**
|
|
45
26
|
---
|
|
46
27
|
parent: DrawerLayout
|
|
@@ -52,98 +33,78 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
52
33
|
get _content() {
|
|
53
34
|
return this.ref;
|
|
54
35
|
}
|
|
55
|
-
|
|
56
36
|
constructor(props) {
|
|
57
37
|
super(props);
|
|
58
38
|
this.ref = null;
|
|
59
39
|
this._DOMNode = null;
|
|
60
|
-
|
|
61
40
|
this.makeStyleProps = () => {
|
|
62
41
|
return {
|
|
63
42
|
placement: this.placement
|
|
64
43
|
};
|
|
65
44
|
};
|
|
66
|
-
|
|
67
45
|
this.handleContentRef = node => {
|
|
68
46
|
this.ref = node;
|
|
69
|
-
|
|
70
47
|
if (typeof this.props.contentRef === 'function') {
|
|
71
48
|
this.props.contentRef(node);
|
|
72
49
|
}
|
|
73
50
|
};
|
|
74
|
-
|
|
75
51
|
this.handleTransitionEntered = _transitionType => {
|
|
76
52
|
this.setState({
|
|
77
53
|
transitioning: false
|
|
78
54
|
});
|
|
79
55
|
};
|
|
80
|
-
|
|
81
56
|
this.handleTransitionExited = _transitionType => {
|
|
82
57
|
this.setState({
|
|
83
58
|
transitioning: false
|
|
84
59
|
});
|
|
85
60
|
};
|
|
86
|
-
|
|
87
61
|
this.handlePortalOpen = DOMNode => {
|
|
88
62
|
this.DOMNode = DOMNode;
|
|
89
63
|
this.setState({
|
|
90
64
|
portalOpen: true
|
|
91
65
|
});
|
|
92
66
|
};
|
|
93
|
-
|
|
94
67
|
this.state = {
|
|
95
68
|
transitioning: false,
|
|
96
69
|
portalOpen: false
|
|
97
70
|
};
|
|
98
71
|
}
|
|
99
|
-
|
|
100
72
|
componentDidMount() {
|
|
101
73
|
var _this$props$makeStyle, _this$props;
|
|
102
|
-
|
|
103
74
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
|
|
104
75
|
}
|
|
105
|
-
|
|
106
76
|
componentDidUpdate(prevProps) {
|
|
107
77
|
var _this$props$makeStyle2, _this$props2;
|
|
108
|
-
|
|
109
78
|
if (this.props.open !== prevProps.open) {
|
|
110
79
|
this.setState({
|
|
111
80
|
transitioning: true
|
|
112
81
|
});
|
|
113
82
|
}
|
|
114
|
-
|
|
115
83
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
|
|
116
84
|
}
|
|
117
|
-
|
|
118
85
|
get placement() {
|
|
119
86
|
const _this$props3 = this.props,
|
|
120
|
-
|
|
121
|
-
|
|
87
|
+
placement = _this$props3.placement,
|
|
88
|
+
dir = _this$props3.dir;
|
|
122
89
|
const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
|
|
123
90
|
return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
|
|
124
91
|
}
|
|
125
|
-
|
|
126
92
|
get direction() {
|
|
127
93
|
return this.placement === 'end' ? 'right' : 'left';
|
|
128
94
|
}
|
|
129
|
-
|
|
130
95
|
get transition() {
|
|
131
96
|
return `slide-${this.direction}`;
|
|
132
97
|
}
|
|
133
|
-
|
|
134
98
|
get DOMNode() {
|
|
135
99
|
return this._DOMNode;
|
|
136
100
|
}
|
|
137
|
-
|
|
138
101
|
set DOMNode(el) {
|
|
139
102
|
this._DOMNode = el;
|
|
140
103
|
}
|
|
141
|
-
|
|
142
104
|
renderContent() {
|
|
143
105
|
const _this$props4 = this.props,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
106
|
+
children = _this$props4.children,
|
|
107
|
+
render = _this$props4.render;
|
|
147
108
|
if (typeof render === 'function') {
|
|
148
109
|
return render();
|
|
149
110
|
} else if (typeof children === 'function') {
|
|
@@ -152,51 +113,47 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
152
113
|
return children;
|
|
153
114
|
}
|
|
154
115
|
}
|
|
155
|
-
|
|
156
116
|
render() {
|
|
157
117
|
const _this$props5 = this.props,
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
118
|
+
label = _this$props5.label,
|
|
119
|
+
children = _this$props5.children,
|
|
120
|
+
render = _this$props5.render,
|
|
121
|
+
placement = _this$props5.placement,
|
|
122
|
+
open = _this$props5.open,
|
|
123
|
+
onOpen = _this$props5.onOpen,
|
|
124
|
+
onClose = _this$props5.onClose,
|
|
125
|
+
border = _this$props5.border,
|
|
126
|
+
shadow = _this$props5.shadow,
|
|
127
|
+
onEnter = _this$props5.onEnter,
|
|
128
|
+
onEntering = _this$props5.onEntering,
|
|
129
|
+
onEntered = _this$props5.onEntered,
|
|
130
|
+
onExit = _this$props5.onExit,
|
|
131
|
+
onExiting = _this$props5.onExiting,
|
|
132
|
+
onExited = _this$props5.onExited,
|
|
133
|
+
contentRef = _this$props5.contentRef,
|
|
134
|
+
mountNode = _this$props5.mountNode,
|
|
135
|
+
defaultFocusElement = _this$props5.defaultFocusElement,
|
|
136
|
+
liveRegion = _this$props5.liveRegion,
|
|
137
|
+
onDismiss = _this$props5.onDismiss,
|
|
138
|
+
onTransition = _this$props5.onTransition,
|
|
139
|
+
shouldReturnFocus = _this$props5.shouldReturnFocus,
|
|
140
|
+
shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
|
|
141
|
+
shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
|
|
142
|
+
shouldContainFocus = _this$props5.shouldContainFocus,
|
|
143
|
+
styles = _this$props5.styles,
|
|
144
|
+
props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
|
|
185
145
|
return (0, _emotion.jsx)(_index.DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
|
|
186
146
|
var _this$props$styles;
|
|
187
|
-
|
|
188
147
|
const portalOpen = this.state.portalOpen;
|
|
189
|
-
const needsPortal = shouldOverlayTray && !!mountNode;
|
|
148
|
+
const needsPortal = shouldOverlayTray && !!mountNode;
|
|
149
|
+
// we have to handle the shadow version here,
|
|
190
150
|
// because passing and handling it in styles.js makes it
|
|
191
151
|
// rerender the component during the transition, breaking it
|
|
192
|
-
|
|
193
152
|
const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
|
|
194
153
|
let transitionIn = open;
|
|
195
|
-
|
|
196
154
|
if (needsPortal && !portalOpen) {
|
|
197
155
|
transitionIn = false;
|
|
198
156
|
}
|
|
199
|
-
|
|
200
157
|
const content = (0, _emotion.jsx)(_Transition.Transition, {
|
|
201
158
|
in: transitionIn,
|
|
202
159
|
type: this.transition,
|
|
@@ -225,7 +182,6 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
225
182
|
as: "div",
|
|
226
183
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent
|
|
227
184
|
}, this.renderContent())));
|
|
228
|
-
|
|
229
185
|
if (needsPortal) {
|
|
230
186
|
return (0, _emotion.jsx)(_Portal.Portal, {
|
|
231
187
|
mountNode: mountNode,
|
|
@@ -237,7 +193,6 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
|
|
|
237
193
|
}
|
|
238
194
|
});
|
|
239
195
|
}
|
|
240
|
-
|
|
241
196
|
}, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
242
197
|
shouldContainFocus: true,
|
|
243
198
|
shouldCloseOnEscape: true,
|
|
@@ -1,18 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _element = require("@instructure/ui-prop-types/lib/element.js");
|
|
13
|
-
|
|
14
10
|
var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -36,6 +31,7 @@ var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirect
|
|
|
36
31
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
32
|
* SOFTWARE.
|
|
38
33
|
*/
|
|
34
|
+
|
|
39
35
|
const propTypes = {
|
|
40
36
|
label: _propTypes.default.string.isRequired,
|
|
41
37
|
children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -96,6 +95,5 @@ const generateStyle = (componentTheme, props, state) => {
|
|
|
96
95
|
}
|
|
97
96
|
};
|
|
98
97
|
};
|
|
99
|
-
|
|
100
98
|
var _default = generateStyle;
|
|
101
99
|
exports.default = _default;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -36,9 +35,9 @@ exports.default = void 0;
|
|
|
36
35
|
*/
|
|
37
36
|
const generateComponentTheme = theme => {
|
|
38
37
|
const colors = theme.colors,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
borders = theme.borders,
|
|
39
|
+
stacking = theme.stacking,
|
|
40
|
+
shadows = theme.shadows;
|
|
42
41
|
const componentVariables = {
|
|
43
42
|
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
44
43
|
borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
@@ -50,9 +49,9 @@ const generateComponentTheme = theme => {
|
|
|
50
49
|
overflowY: 'auto',
|
|
51
50
|
contentOverflowY: 'auto'
|
|
52
51
|
};
|
|
53
|
-
return {
|
|
52
|
+
return {
|
|
53
|
+
...componentVariables
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
|
-
|
|
57
56
|
var _default = generateComponentTheme;
|
|
58
57
|
exports.default = _default;
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _View2 = require("@instructure/ui-view/lib/View");
|
|
13
|
-
|
|
14
10
|
var _index = require("../index");
|
|
15
|
-
|
|
16
11
|
var _DrawerLayout$Tray, _View;
|
|
17
|
-
|
|
18
12
|
var _default = {
|
|
19
13
|
propValues: {
|
|
20
14
|
dir: ['ltr']
|
|
@@ -1,30 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
-
|
|
16
11
|
var _index = require("../index");
|
|
17
|
-
|
|
18
12
|
var _DrawerLayout$Content;
|
|
19
|
-
|
|
20
13
|
class DrawerLayoutFixture extends _react.Component {
|
|
21
14
|
render() {
|
|
22
15
|
const _this$props = this.props,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
layoutWidth = _this$props.layoutWidth,
|
|
17
|
+
trayWidth = _this$props.trayWidth,
|
|
18
|
+
open = _this$props.open,
|
|
19
|
+
placement = _this$props.placement,
|
|
20
|
+
onOverlayTrayChange = _this$props.onOverlayTrayChange;
|
|
28
21
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
22
|
style: {
|
|
30
23
|
width: layoutWidth
|
|
@@ -44,9 +37,7 @@ class DrawerLayoutFixture extends _react.Component {
|
|
|
44
37
|
label: "Test DrawerContent"
|
|
45
38
|
}, /*#__PURE__*/_react.default.createElement("div", null, "Hello from content", /*#__PURE__*/_react.default.createElement("button", null, "Expand"))))));
|
|
46
39
|
}
|
|
47
|
-
|
|
48
40
|
}
|
|
49
|
-
|
|
50
41
|
exports.default = DrawerLayoutFixture;
|
|
51
42
|
DrawerLayoutFixture.displayName = "DrawerLayoutFixture";
|
|
52
43
|
DrawerLayoutFixture.propTypes = {
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -21,41 +19,23 @@ Object.defineProperty(exports, "DrawerTray", {
|
|
|
21
19
|
}
|
|
22
20
|
});
|
|
23
21
|
exports.default = void 0;
|
|
24
|
-
|
|
25
22
|
var _react = _interopRequireWildcard(require("react"));
|
|
26
|
-
|
|
27
23
|
var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
|
|
28
|
-
|
|
29
24
|
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
|
30
|
-
|
|
31
25
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
32
|
-
|
|
33
26
|
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
34
|
-
|
|
35
27
|
var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
|
|
36
|
-
|
|
37
28
|
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
38
|
-
|
|
39
29
|
var _px = require("@instructure/ui-utils/lib/px.js");
|
|
40
|
-
|
|
41
30
|
var _console = require("@instructure/console");
|
|
42
|
-
|
|
43
31
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
44
|
-
|
|
45
32
|
var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
|
|
46
|
-
|
|
47
33
|
var _DrawerContent = require("./DrawerContent");
|
|
48
|
-
|
|
49
34
|
var _DrawerTray = require("./DrawerTray");
|
|
50
|
-
|
|
51
35
|
var _emotion = require("@instructure/emotion");
|
|
52
|
-
|
|
53
36
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
54
|
-
|
|
55
37
|
var _props2 = require("./props");
|
|
56
|
-
|
|
57
38
|
var _dec, _dec2, _dec3, _dec4, _class, _class2;
|
|
58
|
-
|
|
59
39
|
/**
|
|
60
40
|
---
|
|
61
41
|
category: components
|
|
@@ -69,59 +49,46 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
69
49
|
this._content = null;
|
|
70
50
|
this._tray = null;
|
|
71
51
|
this.ref = null;
|
|
72
|
-
|
|
73
52
|
this.handleRef = el => {
|
|
74
53
|
this.ref = el;
|
|
75
54
|
};
|
|
76
|
-
|
|
77
55
|
this.handleTrayContentRef = el => {
|
|
78
56
|
this._tray = el;
|
|
79
57
|
};
|
|
80
|
-
|
|
81
58
|
this.handleContentSizeChange = _ref => {
|
|
82
59
|
let width = _ref.width;
|
|
83
60
|
this.setState((state, props) => {
|
|
84
61
|
const nextState = this.getNextState(props.minWidth, state.trayWidth, width, state.shouldOverlayTray);
|
|
85
|
-
|
|
86
62
|
if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
|
|
87
63
|
this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
|
|
88
64
|
}
|
|
89
|
-
|
|
90
65
|
return nextState;
|
|
91
66
|
});
|
|
92
67
|
};
|
|
93
|
-
|
|
94
68
|
this.handleTraySizeChange = _ref2 => {
|
|
95
69
|
let width = _ref2.width;
|
|
96
70
|
this.setState((state, props) => {
|
|
97
71
|
const nextState = this.getNextState(props.minWidth, width, state.contentWidth, true);
|
|
98
|
-
|
|
99
72
|
if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
|
|
100
73
|
this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
|
|
101
74
|
}
|
|
102
|
-
|
|
103
75
|
return nextState;
|
|
104
76
|
});
|
|
105
77
|
};
|
|
106
|
-
|
|
107
78
|
this.handleTrayTransitionEnter = () => {
|
|
108
79
|
let width = 0;
|
|
109
|
-
|
|
110
80
|
if (this._tray) {
|
|
111
81
|
width = (0, _getBoundingClientRect.getBoundingClientRect)(this._tray).width;
|
|
112
82
|
}
|
|
113
|
-
|
|
114
83
|
this.handleTraySizeChange({
|
|
115
84
|
width
|
|
116
85
|
});
|
|
117
86
|
};
|
|
118
|
-
|
|
119
87
|
this.handleTrayTransitionExit = () => {
|
|
120
88
|
this.handleTraySizeChange({
|
|
121
89
|
width: 0
|
|
122
90
|
});
|
|
123
91
|
};
|
|
124
|
-
|
|
125
92
|
this.state = {
|
|
126
93
|
shouldOverlayTray: false,
|
|
127
94
|
trayWidth: 0,
|
|
@@ -129,71 +96,56 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
129
96
|
};
|
|
130
97
|
this._id = _props.deterministicId();
|
|
131
98
|
}
|
|
132
|
-
|
|
133
99
|
componentDidMount() {
|
|
134
100
|
var _this$props$makeStyle, _this$props;
|
|
135
|
-
|
|
136
101
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
137
102
|
}
|
|
138
|
-
|
|
139
103
|
componentDidUpdate() {
|
|
140
104
|
var _this$props$makeStyle2, _this$props2;
|
|
141
|
-
|
|
142
105
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
143
106
|
}
|
|
144
|
-
|
|
145
107
|
get trayProps() {
|
|
146
108
|
const tray = _react.Children.toArray(this.props.children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.DrawerTray]))[0];
|
|
147
|
-
|
|
148
109
|
return tray.props;
|
|
149
110
|
}
|
|
150
|
-
|
|
151
111
|
get trayPlacement() {
|
|
152
112
|
const _this$trayProps = this.trayProps,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
113
|
+
placement = _this$trayProps.placement,
|
|
114
|
+
_this$trayProps$dir = _this$trayProps.dir,
|
|
115
|
+
dir = _this$trayProps$dir === void 0 ? this.props.dir : _this$trayProps$dir;
|
|
156
116
|
const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
|
|
157
117
|
return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
|
|
158
118
|
}
|
|
159
|
-
|
|
160
119
|
get contentMargin() {
|
|
161
120
|
const trayWidth = this.state.trayWidth || 0;
|
|
162
121
|
return this.state.shouldOverlayTray ? 0 : trayWidth;
|
|
163
122
|
}
|
|
164
|
-
|
|
165
123
|
get contentStyle() {
|
|
166
124
|
const shouldOverlayTray = this.shouldOverlayTray(this.props.minWidth, this.state.trayWidth, this.state.contentWidth, this.state.shouldOverlayTray);
|
|
167
125
|
let marginLeft = 0;
|
|
168
126
|
let marginRight = 0;
|
|
169
|
-
|
|
170
127
|
if (!shouldOverlayTray) {
|
|
171
128
|
if (this.trayPlacement === 'start') {
|
|
172
129
|
marginLeft = this.contentMargin;
|
|
173
130
|
}
|
|
174
|
-
|
|
175
131
|
if (this.trayPlacement === 'end') {
|
|
176
132
|
marginRight = this.contentMargin;
|
|
177
133
|
}
|
|
178
134
|
}
|
|
179
|
-
|
|
180
135
|
return {
|
|
181
136
|
marginLeft: `${marginLeft}px`,
|
|
182
137
|
marginRight: `${marginRight}px`
|
|
183
138
|
};
|
|
184
139
|
}
|
|
185
|
-
|
|
186
140
|
shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
|
|
187
141
|
if (!this._content) return false;
|
|
188
142
|
const minWidthPx = (0, _px.px)(minWidth, this._content);
|
|
189
|
-
|
|
190
143
|
if (trayIsOverlayed) {
|
|
191
144
|
return contentWidth - trayWidth < minWidthPx;
|
|
192
145
|
} else {
|
|
193
146
|
return contentWidth < minWidthPx;
|
|
194
147
|
}
|
|
195
148
|
}
|
|
196
|
-
|
|
197
149
|
getNextState(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
|
|
198
150
|
const shouldOverlayTray = this.shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed);
|
|
199
151
|
return {
|
|
@@ -202,19 +154,15 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
202
154
|
shouldOverlayTray
|
|
203
155
|
};
|
|
204
156
|
}
|
|
205
|
-
|
|
206
157
|
notifyOverlayTrayChange(shouldOverlayTray) {
|
|
207
158
|
const onOverlayTrayChange = this.props.onOverlayTrayChange;
|
|
208
|
-
|
|
209
159
|
if (typeof onOverlayTrayChange === 'function') {
|
|
210
160
|
onOverlayTrayChange(shouldOverlayTray);
|
|
211
161
|
}
|
|
212
162
|
}
|
|
213
|
-
|
|
214
163
|
renderChildren() {
|
|
215
164
|
let trayCount = 0;
|
|
216
165
|
let contentCount = 0;
|
|
217
|
-
|
|
218
166
|
const children = _react.Children.map(this.props.children, (child, _index) => {
|
|
219
167
|
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.DrawerTray])) {
|
|
220
168
|
trayCount++;
|
|
@@ -228,16 +176,13 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
228
176
|
});
|
|
229
177
|
} else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerContent.DrawerContent])) {
|
|
230
178
|
contentCount++;
|
|
231
|
-
|
|
232
179
|
const handleContentRef = el => {
|
|
233
180
|
const contentRef = child.props.contentRef;
|
|
234
181
|
this._content = el;
|
|
235
|
-
|
|
236
182
|
if (typeof contentRef === 'function') {
|
|
237
183
|
contentRef(el);
|
|
238
184
|
}
|
|
239
185
|
};
|
|
240
|
-
|
|
241
186
|
return this.state.trayWidth !== null ? (0, _safeCloneElement.safeCloneElement)(child, {
|
|
242
187
|
label: child.props.label,
|
|
243
188
|
key: child.props.label,
|
|
@@ -250,15 +195,12 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
250
195
|
return child;
|
|
251
196
|
}
|
|
252
197
|
});
|
|
253
|
-
|
|
254
198
|
(0, _console.logError)(trayCount <= 1, `[DrawerLayout] Only one 'DrawerTray' per 'DrawerLayout' is supported.`);
|
|
255
199
|
(0, _console.logError)(contentCount <= 1, `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`);
|
|
256
200
|
return children;
|
|
257
201
|
}
|
|
258
|
-
|
|
259
202
|
render() {
|
|
260
203
|
var _this$props$styles;
|
|
261
|
-
|
|
262
204
|
const props = {
|
|
263
205
|
[DrawerLayout.locatorAttribute]: this._id
|
|
264
206
|
};
|
|
@@ -269,7 +211,6 @@ let DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec
|
|
|
269
211
|
ref: this.handleRef
|
|
270
212
|
}), this.renderChildren()));
|
|
271
213
|
}
|
|
272
|
-
|
|
273
214
|
}, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
|
|
274
215
|
minWidth: '30rem'
|
|
275
216
|
}, _class2.Content = _DrawerContent.DrawerContent, _class2.Tray = _DrawerTray.DrawerTray, _class2)) || _class) || _class) || _class) || _class);
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
13
|
-
|
|
14
10
|
var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
|
|
15
|
-
|
|
16
11
|
var _DrawerContent = require("./DrawerContent");
|
|
17
|
-
|
|
18
12
|
var _DrawerTray = require("./DrawerTray");
|
|
19
|
-
|
|
20
13
|
/*
|
|
21
14
|
* The MIT License (MIT)
|
|
22
15
|
*
|
|
@@ -40,6 +33,7 @@ var _DrawerTray = require("./DrawerTray");
|
|
|
40
33
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
41
34
|
* SOFTWARE.
|
|
42
35
|
*/
|
|
36
|
+
|
|
43
37
|
const propTypes = {
|
|
44
38
|
children: _Children.Children.oneOfEach([_DrawerContent.DrawerContent, _DrawerTray.DrawerTray]),
|
|
45
39
|
minWidth: _propTypes.default.string,
|