Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import PropTypes from 'prop-types';
import { ViewPropTypes } from 'react-native';
import Popup from './Popup';
import Loader from './Loader';
import LoadingError from './LoadingError';
const AsyncPopup = ({
style,
onClose,
isOpen,
renderLoader,
renderContent,
renderError,
loadingState,
}) => (
<Popup
style={style}
onClose={onClose}
isOpen={isOpen}
renderContent={() => {
if (loadingState === 'loading') return renderLoader();
if (loadingState === 'loaded') return renderContent();
if (loadingState === 'errored') return renderError();
return null;
}}
/>
);
AsyncPopup.propTypes = {
style: ViewPropTypes.style,
onClose: PropTypes.func.isRequired,
isOpen: PropTypes.bool,
renderLoader: PropTypes.func,
renderContent: PropTypes.func,
renderError: PropTypes.func,
loadingState: PropTypes.oneOf(['loading', 'loaded', 'errored', 'not-loaded']).isRequired,
};
AsyncPopup.defaultProps = {
style: null,
isOpen: false,
renderLoader: () => <Loader />,
renderContent: () => null,
renderError: () => <LoadingError />,
};
export default AsyncPopup;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment