Bottom Bar POC

bottom-bar.jsx

import { h, Component } from 'preact';

//
// Basic building blocks
//
export const BottomBar = ({ children, visible, expanded }) => {
    const styles = [
        'bottom-bar',
        visible && 'bottom-bar--visible',
        expanded && 'bottom-bar--expanded',
    ];

    return (
        <div className={styles.join(' ').trim()}>
            {children}
            <div className="bottom-bar__logo" dangerouslySetInnerHTML={{ __html: require('Content/img/logo-dn-small.svg') }}></div>
        </div>
    );
};

export const BottomBarHeader = ({ children, onToggle, onClose }) => (
    <div className="bottom-bar-header" onClick={onToggle}>
        <div className="bottom-bar-header__content">{children}</div>
        <span className="bottom-bar-header__close" onClick={onClose}></span>
    </div>
);

export const BottomBarContent = ({ children }) => (
    <div className="bottom-bar-content">{children}</div>
);

//
// Bottom bar variants
//
export const FreeUserBottomBar = ({ subscribeUrl, visible, expanded, onToggle, onClose }) => (
    <div className="free-user-bottom-bar">
        <BottomBar visible={visible} expanded={expanded}>
            <BottomBarHeader onToggle={onToggle} onClose={onClose}>
                <div className="free-user-bottom-bar__header">
                    Free User Header
                </div>
            </BottomBarHeader>
            <BottomBarContent>
                <div className="free-user-bottom-bar__content">
                    Free User Header
                </div>
            </BottomBarContent>
        </BottomBar>
    </div>
);

export const AnonUserBottomBar = ({ subscribeUrl, loginUrl, visible, expanded, onToggle, onClose }) => (
    <div className="anon-user-bottom-bar">
        <BottomBar visible={visible} expanded={expanded}>
            <BottomBarHeader onToggle={onToggle} onClose={onClose}>
                <div className="anon-user-bottom-bar__header">
                    Anon User Header
                </div>
            </BottomBarHeader>
            <BottomBarContent>
                <div className="anon-user-bottom-bar__content">
                    Anon User Content
                </div>
            </BottomBarContent>
        </BottomBar>
    </div>
);

export function enhanceBottomBar(WrappedBottomBar) {
    return class extends Component {
        constructor(props) {
            super(props);

            this.state = {
                visible: true,
                expanded: false,
                closed: false
            };
        }

        onToggle() {
            this.setState(state => ({ visible: !state.visible }));
        }

        onClose() {
            this.setState({ closed: true });
        }

        render() {
            if (!this.state.closed) {
                return <WrappedBottomBar
                    visible={this.state.visible} expanded={this.state.expanded}
                    onToggle={this.onToggle} onClose={this.onClose}
                    {...this.props}
                    />;
            }

            return null;
        }
    };
}