import React from 'react'; import { Spin } from 'antd'; import isEqual from 'lodash/isEqual'; import { isComponentClass } from './Secured'; // eslint-disable-next-line import/no-cycle export default class PromiseRender extends React.Component { state = { component: () => null, }; componentDidMount() { this.setRenderComponent(this.props); } shouldComponentUpdate = (nextProps, nextState) => { const { component } = this.state; if (!isEqual(nextProps, this.props)) { this.setRenderComponent(nextProps); } if (nextState.component !== component) return true; return false; }; // set render Component : ok or error setRenderComponent(props) { const ok = this.checkIsInstantiation(props.ok); const error = this.checkIsInstantiation(props.error); props.promise .then(() => { this.setState({ component: ok, }); return true; }) .catch(() => { this.setState({ component: error, }); }); } // Determine whether the incoming component has been instantiated // AuthorizedRoute is already instantiated // Authorized render is already instantiated, children is no instantiated // Secured is not instantiated checkIsInstantiation = (target) => { if (isComponentClass(target)) { const Target = target; return (props) => <Target {...props} />; } if (React.isValidElement(target)) { return (props) => React.cloneElement(target, props); } return () => target; }; render() { const { component: Component } = this.state; const { ok, error, promise, ...rest } = this.props; return Component ? ( <Component {...rest} /> ) : ( <div style={{ width: '100%', height: '100%', margin: 'auto', paddingTop: 50, textAlign: 'center', }}> <Spin size="large" /> </div> ); } }