@elliemae/ds-overlay 2.2.0-alpha.4 → 3.0.0-next.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/cjs/DSOverlay.js +81 -72
- package/cjs/index.js +10 -36
- package/esm/DSOverlay.js +71 -45
- package/esm/index.js +1 -7
- package/package.json +4 -4
- package/cjs/DSOverlay.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/esm/DSOverlay.js.map +0 -7
- package/esm/index.js.map +0 -7
package/cjs/DSOverlay.js
CHANGED
|
@@ -1,55 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.some.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.some.js');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
11
|
+
var DSBackdrop = require('@elliemae/ds-backdrop');
|
|
12
|
+
var DSPortal = require('@elliemae/ds-portal');
|
|
13
|
+
|
|
14
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
+
|
|
16
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
+
var DSBackdrop__default = /*#__PURE__*/_interopDefaultLegacy(DSBackdrop);
|
|
19
|
+
var DSPortal__default = /*#__PURE__*/_interopDefaultLegacy(DSPortal);
|
|
20
|
+
|
|
21
|
+
const blockName = 'overlay';
|
|
22
|
+
const events = ['mousedown', 'touchstart'];
|
|
23
|
+
const OverlayContainer = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
|
|
24
|
+
let {
|
|
25
|
+
usePortal,
|
|
26
|
+
isOpen
|
|
27
|
+
} = _ref;
|
|
28
|
+
return {
|
|
29
|
+
inline: !usePortal,
|
|
30
|
+
opened: isOpen
|
|
26
31
|
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var DSOverlay_exports = {};
|
|
29
|
-
__export(DSOverlay_exports, {
|
|
30
|
-
DSOverlay: () => DSOverlay,
|
|
31
|
-
default: () => DSOverlay_default
|
|
32
32
|
});
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var import_prop_types = __toESM(require("prop-types"));
|
|
36
|
-
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
37
|
-
var import_ds_backdrop = __toESM(require("@elliemae/ds-backdrop"));
|
|
38
|
-
var import_ds_portal = __toESM(require("@elliemae/ds-portal"));
|
|
39
|
-
const blockName = "overlay";
|
|
40
|
-
const events = ["mousedown", "touchstart"];
|
|
41
|
-
const OverlayContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, null, ({ usePortal, isOpen }) => ({
|
|
42
|
-
inline: !usePortal,
|
|
43
|
-
opened: isOpen
|
|
44
|
-
}));
|
|
45
|
-
const _DSOverlay = class extends import_react.Component {
|
|
33
|
+
|
|
34
|
+
class DSOverlay extends React.Component {
|
|
46
35
|
constructor(props) {
|
|
47
36
|
super(props);
|
|
48
|
-
this.overlayRef =
|
|
37
|
+
this.overlayRef = /*#__PURE__*/React__default["default"].createRef();
|
|
49
38
|
this.handleDocumentClick = this.handleDocumentClick.bind(this);
|
|
50
39
|
}
|
|
40
|
+
|
|
51
41
|
componentDidUpdate(prevProps) {
|
|
52
|
-
const {
|
|
42
|
+
const {
|
|
43
|
+
isOpen
|
|
44
|
+
} = this.props;
|
|
45
|
+
|
|
53
46
|
if (isOpen !== prevProps.isOpen) {
|
|
54
47
|
if (isOpen) {
|
|
55
48
|
this.openOverlay();
|
|
@@ -58,38 +51,55 @@ const _DSOverlay = class extends import_react.Component {
|
|
|
58
51
|
}
|
|
59
52
|
}
|
|
60
53
|
}
|
|
54
|
+
|
|
61
55
|
addClickOutsideListeners() {
|
|
62
|
-
events.forEach(
|
|
56
|
+
events.forEach(event => {
|
|
63
57
|
document.addEventListener(event, this.handleDocumentClick);
|
|
64
58
|
});
|
|
65
59
|
}
|
|
60
|
+
|
|
66
61
|
removeClickOutsideListeners() {
|
|
67
|
-
events.forEach(
|
|
62
|
+
events.forEach(event => {
|
|
68
63
|
document.removeEventListener(event, this.handleDocumentClick);
|
|
69
64
|
});
|
|
70
65
|
}
|
|
66
|
+
|
|
71
67
|
handleDocumentClick(e) {
|
|
72
|
-
const {
|
|
73
|
-
|
|
68
|
+
const {
|
|
69
|
+
onClickOutside,
|
|
70
|
+
isOpen
|
|
71
|
+
} = this.props;
|
|
72
|
+
const {
|
|
73
|
+
overlayStack
|
|
74
|
+
} = DSOverlay;
|
|
74
75
|
const overlayIndex = overlayStack.indexOf(this);
|
|
75
|
-
const hasClickedOverlay = overlayStack.slice(overlayIndex).some(
|
|
76
|
+
const hasClickedOverlay = overlayStack.slice(overlayIndex).some(_ref2 => {
|
|
77
|
+
let {
|
|
78
|
+
overlayRef
|
|
79
|
+
} = _ref2;
|
|
76
80
|
const elem = overlayRef.current;
|
|
77
81
|
return elem && elem.contains(e.target) && !elem.isSameNode(e.target);
|
|
78
82
|
});
|
|
83
|
+
|
|
79
84
|
if (isOpen && !hasClickedOverlay) {
|
|
80
|
-
onClickOutside(e);
|
|
85
|
+
onClickOutside(e); // giving opportunity for callers to operate on the event.
|
|
81
86
|
}
|
|
82
87
|
}
|
|
88
|
+
|
|
83
89
|
openOverlay() {
|
|
84
90
|
this.addClickOutsideListeners();
|
|
85
|
-
|
|
91
|
+
DSOverlay.overlayStack.push(this);
|
|
86
92
|
}
|
|
93
|
+
|
|
87
94
|
closeOverlay() {
|
|
88
|
-
const {
|
|
95
|
+
const {
|
|
96
|
+
overlayStack
|
|
97
|
+
} = DSOverlay;
|
|
89
98
|
const overlayIndex = overlayStack.indexOf(this);
|
|
90
99
|
this.removeClickOutsideListeners();
|
|
91
100
|
overlayStack.splice(overlayIndex, 1);
|
|
92
101
|
}
|
|
102
|
+
|
|
93
103
|
render() {
|
|
94
104
|
const {
|
|
95
105
|
usePortal,
|
|
@@ -98,37 +108,36 @@ const _DSOverlay = class extends import_react.Component {
|
|
|
98
108
|
children,
|
|
99
109
|
backDropZIndex
|
|
100
110
|
} = this.props;
|
|
101
|
-
if (!isOpen)
|
|
102
|
-
|
|
103
|
-
const overlay =
|
|
104
|
-
classProps: {
|
|
111
|
+
if (!isOpen) return null;
|
|
112
|
+
|
|
113
|
+
const overlay = /*#__PURE__*/_jsx__default["default"](OverlayContainer, {
|
|
114
|
+
classProps: {
|
|
115
|
+
usePortal,
|
|
116
|
+
isOpen
|
|
117
|
+
},
|
|
105
118
|
innerRef: this.overlayRef
|
|
106
|
-
}, hasBackdrop &&
|
|
119
|
+
}, void 0, hasBackdrop && /*#__PURE__*/_jsx__default["default"](DSBackdrop__default["default"], {
|
|
107
120
|
zIndex: backDropZIndex
|
|
108
121
|
}), children);
|
|
122
|
+
|
|
109
123
|
if (usePortal) {
|
|
110
|
-
return
|
|
124
|
+
return /*#__PURE__*/_jsx__default["default"](DSPortal__default["default"], {}, void 0, overlay);
|
|
111
125
|
}
|
|
126
|
+
|
|
112
127
|
return overlay;
|
|
113
128
|
}
|
|
114
|
-
|
|
115
|
-
|
|
129
|
+
|
|
130
|
+
}
|
|
131
|
+
|
|
116
132
|
DSOverlay.overlayStack = [];
|
|
117
133
|
DSOverlay.defaultProps = {
|
|
118
134
|
isOpen: false,
|
|
119
135
|
usePortal: true,
|
|
120
136
|
hasBackdrop: false,
|
|
121
137
|
backDropZIndex: 2,
|
|
138
|
+
// https://jira.elliemae.io/browse/PUI-1712
|
|
122
139
|
onClickOutside: () => null
|
|
123
140
|
};
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
hasBackdrop: import_prop_types.default.bool,
|
|
128
|
-
isOpen: import_prop_types.default.bool,
|
|
129
|
-
onClickOutside: import_prop_types.default.func,
|
|
130
|
-
usePortal: import_prop_types.default.bool
|
|
131
|
-
};
|
|
132
|
-
var DSOverlay_default = DSOverlay;
|
|
133
|
-
module.exports = __toCommonJS(DSOverlay_exports);
|
|
134
|
-
//# sourceMappingURL=DSOverlay.js.map
|
|
141
|
+
|
|
142
|
+
exports.DSOverlay = DSOverlay;
|
|
143
|
+
exports["default"] = DSOverlay;
|
package/cjs/index.js
CHANGED
|
@@ -1,36 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var src_exports = {};
|
|
29
|
-
__export(src_exports, {
|
|
30
|
-
default: () => import_DSOverlay.default
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
__reExport(src_exports, require("./DSOverlay"));
|
|
34
|
-
var import_DSOverlay = require("./DSOverlay");
|
|
35
|
-
module.exports = __toCommonJS(src_exports);
|
|
36
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var DSOverlay = require('./DSOverlay.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.DSOverlay = DSOverlay.DSOverlay;
|
|
10
|
+
exports["default"] = DSOverlay.DSOverlay;
|
package/esm/DSOverlay.js
CHANGED
|
@@ -1,23 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.some.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
4
|
+
import 'core-js/modules/esnext.iterator.some.js';
|
|
5
|
+
import React, { Component } from 'react';
|
|
6
|
+
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
7
|
+
import DSBackdrop from '@elliemae/ds-backdrop';
|
|
8
|
+
import DSPortal from '@elliemae/ds-portal';
|
|
9
|
+
|
|
10
|
+
const blockName = 'overlay';
|
|
11
|
+
const events = ['mousedown', 'touchstart'];
|
|
12
|
+
const OverlayContainer = aggregatedClasses('div')(blockName, null, _ref => {
|
|
13
|
+
let {
|
|
14
|
+
usePortal,
|
|
15
|
+
isOpen
|
|
16
|
+
} = _ref;
|
|
17
|
+
return {
|
|
18
|
+
inline: !usePortal,
|
|
19
|
+
opened: isOpen
|
|
20
|
+
};
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
class DSOverlay extends Component {
|
|
14
24
|
constructor(props) {
|
|
15
25
|
super(props);
|
|
16
|
-
this.overlayRef =
|
|
26
|
+
this.overlayRef = /*#__PURE__*/React.createRef();
|
|
17
27
|
this.handleDocumentClick = this.handleDocumentClick.bind(this);
|
|
18
28
|
}
|
|
29
|
+
|
|
19
30
|
componentDidUpdate(prevProps) {
|
|
20
|
-
const {
|
|
31
|
+
const {
|
|
32
|
+
isOpen
|
|
33
|
+
} = this.props;
|
|
34
|
+
|
|
21
35
|
if (isOpen !== prevProps.isOpen) {
|
|
22
36
|
if (isOpen) {
|
|
23
37
|
this.openOverlay();
|
|
@@ -26,38 +40,55 @@ const _DSOverlay = class extends Component {
|
|
|
26
40
|
}
|
|
27
41
|
}
|
|
28
42
|
}
|
|
43
|
+
|
|
29
44
|
addClickOutsideListeners() {
|
|
30
|
-
events.forEach(
|
|
45
|
+
events.forEach(event => {
|
|
31
46
|
document.addEventListener(event, this.handleDocumentClick);
|
|
32
47
|
});
|
|
33
48
|
}
|
|
49
|
+
|
|
34
50
|
removeClickOutsideListeners() {
|
|
35
|
-
events.forEach(
|
|
51
|
+
events.forEach(event => {
|
|
36
52
|
document.removeEventListener(event, this.handleDocumentClick);
|
|
37
53
|
});
|
|
38
54
|
}
|
|
55
|
+
|
|
39
56
|
handleDocumentClick(e) {
|
|
40
|
-
const {
|
|
41
|
-
|
|
57
|
+
const {
|
|
58
|
+
onClickOutside,
|
|
59
|
+
isOpen
|
|
60
|
+
} = this.props;
|
|
61
|
+
const {
|
|
62
|
+
overlayStack
|
|
63
|
+
} = DSOverlay;
|
|
42
64
|
const overlayIndex = overlayStack.indexOf(this);
|
|
43
|
-
const hasClickedOverlay = overlayStack.slice(overlayIndex).some(
|
|
65
|
+
const hasClickedOverlay = overlayStack.slice(overlayIndex).some(_ref2 => {
|
|
66
|
+
let {
|
|
67
|
+
overlayRef
|
|
68
|
+
} = _ref2;
|
|
44
69
|
const elem = overlayRef.current;
|
|
45
70
|
return elem && elem.contains(e.target) && !elem.isSameNode(e.target);
|
|
46
71
|
});
|
|
72
|
+
|
|
47
73
|
if (isOpen && !hasClickedOverlay) {
|
|
48
|
-
onClickOutside(e);
|
|
74
|
+
onClickOutside(e); // giving opportunity for callers to operate on the event.
|
|
49
75
|
}
|
|
50
76
|
}
|
|
77
|
+
|
|
51
78
|
openOverlay() {
|
|
52
79
|
this.addClickOutsideListeners();
|
|
53
|
-
|
|
80
|
+
DSOverlay.overlayStack.push(this);
|
|
54
81
|
}
|
|
82
|
+
|
|
55
83
|
closeOverlay() {
|
|
56
|
-
const {
|
|
84
|
+
const {
|
|
85
|
+
overlayStack
|
|
86
|
+
} = DSOverlay;
|
|
57
87
|
const overlayIndex = overlayStack.indexOf(this);
|
|
58
88
|
this.removeClickOutsideListeners();
|
|
59
89
|
overlayStack.splice(overlayIndex, 1);
|
|
60
90
|
}
|
|
91
|
+
|
|
61
92
|
render() {
|
|
62
93
|
const {
|
|
63
94
|
usePortal,
|
|
@@ -66,40 +97,35 @@ const _DSOverlay = class extends Component {
|
|
|
66
97
|
children,
|
|
67
98
|
backDropZIndex
|
|
68
99
|
} = this.props;
|
|
69
|
-
if (!isOpen)
|
|
70
|
-
|
|
71
|
-
const overlay =
|
|
72
|
-
classProps: {
|
|
100
|
+
if (!isOpen) return null;
|
|
101
|
+
|
|
102
|
+
const overlay = /*#__PURE__*/_jsx(OverlayContainer, {
|
|
103
|
+
classProps: {
|
|
104
|
+
usePortal,
|
|
105
|
+
isOpen
|
|
106
|
+
},
|
|
73
107
|
innerRef: this.overlayRef
|
|
74
|
-
}, hasBackdrop &&
|
|
108
|
+
}, void 0, hasBackdrop && /*#__PURE__*/_jsx(DSBackdrop, {
|
|
75
109
|
zIndex: backDropZIndex
|
|
76
110
|
}), children);
|
|
111
|
+
|
|
77
112
|
if (usePortal) {
|
|
78
|
-
return
|
|
113
|
+
return /*#__PURE__*/_jsx(DSPortal, {}, void 0, overlay);
|
|
79
114
|
}
|
|
115
|
+
|
|
80
116
|
return overlay;
|
|
81
117
|
}
|
|
82
|
-
|
|
83
|
-
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
|
|
84
121
|
DSOverlay.overlayStack = [];
|
|
85
122
|
DSOverlay.defaultProps = {
|
|
86
123
|
isOpen: false,
|
|
87
124
|
usePortal: true,
|
|
88
125
|
hasBackdrop: false,
|
|
89
126
|
backDropZIndex: 2,
|
|
127
|
+
// https://jira.elliemae.io/browse/PUI-1712
|
|
90
128
|
onClickOutside: () => null
|
|
91
129
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
children: PropTypes.element,
|
|
95
|
-
hasBackdrop: PropTypes.bool,
|
|
96
|
-
isOpen: PropTypes.bool,
|
|
97
|
-
onClickOutside: PropTypes.func,
|
|
98
|
-
usePortal: PropTypes.bool
|
|
99
|
-
};
|
|
100
|
-
var DSOverlay_default = DSOverlay;
|
|
101
|
-
export {
|
|
102
|
-
DSOverlay,
|
|
103
|
-
DSOverlay_default as default
|
|
104
|
-
};
|
|
105
|
-
//# sourceMappingURL=DSOverlay.js.map
|
|
130
|
+
|
|
131
|
+
export { DSOverlay, DSOverlay as default };
|
package/esm/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-overlay",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Overlay",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
"build": "node ../../scripts/build/build.js"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-backdrop": "
|
|
40
|
-
"@elliemae/ds-classnames": "
|
|
41
|
-
"@elliemae/ds-portal": "
|
|
39
|
+
"@elliemae/ds-backdrop": "3.0.0-next.2",
|
|
40
|
+
"@elliemae/ds-classnames": "3.0.0-next.2",
|
|
41
|
+
"@elliemae/ds-portal": "3.0.0-next.2",
|
|
42
42
|
"prop-types": "~15.7.2"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
package/cjs/DSOverlay.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSOverlay.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport DSBackdrop from '@elliemae/ds-backdrop';\nimport DSPortal from '@elliemae/ds-portal';\n\nconst blockName = 'overlay';\n\nconst events = ['mousedown', 'touchstart'];\n\nconst OverlayContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ usePortal, isOpen }) => ({\n inline: !usePortal,\n opened: isOpen,\n }),\n);\n\nclass DSOverlay extends Component {\n static overlayStack = [];\n\n static defaultProps = {\n isOpen: false,\n usePortal: true,\n hasBackdrop: false,\n backDropZIndex: 2, // https://jira.elliemae.io/browse/PUI-1712\n onClickOutside: () => null,\n };\n constructor(props) {\n super(props);\n this.overlayRef = React.createRef();\n\n this.handleDocumentClick = this.handleDocumentClick.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n const { isOpen } = this.props;\n if (isOpen !== prevProps.isOpen) {\n if (isOpen) {\n this.openOverlay();\n } else {\n this.closeOverlay();\n }\n }\n }\n\n addClickOutsideListeners() {\n events.forEach((event) => {\n document.addEventListener(event, this.handleDocumentClick);\n });\n }\n\n removeClickOutsideListeners() {\n events.forEach((event) => {\n document.removeEventListener(event, this.handleDocumentClick);\n });\n }\n\n handleDocumentClick(e) {\n const { onClickOutside, isOpen } = this.props;\n const { overlayStack } = DSOverlay;\n const overlayIndex = overlayStack.indexOf(this);\n const hasClickedOverlay = overlayStack\n .slice(overlayIndex)\n .some(({ overlayRef }) => {\n const elem = overlayRef.current;\n return elem && elem.contains(e.target) && !elem.isSameNode(e.target);\n });\n\n if (isOpen && !hasClickedOverlay) {\n onClickOutside(e); // giving opportunity for callers to operate on the event.\n }\n }\n\n openOverlay() {\n this.addClickOutsideListeners();\n DSOverlay.overlayStack.push(this);\n }\n\n closeOverlay() {\n const { overlayStack } = DSOverlay;\n const overlayIndex = overlayStack.indexOf(this);\n this.removeClickOutsideListeners();\n overlayStack.splice(overlayIndex, 1);\n }\n\n render() {\n const {\n usePortal,\n isOpen,\n hasBackdrop,\n children,\n backDropZIndex,\n } = this.props;\n\n if (!isOpen) return null;\n\n const overlay = (\n <OverlayContainer\n classProps={{ usePortal, isOpen }}\n innerRef={this.overlayRef}\n >\n {hasBackdrop && <DSBackdrop zIndex={backDropZIndex} />}\n {children}\n </OverlayContainer>\n );\n\n if (usePortal) {\n return <DSPortal>{overlay}</DSPortal>;\n }\n\n return overlay;\n }\n}\n\nDSOverlay.propTypes = {\n backDropZIndex: PropTypes.number,\n children: PropTypes.element,\n hasBackdrop: PropTypes.bool,\n isOpen: PropTypes.bool,\n onClickOutside: PropTypes.func,\n usePortal: PropTypes.bool,\n};\n\nexport { DSOverlay };\nexport default DSOverlay;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiC;AACjC,wBAAsB;AACtB,2BAAkC;AAClC,yBAAuB;AACvB,uBAAqB;AAErB,MAAM,YAAY;AAElB,MAAM,SAAS,CAAC,aAAa;AAE7B,MAAM,mBAAmB,4CAAkB,OACzC,WACA,MACA,CAAC,EAAE,WAAW,aAAc;AAAA,EAC1B,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA;AAIZ,iCAAwB,uBAAU;AAAA,EAUhC,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,aAAa,qBAAM;AAExB,SAAK,sBAAsB,KAAK,oBAAoB,KAAK;AAAA;AAAA,EAG3D,mBAAmB,WAAW;AAC5B,UAAM,EAAE,WAAW,KAAK;AACxB,QAAI,WAAW,UAAU,QAAQ;AAC/B,UAAI,QAAQ;AACV,aAAK;AAAA,aACA;AACL,aAAK;AAAA;AAAA;AAAA;AAAA,EAKX,2BAA2B;AACzB,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA,EAI1C,8BAA8B;AAC5B,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA,EAI7C,oBAAoB,GAAG;AACrB,UAAM,EAAE,gBAAgB,WAAW,KAAK;AACxC,UAAM,EAAE,iBAAiB;AACzB,UAAM,eAAe,aAAa,QAAQ;AAC1C,UAAM,oBAAoB,aACvB,MAAM,cACN,KAAK,CAAC,EAAE,iBAAiB;AACxB,YAAM,OAAO,WAAW;AACxB,aAAO,QAAQ,KAAK,SAAS,EAAE,WAAW,CAAC,KAAK,WAAW,EAAE;AAAA;AAGjE,QAAI,UAAU,CAAC,mBAAmB;AAChC,qBAAe;AAAA;AAAA;AAAA,EAInB,cAAc;AACZ,SAAK;AACL,eAAU,aAAa,KAAK;AAAA;AAAA,EAG9B,eAAe;AACb,UAAM,EAAE,iBAAiB;AACzB,UAAM,eAAe,aAAa,QAAQ;AAC1C,SAAK;AACL,iBAAa,OAAO,cAAc;AAAA;AAAA,EAGpC,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,QAAI,CAAC;AAAQ,aAAO;AAEpB,UAAM,UACJ,mDAAC,kBAAD;AAAA,MACE,YAAY,EAAE,WAAW;AAAA,MACzB,UAAU,KAAK;AAAA,OAEd,eAAe,mDAAC,4BAAD;AAAA,MAAY,QAAQ;AAAA,QACnC;AAIL,QAAI,WAAW;AACb,aAAO,mDAAC,0BAAD,MAAW;AAAA;AAGpB,WAAO;AAAA;AAAA;AA7FX;AACS,AADT,UACS,eAAe;AAEf,AAHT,UAGS,eAAe;AAAA,EACpB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA;AAyF1B,UAAU,YAAY;AAAA,EACpB,gBAAgB,0BAAU;AAAA,EAC1B,UAAU,0BAAU;AAAA,EACpB,aAAa,0BAAU;AAAA,EACvB,QAAQ,0BAAU;AAAA,EAClB,gBAAgB,0BAAU;AAAA,EAC1B,WAAW,0BAAU;AAAA;AAIvB,IAAO,oBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSOverlay';\nexport { default } from './DSOverlay';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,uBAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/DSOverlay.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSOverlay.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport DSBackdrop from '@elliemae/ds-backdrop';\nimport DSPortal from '@elliemae/ds-portal';\n\nconst blockName = 'overlay';\n\nconst events = ['mousedown', 'touchstart'];\n\nconst OverlayContainer = aggregatedClasses('div')(\n blockName,\n null,\n ({ usePortal, isOpen }) => ({\n inline: !usePortal,\n opened: isOpen,\n }),\n);\n\nclass DSOverlay extends Component {\n static overlayStack = [];\n\n static defaultProps = {\n isOpen: false,\n usePortal: true,\n hasBackdrop: false,\n backDropZIndex: 2, // https://jira.elliemae.io/browse/PUI-1712\n onClickOutside: () => null,\n };\n constructor(props) {\n super(props);\n this.overlayRef = React.createRef();\n\n this.handleDocumentClick = this.handleDocumentClick.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n const { isOpen } = this.props;\n if (isOpen !== prevProps.isOpen) {\n if (isOpen) {\n this.openOverlay();\n } else {\n this.closeOverlay();\n }\n }\n }\n\n addClickOutsideListeners() {\n events.forEach((event) => {\n document.addEventListener(event, this.handleDocumentClick);\n });\n }\n\n removeClickOutsideListeners() {\n events.forEach((event) => {\n document.removeEventListener(event, this.handleDocumentClick);\n });\n }\n\n handleDocumentClick(e) {\n const { onClickOutside, isOpen } = this.props;\n const { overlayStack } = DSOverlay;\n const overlayIndex = overlayStack.indexOf(this);\n const hasClickedOverlay = overlayStack\n .slice(overlayIndex)\n .some(({ overlayRef }) => {\n const elem = overlayRef.current;\n return elem && elem.contains(e.target) && !elem.isSameNode(e.target);\n });\n\n if (isOpen && !hasClickedOverlay) {\n onClickOutside(e); // giving opportunity for callers to operate on the event.\n }\n }\n\n openOverlay() {\n this.addClickOutsideListeners();\n DSOverlay.overlayStack.push(this);\n }\n\n closeOverlay() {\n const { overlayStack } = DSOverlay;\n const overlayIndex = overlayStack.indexOf(this);\n this.removeClickOutsideListeners();\n overlayStack.splice(overlayIndex, 1);\n }\n\n render() {\n const {\n usePortal,\n isOpen,\n hasBackdrop,\n children,\n backDropZIndex,\n } = this.props;\n\n if (!isOpen) return null;\n\n const overlay = (\n <OverlayContainer\n classProps={{ usePortal, isOpen }}\n innerRef={this.overlayRef}\n >\n {hasBackdrop && <DSBackdrop zIndex={backDropZIndex} />}\n {children}\n </OverlayContainer>\n );\n\n if (usePortal) {\n return <DSPortal>{overlay}</DSPortal>;\n }\n\n return overlay;\n }\n}\n\nDSOverlay.propTypes = {\n backDropZIndex: PropTypes.number,\n children: PropTypes.element,\n hasBackdrop: PropTypes.bool,\n isOpen: PropTypes.bool,\n onClickOutside: PropTypes.func,\n usePortal: PropTypes.bool,\n};\n\nexport { DSOverlay };\nexport default DSOverlay;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,SAAS,CAAC,aAAa;AAE7B,MAAM,mBAAmB,kBAAkB,OACzC,WACA,MACA,CAAC,EAAE,WAAW,aAAc;AAAA,EAC1B,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA;AAIZ,iCAAwB,UAAU;AAAA,EAUhC,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,aAAa,OAAM;AAExB,SAAK,sBAAsB,KAAK,oBAAoB,KAAK;AAAA;AAAA,EAG3D,mBAAmB,WAAW;AAC5B,UAAM,EAAE,WAAW,KAAK;AACxB,QAAI,WAAW,UAAU,QAAQ;AAC/B,UAAI,QAAQ;AACV,aAAK;AAAA,aACA;AACL,aAAK;AAAA;AAAA;AAAA;AAAA,EAKX,2BAA2B;AACzB,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA,EAI1C,8BAA8B;AAC5B,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA,EAI7C,oBAAoB,GAAG;AACrB,UAAM,EAAE,gBAAgB,WAAW,KAAK;AACxC,UAAM,EAAE,iBAAiB;AACzB,UAAM,eAAe,aAAa,QAAQ;AAC1C,UAAM,oBAAoB,aACvB,MAAM,cACN,KAAK,CAAC,EAAE,iBAAiB;AACxB,YAAM,OAAO,WAAW;AACxB,aAAO,QAAQ,KAAK,SAAS,EAAE,WAAW,CAAC,KAAK,WAAW,EAAE;AAAA;AAGjE,QAAI,UAAU,CAAC,mBAAmB;AAChC,qBAAe;AAAA;AAAA;AAAA,EAInB,cAAc;AACZ,SAAK;AACL,eAAU,aAAa,KAAK;AAAA;AAAA,EAG9B,eAAe;AACb,UAAM,EAAE,iBAAiB;AACzB,UAAM,eAAe,aAAa,QAAQ;AAC1C,SAAK;AACL,iBAAa,OAAO,cAAc;AAAA;AAAA,EAGpC,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,QAAI,CAAC;AAAQ,aAAO;AAEpB,UAAM,UACJ,qCAAC,kBAAD;AAAA,MACE,YAAY,EAAE,WAAW;AAAA,MACzB,UAAU,KAAK;AAAA,OAEd,eAAe,qCAAC,YAAD;AAAA,MAAY,QAAQ;AAAA,QACnC;AAIL,QAAI,WAAW;AACb,aAAO,qCAAC,UAAD,MAAW;AAAA;AAGpB,WAAO;AAAA;AAAA;AA7FX;AACS,AADT,UACS,eAAe;AAEf,AAHT,UAGS,eAAe;AAAA,EACpB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,gBAAgB,MAAM;AAAA;AAyF1B,UAAU,YAAY;AAAA,EACpB,gBAAgB,UAAU;AAAA,EAC1B,UAAU,UAAU;AAAA,EACpB,aAAa,UAAU;AAAA,EACvB,QAAQ,UAAU;AAAA,EAClB,gBAAgB,UAAU;AAAA,EAC1B,WAAW,UAAU;AAAA;AAIvB,IAAO,oBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSOverlay';\nexport { default } from './DSOverlay';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|