Source: Dispatcher.js

  1. /**
  2.  * This module expose Dispatcher component.
  3.  * @module react-cmf/lib/Dispatcher
  4.  * @see module:react-cmf/lib/action
  5.  */
  6. import PropTypes from 'prop-types';
  8. import { useContext, Children, cloneElement } from 'react';
  9. import cmfConnect from './cmfConnect';
  10. import action from './action';
  11. import actionCreator from './actionCreator';
  12. import { RegistryContext } from './RegistryProvider';
  14. /**
  15.  * This component purpose is to decorate any component and map an user event
  16.  * to an action to be dispatched
  17.  * @example
  18. function myfunc(event, props, context) {
  19. }
  20. <Dispatcher onClick={myfunc}>
  21. 	<ChildrenElement />
  22. </Dispatcher>
  23.  */
  24. export function Dispatcher(props) {
  25. 	const registry = useContext(RegistryContext);
  26. 	// console.log('@@@ registry', registry);
  28. 	/**
  29. 	 * on any even just try to find a onTHEEVENT props.
  30. 	 * If found execute it with the common stuff
  31. 	 * (event, props, context)
  32. 	 * @param  {object} event     the react event dispatched event
  33. 	 * @param  {string} eventName the name of the event
  34. 	 */
  35. 	function onEvent(event, eventName) {
  36. 		if (props.stopPropagation) {
  37. 			event.stopPropagation();
  38. 		}
  39. 		if (props.preventDefault) {
  40. 			event.preventDefault();
  41. 		}
  42. 		if (props[eventName]) {
  43. 			props.dispatchActionCreator(props[eventName], event, props);
  44. 		}
  45. 	}
  47. 	function checkIfActionInfoExist() {
  48. 		action.getOnProps(props).forEach(name => {
  49. 			if (typeof props[name] === 'string') {
  50. 				actionCreator.get({ registry }, props[name]);
  51. 			}
  52. 		});
  53. 	}
  55. 	checkIfActionInfoExist();
  56. 	const onProps = action.getOnProps(props);
  57. 	const childrenWithProps = Children.map(props.children, child => {
  58. 		const newProps = {};
  59. 		onProps.forEach(name => {
  60. 			newProps[name] = event => onEvent(event, name);
  61. 		});
  62. 		return cloneElement(child, newProps);
  63. 	});
  64. 	return Children.only(childrenWithProps[0]);
  65. }
  67. Dispatcher.propTypes = {
  68. 	children: PropTypes.node.isRequired,
  69. 	stopPropagation: PropTypes.bool,
  70. 	preventDefault: PropTypes.bool,
  71. 	dispatchActionCreator: PropTypes.func,
  72. };
  73. Dispatcher.displayName = 'Dispatcher';
  74. Dispatcher.defaultProps = {
  75. 	stopPropagation: false,
  76. 	preventDefault: false,
  77. };
  78. const ConnectedDispatcher = cmfConnect({
  79. 	withDispatchActionCreator: true,
  80. })(Dispatcher);
  82. /**
  83.  * This component purpose is to decorate any component and map an user event
  84.  * to an action to be dispatched
  85.  * @example
  86. <Dispatcher onClick="actionCreator:identifier" onDrag="actionCreator:anotherid">
  87. 	<ChildrenElement />
  88. </Dispatcher>
  89.  */
  90. export default ConnectedDispatcher;