framework7-react 6.3.5 → 7.0.0-beta.10

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

@@ -1,68 +1,67 @@
 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, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import PageContent from './page-content';
-
-var Page = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      name = props.name,
-      stacked = props.stacked,
-      withSubnavbar = props.withSubnavbar,
-      subnavbar = props.subnavbar,
-      withNavbarLarge = props.withNavbarLarge,
-      navbarLarge = props.navbarLarge,
-      noNavbar = props.noNavbar,
-      noToolbar = props.noToolbar,
-      tabs = props.tabs,
-      _props$pageContent = props.pageContent,
-      pageContent = _props$pageContent === void 0 ? true : _props$pageContent,
-      noSwipeback = props.noSwipeback,
-      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,
-      onPtrPullStart = props.onPtrPullStart,
-      onPtrPullMove = props.onPtrPullMove,
-      onPtrPullEnd = props.onPtrPullEnd,
-      onPtrRefresh = props.onPtrRefresh,
-      onPtrDone = props.onPtrDone,
-      onInfinite = props.onInfinite;
-  var hasSubnavbar = useRef(false);
-  var hasNavbarLarge = useRef(false);
-  var hasNavbarLargeCollapsed = useRef(false);
-  var hasCardExpandableOpened = useRef(false);
-  var routerPositionClass = useRef('');
-  var routerForceUnstack = useRef(false);
-  var routerPageRole = useRef(null);
-  var routerPageRoleDetailRoot = useRef(false);
-  var routerPageMasterStack = useRef(false);
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null); // Main Page Events
-
-  var onPageMounted = function onPageMounted(page) {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+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,
+    navbarLarge,
+    noNavbar,
+    noToolbar,
+    tabs,
+    pageContent = true,
+    noSwipeback,
+    ptr,
+    ptrDistance,
+    ptrPreloader = true,
+    ptrBottom,
+    ptrMousewheel,
+    infinite,
+    infiniteTop,
+    infiniteDistance,
+    infinitePreloader = true,
+    hideBarsOnScroll,
+    hideNavbarOnScroll,
+    hideToolbarOnScroll,
+    messagesContent,
+    loginScreen,
+    onPtrPullStart,
+    onPtrPullMove,
+    onPtrPullEnd,
+    onPtrRefresh,
+    onPtrDone,
+    onInfinite
+  } = props;
+  const hasSubnavbar = useRef(false);
+  const hasNavbarLarge = useRef(false);
+  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 onPageMounted = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageMounted', page);
   };
 
