1 | ;
|
2 | /**
|
3 | * asAsync - a HOC for async loading components.
|
4 | *
|
5 | * Usage:
|
6 | *
|
7 | * const AsyncDialog = asAsync({
|
8 | * load: () => import('Dialog').then(result => result.default),
|
9 | * });
|
10 | *
|
11 | * React.render(domElement, <AsyncDialog asyncPlaceholder={ () => <Spinner/> } { ...dialogProps } />);
|
12 | *
|
13 | * Note the `asyncPlaceholder` prop will be respected when rendering the async component and it hasn't
|
14 | * been loaded yet.
|
15 | */
|
16 | Object.defineProperty(exports, "__esModule", { value: true });
|
17 | var tslib_1 = require("tslib");
|
18 | var React = require("react");
|
19 | /**
|
20 | * If possible, use a WeakMap to maintain a cache of loaded components.
|
21 | * This can be used to synchronously render components that have already been loaded,
|
22 | * rather than having to wait for at least one async tick.
|
23 | */
|
24 | var _syncModuleCache = typeof WeakMap !== 'undefined'
|
25 | ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
26 | new WeakMap()
|
27 | : undefined;
|
28 | /**
|
29 | * Produces a component which internally loads the target component before first mount.
|
30 | * The component passes all props through to the loaded component.
|
31 | *
|
32 | * This overload accepts a module with a default export for the component.
|
33 | */
|
34 | function asAsync(options) {
|
35 | var Async = /** @class */ (function (_super) {
|
36 | tslib_1.__extends(Async, _super);
|
37 | function Async() {
|
38 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
39 | _this.state = {
|
40 | Component: _syncModuleCache ? _syncModuleCache.get(options.load) : undefined,
|
41 | };
|
42 | return _this;
|
43 | }
|
44 | Async.prototype.render = function () {
|
45 | // Typescript issue: the rest can't be pulled without the any cast, as TypeScript fails with rest on generics.
|
46 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
47 | var _a = this.props, forwardedRef = _a.forwardedRef, Placeholder = _a.asyncPlaceholder, rest = tslib_1.__rest(_a, ["forwardedRef", "asyncPlaceholder"]);
|
48 | var Component = this.state.Component;
|
49 | return Component ? (React.createElement(Component, tslib_1.__assign(tslib_1.__assign({}, rest), { ref: forwardedRef }))) : Placeholder ? (React.createElement(Placeholder, null)) : null;
|
50 | };
|
51 | Async.prototype.componentDidMount = function () {
|
52 | var _this = this;
|
53 | var Component = this.state.Component;
|
54 | if (!Component) {
|
55 | options
|
56 | .load()
|
57 | .then(function (LoadedComponent) {
|
58 | if (LoadedComponent) {
|
59 | // Cache component for future reference.
|
60 | _syncModuleCache && _syncModuleCache.set(options.load, LoadedComponent);
|
61 | // Set state.
|
62 | _this.setState({
|
63 | Component: LoadedComponent,
|
64 | }, options.onLoad);
|
65 | }
|
66 | })
|
67 | .catch(options.onError);
|
68 | }
|
69 | };
|
70 | return Async;
|
71 | }(React.Component));
|
72 | return React.forwardRef(function (props, ref) { return React.createElement(Async, tslib_1.__assign({}, props, { forwardedRef: ref })); });
|
73 | }
|
74 | exports.asAsync = asAsync;
|
75 | //# sourceMappingURL=asAsync.js.map |
\ | No newline at end of file |