zmp-react/esm/components/navbar.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { classNames, getExtraAttrs, emit, getSlots } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';
import { useTheme } from '../shared/use-theme';
import NavLeft from './nav-left';
import NavTitle from './nav-title';
import NavRight from './nav-right';

var Navbar = /*#__PURE__*/forwardRef(function (props, ref) {
  var className = props.className,
      id = props.id,
      style = props.style,
      _props$sliding = props.sliding,
      sliding = _props$sliding === void 0 ? true : _props$sliding,
      large = props.large,
      largeTransparent = props.largeTransparent,
      transparent = props.transparent,
      hidden = props.hidden,
      noShadow = props.noShadow,
      noHairline = props.noHairline,
      backLink = props.backLink,
      backLinkForce = props.backLinkForce,
      backLinkUrl = props.backLinkUrl,
      backLinkShowText = props.backLinkShowText,
      title = props.title,
      subtitle = props.subtitle,
      titleLarge = props.titleLarge,
      innerClass = props.innerClass,
      innerClassName = props.innerClassName;
  var routerPositionClass = useRef('');
  var largeCollapsed = useRef(false);
  var routerNavbarRole = useRef(null);
  var routerNavbarRoleDetailRoot = useRef(false);
  var routerNavbarMasterStack = useRef(false);
  var transparentVisible = useRef(false);
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);
  var theme = useTheme();

  var onHide = function onHide(navbarEl) {
    if (elRef.current !== navbarEl) return;
    emit(props, 'navbarHide');
  };

  var onShow = function onShow(navbarEl) {
    if (elRef.current !== navbarEl) return;
    emit(props, 'navbarShow');
  };

  var onExpand = function onExpand(navbarEl) {
    if (elRef.current !== navbarEl) return;
    largeCollapsed.current = false;
    emit(props, 'navbarExpand');
  };

  var onCollapse = function onCollapse(navbarEl) {
    if (elRef.current !== navbarEl) return;
    largeCollapsed.current = true;
    emit(props, 'navbarCollapse');
  };

  var onNavbarTransparentShow = function onNavbarTransparentShow(navbarEl) {
    if (elRef.current !== navbarEl) return;
    transparentVisible.current = true;
    emit(props, 'navbarTransparentShow');
  };

  var onNavbarTransparentHide = function onNavbarTransparentHide(navbarEl) {
    if (elRef.current !== navbarEl) return;
    transparentVisible.current = false;
    emit(props, 'navbarTransparentHide');
  };

  var onNavbarPosition = function onNavbarPosition(navbarEl, position) {
    if (elRef.current !== navbarEl) return;
    routerPositionClass.current = position ? "navbar-" + position : '';
  };

  var onNavbarRole = function onNavbarRole(navbarEl, rolesData) {
    if (elRef.current !== navbarEl) return;
    routerNavbarRole.current = rolesData.role;
    routerNavbarRoleDetailRoot.current = rolesData.detailRoot;
  };

  var onNavbarMasterStack = function onNavbarMasterStack(navbarEl) {
    if (elRef.current !== navbarEl) return;
    routerNavbarMasterStack.current = true;
  };

  var onNavbarMasterUnstack = function onNavbarMasterUnstack(navbarEl) {
    if (elRef.current !== navbarEl) return;
    routerNavbarMasterStack.current = false;
  };

  var hide = function hide(animate) {
    if (!zmp) return;
    zmp.navbar.hide(elRef.current, animate);
  };

  var show = function show(animate) {
    if (!zmp) return;
    zmp.navbar.show(elRef.current, animate);
  };

  var size = function size() {
    if (!zmp) return;
    zmp.navbar.size(elRef.current);
  };

  var onBackClick = function onBackClick(event) {
    emit(props, 'backClick clickBack', event);
  };

  useImperativeHandle(ref, function () {
    return {
      el: elRef.current,
      hide: hide,
      show: show,
      size: size
    };
  });

  var attachEvents = function attachEvents() {
    if (!elRef.current) return;
    zmpready(function () {
      zmp.navbar.size(elRef.current);
      zmp.on('navbarShow', onShow);
      zmp.on('navbarHide', onHide);
      zmp.on('navbarCollapse', onCollapse);
      zmp.on('navbarExpand', onExpand);
      zmp.on('navbarPosition', onNavbarPosition);
      zmp.on('navbarRole', onNavbarRole);
      zmp.on('navbarMasterStack', onNavbarMasterStack);
      zmp.on('navbarMasterUnstack', onNavbarMasterUnstack);
      zmp.on('navbarTransparentShow', onNavbarTransparentShow);
      zmp.on('navbarTransparentHide', onNavbarTransparentHide);
    });
  };

  var detachEvents = function detachEvents() {
    if (!zmp) return;
    zmp.off('navbarShow', onShow);
    zmp.off('navbarHide', onHide);
    zmp.off('navbarCollapse', onCollapse);
    zmp.off('navbarExpand', onExpand);
    zmp.off('navbarPosition', onNavbarPosition);
    zmp.off('navbarRole', onNavbarRole);
    zmp.off('navbarMasterStack', onNavbarMasterStack);
    zmp.off('navbarMasterUnstack', onNavbarMasterUnstack);
    zmp.off('navbarTransparentShow', onNavbarTransparentShow);
    zmp.off('navbarTransparentHide', onNavbarTransparentHide);
  };

  useIsomorphicLayoutEffect(function () {
    attachEvents();
    return detachEvents;
  });
  var slots = getSlots(props);
  var leftEl;
  var titleEl;
  var rightEl;
  var titleLargeEl;
  var addLeftTitleClass = theme && theme.ios && zmp && !zmp.params.navbar.iosCenterTitle;
  var addCenterTitleClass = theme && theme.md && zmp && zmp.params.navbar.mdCenterTitle || theme && theme.aurora && zmp && zmp.params.navbar.auroraCenterTitle;
  var isLarge = large || largeTransparent;
  var isTransparent = transparent || isLarge && largeTransparent;
  var isTransparentVisible = isTransparent && transparentVisible.current;
  var classes = classNames(className, 'navbar', routerPositionClass.current, {
    'navbar-hidden': hidden,
    'navbar-large': isLarge,
    'navbar-large-collapsed': isLarge && largeCollapsed.current,
    'navbar-transparent': isTransparent,
    'navbar-transparent-visible': isTransparentVisible,
    'navbar-master': routerNavbarRole.current === 'master',
    'navbar-master-detail': routerNavbarRole.current === 'detail',
    'navbar-master-detail-root': routerNavbarRoleDetailRoot.current === true,
    'navbar-master-stacked': routerNavbarMasterStack.current === true,
    'no-shadow': noShadow,
    'no-hairline': noHairline
  }, colorClasses(props));

  if (backLink || slots['nav-left'] || slots.left) {
    leftEl = /*#__PURE__*/React.createElement(NavLeft, {
      backLink: backLink,
      backLinkUrl: backLinkUrl,
      backLinkForce: backLinkForce,
      backLinkShowText: backLinkShowText,
      onBackClick: onBackClick
    }, slots['nav-left'], slots.left);
  }

  if (title || subtitle || slots.title) {
    titleEl = /*#__PURE__*/React.createElement(NavTitle, {
      title: title,
      subtitle: subtitle
    }, slots.title);
  }

  if (slots['nav-right'] || slots.right) {
    rightEl = /*#__PURE__*/React.createElement(NavRight, null, slots['nav-right'], slots.right);
  }

  var largeTitle = titleLarge;
  if (!largeTitle && large && title) largeTitle = title;

  if (largeTitle || slots['title-large']) {
    titleLargeEl = /*#__PURE__*/React.createElement("div", {
      className: "title-large"
    }, /*#__PURE__*/React.createElement("div", {
      className: "title-large-text"
    }, largeTitle || '', slots['title-large']));
  }

  var innerEl = /*#__PURE__*/React.createElement("div", {
    className: classNames('navbar-inner', innerClass, innerClassName, {
      sliding: sliding,
      'navbar-inner-left-title': addLeftTitleClass,
      'navbar-inner-centered-title': addCenterTitleClass
    })
  }, leftEl, titleEl, rightEl, titleLargeEl, slots.default);
  return /*#__PURE__*/React.createElement("div", _extends({
    id: id,
    style: style,
    className: classes,
    ref: elRef
  }, extraAttrs), /*#__PURE__*/React.createElement("div", {
    className: "navbar-bg"
  }), slots['before-inner'], innerEl, slots['after-inner']);
});
Navbar.displayName = 'zmp-navbar';
export default Navbar;