-  var onPageInit = function onPageInit(page) {
+  const onPageInit = page => {
     if (elRef.current !== page.el) return;
 
     if (typeof withSubnavbar === 'undefined' && typeof subnavbar === 'undefined') {
@@ -80,12 +79,12 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     emit(props, 'pageInit', page);
   };
 
-  var onPageReinit = function onPageReinit(page) {
+  const onPageReinit = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageReinit', page);
   };
 
-  var onPageBeforeIn = function onPageBeforeIn(page) {
+  const onPageBeforeIn = page => {
     if (elRef.current !== page.el) return;
 
     if (!page.swipeBack) {
@@ -101,12 +100,12 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     emit(props, 'pageBeforeIn', page);
   };
 
-  var onPageBeforeOut = function onPageBeforeOut(page) {
+  const onPageBeforeOut = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeOut', page);
   };
 
-  var onPageAfterOut = function onPageAfterOut(page) {
+  const onPageAfterOut = page => {
     if (elRef.current !== page.el) return;
 
     if (page.to === 'next') {
@@ -120,92 +119,90 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     emit(props, 'pageAfterOut', page);
   };
 
-  var onPageAfterIn = function onPageAfterIn(page) {
+  const onPageAfterIn = page => {
     if (elRef.current !== page.el) return;
     routerPositionClass.current = 'page-current';
     emit(props, 'pageAfterIn', page);
   };
 
-  var onPageBeforeRemove = function onPageBeforeRemove(page) {
+  const onPageBeforeRemove = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeRemove', page);
   };
 
-  var onPageBeforeUnmount = function onPageBeforeUnmount(page) {
+  const onPageBeforeUnmount = page => {
     if (elRef.current !== page.el) return;
     emit(props, 'pageBeforeUnmount', page);
   }; // Helper events
 
 
-  var onPageStack = function onPageStack(pageEl) {
+  const onPageStack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerForceUnstack.current = false;
   };
 
-  var onPageUnstack = function onPageUnstack(pageEl) {
+  const onPageUnstack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerForceUnstack.current = true;
   };
 
-  var onPagePosition = function onPagePosition(pageEl, position) {
+  const onPagePosition = (pageEl, position) => {
     if (elRef.current !== pageEl) return;
-    routerPositionClass.current = "page-" + position;
+    routerPositionClass.current = `page-${position}`;
   };
 
-  var onPageRole = function onPageRole(pageEl, rolesData) {
+  const onPageRole = (pageEl, rolesData) => {
     if (elRef.current !== pageEl) return;
     routerPageRole.current = rolesData.role;
     routerPageRoleDetailRoot.current = rolesData.detailRoot;
   };
 
-  var onPageMasterStack = function onPageMasterStack(pageEl) {
+  const onPageMasterStack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerPageMasterStack.current = true;
   };
 
-  var onPageMasterUnstack = function onPageMasterUnstack(pageEl) {
+  const onPageMasterUnstack = pageEl => {
     if (elRef.current !== pageEl) return;
     routerPageMasterStack.current = false;
   };
 
-  var onPageNavbarLargeCollapsed = function onPageNavbarLargeCollapsed(pageEl) {
+  const onPageNavbarLargeCollapsed = pageEl => {
     if (elRef.current !== pageEl) return;
     hasNavbarLargeCollapsed.current = true;
   };
 
-  var onPageNavbarLargeExpanded = function onPageNavbarLargeExpanded(pageEl) {
+  const onPageNavbarLargeExpanded = pageEl => {
     if (elRef.current !== pageEl) return;
     hasNavbarLargeCollapsed.current = false;
   };
 
-  var onCardOpened = function onCardOpened(cardEl, pageEl) {
+  const onCardOpened = (cardEl, pageEl) => {
     if (elRef.current !== pageEl) return;
     hasCardExpandableOpened.current = true;
   };
 
-  var onCardClose = function onCardClose(cardEl, pageEl) {
+  const onCardClose = (cardEl, pageEl) => {
     if (elRef.current !== pageEl) return;
     hasCardExpandableOpened.current = false;
   };
 
-  var onPageTabShow = function onPageTabShow(pageEl) {
+  const onPageTabShow = pageEl => {
     if (elRef.current !== pageEl) return;
     emit(props, 'pageTabShow');
   };
 
-  var onPageTabHide = function onPageTabHide(pageEl) {
+  const onPageTabHide = pageEl => {
     if (elRef.current !== pageEl) return;
     emit(props, 'pageTabHide');
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var attachEvents = function attachEvents() {
-    f7ready(function () {
+  const attachEvents = () => {
+    f7ready(() => {
       f7.on('pageMounted', onPageMounted);
       f7.on('pageInit', onPageInit);
       f7.on('pageReinit', onPageReinit);
@@ -230,7 +227,7 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('pageMounted', onPageMounted);
     f7.off('pageInit', onPageInit);
@@ -255,28 +252,28 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('pageTabHide', onPageTabHide);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var slots = getSlots(props);
-  var fixedList = [];
-  var staticList = [];
-  var slotsStatic = slots.static,
-      slotsFixed = slots.fixed,
-      slotsDefault = slots.default;
-  var fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(function (tagName) {
-    return "f7-" + tagName;
-  });
-  var hasSubnavbarComputed;
-  var hasNavbarLargeComputed;
-  var hasMessages = messagesContent;
+  const slots = getSlots(props);
+  const fixedList = [];
+  const staticList = [];
+  const {
+    static: slotsStatic,
+    fixed: slotsFixed,
+    default: slotsDefault
+  } = slots;
+  const fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
+  let hasSubnavbarComputed;
+  let hasNavbarLargeComputed;
+  let hasMessages = messagesContent;
 
   if (slotsDefault) {
-    slotsDefault.forEach(function (child) {
+    slotsDefault.forEach(child => {
       if (typeof child === 'undefined') return;
-      var isFixedTag = false;
-      var tag = child.type && (child.type.displayName || child.type.name);
+      let isFixedTag = false;
+      const tag = child.type && (child.type.displayName || child.type.name);
 
       if (!tag) {
         if (pageContent) staticList.push(child);
@@ -301,11 +298,11 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  var forceSubnavbar = typeof subnavbar === 'undefined' && typeof withSubnavbar === 'undefined' ? hasSubnavbarComputed || hasSubnavbar.current : false;
-  var forceNavbarLarge = typeof navbarLarge === 'undefined' && typeof withNavbarLarge === 'undefined' ? hasNavbarLargeComputed || hasNavbarLarge.current : false;
-  var classes = classNames(className, 'page', routerPositionClass.current, {
+  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: tabs,
+    tabs,
     'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
     'page-with-navbar-large': navbarLarge || withNavbarLarge || forceNavbarLarge,
     'no-navbar': noNavbar,
@@ -330,7 +327,7 @@ var Page = /*#__PURE__*/forwardRef(function (props, ref) {
     }, extraAttrs), slotsFixed, slotsStatic, slotsDefault);
   }
 
-  var pageContentEl = /*#__PURE__*/React.createElement(PageContent, {
+  const pageContentEl = /*#__PURE__*/React.createElement(PageContent, {
     ptr: ptr,
     ptrDistance: ptrDistance,
     ptrPreloader: ptrPreloader,

package/components/panel.js

@@ -0,0 +1,198 @@
+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.js';
+import { classNames, getExtraAttrs, noUndefinedProps, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+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 {
+    className,
+    id,
+    style,
+    children,
+    side,
+    effect,
+    // eslint-disable-next-line
+    cover,
+    reveal,
+    push,
+    left,
+    // right,
+    opened,
+    resizable,
+    backdrop = true,
+    backdropEl,
+    containerEl,
+    visibleBreakpoint,
+    collapsedBreakpoint,
+    swipe,
+    swipeNoFollow,
+    swipeOnlyClose,
+    swipeActiveArea = 0,
+    swipeThreshold = 0
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const isOpened = useRef(false);
+  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 = (...args) => {
+    emit(props, 'panelResize', ...args);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Panel: () => f7Panel.current
+  }));
+  watchProp(resizable, newValue => {
+    if (!f7Panel.current) return;
+    if (newValue) f7Panel.current.enableResizable();else f7Panel.current.disableResizable();
+  });
+  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);
+    f7Panel.current[method]('opened', onOpened);
+    f7Panel.current[method]('close', onClose);
+    f7Panel.current[method]('closed', onClosed);
+    f7Panel.current[method]('backdropClick', onBackdropClick);
+    f7Panel.current[method]('swipe', onSwipe);
+    f7Panel.current[method]('swipeOpen', onSwipeOpen);
+    f7Panel.current[method]('collapsedBreakpoint', onCollapsedBreakpoint);
+    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,
+        backdrop,
+        backdropEl,
+        containerEl,
+        visibleBreakpoint,
+        collapsedBreakpoint,
+        swipe,
+        swipeNoFollow,
+        swipeOnlyClose,
+        swipeActiveArea,
+        swipeThreshold
+      });
+      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 () => {
+      modalEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const sideComputed = side || (left ? 'left' : 'right'); // eslint-disable-next-line
+
+  const effectComputed = effect || (reveal ? 'reveal' : push ? 'push' : 'cover');
+  const classes = classNames(className, 'panel', {
+    'panel-in': isOpened.current && !isClosing.current && !isBreakpoint.current,
+    'panel-in-breakpoint': isBreakpoint.current,
+    'panel-in-collapsed': isCollapsed.current,
+    'panel-resizable': resizable,
+    [`panel-${sideComputed}`]: sideComputed,
+    [`panel-${effectComputed}`]: effectComputed
+  }, colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children, resizable && /*#__PURE__*/React.createElement("div", {
+    className: "panel-resize-handler"
+  }));
+});
+Panel.displayName = 'f7-panel';
+export default Panel;