DrawerFaC.js

DrawerFaC.js

import React, {Component} from 'react';
import join from 'join-classnames';

import styles from './DrawerFaC.css';

export default class DrawerFaC extends Component {

    static defaultProps = {
        open: false
    };

    state = {
        open: this.props.open,
        maxHeight: "100vh"
    };

    componentDidMount() {
        if(typeof window === "object") {
            this.setState({
                maxHeight: `${this.node ? this.node.scrollHeight : 1000}px`
            });
        }
    }

    close = () => {
        this.setState({open: false});
        this.props.onClose && this.props.onClose();
    };

    open = () => {
        this.setState({open: true});
        this.props.onOpen && this.props.onOpen()
    };

    toggle = () => {
        this.setState( (state) => {
            const open = !state.open;
            const hook = open
                ? this.props.onOpen
                : this.props.onClose;

            if(hook) { hook(); }

            return ({open});
        })
    };

    handleRef = (node) => (
        this.node = node
    );

    Drawer = ({className, ...props}) => (
        <div
            {...props}
            ref={this.handleRef}
            style={{maxHeight: this.state.open ? this.state.maxHeight : 0}}
            className={join(className, styles.Body)}
        />
    );

    render() {
        const {children} = this.props;
        const {open: isOpen} = this.state;
        const {Drawer, toggle: doToggle, close: doClose, open: doOpen} = this;

        return children({
            Drawer,
            isOpen,
            doToggle,
            doOpen,
            doClose
        });
    }
}