framework7-react 7.0.8 → 8.0.0-beta.1

package/components/messages.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.js';
 import { classNames, getExtraAttrs, noUndefinedProps } from '../shared/utils.js';
@@ -8,6 +7,7 @@ import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
 
 
+
 const Messages = /*#__PURE__*/forwardRef((props, ref) => {
   const f7Messages = useRef(null);
   const mounted = useRef(false);
@@ -41,7 +41,6 @@ const Messages = /*#__PURE__*/forwardRef((props, ref) => {
     el: elRef.current,
     f7Messages: () => f7Messages.current
   }));
-
   const onMount = () => {
     if (!init) return;
     f7ready(() => {
@@ -62,32 +61,26 @@ const Messages = /*#__PURE__*/forwardRef((props, ref) => {
         customClassMessageRule,
         renderMessage
       }));
-
       if (typing) {
         f7Messages.current.showTyping();
       }
     });
   };
-
   const onDestroy = () => {
     if (f7Messages.current && f7Messages.current.destroy) f7Messages.current.destroy();
     f7Messages.current = null;
   };
-
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
   const currentChildrenLength = children ? React.Children.count(children) : 0;
-
   if (f7Messages.current && scrollMessages) {
     const beforeChildrenLength = reactChildrenBefore.current || 0;
-
     if (currentChildrenLength !== beforeChildrenLength) {
       f7Messages.current.setScrollData();
     }
   }
-
   reactChildrenBefore.current = currentChildrenLength;
   useIsomorphicLayoutEffect(() => {
     const wasMounted = mounted.current;
@@ -96,31 +89,25 @@ const Messages = /*#__PURE__*/forwardRef((props, ref) => {
     const childElements = elRef.current.children;
     if (!childElements) return;
     const childrenAfterUpdated = childElements.length;
-
     if (!wasMounted) {
       for (let i = 0; i < childElements.length; i += 1) {
         childElements[i].classList.add('message-appeared');
       }
-
       return;
     }
-
     for (let i = 0; i < childElements.length; i += 1) {
       if (!childElements[i].classList.contains('message-appeared')) {
         childElements[i].classList.add('message-appear-from-bottom');
       }
     }
-
     if (f7Messages.current) {
       if (f7Messages.current.layout && autoLayout) {
         f7Messages.current.layout();
       }
-
       if (childrenBeforeUpdated.current !== childrenAfterUpdated && f7Messages.current.scroll && f7Messages.current.scrollData && scrollMessages) {
         f7Messages.current.scrollWithEdgeCheck(true);
       }
     }
-
     childrenBeforeUpdated.current = childrenAfterUpdated;
   });
   watchProp(typing, newValue => {

package/components/nav-left.js

@@ -1,11 +1,11 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { useTheme } from '../shared/use-theme.js';
 import Link from './link.js';
 
+
 const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
@@ -20,11 +20,9 @@ const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-
   const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current
   }));
@@ -32,7 +30,6 @@ const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
   let linkEl;
   let needBackLinkText = backLinkShowText;
   if (typeof needBackLinkText === 'undefined') needBackLinkText = !theme.md;
-
   if (backLink) {
     const text = backLink !== true && needBackLinkText ? backLink : undefined;
     linkEl = /*#__PURE__*/React.createElement(Link, {
@@ -45,7 +42,6 @@ const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: onBackClick
     });
   }
-
   const classes = classNames(className, 'left', {
     sliding
   }, colorClasses(props));

package/components/nav-right.js

@@ -1,9 +1,9 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 
+
 const NavRight = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,

package/components/nav-title-large.js

@@ -1,9 +1,9 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 
+
 const NavTitleLarge = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,

package/components/nav-title.js

@@ -1,9 +1,9 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 
+
 const NavTitle = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
@@ -20,13 +20,11 @@ const NavTitle = /*#__PURE__*/forwardRef((props, ref) => {
     el: elRef.current
   }));
   let subtitleEl;
-
   if (subtitle) {
     subtitleEl = /*#__PURE__*/React.createElement("span", {
       className: "subtitle"
     }, subtitle);
   }
-
   const classes = classNames(className, 'title', {
     sliding
   }, colorClasses(props));

package/components/navbar.d.ts

