framework7-react 6.3.16 → 7.0.0-beta.12

package/esm/components/view.js

@@ -1,261 +0,0 @@
-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); }
-
-/* eslint-disable no-nested-ternary */
-import React, { forwardRef, useRef, useImperativeHandle, useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, noUndefinedProps, emit, getRouterId } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7routers, f7, f7events } from '../shared/f7';
-import { useTab } from '../shared/use-tab';
-import { useAsyncComponent } from '../shared/use-async-component';
-import { getRouterInitialComponent } from '../shared/get-router-initial-component';
-import { RouterContext } from '../shared/router-context';
-
-
-var View = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init,
-      main = props.main,
-      tab = props.tab,
-      tabActive = props.tabActive,
-      url = props.url,
-      _props$browserHistory = props.browserHistoryInitialMatch,
-      browserHistoryInitialMatch = _props$browserHistory === void 0 ? true : _props$browserHistory;
-  var childrenArray = React.Children.toArray(children);
-  var initialPageComponent = childrenArray.filter(function (c) {
-    return c.props && c.props.initialPage;
-  })[0];
-  var restChildren = childrenArray.filter(function (c) {
-    return !c.props || !c.props.initialPage;
-  });
-  var extraAttrs = getExtraAttrs(props);
-
-  var _f7View = useRef(null);
-
-  var elRef = useRef(null);
-  var routerData = useRef(null);
-  var initialPage;
-  var initialRoute;
-
-  var onViewInit = function onViewInit(view) {
-    emit(props, 'viewInit', view);
-
-    if (!init) {
-      routerData.current.instance = view;
-      _f7View.current = routerData.current.instance;
-    }
-  };
-
-  if (f7 && !_f7View.current && init) {
-    var routerId = getRouterId();
-    _f7View.current = f7.views.create(elRef.current, _extends({
-      routerId: routerId,
-      init: false
-    }, noUndefinedProps(props), {
-      browserHistoryInitialMatch: browserHistoryInitialMatch,
-      on: {
-        init: onViewInit
-      }
-    }));
-    routerData.current = {
-      routerId: routerId,
-      instance: _f7View.current
-    };
-    f7routers.views.push(routerData.current);
-
-    if (_f7View.current && _f7View.current.router && (url || main)) {
-      var initialData = getRouterInitialComponent(_f7View.current.router, initialPageComponent);
-      initialPage = initialData.initialPage;
-      initialRoute = initialData.initialRoute;
-
-      if (initialRoute && initialRoute.route && initialRoute.route.masterRoute) {
-        initialPage = undefined;
-        initialRoute = undefined;
-      }
-    }
-  }
-
-  var _useState = useState(initialPage ? [initialPage] : []),
-      pages = _useState[0],
-      _setPages = _useState[1];
-
-  var onResize = function onResize(view, width) {
-    emit(props, 'viewResize', width);
-  };
-
-  var onSwipeBackMove = function onSwipeBackMove(data) {
-    var swipeBackData = data;
-    emit(props, 'swipeBackMove', swipeBackData);
-  };
-
-  var onSwipeBackBeforeChange = function onSwipeBackBeforeChange(data) {
-    var swipeBackData = data;
-    emit(props, 'swipeBackBeforeChange', swipeBackData);
-  };
-
-  var onSwipeBackAfterChange = function onSwipeBackAfterChange(data) {
-    var swipeBackData = data;
-    emit(props, 'swipeBackAfterChange', swipeBackData);
-  };
-
-  var onSwipeBackBeforeReset = function onSwipeBackBeforeReset(data) {
-    var swipeBackData = data;
-    emit(props, 'swipeBackBeforeReset', swipeBackData);
-  };
-
-  var onSwipeBackAfterReset = function onSwipeBackAfterReset(data) {
-    var swipeBackData = data;
-    emit(props, 'swipeBackAfterReset', swipeBackData);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7View: function f7View() {
-        return _f7View.current;
-      }
-    };
-  });
-
-  var onMount = function onMount() {
-    f7ready(function () {
-      if (_f7View.current) {
-        routerData.current.el = elRef.current;
-        routerData.current.pages = pages;
-
-        routerData.current.setPages = function (newPages) {
-          _setPages([].concat(newPages));
-        };
-
-        if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
-          initialPage.component().then(function () {
-            setTimeout(function () {
-              _f7View.current.init(elRef.current);
-
-              if (initialPage) {
-                initialPage.el = _f7View.current.router.currentPageEl;
-
-                if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
-                  initialRoute.route.keepAliveData = {
-                    pageEl: initialPage.el
-                  };
-                }
-              }
-            }, 100);
-          });
-        } else {
-          _f7View.current.init(elRef.current);
-
-          if (initialPage) {
-            initialPage.el = _f7View.current.router.currentPageEl;
-
-            if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
-              initialRoute.route.keepAliveData = {
-                pageEl: initialPage.el
-              };
-            }
-          }
-        }
-      } else {
-        var _routerId = getRouterId();
-
-        routerData.current = {
-          el: elRef.current,
-          routerId: _routerId,
-          pages: pages,
-          instance: _f7View.current,
-          setPages: function setPages(newPages) {
-            _setPages([].concat(newPages));
-          }
-        };
-        f7routers.views.push(routerData.current);
-        routerData.current.instance = f7.views.create(elRef.current, _extends({
-          routerId: _routerId
-        }, noUndefinedProps(props), {
-          browserHistoryInitialMatch: browserHistoryInitialMatch,
-          on: {
-            init: onViewInit
-          }
-        }));
-        _f7View.current = routerData.current.instance;
-      }
-
-      if (!init) return;
-
-      _f7View.current.on('resize', onResize);
-
-      _f7View.current.on('swipebackMove', onSwipeBackMove);
-
-      _f7View.current.on('swipebackBeforeChange', onSwipeBackBeforeChange);
-
-      _f7View.current.on('swipebackAfterChange', onSwipeBackAfterChange);
-
-      _f7View.current.on('swipebackBeforeReset', onSwipeBackBeforeReset);
-
-      _f7View.current.on('swipebackAfterReset', onSwipeBackAfterReset);
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7View.current) {
-      _f7View.current.off('resize', onResize);
-
-      _f7View.current.off('swipebackMove', onSwipeBackMove);
-
-      _f7View.current.off('swipebackBeforeChange', onSwipeBackBeforeChange);
-
-      _f7View.current.off('swipebackAfterChange', onSwipeBackAfterChange);
-
-      _f7View.current.off('swipebackBeforeReset', onSwipeBackBeforeReset);
-
-      _f7View.current.off('swipebackAfterReset', onSwipeBackAfterReset);
-
-      if (_f7View.current.destroy) _f7View.current.destroy();
-      _f7View.current = null;
-    }
-
-    f7routers.views.splice(f7routers.views.indexOf(routerData.current), 1);
-    routerData.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  useIsomorphicLayoutEffect(function () {
-    if (routerData.current && f7) {
-      f7events.emit('viewRouterDidUpdate', routerData.current);
-    }
-  });
-  useTab(elRef, props);
-  var classes = classNames(className, 'view', {
-    'view-main': main,
-    'tab-active': tabActive,
-    tab: tab
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), restChildren, pages.map(function (_ref) {
-    var PageComponent = _ref.component,
-        pageId = _ref.id,
-        pageProps = _ref.props,
-        isAsync = _ref.isAsync,
-        initialComponent = _ref.initialComponent;
-    return /*#__PURE__*/React.createElement(RouterContext.Provider, {
-      key: pageId,
-      value: {
-        router: pageProps.f7router,
-        route: pageProps.f7route
-      }
-    }, initialComponent ? /*#__PURE__*/React.cloneElement(initialComponent, _extends({}, pageProps)) : isAsync ? useAsyncComponent(PageComponent, pageProps) : /*#__PURE__*/React.createElement(PageComponent, pageProps));
-  }));
-});
-View.displayName = 'f7-view';
-export default View;

