feat(Modal): Create a Modal using shorthand props

docs/app/Examples/modules/Modal/Types/ModalExampleShorthand.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Button, Modal } from 'semantic-ui-react'
+
+const ModalShorthandExample = () => (
+  <Modal
+    trigger={<Button>Show Modal</Button>}
+    header='Delete Your Account'
+    content='Are you sure you want to delete your account'
+    actions={[
+      { key: 'no', content: 'No', color: 'red', triggerClose: true },
+      { key: 'yes', content: 'Yes', color: 'green', triggerClose: true },
+    ]}
+  />
+)
+
+export default ModalShorthandExample

docs/app/Examples/modules/Modal/Types/index.js

@@ -39,6 +39,11 @@ const ModalExamples = () => (
       description='A modal can be a controlled component'
       examplePath='modules/Modal/Types/ModalExampleControlled'
     />
+    <ComponentExample
+      title='Shorthand'
+      description='A modal can be created with shorthand props.'
+      examplePath='modules/Modal/Types/ModalExampleShorthand'
+    />
   </ExampleSection>
 )
 

src/modules/Modal/Modal.d.ts

@@ -12,7 +12,10 @@ export interface ModalProps extends PortalProps {
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** A modal can reduce its complexity */
+  /** A Modal can be passed action buttons via shorthand. */
+  actions?: Array<any>;
+
+  /** A Modal can reduce its complexity */
   basic?: boolean;
 
   /** Primary content. */
@@ -30,12 +33,18 @@ export interface ModalProps extends PortalProps {
   /** Whether or not the Modal should close when the document is clicked. */
   closeOnDocumentClick?: boolean;
 
+  /** A Modal can be passed content via shorthand. */
+  content: any;
+
   /** Initial value of open. */
   defaultOpen?: boolean;
 
   /** A modal can appear in a dimmer. */
   dimmer?: boolean | 'blurring' | 'inverted';
 
+  /** A Modal can be passed header via shorthand. */
+  header: any;
+
   /** The node where the modal should mount. Defaults to document.body. */
   mountNode?: any;
 

src/modules/Modal/Modal.js

@@ -32,6 +32,9 @@ class Modal extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
+    /** Elements to render as Modal action buttons. */
+    actions: PropTypes.arrayOf(customPropTypes.itemShorthand),
+
     /** A modal can reduce its complexity */
     basic: PropTypes.bool,
 
@@ -54,15 +57,21 @@ class Modal extends Component {
     /** Whether or not the Modal should close when the document is clicked. */
     closeOnDocumentClick: PropTypes.bool,
 
+    /** Simple text content for the Modal. */
+    content: customPropTypes.itemShorthand,
+
     /** Initial value of open. */
     defaultOpen: PropTypes.bool,
 
-    /** A modal can appear in a dimmer. */
+    /** A Modal can appear in a dimmer. */
     dimmer: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.oneOf(['inverted', 'blurring']),
     ]),
 
+    /** Modal displayed above the content in bold. */
+    header: customPropTypes.itemShorthand,
+
     /** The node where the modal should mount. Defaults to document.body. */
     mountNode: PropTypes.any,
 
@@ -143,6 +152,15 @@ class Modal extends Component {
   // Do not access document when server side rendering
   getMountNode = () => isBrowser ? this.props.mountNode || document.body : null
 
+  handleActionsOverrides = predefinedProps => ({
+    onActionClick: (e, actionProps) => {
+      const { triggerClose } = actionProps
+
+      _.invoke(predefinedProps, 'onActionClick', e, actionProps)
+      if (triggerClose) this.handleClose(e)
+    },
+  })
+
   handleClose = (e) => {
     debug('close()')
 
@@ -236,26 +254,20 @@ class Modal extends Component {
     this.animationRequestId = requestAnimationFrame(this.setPosition)
   }
 
-  render() {
-    const { open } = this.state
+  renderContent = rest => {
     const {
+      actions,
       basic,
       children,
       className,
       closeIcon,
-      closeOnDimmerClick,
-      closeOnDocumentClick,
-      dimmer,
+      content,
+      header,
       size,
       style,
     } = this.props
-
-    const mountNode = this.getMountNode()
-
-    // Short circuit when server side rendering
-    if (!isBrowser) return null
-
     const { marginTop, scrolling } = this.state
+
     const classes = cx(
       'ui',
       size,
@@ -264,20 +276,43 @@ class Modal extends Component {
       'modal transition visible active',
       className,
     )
-    const unhandled = getUnhandledProps(Modal, this.props)
-    const portalPropNames = Portal.handledProps
-
-    const rest = _.omit(unhandled, portalPropNames)
-    const portalProps = _.pick(unhandled, portalPropNames)
     const ElementType = getElementType(Modal, this.props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
-    const modalJSX = (
+    const closeIconJSX = Icon.create(closeIconName, { overrideProps: this.handleIconOverrides })
+
+    if (!_.isNil(children)) {
+      return (
+        <ElementType {...rest} className={classes} style={{ marginTop, ...style }} ref={this.handleRef}>
+          {closeIconJSX}
+          {children}
+        </ElementType>
+      )
+    }
+
+    return (
       <ElementType {...rest} className={classes} style={{ marginTop, ...style }} ref={this.handleRef}>
-        {Icon.create(closeIconName, { overrideProps: this.handleIconOverrides })}
-        {children}
+        {closeIconJSX}
+        {ModalHeader.create(header)}
+        {ModalContent.create(content)}
+        {ModalActions.create(actions, { overrideProps: this.handleActionsOverrides })}
       </ElementType>
     )
+  }
+
+  render() {
+    const { open } = this.state
+    const { closeOnDimmerClick, closeOnDocumentClick, dimmer } = this.props
+    const mountNode = this.getMountNode()
+
+    // Short circuit when server side rendering
+    if (!isBrowser) return null
+
+    const unhandled = getUnhandledProps(Modal, this.props)
+    const portalPropNames = Portal.handledProps
+
+    const rest = _.omit(unhandled, portalPropNames)
+    const portalProps = _.pick(unhandled, portalPropNames)
 
     // wrap dimmer modals
     const dimmerClasses = !dimmer
@@ -301,18 +336,18 @@ class Modal extends Component {
 
     return (
       <Portal
-        closeOnRootNodeClick={closeOnDimmerClick}
         closeOnDocumentClick={closeOnDocumentClick}
+        closeOnRootNodeClick={closeOnDimmerClick}
         {...portalProps}
         className={dimmerClasses}
         mountNode={mountNode}
+        open={open}
         onClose={this.handleClose}
         onMount={this.handlePortalMount}
         onOpen={this.handleOpen}
         onUnmount={this.handlePortalUnmount}
-        open={open}
       >
-        {modalJSX}
+        {this.renderContent(rest)}
       </Portal>
     )
   }

src/modules/Modal/ModalActions.d.ts

@@ -1,18 +1,30 @@
 import * as React from 'react';
+import { ButtonProps } from '../../elements/Button';
 
 export interface ModalActionsProps {
   [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** An element type to render as (string or function). */
+  actions?: Array<any>;
+
   /** Primary content. */
   children?: React.ReactNode;
 
   /** Additional classes. */
   className?: string;
+
+  /**
+   * onClick handler for an action. Mutually exclusive with children.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All item props.
+   */
+  onItemClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: ButtonProps) => void;
 }
 
-declare const ModalActions: React.StatelessComponent<ModalActionsProps>;
+declare const ModalActions: React.ComponentClass<ModalActionsProps>;
 
 export default ModalActions;

src/modules/Modal/ModalActions.js

@@ -1,41 +1,76 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
+import Button from '../../elements/Button'
 
 /**
  * A modal can contain a row of actions.
  */
-function ModalActions(props) {
-  const { children, className } = props
-  const classes = cx('actions', className)
-  const rest = getUnhandledProps(ModalActions, props)
-  const ElementType = getElementType(ModalActions, props)
+export default class ModalActions extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
 
-  return <ElementType {...rest} className={classes}>{children}</ElementType>
-}
+    /** Elements to render as Modal action buttons. */
+    actions: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.arrayOf(customPropTypes.itemShorthand),
+    ]),
 
-ModalActions._meta = {
-  name: 'ModalActions',
-  type: META.TYPES.MODULE,
-  parent: 'Modal',
-}
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /**
+     * onClick handler for an action. Mutually exclusive with children.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All item props.
+     */
+    onActionClick: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.func,
+    ]),
+  }
+
+  static _meta = {
+    name: 'ModalActions',
+    type: META.TYPES.MODULE,
+    parent: 'Modal',
+  }
+
+  handleButtonOverrides = predefinedProps => ({
+    onClick: (e, buttonProps) => {
+      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+      _.invoke(this.props, 'onActionClick', e, buttonProps)
+    },
+  })
 
-ModalActions.propTypes = {
-  /** An element type to render as (string or function). */
-  as: customPropTypes.as,
+  render() {
+    const { actions, children, className } = this.props
+    const classes = cx('actions', className)
+    const rest = getUnhandledProps(ModalActions, this.props)
+    const ElementType = getElementType(ModalActions, this.props)
 
-  /** Primary content. */
-  children: PropTypes.node,
+    if (!_.isNil(children)) return <ElementType {...rest} className={classes}>{children}</ElementType>
 
-  /** Additional classes. */
-  className: PropTypes.string,
+    return (
+      <ElementType {...rest} className={classes}>
+        {_.map(actions, action => Button.create(action, { overrideProps: this.handleButtonOverrides }))}
+      </ElementType>
+    )
+  }
 }
 
-export default ModalActions
+ModalActions.create = createShorthandFactory(ModalActions, actions => ({ actions }))

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

@@ -45,6 +45,16 @@ describe('Modal', () => {
   })
 
   common.hasSubComponents(Modal, [ModalHeader, ModalContent, ModalActions, ModalDescription])
+  common.implementsShorthandProp(Modal, {
+    propKey: 'header',
+    ShorthandComponent: ModalHeader,
+    mapValueToProps: content => ({ content }),
+  })
+  common.implementsShorthandProp(Modal, {
+    propKey: 'content',
+    ShorthandComponent: ModalContent,
+    mapValueToProps: content => ({ content }),
+  })
 
   // Heads up!
   //
@@ -91,6 +101,33 @@ describe('Modal', () => {
     element.style.should.have.property('top', '0px')
   })
 
+  describe('actions', () => {
+    const actions = [
+      { key: 'cancel', content: 'Cancel' },
+      { key: 'ok', content: 'OK', triggerClose: true },
+    ]
+
+    it('handles onItemClick', () => {
+      const onActionClick = sandbox.spy()
+      const event = { target: null }
+
+      wrapperMount(<Modal defaultOpen actions={{ actions, onActionClick }} />)
+
+      domEvent.click('.button:last-child')
+      onActionClick.should.have.been.calledOnce()
+      onActionClick.should.have.been.calledWithMatch(event, { content: 'OK' })
+    })
+
+    it('handles triggerClose prop on an action', () => {
+      wrapperMount(<Modal defaultOpen actions={actions} />)
+
+      domEvent.click('.button:first-child')
+      assertBodyContains('.ui.modal')
+      domEvent.click('.button:last-child')
+      assertBodyContains('.ui.modal', false)
+    })
+  })
+
   describe('open', () => {
     it('is not open by default', () => {
       wrapperMount(<Modal />)