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.tsx66
1 files changed, 0 insertions, 66 deletions
diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx
deleted file mode 100644
index 9d3b9944a..000000000
--- a/packages/website/ts/lazy_component.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-interface LazyComponentProps {
- reactComponentPromise: Promise<React.ComponentClass<any>>;
- reactComponentProps: any;
-}
-
-interface LazyComponentState {
- component?: React.ComponentClass<any>;
-}
-
-/**
- * This component is used for rendering components that are lazily loaded from other chunks.
- * 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(): void {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(this.props);
- }
- public componentWillReceiveProps(nextProps: LazyComponentProps): void {
- if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(nextProps);
- }
- }
- public render(): React.ReactNode {
- return _.isUndefined(this.state.component)
- ? null
- : React.createElement(this.state.component, this.props.reactComponentProps);
- }
- private async _loadComponentFireAndForgetAsync(props: LazyComponentProps): Promise<void> {
- const component = await props.reactComponentPromise;
- this.setState({
- component,
- });
- }
-}
-
-/**
- * [createLazyComponent description]
- * @param componentName name of exported component
- * @param lazyImport lambda returning module promise
- * we pass a lambda because we only want to require a module if it's used
- * @example `const LazyPortal = createLazyComponent('Portal', () => 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} />;
- };
-};