package/esm/framework7-react.js

@@ -1,115 +0,0 @@
-/**
- * Framework7 React 6.3.16
- * Build full featured iOS & Android apps using Framework7 & React
- * https://framework7.io/react/
- *
- * Copyright 2014-2022 Vladimir Kharlampidi
- *
- * Released under the MIT License
- *
- * Released on: February 10, 2022
- */
-import Framework7React from './shared/plugin';
-import { f7, f7ready, theme } from './shared/f7';
-import { useStore } from './shared/use-store';
-
-import AccordionContent from './components/accordion-content';
-import AccordionItem from './components/accordion-item';
-import AccordionToggle from './components/accordion-toggle';
-import Accordion from './components/accordion';
-import ActionsButton from './components/actions-button';
-import ActionsGroup from './components/actions-group';
-import ActionsLabel from './components/actions-label';
-import Actions from './components/actions';
-import App from './components/app';
-import Appbar from './components/appbar';
-import AreaChart from './components/area-chart';
-import Badge from './components/badge';
-import BlockFooter from './components/block-footer';
-import BlockHeader from './components/block-header';
-import BlockTitle from './components/block-title';
-import Block from './components/block';
-import Button from './components/button';
-import CardContent from './components/card-content';
-import CardFooter from './components/card-footer';
-import CardHeader from './components/card-header';
-import Card from './components/card';
-import Checkbox from './components/checkbox';
-import Chip from './components/chip';
-import Col from './components/col';
-import FabBackdrop from './components/fab-backdrop';
-import FabButton from './components/fab-button';
-import FabButtons from './components/fab-buttons';
-import Fab from './components/fab';
-import Gauge from './components/gauge';
-import Icon from './components/icon';
-import Input from './components/input';
-import Link from './components/link';
-import ListButton from './components/list-button';
-import ListGroup from './components/list-group';
-import ListIndex from './components/list-index';
-import ListInput from './components/list-input';
-import ListItemCell from './components/list-item-cell';
-import ListItemContent from './components/list-item-content';
-import ListItemRow from './components/list-item-row';
-import ListItem from './components/list-item';
-import List from './components/list';
-import LoginScreenTitle from './components/login-screen-title';
-import LoginScreen from './components/login-screen';
-import MenuDropdownItem from './components/menu-dropdown-item';
-import MenuDropdown from './components/menu-dropdown';
-import MenuItem from './components/menu-item';
-import Menu from './components/menu';
-import Message from './components/message';
-import MessagebarAttachment from './components/messagebar-attachment';
-import MessagebarAttachments from './components/messagebar-attachments';
-import MessagebarSheetImage from './components/messagebar-sheet-image';
-import MessagebarSheetItem from './components/messagebar-sheet-item';
-import MessagebarSheet from './components/messagebar-sheet';
-import Messagebar from './components/messagebar';
-import MessagesTitle from './components/messages-title';
-import Messages from './components/messages';
-import NavLeft from './components/nav-left';
-import NavRight from './components/nav-right';
-import NavTitleLarge from './components/nav-title-large';
-import NavTitle from './components/nav-title';
-import Navbar from './components/navbar';
-import PageContent from './components/page-content';
-import Page from './components/page';
-import Panel from './components/panel';
-import PhotoBrowser from './components/photo-browser';
-import PieChart from './components/pie-chart';
-import Popover from './components/popover';
-import Popup from './components/popup';
-import Preloader from './components/preloader';
-import Progressbar from './components/progressbar';
-import Radio from './components/radio';
-import Range from './components/range';
-import RoutableModals from './components/routable-modals';
-import Row from './components/row';
-import Searchbar from './components/searchbar';
-import Segmented from './components/segmented';
-import Sheet from './components/sheet';
-import SkeletonAvatar from './components/skeleton-avatar';
-import SkeletonBlock from './components/skeleton-block';
-import SkeletonImage from './components/skeleton-image';
-import SkeletonText from './components/skeleton-text';
-import Stepper from './components/stepper';
-import Subnavbar from './components/subnavbar';
-import SwipeoutActions from './components/swipeout-actions';
-import SwipeoutButton from './components/swipeout-button';
-import SwiperSlide from './components/swiper-slide';
-import Swiper from './components/swiper';
-import Tab from './components/tab';
-import Tabs from './components/tabs';
-import TextEditor from './components/text-editor';
-import Toggle from './components/toggle';
-import Toolbar from './components/toolbar';
-import TreeviewItem from './components/treeview-item';
-import Treeview from './components/treeview';
-import View from './components/view';
-import Views from './components/views';
-
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemContent, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, View, Views }
-export { f7, f7ready, theme, useStore };
-export default Framework7React;

