react-jam-ui/components/Modal/index.js

React JAM UI components

import React from 'react'
import classNames from 'classnames'

import IconClose from '../Icons/feather/IconClose'

import './styles.styl'

/* type Props = {
    show: boolean
} */

export default class Modal extends React.Component {
    constructor(props) {
        super();

        this.state = {
            
        };

        if (props.show) document.body.classList.add('modal-show')
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.show) {
            document.body.classList.add('modal-show')
        } else {
            document.body.classList.remove('modal-show')
        }
    }

    componentWillUnmount() {
        document.body.classList.remove('modal-show')
    }

    onClose = e => {
        if (this.props.onClose) this.props.onClose(e)
    }

    onBackfaceClose = e => {
        if (e.target.classList.contains('modal-backface')) {
            if (this.props.onClose) this.props.onClose(e)
        }
    }

    render() {
        const classes = classNames(
            'modal-backface',
            this.props.className
        );
        
        const findCloseBtn = this.props.children.find( el => el.type && el.type.name == 'ModalClose')
        
        const CloseBtn = findCloseBtn ? React.cloneElement(findCloseBtn, {
            onClick: e => { findCloseBtn.onClick(e); this.onClose(e) } 
        }) : <ModalClose onClick={ this.onClose }><IconClose /></ModalClose>

        return this.props.show &&
            <div className={ classes } onClick={ this.onBackfaceClose }>
                <div className='modal'>
                    { CloseBtn }
                    { this.props.children }
                </div>
            </div>
    }
}

class ModalClose extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    onClose = e => {
        if (this.props.onClick) this.props.onClick(e)
    }

    render() {
        return <div className='modal-close' onClick={ this.onClose }>{ this.props.children }</div>
    }
}

class ModalHeader extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        return <div className='modal-header'>{ this.props.children }</div>
    }
}

class ModalTitle extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        return <div className='modal-title'>{ this.props.children }</div>
    }
}

class ModalBody extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        return <div className='modal-body'>{ this.props.children }</div>
    }
}

class ModalFooter extends React.Component {
    constructor() {
        super();

        this.state = {
        }
    }

    render() {
        return <div className='modal-footer'>{ this.props.children }</div>
    }
}

Modal.Close = ModalClose
Modal.Header = ModalHeader
Modal.Title = ModalTitle
Modal.Body = ModalBody
Modal.Footer = ModalFooter