framework7-react 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/navbar.js

@@ -1,132 +1,131 @@
 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); }
 
 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 { f7ready, f7 } from '../shared/f7';
-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) {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, getSlots } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTheme } from '../shared/use-theme.js';
+import NavLeft from './nav-left.js';
+import NavTitle from './nav-title.js';
+import NavRight from './nav-right.js';
+
+const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    sliding = true,
+    large,
+    largeTransparent,
+    transparent,
+    hidden,
+    noShadow,
+    noHairline,
+    backLink,
+    backLinkForce,
+    backLinkUrl,
+    backLinkShowText,
+    title,
+    subtitle,
+    titleLarge,
+    innerClass,
+    innerClassName
+  } = props;
+  const routerPositionClass = useRef('');
+  const largeCollapsed = useRef(false);
+  const routerNavbarRole = useRef(null);
+  const routerNavbarRoleDetailRoot = useRef(false);
+  const routerNavbarMasterStack = useRef(false);
+  const transparentVisible = useRef(false);
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const theme = useTheme();
+
+  const onHide = navbarEl => {
     if (elRef.current !== navbarEl) return;
     emit(props, 'navbarHide');
   };
 
-  var onShow = function onShow(navbarEl) {
+  const onShow = navbarEl => {
     if (elRef.current !== navbarEl) return;
     emit(props, 'navbarShow');
   };
 
-  var onExpand = function onExpand(navbarEl) {
+  const onExpand = navbarEl => {
     if (elRef.current !== navbarEl) return;
     largeCollapsed.current = false;
     emit(props, 'navbarExpand');
   };
 
-  var onCollapse = function onCollapse(navbarEl) {
+  const onCollapse = navbarEl => {
     if (elRef.current !== navbarEl) return;
     largeCollapsed.current = true;
     emit(props, 'navbarCollapse');
   };
 
-  var onNavbarTransparentShow = function onNavbarTransparentShow(navbarEl) {
+  const onNavbarTransparentShow = navbarEl => {
     if (elRef.current !== navbarEl) return;
     transparentVisible.current = true;
     emit(props, 'navbarTransparentShow');
   };
 
-  var onNavbarTransparentHide = function onNavbarTransparentHide(navbarEl) {
+  const onNavbarTransparentHide = navbarEl => {
     if (elRef.current !== navbarEl) return;
     transparentVisible.current = false;
     emit(props, 'navbarTransparentHide');
   };
 
-  var onNavbarPosition = function onNavbarPosition(navbarEl, position) {
+  const onNavbarPosition = (navbarEl, position) => {
     if (elRef.current !== navbarEl) return;
-    routerPositionClass.current = position ? "navbar-" + position : '';
+    routerPositionClass.current = position ? `navbar-${position}` : '';
   };
 
-  var onNavbarRole = function onNavbarRole(navbarEl, rolesData) {
+  const onNavbarRole = (navbarEl, rolesData) => {
     if (elRef.current !== navbarEl) return;
     routerNavbarRole.current = rolesData.role;
     routerNavbarRoleDetailRoot.current = rolesData.detailRoot;
   };
 
-  var onNavbarMasterStack = function onNavbarMasterStack(navbarEl) {
+  const onNavbarMasterStack = navbarEl => {
     if (elRef.current !== navbarEl) return;
     routerNavbarMasterStack.current = true;
   };
 
-  var onNavbarMasterUnstack = function onNavbarMasterUnstack(navbarEl) {
+  const onNavbarMasterUnstack = navbarEl => {
     if (elRef.current !== navbarEl) return;
     routerNavbarMasterStack.current = false;
   };
 
-  var hide = function hide(animate) {
+  const hide = animate => {
     if (!f7) return;
     f7.navbar.hide(elRef.current, animate);
   };
 
-  var show = function show(animate) {
+  const show = animate => {
     if (!f7) return;
     f7.navbar.show(elRef.current, animate);
   };
 
-  var size = function size() {
+  const size = () => {
     if (!f7) return;
     f7.navbar.size(elRef.current);
   };
 
-  var onBackClick = function onBackClick(event) {
+  const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      hide: hide,
-      show: show,
-      size: size
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    hide,
+    show,
+    size
+  }));
 
-  var attachEvents = function attachEvents() {
+  const attachEvents = () => {
     if (!elRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.navbar.size(elRef.current);
       f7.on('navbarShow', onShow);
       f7.on('navbarHide', onHide);
@@ -141,7 +140,7 @@ var Navbar = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('navbarShow', onShow);
     f7.off('navbarHide', onHide);
@@ -155,21 +154,21 @@ var Navbar = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('navbarTransparentHide', onNavbarTransparentHide);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var slots = getSlots(props);
-  var leftEl;
-  var titleEl;
-  var rightEl;
-  var titleLargeEl;
-  var addLeftTitleClass = theme && theme.ios && f7 && !f7.params.navbar.iosCenterTitle;
-  var addCenterTitleClass = theme && theme.md && f7 && f7.params.navbar.mdCenterTitle || theme && theme.aurora && f7 && f7.params.navbar.auroraCenterTitle;
-  var isLarge = large || largeTransparent;
-  var isTransparent = transparent || isLarge && largeTransparent;
-  var isTransparentVisible = isTransparent && transparentVisible.current;
-  var classes = classNames(className, 'navbar', routerPositionClass.current, {
+  const slots = getSlots(props);
+  let leftEl;
+  let titleEl;
+  let rightEl;
+  let titleLargeEl;
+  const addLeftTitleClass = theme && theme.ios && f7 && !f7.params.navbar.iosCenterTitle;
+  const addCenterTitleClass = theme && theme.md && f7 && f7.params.navbar.mdCenterTitle || theme && theme.aurora && f7 && f7.params.navbar.auroraCenterTitle;
+  const isLarge = large || largeTransparent;
+  const isTransparent = transparent || isLarge && largeTransparent;
+  const isTransparentVisible = isTransparent && transparentVisible.current;
+  const classes = classNames(className, 'navbar', routerPositionClass.current, {
     'navbar-hidden': hidden,
     'navbar-large': isLarge,
     'navbar-large-collapsed': isLarge && largeCollapsed.current,
@@ -204,7 +203,7 @@ var Navbar = /*#__PURE__*/forwardRef(function (props, ref) {
     rightEl = /*#__PURE__*/React.createElement(NavRight, null, slots['nav-right'], slots.right);
   }
 
-  var largeTitle = titleLarge;
+  let largeTitle = titleLarge;
   if (!largeTitle && large && title) largeTitle = title;
 
   if (largeTitle || slots['title-large']) {
@@ -215,9 +214,9 @@ var Navbar = /*#__PURE__*/forwardRef(function (props, ref) {
     }, largeTitle || '', slots['title-large']));
   }
 
-  var innerEl = /*#__PURE__*/React.createElement("div", {
+  const innerEl = /*#__PURE__*/React.createElement("div", {
     className: classNames('navbar-inner', innerClass, innerClassName, {
-      sliding: sliding,
+      sliding,
       'navbar-inner-left-title': addLeftTitleClass,
       'navbar-inner-centered-title': addCenterTitleClass
     })

package/{esm/components → components}/page-content.js

@@ -1,78 +1,76 @@
 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); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import Preloader from './preloader';
-import { useTab } from '../shared/use-tab';
-import { f7ready, f7 } from '../shared/f7';
-
-var PageContent = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      tab = props.tab,
-      tabActive = props.tabActive,
-      ptr = props.ptr,
-      ptrDistance = props.ptrDistance,
-      _props$ptrPreloader = props.ptrPreloader,
-      ptrPreloader = _props$ptrPreloader === void 0 ? true : _props$ptrPreloader,
-      ptrBottom = props.ptrBottom,
-      ptrMousewheel = props.ptrMousewheel,
-      infinite = props.infinite,
-      infiniteTop = props.infiniteTop,
-      infiniteDistance = props.infiniteDistance,
-      _props$infinitePreloa = props.infinitePreloader,
-      infinitePreloader = _props$infinitePreloa === void 0 ? true : _props$infinitePreloa,
-      hideBarsOnScroll = props.hideBarsOnScroll,
-      hideNavbarOnScroll = props.hideNavbarOnScroll,
-      hideToolbarOnScroll = props.hideToolbarOnScroll,
-      messagesContent = props.messagesContent,
-      loginScreen = props.loginScreen;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var onPtrPullStart = function onPtrPullStart(el) {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import Preloader from './preloader.js';
+import { useTab } from '../shared/use-tab.js';
+import { f7ready, f7 } from '../shared/f7.js';
+
+const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    tab,
+    tabActive,
+    ptr,
+    ptrDistance,
+    ptrPreloader = true,
+    ptrBottom,
+    ptrMousewheel,
+    infinite,
+    infiniteTop,
+    infiniteDistance,
+    infinitePreloader = true,
+    hideBarsOnScroll,
+    hideNavbarOnScroll,
+    hideToolbarOnScroll,
+    messagesContent,
+    loginScreen
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const onPtrPullStart = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullStart');
   };
 
-  var onPtrPullMove = function onPtrPullMove(el) {
+  const onPtrPullMove = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullMove');
   };
 
-  var onPtrPullEnd = function onPtrPullEnd(el) {
+  const onPtrPullEnd = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullEnd');
   };
 
-  var onPtrRefresh = function onPtrRefresh(el, done) {
+  const onPtrRefresh = (el, done) => {
     if (elRef.current !== el) return;
     emit(props, 'ptrRefresh', done);
   };
 
-  var onPtrDone = function onPtrDone(el) {
+  const onPtrDone = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrDone');
   };
 
-  var onInfinite = function onInfinite(el) {
+  const onInfinite = el => {
     if (elRef.current !== el) return;
     emit(props, 'infinite');
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
   useTab(elRef, props);
 
-  var attachEvents = function attachEvents() {
-    f7ready(function () {
+  const attachEvents = () => {
+    f7ready(() => {
       if (ptr) {
         f7.on('ptrPullStart', onPtrPullStart);
         f7.on('ptrPullMove', onPtrPullMove);
@@ -87,7 +85,7 @@ var PageContent = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('ptrPullStart', onPtrPullStart);
     f7.off('ptrPullMove', onPtrPullMove);
@@ -97,12 +95,12 @@ var PageContent = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('infinite', onInfinite);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var ptrEl;
-  var infiniteEl;
+  let ptrEl;
+  let infiniteEl;
 
   if (ptr && ptrPreloader) {
     ptrEl = /*#__PURE__*/React.createElement("div", {
@@ -118,8 +116,8 @@ var PageContent = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  var classes = classNames(className, 'page-content', {
-    tab: tab,
+  const classes = classNames(className, 'page-content', {
+    tab,
     'tab-active': tabActive,
     'ptr-content': ptr,
     'ptr-bottom': ptrBottom,