package/esm/shared/get-router-initial-component.js

@@ -1,40 +0,0 @@
-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 { getComponentId } from './utils';
-export var getRouterInitialComponent = function getRouterInitialComponent(router, initialComponent) {
-  var initialComponentData;
-
-  var _router$getInitialUrl = router.getInitialUrl(),
-      initialUrl = _router$getInitialUrl.initialUrl;
-
-  var initialRoute = router.findMatchingRoute(initialUrl);
-  var routeProps = {};
-
-  if (initialRoute && initialRoute.route && initialRoute.route.options) {
-    routeProps = initialRoute.route.options.props;
-  }
-
-  var isMasterRoute = function isMasterRoute(route) {
-    if (route.master === true) return true;
-    if (typeof route.master === 'function') return route.master(router.app);
-    return false;
-  };
-
-  if (initialRoute && initialRoute.route && (initialRoute.route.component || initialRoute.route.asyncComponent) && !isMasterRoute(initialRoute.route)) {
-    initialComponentData = {
-      component: initialRoute.route.component || initialRoute.route.asyncComponent,
-      initialComponent: initialComponent,
-      id: getComponentId(),
-      isAsync: !!initialRoute.route.asyncComponent,
-      props: _extends({
-        f7route: initialRoute,
-        f7router: router
-      }, routeProps, initialRoute.params)
-    };
-  }
-
-  return {
-    initialPage: initialComponentData,
-    initialRoute: initialRoute
-  };
-};