@@ -15,8 +15,7 @@ export interface NavbarProps {
   title ?: string;
   subtitle ?: string;
   hidden ?: boolean;
-  noShadow ?: boolean;
-  noHairline ?: boolean;
+  outline ?: boolean;
   innerClass ?: string;
   innerClassName ?: string;
   large ?: boolean;

package/components/navbar.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.js';
 import { classNames, getExtraAttrs, emit, getSlots } from '../shared/utils.js';
@@ -10,6 +9,7 @@ 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,
@@ -20,8 +20,7 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     largeTransparent,
     transparent,
     hidden,
-    noShadow,
-    noHairline,
+    outline = true,
     backLink,
     backLinkForce,
     backLinkUrl,
@@ -41,88 +40,72 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
   const theme = useTheme();
-
   const onHide = navbarEl => {
     if (elRef.current !== navbarEl) return;
     emit(props, 'navbarHide');
   };
-
   const onShow = navbarEl => {
     if (elRef.current !== navbarEl) return;
     emit(props, 'navbarShow');
   };
-
   const onExpand = navbarEl => {
     if (elRef.current !== navbarEl) return;
     largeCollapsed.current = false;
     emit(props, 'navbarExpand');
   };
-
   const onCollapse = navbarEl => {
     if (elRef.current !== navbarEl) return;
     largeCollapsed.current = true;
     emit(props, 'navbarCollapse');
   };
-
   const onNavbarTransparentShow = navbarEl => {
     if (elRef.current !== navbarEl) return;
     transparentVisible.current = true;
     emit(props, 'navbarTransparentShow');
   };
-
   const onNavbarTransparentHide = navbarEl => {
     if (elRef.current !== navbarEl) return;
     transparentVisible.current = false;
     emit(props, 'navbarTransparentHide');
   };
-
   const onNavbarPosition = (navbarEl, position) => {
     if (elRef.current !== navbarEl) return;
     routerPositionClass.current = position ? `navbar-${position}` : '';
   };
-
   const onNavbarRole = (navbarEl, rolesData) => {
     if (elRef.current !== navbarEl) return;
     routerNavbarRole.current = rolesData.role;
     routerNavbarRoleDetailRoot.current = rolesData.detailRoot;
   };
-
   const onNavbarMasterStack = navbarEl => {
     if (elRef.current !== navbarEl) return;
     routerNavbarMasterStack.current = true;
   };
-
   const onNavbarMasterUnstack = navbarEl => {
     if (elRef.current !== navbarEl) return;
     routerNavbarMasterStack.current = false;
   };
-
   const hide = animate => {
     if (!f7) return;
     f7.navbar.hide(elRef.current, animate);
   };
-
   const show = animate => {
     if (!f7) return;
     f7.navbar.show(elRef.current, animate);
   };
-
   const size = () => {
     if (!f7) return;
     f7.navbar.size(elRef.current);
   };
-
   const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current,
     hide,
     show,
     size
   }));
-
   const attachEvents = () => {
     if (!elRef.current) return;
     f7ready(() => {
@@ -139,7 +122,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('navbarTransparentHide', onNavbarTransparentHide);
     });
   };
-
   const detachEvents = () => {
     if (!f7) return;
     f7.off('navbarShow', onShow);
@@ -153,7 +135,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('navbarTransparentShow', onNavbarTransparentShow);
     f7.off('navbarTransparentHide', onNavbarTransparentHide);
   };
-
   useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
@@ -164,7 +145,7 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
   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 addCenterTitleClass = theme && theme.md && f7 && f7.params.navbar.mdCenterTitle;
   const isLarge = large || largeTransparent;
   const isTransparent = transparent || isLarge && largeTransparent;
   const isTransparentVisible = isTransparent && transparentVisible.current;
@@ -178,10 +159,8 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
     '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
+    'no-outline': !outline
   }, colorClasses(props));
-
   if (backLink || slots['nav-left'] || slots.left) {
     leftEl = /*#__PURE__*/React.createElement(NavLeft, {
       backLink: backLink,
@@ -191,21 +170,17 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
       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);
   }
-
   let largeTitle = titleLarge;
   if (!largeTitle && large && title) largeTitle = title;
-
   if (largeTitle || slots['title-large']) {
     titleLargeEl = /*#__PURE__*/React.createElement("div", {
       className: "title-large"
@@ -213,7 +188,6 @@ const Navbar = /*#__PURE__*/forwardRef((props, ref) => {
       className: "title-large-text"
     }, largeTitle || '', slots['title-large']));
   }
-
   const innerEl = /*#__PURE__*/React.createElement("div", {
     className: classNames('navbar-inner', innerClass, innerClassName, {
       sliding,

package/components/page-content.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.js';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
@@ -8,6 +7,7 @@ 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,
@@ -33,42 +33,34 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
-
   const onPtrPullStart = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullStart');
   };
-
   const onPtrPullMove = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullMove');
   };
-
   const onPtrPullEnd = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrPullEnd');
   };
-
   const onPtrRefresh = (el, done) => {
     if (elRef.current !== el) return;
     emit(props, 'ptrRefresh', done);
   };
-
   const onPtrDone = el => {
     if (elRef.current !== el) return;
     emit(props, 'ptrDone');
   };
-
   const onInfinite = el => {
     if (elRef.current !== el) return;
     emit(props, 'infinite');
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current
   }));
   useTab(elRef, props);
-
   const attachEvents = () => {
     f7ready(() => {
       if (ptr) {
@@ -78,13 +70,11 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
         f7.on('ptrRefresh', onPtrRefresh);
         f7.on('ptrDone', onPtrDone);
       }
-
       if (infinite) {
         f7.on('infinite', onInfinite);
       }
     });
   };
-
   const detachEvents = () => {
     if (!f7) return;
     f7.off('ptrPullStart', onPtrPullStart);
@@ -94,14 +84,12 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('ptrDone', onPtrDone);
     f7.off('infinite', onInfinite);
   };
-
   useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
   let ptrEl;
   let infiniteEl;
-
   if (ptr && ptrPreloader) {
     ptrEl = /*#__PURE__*/React.createElement("div", {
       className: "ptr-preloader"
@@ -109,13 +97,11 @@ const PageContent = /*#__PURE__*/forwardRef((props, ref) => {
       className: "ptr-arrow"
     }));
   }
-
   if (infinite && infinitePreloader) {
     infiniteEl = /*#__PURE__*/React.createElement(Preloader, {
       className: "infinite-scroll-preloader"
     });
   }
-
   const classes = classNames(className, 'page-content', {
     tab,
     'tab-active': tabActive,

package/components/page.d.ts

@@ -8,7 +8,6 @@ export interface PageProps {
   className?: string;
   style?: React.CSSProperties;
   name ?: string;
-  stacked ?: boolean;
   withSubnavbar ?: boolean;
   subnavbar ?: boolean;
   withNavbarLarge ?: boolean;