Source: Inject.component.js

  1. import PropTypes from 'prop-types';
  2. import componentAPI from './component';
  3. import { useCMFContext } from './useContext';
  5. /**
  6.  * The Inject component let you use the registry to render named component
  7.  * using the registry. It will not break the app if component is not found
  8.  * but it will display an error.
  9.  * @module react-cmf/lib/Inject
  10.  * @example
  11. import { Inject } from '@talend/react-cmf';
  12. // this is not the best example but it show the concept
  13. function MyComponent(props) {
  14. 	return (
  15. 		<Inject component="Action" onClick={props.onClick}>
  16. 			<Inject component="Icon" icon={props.icon} />
  17. 		</Inject>
  18. 	);
  19. }
  20.  */
  22. function NotFoundComponent({ error }) {
  23. 	// eslint-disable-next-line no-console
  24. 	console.error(error);
  25. 	return <div className="alert alert-danger">{error.message}</div>;
  26. }
  27. NotFoundComponent.propTypes = {
  28. 	error: PropTypes.string.isRequired,
  29. };
  31. function Inject({ component, ...props }) {
  32. 	const context = useCMFContext();
  33. 	try {
  34. 		const Component = componentAPI.get(component, context);
  35. 		return <Component {...props} />;
  36. 	} catch (error) {
  37. 		return <NotFoundComponent error={error} />;
  38. 	}
  39. }
  40. Inject.propTypes = {
  41. 	component: PropTypes.string.isRequired,
  42. };
  43. Inject.NotFoundComponent = NotFoundComponent;
  45. export default Inject;