package/esm/shared/modal-state-classes.js

@@ -1,10 +0,0 @@
-export var modalStateClasses = function modalStateClasses(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      isOpened = _ref.isOpened,
-      isClosing = _ref.isClosing;
-
-  return {
-    'modal-in': isOpened.current && !isClosing.current,
-    'modal-out': isClosing.current
-  };
-};

package/esm/shared/router-context.js

@@ -1,6 +0,0 @@
-import React from 'react';
-var RouterContext = /*#__PURE__*/React.createContext({
-  route: null,
-  router: null
-});
-export { RouterContext };

package/esm/shared/tabbar-context.js

@@ -1,5 +0,0 @@
-import React from 'react';
-var TabbarContext = /*#__PURE__*/React.createContext({
-  tabbarHasLabels: false
-});
-export { TabbarContext };

package/esm/shared/use-icon.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import Icon from '../components/icon';
-import Badge from '../components/badge';
-export var useIcon = function useIcon(props) {
-  if (props === void 0) {
-    props = {};
-  }
-
-  var _props = props,
-      icon = _props.icon,
-      iconMaterial = _props.iconMaterial,
-      iconF7 = _props.iconF7,
-      iconMd = _props.iconMd,
-      iconIos = _props.iconIos,
-      iconAurora = _props.iconAurora,
-      iconColor = _props.iconColor,
-      iconSize = _props.iconSize,
-      iconBadge = _props.iconBadge,
-      badgeColor = _props.badgeColor,
-      iconBadgeColor = _props.iconBadgeColor;
-
-  if (icon || iconMaterial || iconF7 || iconMd || iconIos || iconAurora) {
-    return /*#__PURE__*/React.createElement(Icon, {
-      material: iconMaterial,
-      f7: iconF7,
-      icon: icon,
-      md: iconMd,
-      ios: iconIos,
-      aurora: iconAurora,
-      color: iconColor,
-      size: iconSize
-    }, (iconBadge || iconBadge === 0) && /*#__PURE__*/React.createElement(Badge, {
-      color: badgeColor || iconBadgeColor
-    }, iconBadge));
-  }
-
-  return null;
-};

package/esm/shared/use-store.js

@@ -1,38 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { f7 } from './f7';
-export var useStore = function useStore() {
-  var assignedGetters = useRef({}); // (store, getter)
-
-  var store = arguments.length <= 0 ? undefined : arguments[0];
-  var getter = arguments.length <= 1 ? undefined : arguments[1];
-
-  if (arguments.length === 1) {
-    // (getter)
-    store = f7.store;
-    getter = arguments.length <= 0 ? undefined : arguments[0];
-  } // eslint-disable-next-line
-
-
-  var obj = store._gettersPlain[getter];
-
-  var _useState = useState(obj.value),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  function onUpdated(newValue) {
-    setValue(newValue);
-  }
-
-  if (!assignedGetters.current[getter]) {
-    obj.onUpdated(onUpdated);
-    assignedGetters.current[getter] = true;
-  }
-
-  useEffect(function () {
-    return function () {
-      // eslint-disable-next-line
-      store.__removeCallback(onUpdated);
-    };
-  }, []);
-  return value;
-};

package/esm/shared/use-theme.js

@@ -1,15 +0,0 @@
-import { useState } from 'react';
-import { f7, f7ready, theme } from './f7';
-export var useTheme = function useTheme() {
-  var _useState = useState(f7 ? theme : null),
-      t = _useState[0],
-      setTheme = _useState[1];
-
-  if (!f7) {
-    f7ready(function () {
-      setTheme(theme);
-    });
-  }
-
-  return t;
-};