ac-patterns/dist/app-layout.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AppLayout = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _preact = require("preact");

var _logo = require("./logo");

var _drawer = require("./drawer");

var _shield = require("./shield");

var _footer = require("./footer");

var _button = require("./button");

var _omit = _interopRequireDefault(require("./utils/omit"));

var _throttle = require("./utils/throttle");

var _envTag = _interopRequireDefault(require("./env-tag"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _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; }; return _extends.apply(this, arguments); }

class DrawerContentWrapper extends _preact.Component {
  constructor(props) {
    super(props);
    this.handleScroll = (0, _throttle.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 (0, _preact.h)("div", {
      className: "v-scroll h-100 w-100",
      style: style
    }, children);
  }

}

class AppLayout extends _preact.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,
      extraFooterContent,
      drawerWidth = 256,
      mainContent,
      doCloseDrawer,
      hideFooter,
      version,
      logoHref,
      logoOnClick,
      preventScroll,
      env
    } = props;
    const rest = (0, _omit.default)(props, ['drawerOpen', 'screenIsWide', 'drawerEnabled', 'drawerContent', 'statusBarContent', 'extraContent', 'drawerWidth', 'mainContent', 'doCloseDrawer', 'hideFooter', 'version', 'logoHref', 'logoOnClick', 'preventScroll', 'extraFooterContent']);
    const drawerAlwaysVisible = drawerEnabled && screenIsWide;
    const useFloatingDrawer = drawerEnabled && !screenIsWide;
    const showShield = useFloatingDrawer && drawerOpen;
    const floatingDrawerHidden = useFloatingDrawer && !drawerOpen;
    const leftMarginStyles = drawerAlwaysVisible ? {
      width: "calc(100% - ".concat(drawerWidth, "px)"),
      marginLeft: "".concat(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 = (0, _classnames.default)({
      pointer: logoHref || logoOnClick
    });
    return (0, _preact.h)("div", _extends({
      className: "bg-near-white dark-blue sans-serif min-vh-100"
    }, rest), statusBarContent && (0, _preact.h)("div", {
      className: "sticky no-print top-0 bg-light-gray z-1 shadow-1",
      style: leftMarginStyles
    }, statusBarContent), drawerEnabled && (0, _preact.h)(_drawer.Drawer, {
      "aria-hidden": floatingDrawerHidden,
      className: useFloatingDrawer ? 'z-4 transition' : '',
      style: {
        width: "".concat(drawerWidth, "px"),
        transform: floatingDrawerHidden ? "translateX(".concat(-drawerWidth, "px)") : null
      }
    }, (0, _preact.h)("div", {
      className: (0, _classnames.default)('absolute left-0 bg-dark-blue z-1 top-0 pa2 pa3-l', {
        'shadow-1': drawerScrolledDown
      }),
      style: {
        width: "".concat(drawerWidth, "px"),
        height: drawerHeaderHeightPx
      }
    }, (0, _preact.h)(_envTag.default, {
      env: env
    }), screenIsWide && (0, _preact.h)("a", {
      className: (0, _classnames.default)('db link white', logoClasses),
      href: logoHref,
      onClick: logoOnClick
    }, (0, _preact.h)(_logo.LogoDark, null)), !screenIsWide && (0, _preact.h)("div", {
      className: "flex items-center justify-between"
    }, (0, _preact.h)(_button.TapIconButton, {
      icon: "close",
      color: "white",
      className: "flex-shrink-0",
      onClick: e => {
        e.preventDefault();
        doCloseDrawer();
      }
    }), (0, _preact.h)("a", {
      className: logoClasses,
      href: logoHref,
      onClick: logoOnClick
    }, (0, _preact.h)(_logo.LogoTextOnly, {
      className: "mh3",
      style: {
        paddingTop: '6px',
        width: '168px'
      }
    })))), (0, _preact.h)(DrawerContentWrapper, {
      scrolledDown: drawerScrolledDown,
      updateScrolledDown: this.updateScrolledDown,
      style: {
        paddingTop: drawerHeaderHeightPx,
        paddingBottom: '120px'
      }
    }, drawerContent)), showShield && (0, _preact.h)(_shield.Shield, {
      className: "z-3 dn-l",
      onClick: () => doCloseDrawer && doCloseDrawer()
    }), (0, _preact.h)("main", {
      style: leftMarginStyles,
      className: "bg-nearly-white overflow-x-hidden"
    }, mainContent, hideFooter !== true && (0, _preact.h)(_footer.Footer, {
      version: version,
      extra: extraFooterContent
    })), extraContent);
  }

}

exports.AppLayout = AppLayout;