framework7-react 7.1.5 → 8.0.0-beta.2

package/components/page.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, getSlots, emit } from '../shared/utils.js';
@@ -7,13 +6,13 @@ import { colorClasses } from '../shared/mixins.js';
 import { f7ready, f7 } from '../shared/f7.js';
 import PageContent from './page-content.js';
 
+
 const Page = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
     id,
     style,
     name,
-    stacked,
     withSubnavbar,
     subnavbar,
     withNavbarLarge,
@@ -49,158 +48,118 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
   const hasNavbarLargeCollapsed = useRef(false);
   const hasCardExpandableOpened = useRef(false);
   const routerPositionClass = useRef('');
-  const routerForceUnstack = useRef(false);
   const routerPageRole = useRef(null);
   const routerPageRoleDetailRoot = useRef(false);
   const routerPageMasterStack = useRef(false);
   const extraAttrs = getExtraAttrs(props);
-  const elRef = useRef(null); // Main Page Events
+  const elRef = useRef(null);
 
+  // Main Page Events
   const onPageMounted = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageMounted', page);
   };
-
   const onPageInit = page => {
     if (elRef.current !== page.el) return;
-
     if (typeof withSubnavbar === 'undefined' && typeof subnavbar === 'undefined') {
       if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length || page.$el.children('.navbar').find('.subnavbar').length) {
         hasSubnavbar.current = true;
       }
     }
-
     if (typeof withNavbarLarge === 'undefined' && typeof navbarLarge === 'undefined') {
       if (page.$navbarEl && page.$navbarEl.hasClass('navbar-large')) {
         hasNavbarLarge.current = true;
       }
     }
-
     emit(props, 'pageInit', page);
   };
-
   const onPageReinit = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageReinit', page);
   };
-
   const onPageBeforeIn = page => {
     if (elRef.current !== page.el) return;
-
     if (!page.swipeBack) {
       if (page.from === 'next') {
         routerPositionClass.current = 'page-next';
       }
-
       if (page.from === 'previous') {
         routerPositionClass.current = 'page-previous';
       }
     }
-
     emit(props, 'pageBeforeIn', page);
   };
-
   const onPageBeforeOut = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeOut', page);
   };
-
   const onPageAfterOut = page => {
     if (elRef.current !== page.el) return;
-
     if (page.to === 'next') {
       routerPositionClass.current = 'page-next';
     }
-
     if (page.to === 'previous') {
       routerPositionClass.current = 'page-previous';
     }
-
     emit(props, 'pageAfterOut', page);
   };
-
   const onPageAfterIn = page => {
     if (elRef.current !== page.el) return;
     routerPositionClass.current = 'page-current';
     emit(props, 'pageAfterIn', page);
   };
-
   const onPageBeforeRemove = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeRemove', page);
   };
-
   const onPageBeforeUnmount = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeUnmount', page);
-  }; // Helper events
-
-
-  const onPageStack = pageEl => {
-    if (elRef.current !== pageEl) return;
-    routerForceUnstack.current = false;
-  };
-
-  const onPageUnstack = pageEl => {
-    if (elRef.current !== pageEl) return;
-    routerForceUnstack.current = true;
   };
-
   const onPagePosition = (pageEl, position) => {
     if (elRef.current !== pageEl) return;
     routerPositionClass.current = `page-${position}`;
   };
-
   const onPageRole = (pageEl, rolesData) => {
     if (elRef.current !== pageEl) return;
     routerPageRole.current = rolesData.role;
     routerPageRoleDetailRoot.current = rolesData.detailRoot;
   };
-
   const onPageMasterStack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerPageMasterStack.current = true;
   };
-
   const onPageMasterUnstack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerPageMasterStack.current = false;
   };
-
   const onPageNavbarLargeCollapsed = pageEl => {
     if (elRef.current !== pageEl) return;
     hasNavbarLargeCollapsed.current = true;
   };
-
   const onPageNavbarLargeExpanded = pageEl => {
     if (elRef.current !== pageEl) return;
     hasNavbarLargeCollapsed.current = false;
   };
-
   const onCardOpened = (cardEl, pageEl) => {
     if (elRef.current !== pageEl) return;
     hasCardExpandableOpened.current = true;
   };
-
   const onCardClose = (cardEl, pageEl) => {
     if (elRef.current !== pageEl) return;
     hasCardExpandableOpened.current = false;
   };
-
   const onPageTabShow = pageEl => {
     if (elRef.current !== pageEl) return;
     emit(props, 'pageTabShow');
   };
