feat(Modal): add onItemClick prop

Author: Alexander Fedyashov

src/modules/Modal/Modal.d.ts

@@ -13,7 +13,7 @@ export interface ModalProps extends PortalProps {
   as?: any;
 
   /** A Modal can be passed action buttons via shorthand. */
-  actions?: any;
+  actions?: Array<any>;
 
   /** A Modal can reduce its complexity */
   basic?: boolean;
@@ -48,6 +48,14 @@ export interface ModalProps extends PortalProps {
   /** The node where the modal should mount. Defaults to document.body. */
   mountNode?: any;
 
+  /**
+   * Action onClick handler when using shorthand `actions`.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onActionClick?: (event: React.MouseEvent<HTMLElement>, data: ModalProps) => void;
+
   /**
    * Called when a close event happens.
    *

src/modules/Modal/Modal.js

@@ -13,7 +13,6 @@ import {
   META,
   useKeyOnly,
 } from '../../lib'
-import Button from '../../elements/Button'
 import Icon from '../../elements/Icon'
 import Portal from '../../addons/Portal'
 import ModalHeader from './ModalHeader'
@@ -34,7 +33,7 @@ class Modal extends Component {
     as: customPropTypes.as,
 
     /** Shorthand for Modal.Actions. Typically an array of button shorthand. */
-    actions: customPropTypes.itemShorthand,
+    actions: customPropTypes.collectionShorthand,
 
     /** A modal can reduce its complexity */
     basic: PropTypes.bool,
@@ -72,6 +71,14 @@ class Modal extends Component {
     /** The node where the modal should mount. Defaults to document.body. */
     mountNode: PropTypes.any,
 
+    /**
+     * Action onClick handler when using shorthand `actions`.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onActionClick: PropTypes.func,
+
     /**
      * Called when a close event happens.
      *
@@ -152,6 +159,8 @@ class Modal extends Component {
   handleActionsOverrides = predefinedProps => ({
     onActionClick: (e, actionProps) => {
       _.invoke(predefinedProps, 'onActionClick', e, actionProps)
+      _.invoke(this.props, 'onActionClick', e, this.props)
+
       this.handleClose(e)
     },
   })

test/specs/modules/Modal/Modal-test.js

@@ -105,10 +105,10 @@ describe('Modal', () => {
 
   describe('actions', () => {
     it('closes the modal on action click', () => {
-      wrapperMount(<Modal defaultOpen actions={['OK']} />)
+      wrapperMount(<Modal actions={['OK']} defaultOpen />)
 
       assertBodyContains('.ui.modal')
-      domEvent.click('.ui.modal.actions .button')
+      domEvent.click('.ui.modal .actions .button')
       assertBodyContains('.ui.modal', false)
     })
   })
@@ -117,16 +117,13 @@ describe('Modal', () => {
     it('is called when an action is clicked', () => {
       const onActionClick = sandbox.spy()
       const event = { target: null }
+      const props = { actions: ['OK'], defaultOpen: true, onActionClick }
 
-      wrapperMount(
-        <Modal defaultOpen>
-          <Modal.Actions></Modal.Actions>
-        </Modal>
-      )
+      wrapperMount(<Modal {...props} />)
+      domEvent.click('.ui.modal .actions .button')
 
-      domEvent.click('.button:last-child')
       onActionClick.should.have.been.calledOnce()
-      onActionClick.should.have.been.calledWithMatch(event, { content: 'OK' })
+      onActionClick.should.have.been.calledWithMatch(event, props)
     })
   })
 

test/specs/modules/Modal/ModalActions-test.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import ModalActions from 'src/modules/Modal/ModalActions'
 
+import ModalActions from 'src/modules/Modal/ModalActions'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'