ac-patterns/dist/app-layout.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

/** @jsx h */
import cn from 'classnames';
import { h, Component } from 'preact';
import { LogoDark, LogoTextOnly } from './logo';
import { Drawer } from './drawer';
import { Shield } from './shield';
import { Footer } from './footer';
import { TapIconButton } from './button';
import omit from './utils/omit';
import { throttle } from './utils/throttle';

class DrawerContentWrapper extends Component {
  constructor(props) {
    super(props);
    this.handleScroll = throttle(this.handleScroll.bind(this), 200);
  }

  handleScroll() {
    if (!this.base) {
      return;
    }
    const { updateScrolledDown, scrolledDown } = this.props;
    const { scrollTop } = this.base;
    if (scrollTop === 0 && scrolledDown) {
      updateScrolledDown(false);
    }
    if (!scrolledDown && scrollTop > 0) {
      updateScrolledDown(true);
    }
  }

  componentDidMount() {
    this.base.addEventListener('scroll', this.handleScroll, { passive: true });
  }

  componentWillUnMount() {
    this.base.removeEventListener('scroll', this.handleScroll, {
      passive: true
    });
  }

  render({ style, children }) {
    return h(
      'div',
      { className: 'v-scroll h-100 w-100', style: style },
      children
    );
  }
}

export class AppLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerScrolledDown: false
    };
    this.updateScrolledDown = this.updateScrolledDown.bind(this);
  }

  updateScrolledDown(scrolledDown) {
    this.setState({ drawerScrolledDown: scrolledDown });
  }

  render(props, { drawerScrolledDown }) {
    const {
      drawerOpen,
      screenIsWide,
      drawerEnabled,
      drawerContent,
      statusBarContent,
      extraContent,
      drawerWidth = 256,
      mainContent,
      doCloseDrawer,
      hideFooter,
      version,
      logoHref,
      logoOnClick,
      preventScroll
    } = props;

    const rest = omit(props, ['drawerOpen', 'screenIsWide', 'drawerEnabled', 'drawerContent', 'statusBarContent', 'extraContent', 'drawerWidth', 'mainContent', 'doCloseDrawer', 'hideFooter', 'version', 'logoHref', 'logoOnClick', 'preventScroll']);

    const drawerAlwaysVisible = drawerEnabled && screenIsWide;
    const useFloatingDrawer = drawerEnabled && !screenIsWide;
    const showShield = useFloatingDrawer && drawerOpen;
    const floatingDrawerHidden = useFloatingDrawer && !drawerOpen;

    const leftMarginStyles = drawerAlwaysVisible ? {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`
    } : {
      width: '100%'
    };

    if (showShield || preventScroll) {
      document.body.classList.add('overflow-hidden');
    } else {
      document.body.classList.remove('overflow-hidden');
    }

    const drawerHeaderHeightPx = (drawerAlwaysVisible ? 80 : 60) + 'px';

    const logoClasses = cn({ pointer: logoHref || logoOnClick });

    return h(
      'div',
      _extends({ className: 'bg-near-white dark-blue sans-serif min-vh-100' }, rest),
      statusBarContent && h(
        'div',
        {
          className: 'sticky no-print top-0 bg-light-gray z-1 shadow-1',
          style: leftMarginStyles
        },
        statusBarContent
      ),
      drawerEnabled && h(
        Drawer,
        {
          'aria-hidden': floatingDrawerHidden,
          className: useFloatingDrawer ? 'z-4 transition' : '',
          style: {
            width: `${drawerWidth}px`,
            transform: floatingDrawerHidden ? `translateX(${-drawerWidth}px)` : null
          }
        },
        h(
          'div',
          {
            className: cn('absolute left-0 bg-dark-blue z-1 top-0 pa2 pa3-l', { 'shadow-1': drawerScrolledDown }),
            style: {
              width: `${drawerWidth}px`,
              height: drawerHeaderHeightPx
            }
          },
          screenIsWide && h(
            'a',
            {
              className: cn('db link white', logoClasses),
              href: logoHref,
              onClick: logoOnClick
            },
            h(LogoDark, null)
          ),
          !screenIsWide && h(
            'div',
            { className: 'flex items-center justify-between' },
            h(TapIconButton, {
              icon: 'close',
              color: 'white',
              className: 'flex-shrink-0',
              onClick: e => {
                e.preventDefault();
                doCloseDrawer();
              }
            }),
            h(
              'a',
              {
                className: logoClasses,
                href: logoHref,
                onClick: logoOnClick
              },
              h(LogoTextOnly, {
                className: 'mh3',
                style: { paddingTop: '6px', width: '168px' }
              })
            )
          )
        ),
        h(
          DrawerContentWrapper,
          {
            scrolledDown: drawerScrolledDown,
            updateScrolledDown: this.updateScrolledDown,
            style: {
              paddingTop: drawerHeaderHeightPx,
              paddingBottom: '120px'
            }
          },
          drawerContent
        )
      ),
      showShield && h(Shield, {
        className: 'z-3 dn-l',
        onClick: () => doCloseDrawer && doCloseDrawer()
      }),
      h(
        'main',
        {
          style: leftMarginStyles,
          className: 'bg-nearly-white overflow-x-hidden'
        },
        mainContent,
        hideFooter !== true && h(Footer, { version: version })
      ),
      extraContent
    );
  }
}