@watermarkinsights/ripple-react 5.18.0 → 5.19.0-alpha.0
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/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/stencil-generated/index.d.ts +1 -1
- package/dist/components/stencil-generated/index.js +28 -28
- package/dist/components.d.ts +49 -49
- package/dist/components.js +51 -51
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/react-component-lib/ReactProps.d.ts +3 -3
- package/dist/react-component-lib/ReactProps.js +1 -1
- package/dist/react-component-lib/attachProps.d.ts +16 -16
- package/dist/react-component-lib/attachProps.js +108 -108
- package/dist/react-component-lib/case.d.ts +2 -2
- package/dist/react-component-lib/case.js +8 -8
- package/dist/react-component-lib/createComponent.d.ts +10 -10
- package/dist/react-component-lib/createComponent.js +107 -107
- package/dist/react-component-lib/createControllerComponent.d.ts +43 -43
- package/dist/react-component-lib/createControllerComponent.js +147 -147
- package/dist/react-component-lib/createOverlayComponent.d.ts +21 -21
- package/dist/react-component-lib/createOverlayComponent.js +190 -190
- package/dist/react-component-lib/dev.d.ts +2 -2
- package/dist/react-component-lib/dev.js +12 -12
- package/dist/react-component-lib/index.d.ts +2 -2
- package/dist/react-component-lib/index.js +2 -2
- package/dist/react-component-lib/interfaces.d.ts +29 -29
- package/dist/react-component-lib/interfaces.js +1 -1
- package/dist/react-component-lib/utils/attachEventProps.d.ts +8 -8
- package/dist/react-component-lib/utils/attachEventProps.js +78 -78
- package/dist/react-component-lib/utils/attachProps.d.ts +16 -16
- package/dist/react-component-lib/utils/attachProps.js +108 -108
- package/dist/react-component-lib/utils/case.d.ts +2 -2
- package/dist/react-component-lib/utils/case.js +8 -8
- package/dist/react-component-lib/utils/dev.d.ts +2 -2
- package/dist/react-component-lib/utils/dev.js +12 -12
- package/dist/react-component-lib/utils/index.d.ts +10 -10
- package/dist/react-component-lib/utils/index.js +46 -46
- package/package.json +3 -3
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { OverlayEventDetail } from './interfaces';
|
|
3
|
-
import { StencilReactForwardedRef } from './utils';
|
|
4
|
-
interface OverlayElement extends HTMLElement {
|
|
5
|
-
present: () => Promise<void>;
|
|
6
|
-
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
7
|
-
}
|
|
8
|
-
export interface ReactOverlayProps {
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
isOpen: boolean;
|
|
11
|
-
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
12
|
-
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
|
-
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
|
-
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
17
|
-
create: (options: any) => Promise<OverlayType>;
|
|
18
|
-
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
-
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
20
|
-
}> & React.RefAttributes<OverlayType>>;
|
|
21
|
-
export {};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OverlayEventDetail } from './interfaces';
|
|
3
|
+
import { StencilReactForwardedRef } from './utils';
|
|
4
|
+
interface OverlayElement extends HTMLElement {
|
|
5
|
+
present: () => Promise<void>;
|
|
6
|
+
dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
|
|
7
|
+
}
|
|
8
|
+
export interface ReactOverlayProps {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
12
|
+
onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
13
|
+
onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
14
|
+
onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
|
|
17
|
+
create: (options: any) => Promise<OverlayType>;
|
|
18
|
+
}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
|
|
19
|
+
forwardedRef?: StencilReactForwardedRef<OverlayType>;
|
|
20
|
+
}> & React.RefAttributes<OverlayType>>;
|
|
21
|
+
export {};
|
|
@@ -1,191 +1,191 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
var __assign = (this && this.__assign) || function () {
|
|
17
|
-
__assign = Object.assign || function(t) {
|
|
18
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
-
s = arguments[i];
|
|
20
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
-
t[p] = s[p];
|
|
22
|
-
}
|
|
23
|
-
return t;
|
|
24
|
-
};
|
|
25
|
-
return __assign.apply(this, arguments);
|
|
26
|
-
};
|
|
27
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
28
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
29
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
30
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
31
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
32
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
33
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
37
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
38
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
39
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
40
|
-
function step(op) {
|
|
41
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
42
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
43
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
44
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
45
|
-
switch (op[0]) {
|
|
46
|
-
case 0: case 1: t = op; break;
|
|
47
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
48
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
49
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
50
|
-
default:
|
|
51
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
52
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
53
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
54
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
55
|
-
if (t[2]) _.ops.pop();
|
|
56
|
-
_.trys.pop(); continue;
|
|
57
|
-
}
|
|
58
|
-
op = body.call(thisArg, _);
|
|
59
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
60
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
64
|
-
var t = {};
|
|
65
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
66
|
-
t[p] = s[p];
|
|
67
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
68
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
69
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
70
|
-
t[p[i]] = s[p[i]];
|
|
71
|
-
}
|
|
72
|
-
return t;
|
|
73
|
-
};
|
|
74
|
-
import React from 'react';
|
|
75
|
-
import ReactDOM from 'react-dom';
|
|
76
|
-
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
77
|
-
export var createOverlayComponent = function (tagName, controller, customElement) {
|
|
78
|
-
defineCustomElement(tagName, customElement);
|
|
79
|
-
var displayName = dashToPascalCase(tagName);
|
|
80
|
-
var didDismissEventName = "on".concat(displayName, "DidDismiss");
|
|
81
|
-
var didPresentEventName = "on".concat(displayName, "DidPresent");
|
|
82
|
-
var willDismissEventName = "on".concat(displayName, "WillDismiss");
|
|
83
|
-
var willPresentEventName = "on".concat(displayName, "WillPresent");
|
|
84
|
-
var isDismissing = false;
|
|
85
|
-
var Overlay = /** @class */ (function (_super) {
|
|
86
|
-
__extends(Overlay, _super);
|
|
87
|
-
function Overlay(props) {
|
|
88
|
-
var _this = _super.call(this, props) || this;
|
|
89
|
-
if (typeof document !== 'undefined') {
|
|
90
|
-
_this.el = document.createElement('div');
|
|
91
|
-
}
|
|
92
|
-
_this.handleDismiss = _this.handleDismiss.bind(_this);
|
|
93
|
-
return _this;
|
|
94
|
-
}
|
|
95
|
-
Object.defineProperty(Overlay, "displayName", {
|
|
96
|
-
get: function () {
|
|
97
|
-
return displayName;
|
|
98
|
-
},
|
|
99
|
-
enumerable: false,
|
|
100
|
-
configurable: true
|
|
101
|
-
});
|
|
102
|
-
Overlay.prototype.componentDidMount = function () {
|
|
103
|
-
if (this.props.isOpen) {
|
|
104
|
-
this.present();
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
Overlay.prototype.componentWillUnmount = function () {
|
|
108
|
-
if (this.overlay) {
|
|
109
|
-
this.overlay.dismiss();
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
Overlay.prototype.handleDismiss = function (event) {
|
|
113
|
-
if (this.props.onDidDismiss) {
|
|
114
|
-
this.props.onDidDismiss(event);
|
|
115
|
-
}
|
|
116
|
-
setRef(this.props.forwardedRef, null);
|
|
117
|
-
};
|
|
118
|
-
Overlay.prototype.shouldComponentUpdate = function (nextProps) {
|
|
119
|
-
// Check if the overlay component is about to dismiss
|
|
120
|
-
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
121
|
-
isDismissing = true;
|
|
122
|
-
}
|
|
123
|
-
return true;
|
|
124
|
-
};
|
|
125
|
-
Overlay.prototype.componentDidUpdate = function (prevProps) {
|
|
126
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
127
|
-
return __generator(this, function (_a) {
|
|
128
|
-
switch (_a.label) {
|
|
129
|
-
case 0:
|
|
130
|
-
if (this.overlay) {
|
|
131
|
-
attachProps(this.overlay, this.props, prevProps);
|
|
132
|
-
}
|
|
133
|
-
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
134
|
-
this.present(prevProps);
|
|
135
|
-
}
|
|
136
|
-
if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
|
|
137
|
-
return [4 /*yield*/, this.overlay.dismiss()];
|
|
138
|
-
case 1:
|
|
139
|
-
_a.sent();
|
|
140
|
-
isDismissing = false;
|
|
141
|
-
/**
|
|
142
|
-
* Now that the overlay is dismissed
|
|
143
|
-
* we need to render again so that any
|
|
144
|
-
* inner components will be unmounted
|
|
145
|
-
*/
|
|
146
|
-
this.forceUpdate();
|
|
147
|
-
_a.label = 2;
|
|
148
|
-
case 2: return [2 /*return*/];
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
});
|
|
152
|
-
};
|
|
153
|
-
Overlay.prototype.present = function (prevProps) {
|
|
154
|
-
return __awaiter(this, void 0, void 0, function () {
|
|
155
|
-
var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
|
|
156
|
-
var _c;
|
|
157
|
-
var _this = this;
|
|
158
|
-
return __generator(this, function (_d) {
|
|
159
|
-
switch (_d.label) {
|
|
160
|
-
case 0:
|
|
161
|
-
_a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
162
|
-
elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
|
|
163
|
-
_b = this;
|
|
164
|
-
return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
|
|
165
|
-
case 1:
|
|
166
|
-
_b.overlay = _d.sent();
|
|
167
|
-
setRef(this.props.forwardedRef, this.overlay);
|
|
168
|
-
attachProps(this.overlay, elementProps, prevProps);
|
|
169
|
-
return [4 /*yield*/, this.overlay.present()];
|
|
170
|
-
case 2:
|
|
171
|
-
_d.sent();
|
|
172
|
-
return [2 /*return*/];
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
});
|
|
176
|
-
};
|
|
177
|
-
Overlay.prototype.render = function () {
|
|
178
|
-
/**
|
|
179
|
-
* Continue to render the component even when
|
|
180
|
-
* overlay is dismissing otherwise component
|
|
181
|
-
* will be hidden before animation is done.
|
|
182
|
-
*/
|
|
183
|
-
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
184
|
-
};
|
|
185
|
-
return Overlay;
|
|
186
|
-
}(React.Component));
|
|
187
|
-
return React.forwardRef(function (props, ref) {
|
|
188
|
-
return React.createElement(Overlay, __assign({}, props, { forwardedRef: ref }));
|
|
189
|
-
});
|
|
190
|
-
};
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
if (typeof b !== "function" && b !== null)
|
|
10
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
+
extendStatics(d, b);
|
|
12
|
+
function __() { this.constructor = d; }
|
|
13
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
+
};
|
|
15
|
+
})();
|
|
16
|
+
var __assign = (this && this.__assign) || function () {
|
|
17
|
+
__assign = Object.assign || function(t) {
|
|
18
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
+
s = arguments[i];
|
|
20
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
+
t[p] = s[p];
|
|
22
|
+
}
|
|
23
|
+
return t;
|
|
24
|
+
};
|
|
25
|
+
return __assign.apply(this, arguments);
|
|
26
|
+
};
|
|
27
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
28
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
29
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
30
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
31
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
32
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
33
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
37
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
38
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
39
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
40
|
+
function step(op) {
|
|
41
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
42
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
43
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
44
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
45
|
+
switch (op[0]) {
|
|
46
|
+
case 0: case 1: t = op; break;
|
|
47
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
48
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
49
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
50
|
+
default:
|
|
51
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
52
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
53
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
54
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
55
|
+
if (t[2]) _.ops.pop();
|
|
56
|
+
_.trys.pop(); continue;
|
|
57
|
+
}
|
|
58
|
+
op = body.call(thisArg, _);
|
|
59
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
60
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
64
|
+
var t = {};
|
|
65
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
66
|
+
t[p] = s[p];
|
|
67
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
68
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
69
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
70
|
+
t[p[i]] = s[p[i]];
|
|
71
|
+
}
|
|
72
|
+
return t;
|
|
73
|
+
};
|
|
74
|
+
import React from 'react';
|
|
75
|
+
import ReactDOM from 'react-dom';
|
|
76
|
+
import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
|
|
77
|
+
export var createOverlayComponent = function (tagName, controller, customElement) {
|
|
78
|
+
defineCustomElement(tagName, customElement);
|
|
79
|
+
var displayName = dashToPascalCase(tagName);
|
|
80
|
+
var didDismissEventName = "on".concat(displayName, "DidDismiss");
|
|
81
|
+
var didPresentEventName = "on".concat(displayName, "DidPresent");
|
|
82
|
+
var willDismissEventName = "on".concat(displayName, "WillDismiss");
|
|
83
|
+
var willPresentEventName = "on".concat(displayName, "WillPresent");
|
|
84
|
+
var isDismissing = false;
|
|
85
|
+
var Overlay = /** @class */ (function (_super) {
|
|
86
|
+
__extends(Overlay, _super);
|
|
87
|
+
function Overlay(props) {
|
|
88
|
+
var _this = _super.call(this, props) || this;
|
|
89
|
+
if (typeof document !== 'undefined') {
|
|
90
|
+
_this.el = document.createElement('div');
|
|
91
|
+
}
|
|
92
|
+
_this.handleDismiss = _this.handleDismiss.bind(_this);
|
|
93
|
+
return _this;
|
|
94
|
+
}
|
|
95
|
+
Object.defineProperty(Overlay, "displayName", {
|
|
96
|
+
get: function () {
|
|
97
|
+
return displayName;
|
|
98
|
+
},
|
|
99
|
+
enumerable: false,
|
|
100
|
+
configurable: true
|
|
101
|
+
});
|
|
102
|
+
Overlay.prototype.componentDidMount = function () {
|
|
103
|
+
if (this.props.isOpen) {
|
|
104
|
+
this.present();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
Overlay.prototype.componentWillUnmount = function () {
|
|
108
|
+
if (this.overlay) {
|
|
109
|
+
this.overlay.dismiss();
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
Overlay.prototype.handleDismiss = function (event) {
|
|
113
|
+
if (this.props.onDidDismiss) {
|
|
114
|
+
this.props.onDidDismiss(event);
|
|
115
|
+
}
|
|
116
|
+
setRef(this.props.forwardedRef, null);
|
|
117
|
+
};
|
|
118
|
+
Overlay.prototype.shouldComponentUpdate = function (nextProps) {
|
|
119
|
+
// Check if the overlay component is about to dismiss
|
|
120
|
+
if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
|
|
121
|
+
isDismissing = true;
|
|
122
|
+
}
|
|
123
|
+
return true;
|
|
124
|
+
};
|
|
125
|
+
Overlay.prototype.componentDidUpdate = function (prevProps) {
|
|
126
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
127
|
+
return __generator(this, function (_a) {
|
|
128
|
+
switch (_a.label) {
|
|
129
|
+
case 0:
|
|
130
|
+
if (this.overlay) {
|
|
131
|
+
attachProps(this.overlay, this.props, prevProps);
|
|
132
|
+
}
|
|
133
|
+
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
|
|
134
|
+
this.present(prevProps);
|
|
135
|
+
}
|
|
136
|
+
if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
|
|
137
|
+
return [4 /*yield*/, this.overlay.dismiss()];
|
|
138
|
+
case 1:
|
|
139
|
+
_a.sent();
|
|
140
|
+
isDismissing = false;
|
|
141
|
+
/**
|
|
142
|
+
* Now that the overlay is dismissed
|
|
143
|
+
* we need to render again so that any
|
|
144
|
+
* inner components will be unmounted
|
|
145
|
+
*/
|
|
146
|
+
this.forceUpdate();
|
|
147
|
+
_a.label = 2;
|
|
148
|
+
case 2: return [2 /*return*/];
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
};
|
|
153
|
+
Overlay.prototype.present = function (prevProps) {
|
|
154
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
155
|
+
var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
|
|
156
|
+
var _c;
|
|
157
|
+
var _this = this;
|
|
158
|
+
return __generator(this, function (_d) {
|
|
159
|
+
switch (_d.label) {
|
|
160
|
+
case 0:
|
|
161
|
+
_a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
|
|
162
|
+
elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
|
|
163
|
+
_b = this;
|
|
164
|
+
return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
|
|
165
|
+
case 1:
|
|
166
|
+
_b.overlay = _d.sent();
|
|
167
|
+
setRef(this.props.forwardedRef, this.overlay);
|
|
168
|
+
attachProps(this.overlay, elementProps, prevProps);
|
|
169
|
+
return [4 /*yield*/, this.overlay.present()];
|
|
170
|
+
case 2:
|
|
171
|
+
_d.sent();
|
|
172
|
+
return [2 /*return*/];
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
};
|
|
177
|
+
Overlay.prototype.render = function () {
|
|
178
|
+
/**
|
|
179
|
+
* Continue to render the component even when
|
|
180
|
+
* overlay is dismissing otherwise component
|
|
181
|
+
* will be hidden before animation is done.
|
|
182
|
+
*/
|
|
183
|
+
return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
|
|
184
|
+
};
|
|
185
|
+
return Overlay;
|
|
186
|
+
}(React.Component));
|
|
187
|
+
return React.forwardRef(function (props, ref) {
|
|
188
|
+
return React.createElement(Overlay, __assign({}, props, { forwardedRef: ref }));
|
|
189
|
+
});
|
|
190
|
+
};
|
|
191
191
|
//# sourceMappingURL=createOverlayComponent.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const isDevMode: () => boolean;
|
|
2
|
-
export declare const deprecationWarning: (key: string, message: string) => void;
|
|
1
|
+
export declare const isDevMode: () => boolean;
|
|
2
|
+
export declare const deprecationWarning: (key: string, message: string) => void;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export var isDevMode = function () {
|
|
2
|
-
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
|
-
};
|
|
4
|
-
var warnings = {};
|
|
5
|
-
export var deprecationWarning = function (key, message) {
|
|
6
|
-
if (isDevMode()) {
|
|
7
|
-
if (!warnings[key]) {
|
|
8
|
-
console.warn(message);
|
|
9
|
-
warnings[key] = true;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
};
|
|
1
|
+
export var isDevMode = function () {
|
|
2
|
+
return process && process.env && process.env.NODE_ENV === 'development';
|
|
3
|
+
};
|
|
4
|
+
var warnings = {};
|
|
5
|
+
export var deprecationWarning = function (key, message) {
|
|
6
|
+
if (isDevMode()) {
|
|
7
|
+
if (!warnings[key]) {
|
|
8
|
+
console.warn(message);
|
|
9
|
+
warnings[key] = true;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
13
|
//# sourceMappingURL=dev.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { createReactComponent } from './createComponent';
|
|
2
|
-
export { createOverlayComponent } from './createOverlayComponent';
|
|
1
|
+
export { createReactComponent } from './createComponent';
|
|
2
|
+
export { createOverlayComponent } from './createOverlayComponent';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { createReactComponent } from './createComponent';
|
|
2
|
-
export { createOverlayComponent } from './createOverlayComponent';
|
|
1
|
+
export { createReactComponent } from './createComponent';
|
|
2
|
+
export { createOverlayComponent } from './createOverlayComponent';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
export interface EventEmitter<T = any> {
|
|
2
|
-
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
-
}
|
|
4
|
-
export interface StyleReactProps {
|
|
5
|
-
class?: string;
|
|
6
|
-
className?: string;
|
|
7
|
-
style?: {
|
|
8
|
-
[key: string]: any;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
export interface OverlayEventDetail<T = any> {
|
|
12
|
-
data?: T;
|
|
13
|
-
role?: string;
|
|
14
|
-
}
|
|
15
|
-
export interface OverlayInterface {
|
|
16
|
-
el: HTMLElement;
|
|
17
|
-
animated: boolean;
|
|
18
|
-
keyboardClose: boolean;
|
|
19
|
-
overlayIndex: number;
|
|
20
|
-
presented: boolean;
|
|
21
|
-
enterAnimation?: any;
|
|
22
|
-
leaveAnimation?: any;
|
|
23
|
-
didPresent: EventEmitter<void>;
|
|
24
|
-
willPresent: EventEmitter<void>;
|
|
25
|
-
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
-
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
-
present(): Promise<void>;
|
|
28
|
-
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
-
}
|
|
1
|
+
export interface EventEmitter<T = any> {
|
|
2
|
+
emit: (data?: T) => CustomEvent<T>;
|
|
3
|
+
}
|
|
4
|
+
export interface StyleReactProps {
|
|
5
|
+
class?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export interface OverlayEventDetail<T = any> {
|
|
12
|
+
data?: T;
|
|
13
|
+
role?: string;
|
|
14
|
+
}
|
|
15
|
+
export interface OverlayInterface {
|
|
16
|
+
el: HTMLElement;
|
|
17
|
+
animated: boolean;
|
|
18
|
+
keyboardClose: boolean;
|
|
19
|
+
overlayIndex: number;
|
|
20
|
+
presented: boolean;
|
|
21
|
+
enterAnimation?: any;
|
|
22
|
+
leaveAnimation?: any;
|
|
23
|
+
didPresent: EventEmitter<void>;
|
|
24
|
+
willPresent: EventEmitter<void>;
|
|
25
|
+
willDismiss: EventEmitter<OverlayEventDetail>;
|
|
26
|
+
didDismiss: EventEmitter<OverlayEventDetail>;
|
|
27
|
+
present(): Promise<void>;
|
|
28
|
+
dismiss(data?: any, role?: string): Promise<boolean>;
|
|
29
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=interfaces.js.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export declare function attachEventProps(node: HTMLElement, newProps: any, oldProps?: any): void;
|
|
2
|
-
export declare function getClassName(classList: DOMTokenList, newProps: any, oldProps: any): string;
|
|
3
|
-
/**
|
|
4
|
-
* Checks if an event is supported in the current execution environment.
|
|
5
|
-
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
6
|
-
*/
|
|
7
|
-
export declare function isCoveredByReact(eventNameSuffix: string, doc?: Document): boolean;
|
|
8
|
-
export declare function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any): void;
|
|
1
|
+
export declare function attachEventProps(node: HTMLElement, newProps: any, oldProps?: any): void;
|
|
2
|
+
export declare function getClassName(classList: DOMTokenList, newProps: any, oldProps: any): string;
|
|
3
|
+
/**
|
|
4
|
+
* Checks if an event is supported in the current execution environment.
|
|
5
|
+
* @license Modernizr 3.0.0pre (Custom Build) | MIT
|
|
6
|
+
*/
|
|
7
|
+
export declare function isCoveredByReact(eventNameSuffix: string, doc?: Document): boolean;
|
|
8
|
+
export declare function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any): void;
|