-
   const onPageTabHide = pageEl => {
     if (elRef.current !== pageEl) return;
     emit(props, 'pageTabHide');
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current
   }));
-
   const attachEvents = () => {
     f7ready(() => {
       f7.on('pageMounted', onPageMounted);
@@ -212,8 +171,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('pageAfterIn', onPageAfterIn);
       f7.on('pageBeforeRemove', onPageBeforeRemove);
       f7.on('pageBeforeUnmount', onPageBeforeUnmount);
-      f7.on('pageStack', onPageStack);
-      f7.on('pageUnstack', onPageUnstack);
       f7.on('pagePosition', onPagePosition);
       f7.on('pageRole', onPageRole);
       f7.on('pageMasterStack', onPageMasterStack);
@@ -226,7 +183,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('pageTabHide', onPageTabHide);
     });
   };
-
   const detachEvents = () => {
     if (!f7) return;
     f7.off('pageMounted', onPageMounted);
@@ -238,8 +194,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('pageAfterIn', onPageAfterIn);
     f7.off('pageBeforeRemove', onPageBeforeRemove);
     f7.off('pageBeforeUnmount', onPageBeforeUnmount);
-    f7.off('pageStack', onPageStack);
-    f7.off('pageUnstack', onPageUnstack);
     f7.off('pagePosition', onPagePosition);
     f7.off('pageRole', onPageRole);
     f7.off('pageMasterStack', onPageMasterStack);
@@ -251,7 +205,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('pageTabShow', onPageTabShow);
     f7.off('pageTabHide', onPageTabHide);
   };
-
   useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
@@ -268,40 +221,31 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
   let hasSubnavbarComputed;
   let hasNavbarLargeComputed;
   let hasMessages = messagesContent;
-
   if (slotsDefault) {
     slotsDefault.forEach(child => {
       if (typeof child === 'undefined') return;
       let isFixedTag = false;
       const tag = child.type && (child.type.displayName || child.type.name);
-
       if (!tag) {
         if (pageContent) staticList.push(child);
         return;
       }
-
       if (tag === 'f7-subnavbar') hasSubnavbarComputed = true;
-
       if (tag === 'f7-navbar') {
         if (child.props && child.props.large) hasNavbarLargeComputed = true;
       }
-
       if (typeof hasMessages === 'undefined' && tag === 'f7-messages') hasMessages = true;
-
       if (fixedTags.indexOf(tag) >= 0) {
         isFixedTag = true;
       }
-
       if (pageContent) {
         if (isFixedTag) fixedList.push(child);else staticList.push(child);
       }
     });
   }
-
   const forceSubnavbar = typeof subnavbar === 'undefined' && typeof withSubnavbar === 'undefined' ? hasSubnavbarComputed || hasSubnavbar.current : false;
   const forceNavbarLarge = typeof navbarLarge === 'undefined' && typeof withNavbarLarge === 'undefined' ? hasNavbarLargeComputed || hasNavbarLarge.current : false;
   const classes = classNames(className, 'page', routerPositionClass.current, {
-    stacked: stacked && !routerForceUnstack.current,
     tabs,
     'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
     'page-with-navbar-large': navbarLarge || withNavbarLarge || forceNavbarLarge,
@@ -316,7 +260,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
     'page-with-card-opened': hasCardExpandableOpened.current === true,
     'login-screen-page': loginScreen
   }, colorClasses(props));
