All files index.js

97.22% Statements 70/72
90.24% Branches 37/41
94.44% Functions 17/18
97.14% Lines 68/70

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170      1x 1x 20x   11x 2x 9x 8x   1x                     1x               1x               11x 11x 1x       10x 10x 10x 10x 10x     10x 10x 10x 10x           10x 10x 10x     15x     15x     1x     9x 7x 7x   9x 1x 1x       9x 7x 4x         9x 1x 1x           9x 1x           9x 5x 5x           4x 4x                     10x 10x 8x 8x                 25x 25x   12x 7x   5x 13x 6x         7x     10x 10x   1x 7x   7x 3x   4x 8x 8x      
import React, { Component } from 'react';
import { resolving, shallowCopy } from './util';
 
const TIMEOUT = 120000;
const DELAY = 200;
const packComponent = comp => (props) => {
    // class function
    if (typeof comp === 'function') {
        return React.createElement(comp, props);
    } else if (comp && typeof comp === 'object') {
        return React.cloneElement(comp, props);
    }
    return null;
};
/*
 * options
 * @load `function` return a `Promise` instance
 * @resolveWeak `function` return webpack moduleid
 * @loading `React Element`
 * @error `React Element`
 * @delay `number` ms, loading view delay display
 * @timeout `number` ms, load timeout time
 */
const DEFAULTOPTIONS = {
    load: null,
    resolveWeak: null,
    loading: null,
    error: null,
    delay: DELAY,
    timeout: TIMEOUT
};
const Dueimport = (option = {}) => {
    const {
        load,
        loading,
        error,
        delay,
        timeout,
        resolveWeak
    } = option;
    if (!load) {
        return null;
    }
    // The first letter of the react component
    // name is the uppercase
    const LoadingView = packComponent(loading);
    const ErrorView = packComponent(error);
    const isDelay = typeof delay === 'number' && delay !== 0;
    const isTimeout = typeof timeout === 'number' && timeout !== 0;
    const preload = () => load();
    class AsyncComponent extends Component {
        constructor(props) {
            super(props);
            this.unmount = false;
            const { loaded, cur } = resolving(load, resolveWeak);
            this.state = {
                needDelay: isDelay,
                err: '',
                request: !loaded,
                LoadComponent: loaded ? cur : null
            };
            this.retry = this.retry.bind(this);
            this.changeState = this.changeState.bind(this);
            this.inital = true;
        }
        changeState(state = {}) {
            Iif (this.unmount) {
                return false;
            }
            return this.setState(state);
        }
        retry() {
            this.loadComp();
        }
        clearTime() {
            if (this.delayTime) {
                clearTimeout(this.delayTime);
                delete this.delayTime;
            }
            if (this.timeoutTime) {
                clearTimeout(this.timeoutTime);
                delete this.timeoutTime;
            }
        }
        loadComp() {
            if (isDelay) {
                this.delayTime = setTimeout(() => {
                    this.changeState({
                        needDelay: false
                    });
                }, delay);
            }
            if (isTimeout) {
                this.timeoutTime = setTimeout(() => {
                    this.changeState({
                        request: false,
                        err: 'timeout'
                    });
                }, timeout);
            }
            if (!this.inital) {
                this.changeState({
                    request: true,
                    err: '',
                    needDelay: isDelay
                });
            }
            preload().then((component) => {
                this.clearTime();
                this.changeState({
                    request: false,
                    err: '',
                    LoadComponent: component
                });
            }).catch((e) => {
                this.clearTime();
                this.changeState({
                    request: false,
                    err: e
                });
            });
        }
        componentWillUnmount() {
            this.unmount = true;
        }
        componentDidMount() {
            // client
            const { request } = this.state;
            if (request) {
                this.loadComp();
                delete this.inital;
            }
        }
        render() {
            const {
                request,
                needDelay,
                err,
                LoadComponent
            } = this.state;
            if (request) {
                // empty
                if (needDelay) {
                    return null;
                }
                return LoadingView();
            } else if (err !== '') {
                return ErrorView({
                    onRetry: this.retry,
                    error: err
                });
            }
            return <LoadComponent {...this.props} />;
        }
    }
    AsyncComponent.preload = preload;
    return AsyncComponent;
};
const Asyncimport = (initOptions = {}, dueOptions = {}) => {
    const mergeOption = shallowCopy({}, DEFAULTOPTIONS, initOptions, dueOptions);
    // `load` exist
    if (mergeOption.load) {
        return Dueimport(mergeOption);
    }
    return (stepOption = {}) => {
        const afterOption = shallowCopy({}, mergeOption, stepOption);
        return Dueimport(afterOption);
    };
};
export default Asyncimport;