zmp-react/cjs/components/navbar.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

var _zmp = require("../shared/zmp");

var _useTheme = require("../shared/use-theme");

var _navLeft = _interopRequireDefault(require("./nav-left"));

var _navTitle = _interopRequireDefault(require("./nav-title"));

var _navRight = _interopRequireDefault(require("./nav-right"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Navbar = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)('');
  var largeCollapsed = (0, _react.useRef)(false);
  var routerNavbarRole = (0, _react.useRef)(null);
  var routerNavbarRoleDetailRoot = (0, _react.useRef)(false);
  var routerNavbarMasterStack = (0, _react.useRef)(false);
  var transparentVisible = (0, _react.useRef)(false);
  var extraAttrs = (0, _utils.getExtraAttrs)(props);
  var elRef = (0, _react.useRef)(null);
  var theme = (0, _useTheme.useTheme)();

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

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

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

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

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

  var onNavbarTransparentHide = function onNavbarTransparentHide(navbarEl) {
    if (elRef.current !== navbarEl) return;
    transparentVisible.current = false;
    (0, _utils.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.zmp) return;

    _zmp.zmp.navbar.hide(elRef.current, animate);
  };

  var show = function show(animate) {
    if (!_zmp.zmp) return;

    _zmp.zmp.navbar.show(elRef.current, animate);
  };

  var size = function size() {
    if (!_zmp.zmp) return;

    _zmp.zmp.navbar.size(elRef.current);
  };

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

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

  var attachEvents = function attachEvents() {
    if (!elRef.current) return;
    (0, _zmp.zmpready)(function () {
      _zmp.zmp.navbar.size(elRef.current);

      _zmp.zmp.on('navbarShow', onShow);

      _zmp.zmp.on('navbarHide', onHide);

      _zmp.zmp.on('navbarCollapse', onCollapse);

      _zmp.zmp.on('navbarExpand', onExpand);

      _zmp.zmp.on('navbarPosition', onNavbarPosition);

      _zmp.zmp.on('navbarRole', onNavbarRole);

      _zmp.zmp.on('navbarMasterStack', onNavbarMasterStack);

      _zmp.zmp.on('navbarMasterUnstack', onNavbarMasterUnstack);

      _zmp.zmp.on('navbarTransparentShow', onNavbarTransparentShow);

      _zmp.zmp.on('navbarTransparentHide', onNavbarTransparentHide);
    });
  };

  var detachEvents = function detachEvents() {
    if (!_zmp.zmp) return;

    _zmp.zmp.off('navbarShow', onShow);

    _zmp.zmp.off('navbarHide', onHide);

    _zmp.zmp.off('navbarCollapse', onCollapse);

    _zmp.zmp.off('navbarExpand', onExpand);

    _zmp.zmp.off('navbarPosition', onNavbarPosition);

    _zmp.zmp.off('navbarRole', onNavbarRole);

    _zmp.zmp.off('navbarMasterStack', onNavbarMasterStack);

    _zmp.zmp.off('navbarMasterUnstack', onNavbarMasterUnstack);

    _zmp.zmp.off('navbarTransparentShow', onNavbarTransparentShow);

    _zmp.zmp.off('navbarTransparentHide', onNavbarTransparentHide);
  };

  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    attachEvents();
    return detachEvents;
  });
  var slots = (0, _utils.getSlots)(props);
  var leftEl;
  var titleEl;
  var rightEl;
  var titleLargeEl;
  var addLeftTitleClass = theme && theme.ios && _zmp.zmp && !_zmp.zmp.params.navbar.iosCenterTitle;
  var addCenterTitleClass = theme && theme.md && _zmp.zmp && _zmp.zmp.params.navbar.mdCenterTitle || theme && theme.aurora && _zmp.zmp && _zmp.zmp.params.navbar.auroraCenterTitle;
  var isLarge = large || largeTransparent;
  var isTransparent = transparent || isLarge && largeTransparent;
  var isTransparentVisible = isTransparent && transparentVisible.current;
  var classes = (0, _utils.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
  }, (0, _mixins.colorClasses)(props));

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

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

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

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

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

  var innerEl = /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _utils.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.default.createElement("div", (0, _extends2.default)({
    id: id,
    style: style,
    className: classes,
    ref: elRef
  }, extraAttrs), /*#__PURE__*/_react.default.createElement("div", {
    className: "navbar-bg"
  }), slots['before-inner'], innerEl, slots['after-inner']);
});
Navbar.displayName = 'zmp-navbar';
var _default = Navbar;
exports.default = _default;