All files / lib/ModalHeader index.js

100% Statements 7/7
88.89% Branches 8/9
100% Functions 1/1
100% Lines 7/7
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                          9x     9x   9x                                                       89x                         89x               89x       89x      
import React from 'react';
import PropTypes from 'prop-types';
import { CloseIcon } from '@collab-ui/react';
 
class ModalHeader extends React.PureComponent {
  render() {
    const {
      children,
      className,
      headerLabel,
      message,
      showCloseButton,
      ...props
    } = this.props;
    const {
      handleClose
    } = this.context;
 
    return (
      <div 
        className={
          'cui-modal__header' +
          `${(className && ` ${className}`) || ''}`
        }
        {...props}
      >
        { 
          children
          ? children
          : [
              <span key='title-0' className='cui-modal__title'>{headerLabel}</span>,
              message && <span key='title-1' className='cui-modal__message'>{message}</span>
          ]
        }
        {
          showCloseButton &&
          <CloseIcon 
            className='cui-modal__close'
            onClick={handleClose}
          />
        }
      </div>
    );
  }
}
 
ModalHeader.propTypes = {
  /** @prop Children nodes to render inside of ModalHeader | null */
  children: PropTypes.node,
  /** @prop Optional CSS class names | '' */
  className: PropTypes.string,
  /** @prop ModalHeader label text | '' */
  headerLabel: PropTypes.string,
   /** @prop Modal message | '' */
  message: PropTypes.string,
  /** @prop show/hide close button | true */
  showCloseButton: PropTypes.bool
};
 
ModalHeader.defaultProps = {
  children: null,
  className: '',
  headerLabel: '',
  message: '',
  showCloseButton: true,
};
 
ModalHeader.contextTypes = {
  handleClose: PropTypes.func,
};
 
ModalHeader.displayName = 'ModalHeader';
 
export default ModalHeader;