# All files / react/IntentOpener IntentOpener.jsx

11.76% Statements 2/17
0% Branches 0/6
0% Functions 0/5
11.76% Lines 2/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105

    1x

    1x

     import React from 'react'
    import IntentModal from '../IntentModal'
    import PropTypes from 'prop-types'

    /**
     * Wrapper that adds an `onClick` handler to its children that opens a modal
     * for the specified intent.
     *
     * The modal for an intent takes the majority of the viewport.
     */
    class IntentOpener extends React.Component {
      state = {
        modalOpened: false
      }

      openModal = () => {
        this.setState({
          modalOpened: true
        })
      }

      closeModal = () => {
        this.setState({
          modalOpened: false
        })
      }

      handleComplete = result => {
        this.closeModal()
        if (this.props.onComplete) {
          this.props.onComplete(result)
        }
      }

      handleDismiss = () => {
        this.closeModal()
        if (this.props.onDismiss) {
          this.props.onDismiss()
        }
      }

      render() {
        const {
          options,
          action,
          doctype,
          children,
          closable,
          create,
          tag,
          into,
          ...modalProps
        } = this.props
        const { modalOpened } = this.state

        const Tag = tag // React needs uppercase element names

        const elements = [
          React.cloneElement(children, { key: 'opener', onClick: this.openModal })
        ]

        if (modalOpened) {
          elements.push(
            <IntentModal
              key="intent-modal"
              closable={closable}
              overflowHidden
              dismissAction={this.handleDismiss}
              action={action}
              doctype={doctype}
              options={options}
              onComplete={this.handleComplete}
              create={create}
              into={into}
              {...modalProps}
            />
          )
        }

        return <Tag>{elements}</Tag>
      }
    }

    IntentOpener.propTypes = {
      /** Element on which the onClick handler will be added */
      children: PropTypes.element.isRequired,
      /** What should happen when the intent has completed */
      onComplete: PropTypes.func.isRequired,
      /** What should happen when the modal is dimissed */
      onDismiss: PropTypes.func.isRequired,
      /** Action you want to execute */
      action: PropTypes.string.isRequired,
      /** Doctype on which you want to execute the action */
      doctype: PropTypes.string.isRequired,
      /** Where the modal should be rendered in the DOM */
      into: PropTypes.string
    }

    IntentOpener.defaultProps = {
      tag: 'span',
      closable: true
    }

    export default IntentOpener