aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/lazy_component.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/lazy_component.tsx')
-rw-r--r--packages/website/ts/lazy_component.tsx82
1 files changed, 41 insertions, 41 deletions
diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx
index 5efebb667..48800c2dd 100644
--- a/packages/website/ts/lazy_component.tsx
+++ b/packages/website/ts/lazy_component.tsx
@@ -2,12 +2,12 @@ import * as _ from 'lodash';
import * as React from 'react';
interface LazyComponentProps {
- reactComponentPromise: Promise<React.ComponentClass<any>>;
- reactComponentProps: any;
+ reactComponentPromise: Promise<React.ComponentClass<any>>;
+ reactComponentProps: any;
}
interface LazyComponentState {
- component?: React.ComponentClass<any>;
+ component?: React.ComponentClass<any>;
}
/**
@@ -15,33 +15,33 @@ interface LazyComponentState {
* Source: https://reacttraining.com/react-router/web/guides/code-splitting
*/
export class LazyComponent extends React.Component<LazyComponentProps, LazyComponentState> {
- constructor(props: LazyComponentProps) {
- super(props);
- this.state = {
- component: undefined,
- };
- }
- public componentWillMount() {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(this.props);
- }
- public componentWillReceiveProps(nextProps: LazyComponentProps) {
- if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(nextProps);
- }
- }
- public render() {
- return _.isUndefined(this.state.component)
- ? null
- : React.createElement(this.state.component, this.props.reactComponentProps);
- }
- private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
- const component = await props.reactComponentPromise;
- this.setState({
- component,
- });
- }
+ constructor(props: LazyComponentProps) {
+ super(props);
+ this.state = {
+ component: undefined,
+ };
+ }
+ public componentWillMount() {
+ // tslint:disable-next-line:no-floating-promises
+ this._loadComponentFireAndForgetAsync(this.props);
+ }
+ public componentWillReceiveProps(nextProps: LazyComponentProps) {
+ if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
+ // tslint:disable-next-line:no-floating-promises
+ this._loadComponentFireAndForgetAsync(nextProps);
+ }
+ }
+ public render() {
+ return _.isUndefined(this.state.component)
+ ? null
+ : React.createElement(this.state.component, this.props.reactComponentProps);
+ }
+ private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
+ const component = await props.reactComponentPromise;
+ this.setState({
+ component,
+ });
+ }
}
/**
@@ -52,15 +52,15 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
* @example `const LazyPortal = createLazyComponent('Portal', () => System.import<any>('ts/containers/portal'));``
*/
export const createLazyComponent = (componentName: string, lazyImport: () => Promise<any>) => {
- return (props: any) => {
- const reactComponentPromise = (async (): Promise<React.ComponentClass<any>> => {
- const mod = await lazyImport();
- const component = mod[componentName];
- if (_.isUndefined(component)) {
- throw new Error(`Did not find exported component: ${componentName}`);
- }
- return component;
- })();
- return <LazyComponent reactComponentPromise={reactComponentPromise} reactComponentProps={props} />;
- };
+ return (props: any) => {
+ const reactComponentPromise = (async (): Promise<React.ComponentClass<any>> => {
+ const mod = await lazyImport();
+ const component = mod[componentName];
+ if (_.isUndefined(component)) {
+ throw new Error(`Did not find exported component: ${componentName}`);
+ }
+ return component;
+ })();
+ return <LazyComponent reactComponentPromise={reactComponentPromise} reactComponentProps={props} />;
+ };
};