-
   if (!pageContent) {
     return /*#__PURE__*/React.createElement("div", _extends({
       id: id,
@@ -326,7 +269,6 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => {
       ref: elRef
     }, extraAttrs), slotsFixed, slotsStatic, slotsDefault);
   }
-
   const pageContentEl = /*#__PURE__*/React.createElement(PageContent, {
     ptr: ptr,
     ptrDistance: ptrDistance,

package/components/panel.d.ts

@@ -14,6 +14,7 @@ export interface PanelProps {
   cover ?: boolean;
   reveal ?: boolean;
   push ?: boolean;
+  floating ?: boolean;
   left ?: boolean;
   right ?: boolean;
   opened ?: boolean;

package/components/panel.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, emit } from '../shared/utils.js';
@@ -8,6 +7,7 @@ import { f7ready, f7 } from '../shared/f7.js';
 import { watchProp } from '../shared/watch-prop.js';
 
 
+
 const Panel = /*#__PURE__*/forwardRef((props, ref) => {
   const f7Panel = useRef(null);
   const {
@@ -21,6 +21,7 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     cover,
     reveal,
     push,
+    floating,
     left,
     // right,
     opened,
@@ -43,60 +44,48 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
   const isClosing = useRef(false);
   const isCollapsed = useRef(false);
   const isBreakpoint = useRef(false);
-
   const onOpen = event => {
     isOpened.current = true;
     isClosing.current = false;
     emit(props, 'panelOpen', event);
   };
-
   const onOpened = event => {
     emit(props, 'panelOpened', event);
   };
-
   const onClose = event => {
     isOpened.current = false;
     isClosing.current = true;
     emit(props, 'panelClose', event);
   };
-
   const onClosed = event => {
     isClosing.current = false;
     emit(props, 'panelClosed', event);
   };
-
   const onBackdropClick = event => {
     emit(props, 'click panelBackdropClick', event);
   };
-
   const onSwipe = event => {
     emit(props, 'panelSwipe', event);
   };
-
   const onSwipeOpen = event => {
     emit(props, 'panelSwipeOpen', event);
   };
-
   const onBreakpoint = event => {
     isBreakpoint.current = true;
     isCollapsed.current = false;
     emit(props, 'panelBreakpoint', event);
   };
-
   const onCollapsedBreakpoint = event => {
     isBreakpoint.current = false;
     isCollapsed.current = true;
     emit(props, 'panelCollapsedBreakpoint', event);
   };
-
   const onResize = function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     emit(props, 'panelResize', ...args);
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current,
     f7Panel: () => f7Panel.current
@@ -107,14 +96,12 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
   });
   watchProp(opened, newValue => {
     if (!f7Panel.current) return;
-
     if (newValue) {
       f7Panel.current.open();
     } else {
       f7Panel.current.close();
     }
   });
-
   const modalEvents = method => {
     if (!f7Panel.current) return;
     f7Panel.current[method]('open', onOpen);
@@ -128,16 +115,13 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     f7Panel.current[method]('breakpoint', onBreakpoint);
     f7Panel.current[method]('resize', onResize);
   };
-
   const onMount = () => {
     f7ready(() => {
       const $ = f7.$;
       if (!$) return;
-
       if ($('.panel-backdrop').length === 0) {
         $('<div class="panel-backdrop"></div>').insertBefore(elRef.current);
       }
-
       const params = noUndefinedProps({
         el: elRef.current,
         resizable,
@@ -155,21 +139,17 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
       });
       f7Panel.current = f7.panel.create(params);
       modalEvents('on');
-
       if (opened) {
         f7Panel.current.open(false);
       }
     });
   };
-
   const onDestroy = () => {
     if (f7Panel.current && f7Panel.current.destroy) {
       f7Panel.current.destroy();
     }
-
     f7Panel.current = null;
   };
-
   useIsomorphicLayoutEffect(() => {
     modalEvents('on');
     return () => {
@@ -180,9 +160,9 @@ const Panel = /*#__PURE__*/forwardRef((props, ref) => {
     onMount();
     return onDestroy;
   }, []);
-  const sideComputed = side || (left ? 'left' : 'right'); // eslint-disable-next-line
-
-  const effectComputed = effect || (reveal ? 'reveal' : push ? 'push' : 'cover');
+  const sideComputed = side || (left ? 'left' : 'right');
+  // eslint-disable-next-line
+  const effectComputed = effect || (reveal ? 'reveal' : push ? 'push' : floating ? 'floating' : 'cover');
   const classes = classNames(className, 'panel', {
     'panel-in': isOpened.current && !isClosing.current && !isBreakpoint.current,
     'panel-in-breakpoint': isBreakpoint.current,

package/components/photo-browser.js

@@ -5,6 +5,7 @@ import { watchProp } from '../shared/watch-prop.js';
 import { f7ready, f7 } from '../shared/f7.js';
 
 
+
 const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
   const f7PhotoBrowser = useRef(null);
   const {
@@ -39,27 +40,21 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
     renderPopup,
     renderStandalone
   } = props;
-
   const open = index => {
     return f7PhotoBrowser.current.open(index);
   };
-
   const close = () => {
     return f7PhotoBrowser.current.close();
   };
-
   const expositionToggle = () => {
     return f7PhotoBrowser.current.expositionToggle();
   };
-
   const expositionEnable = () => {
     return f7PhotoBrowser.current.expositionEnable();
   };
-
   const expositionDisable = () => {
     return f7PhotoBrowser.current.expositionDisable();
   };
-
   useImperativeHandle(ref, () => ({
     f7PhotoBrowser: () => f7PhotoBrowser.current,
     open,
@@ -72,17 +67,14 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
     const pb = f7PhotoBrowser.current;
     if (!pb) return;
     pb.params.photos = newValue;
-
     if (pb.opened && pb.swiper) {
       pb.swiper.update();
     }
   });
-
   const onMount = () => {
     if (!init) return;
     f7ready(() => {
       let paramsComputed;
-
       if (typeof params !== 'undefined') {
         paramsComputed = params;
       } else {
@@ -117,7 +109,6 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
           renderStandalone
         };
       }
-
       Object.keys(paramsComputed).forEach(param => {
         if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
       });
@@ -126,34 +117,27 @@ const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
           open() {
             emit(props, 'photoBrowserOpen');
           },
-
           close() {
             emit(props, 'photoBrowserClose');
           },
-
           opened() {
             emit(props, 'photoBrowserOpened');
           },
-
           closed() {
             emit(props, 'photoBrowserClosed');
           },
-
           swipeToClose() {
             emit(props, 'photoBrowserSwipeToClose');
           }
-
         }
       });
       f7PhotoBrowser.current = f7.photoBrowser.create(paramsComputed);
     });
   };
-
   const onDestroy = () => {
     if (f7PhotoBrowser.current && f7PhotoBrowser.current.destroy) f7PhotoBrowser.current.destroy();
     f7PhotoBrowser.current = null;
   };
-
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;

package/components/pie-chart.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, useState, useEffect } from 'react';
 import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
 import { f7 } from '../shared/f7.js';
 
+
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
@@ -23,7 +23,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     el: elRef.current
   }));
-
   const getSummValue = () => {
     let summ = 0;
     datasets.map(d => d.value || 0).forEach(value => {
@@ -31,17 +30,14 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     });
     return summ;
   };
-
   const getPaths = () => {
     const paths = [];
     let cumulativePercentage = 0;
-
     function getCoordinatesForPercentage(percentage) {
       const x = Math.cos(2 * Math.PI * percentage) * (size / 3);
       const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
       return [x, y];
     }
-
     datasets.forEach(_ref => {
       let {
         value,
@@ -53,8 +49,10 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       cumulativePercentage += percentage;
       const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
       const largeArcFlag = percentage > 0.5 ? 1 : 0;
-      const points = [`M ${startX} ${startY}`, // Move
-      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+      const points = [`M ${startX} ${startY}`,
+      // Move
+      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+      // Arc
       'L 0 0' // Line
       ].join(' ');
       paths.push({
@@ -65,7 +63,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     });
     return paths;
   };
-
   const formatTooltipText = () => {
     if (currentIndex === null) return '';
     const {
@@ -74,12 +71,10 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       color
     } = datasets[currentIndex];
     const percentage = value / getSummValue() * 100;
-
     const round = v => {
       if (parseInt(v, 10) === v) return v;
       return Math.round(v * 100) / 100;
     };
-
     if (formatTooltip) {
       return formatTooltip({
         index: currentIndex,
@@ -89,7 +84,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
         percentage
       });
     }
-
     const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
     return `
       <div class="pie-chart-tooltip-label">
@@ -97,11 +91,9 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       </div>
     `;
   };
-
   const setTooltip = () => {
     if (currentIndex === null && !f7Tooltip.current) return;
     if (!tooltip || !elRef.current || !f7) return;
-
     if (currentIndex !== null && !f7Tooltip.current) {
       f7Tooltip.current = f7.tooltip.create({
         trigger: 'manual',
@@ -113,9 +105,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       f7Tooltip.current.show();
       return;
     }
-
     if (!f7Tooltip.current) return;
-
     if (currentIndex !== null) {
       f7Tooltip.current.setText(formatTooltipText());
       f7Tooltip.current.setTargetEl(elRef.current.querySelector(`path[data-index="${currentIndex}"]`));
@@ -124,7 +114,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       f7Tooltip.current.hide();
     }
   };
-
   useEffect(() => {
     if (previousIndex.current === currentIndex) return;
     previousIndex.current = currentIndex;
@@ -136,7 +125,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       if (f7Tooltip.current && f7Tooltip.current.destroy) {
         f7Tooltip.current.destroy();
       }
-
       f7Tooltip.current = null;
     };
   }, []);

package/components/popover.d.ts

@@ -12,6 +12,7 @@ export interface PopoverProps {
   opened ?: boolean;
   animate ?: boolean;
   targetEl ?: string | object;
+  angle ?: boolean;
   backdrop ?: boolean;
   backdropEl ?: string | object;
   closeByBackdropClick ?: boolean;