apeman-react-dialog/lib/ap_dialog.jsx

/**
 * Dialog component.
 * @constructor ApDialog
 */

'use strict'


import React, {PropTypes as types} from 'react'
import classnames from 'classnames'

import {ApTouchable} from 'apeman-react-touchable'
import {ApIcon} from 'apeman-react-icon'
import {ApSpinner} from 'apeman-react-spinner'
import ApDialogHeader from './ap_dialog_header'
import ApDialogBody from './ap_dialog_body'


const DEFAULT_CLOSE_ICON = 'fa fa-close'

/** @lends ApDialog */
let ApDialog = React.createClass({

    // --------------------
    // Specs
    // --------------------

    propTypes: {
        present: types.bool.isRequired,
        onClose: types.func,
        spinning: types.bool,
        spinner: types.string,
        title: types.string,
        closeIcon: types.string
    },

    mixins: [],

    statics: {
        DEFAULT_CLOSE_ICON
    },

    getInitialState () {
        return {}
    },

    getDefaultProps () {
        return {
            present: false,
            onClose: null,
            spinning: false,
            spinner: ApSpinner.DEFAULT_THEME,
            title: null,
            closeIcon: DEFAULT_CLOSE_ICON
        }
    },

    render () {
        const s = this,
            {props} = s;
        if (!props.present) {
            return null;
        }
        return (
            <div className={ classnames('ap-dialog', props.className, {
                'ap-dialog-present':props.present
            }) }
                 style={ Object.assign({}, props.style) }>
                <ApSpinner theme={ props.spinner }
                           className="ap-dialog-spinner"
                           enabled={ props.spinning }/>
                <div className="ap-dialog-inner">
                    { s._renderBack() }
                    <div className="ap-dialog-content">
                        <ApDialogHeader>
                            { s._renderTitle() }
                            { s._renderCloseButton() }
                        </ApDialogHeader>
                        <ApDialogBody>
                            { props.children }
                        </ApDialogBody>
                    </div>
                </div>
            </div>
        )
    },


    // --------------------
    // Lifecycle
    // --------------------

    componentWillMount() {
        const s = this

    },

    componentDidMount() {
        const s = this,
            {props} = s;
        s.toggleDocumentScroll(props.present)
    },

    componentWillReceiveProps(nextProps) {
        const s = this

        s.toggleDocumentScroll(nextProps.present)
    },

    shouldComponentUpdate(nextProps, nextState) {
        const s = this
        return true
    },

    componentWillUpdate(nextProps, nextState) {
        const s = this
    },

    componentDidUpdate(prevProps, prevState) {
        const s = this
    },

    componentWillUnmount() {
        const s = this
        s.toggleDocumentScroll(false)
    },

    // ------------------
    // Helper
    // ------------------

    handleClose(e) {
        const s = this,
            {props} = s;
        if (props.onClose) {
            props.onClose(e)
        }
    },

    toggleDocumentScroll(enabled) {
        let s = false

        let body = document.body;
        if (enabled) {
            body.classList.add('ap-dialog-fix')
        } else {
            body.classList.remove('ap-dialog-fix')
        }

    },

    // ------------------
    // Private
    // ------------------

    _renderBack() {
        const s = this,
            {props} = s;
        return (
            <div className="ap-dialog-back">
                <ApTouchable onTap={ s.handleClose }>
                    <div className="ap-dialog-back-inner"></div>
                </ApTouchable>
            </div>
        )
    },

    _renderCloseButton() {
        const s = this,
            {props} = s;
        return (
            <a className="ap-dialog-close-button">
                <ApTouchable onTap={ s.handleClose }>
                <span>
                    <ApIcon className={ classnames('ap-dialog-close-button-icon', props.closeIcon) }/>
                </span>
                </ApTouchable>
            </a>
        )
    },

    _renderTitle() {
        const s = this,
            {props} = s;
        return (
            <h3 className="ap-dialog-title">{ props.title }</h3>
        )
    }
})

module.exports = ApDialog;