framework7-react 7.0.0-beta.10 → 7.0.0-beta.15

package/components/actions.d.ts

@@ -25,7 +25,7 @@ interface ActionsProps {
   onActionsClose ?: (instance?: Actions.Actions) => void;
   onActionsClosed ?: (instance?: Actions.Actions) => void;
   containerEl ?: string | object;
-  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Actions: () => Actions}>;
+  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Actions: () => Actions.Actions}>;
   color?: string;
   colorTheme?: string;
   textColor?: string;

package/components/breadcrumbs-collapsed.d.ts

@@ -0,0 +1,16 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsCollapsedProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsCollapsed: React.FunctionComponent<BreadcrumbsCollapsedProps>;
+
+export default BreadcrumbsCollapsed;
+  

package/components/breadcrumbs-collapsed.js

@@ -0,0 +1,32 @@
+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 { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+
+const BreadcrumbsCollapsed = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-collapsed', className),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), /*#__PURE__*/React.createElement("span", null), children);
+});
+BreadcrumbsCollapsed.displayName = 'f7-breadcrumbs-collapsed';
+export default BreadcrumbsCollapsed;

package/components/breadcrumbs-item.d.ts

@@ -0,0 +1,17 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsItemProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick ?: (event?: any) => void;
+  active?: boolean;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsItem: React.FunctionComponent<BreadcrumbsItemProps>;
+
+export default BreadcrumbsItem;
+  

package/components/breadcrumbs-item.js

@@ -0,0 +1,33 @@
+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 { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+
+const BreadcrumbsItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    active,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-item', className, active && 'breadcrumbs-item-active'),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), children);
+});
+BreadcrumbsItem.displayName = 'f7-breadcrumbs-item';
+export default BreadcrumbsItem;

package/components/breadcrumbs-separator.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsSeparatorProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsSeparator: React.FunctionComponent<BreadcrumbsSeparatorProps>;
+
+export default BreadcrumbsSeparator;
+  

package/components/breadcrumbs-separator.js

@@ -0,0 +1,25 @@
+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 { classNames, getExtraAttrs } from '../shared/utils.js';
+
+const BreadcrumbsSeparator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-separator', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs));
+});
+BreadcrumbsSeparator.displayName = 'f7-breadcrumbs-separator';
+export default BreadcrumbsSeparator;

package/components/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps>;
+
+export default Breadcrumbs;
+  

package/components/breadcrumbs.js

@@ -0,0 +1,26 @@
+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 { classNames, getExtraAttrs } from '../shared/utils.js';
+
+const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs), children);
+});
+Breadcrumbs.displayName = 'f7-breadcrumbs';
+export default Breadcrumbs;

package/components/list.d.ts

@@ -59,6 +59,7 @@ interface ListProps {
   onSortableEnable ?: (...args: any[]) => void;
   onSortableDisable ?: (...args: any[]) => void;
   onSortableSort ?: (sortData?: any) => void;
+  onSortableMove ?: (itemEl?: any) => void;
   onTabShow ?: (el?: HTMLElement) => void;
   onTabHide ?: (el?: HTMLElement) => void;
   ref?: React.MutableRefObject<{el: HTMLElement | null; f7VirtualList: () => VirtualList.VirtualList}>;

package/components/list.js

@@ -73,6 +73,11 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     emit(props, 'sortableSort', sortData);
   };
 
+  const onSortableMove = (el, listEl) => {
+    if (elRef.current !== listEl) return;
+    emit(props, 'sortableMove', el, listEl);
+  };
+
   useImperativeHandle(ref, () => ({
     el: elRef.current,
     f7VirtualList: () => f7VirtualList.current
@@ -84,6 +89,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
       f7.on('sortableEnable', onSortableEnable);
       f7.on('sortableDisable', onSortableDisable);
       f7.on('sortableSort', onSortableSort);
+      f7.on('sortableMove', onSortableMove);
     });
   };
 
@@ -92,6 +98,7 @@ const List = /*#__PURE__*/forwardRef((props, ref) => {
     f7.off('sortableEnable', onSortableEnable);
     f7.off('sortableDisable', onSortableDisable);
     f7.off('sortableSort', onSortableSort);
+    f7.off('sortableMove', onSortableMove);
   };
 
   const onMount = () => {

package/components/range.d.ts

@@ -38,7 +38,7 @@ interface RangeProps {
   themeDark?: boolean;
   onRangeChange ?: (val?: any) => void;
   onRangeChanged ?: (val?: any) => void;
-  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Range: () => Range.Rage}>;
+  ref?: React.MutableRefObject<{el: HTMLElement | null; f7Range: () => Range.Range}>;
 }
 declare const Range: React.FunctionComponent<RangeProps>;
 

package/components/toggle.js

@@ -25,6 +25,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const extraAttrs = getExtraAttrs(props);
   const elRef = useRef(null);
+  const inputElRef = useRef(null);
 
   const onChange = event => {
     emit(props, 'change', event);
@@ -69,8 +70,17 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
 
   useIsomorphicLayoutEffect(() => {
     toggleEvents('on');
+
+    if (inputElRef.current) {
+      inputElRef.current.addEventListener('change', onChange);
+    }
+
     return () => {
       toggleEvents('off');
+
+      if (inputElRef.current) {
+        inputElRef.current.removeEventListener('change', onChange);
+      }
     };
   });
   useIsomorphicLayoutEffect(() => {
@@ -81,6 +91,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     disabled
   }, colorClasses(props));
   const inputEl = /*#__PURE__*/React.createElement("input", {
+    ref: inputElRef,
     type: "checkbox",
     name: name,
     disabled: disabled,
@@ -88,7 +99,7 @@ const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
     checked: checked,
     defaultChecked: defaultChecked,
     value: value,
-    onChange: onChange
+    onChange: () => {}
   });
   return /*#__PURE__*/React.createElement("label", _extends({
     id: id,

package/components/view.d.ts

@@ -9,6 +9,7 @@ interface ViewProps {
   id?: string | number;
   className?: string;
   style?: React.CSSProperties;
+  initRouterOnTabShow?: boolean;
   tab ?: boolean;
   tabActive ?: boolean;
   name ?: string;

package/components/view.js

@@ -23,11 +23,13 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     tab,
     tabActive,
     url,
+    initRouterOnTabShow,
     browserHistoryInitialMatch = true
   } = props;
   const childrenArray = React.Children.toArray(children);
   const initialPageComponent = childrenArray.filter(c => c.props && c.props.initialPage)[0];
   const restChildren = childrenArray.filter(c => !c.props || !c.props.initialPage);
+  const shouldInitRouter = !(initRouterOnTabShow && tab && !tabActive);
   const extraAttrs = getExtraAttrs(props);
   const f7View = useRef(null);
   const elRef = useRef(null);
@@ -61,7 +63,7 @@ const View = /*#__PURE__*/forwardRef((props, ref) => {
     };
     f7routers.views.push(routerData.current);
 
-    if (f7View.current && f7View.current.router && (url || main)) {
+    if (shouldInitRouter && f7View.current && f7View.current.router && (url || main)) {
       const initialData = getRouterInitialComponent(f7View.current.router, initialPageComponent);
       initialPage = initialData.initialPage;
       initialRoute = initialData.initialRoute;

package/framework7-react.d.ts

@@ -17,6 +17,10 @@ import BlockFooter from './components/block-footer';
 import BlockHeader from './components/block-header';
 import BlockTitle from './components/block-title';
 import Block from './components/block';
+import BreadcrumbsCollapsed from './components/breadcrumbs-collapsed';
+import BreadcrumbsItem from './components/breadcrumbs-item';
+import BreadcrumbsSeparator from './components/breadcrumbs-separator';
+import Breadcrumbs from './components/breadcrumbs';
 import Button from './components/button';
 import CardContent from './components/card-content';
 import CardFooter from './components/card-footer';
@@ -122,6 +126,6 @@ declare const useStore: useStore;
 
 declare const Framework7React: Framework7Plugin;
 
-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 { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, 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/framework7-react.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 React 7.0.0-beta.10
+ * Framework7 React 7.0.0-beta.15
  * Build full featured iOS & Android apps using Framework7 & React
  * https://framework7.io/react/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 28, 2021
+ * Released on: April 11, 2022
  */
 import Framework7React from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';
@@ -29,6 +29,10 @@ import BlockFooter from './components/block-footer.js';
 import BlockHeader from './components/block-header.js';
 import BlockTitle from './components/block-title.js';
 import Block from './components/block.js';
+import BreadcrumbsCollapsed from './components/breadcrumbs-collapsed.js';
+import BreadcrumbsItem from './components/breadcrumbs-item.js';
+import BreadcrumbsSeparator from './components/breadcrumbs-separator.js';
+import Breadcrumbs from './components/breadcrumbs.js';
 import Button from './components/button.js';
 import CardContent from './components/card-content.js';
 import CardFooter from './components/card-footer.js';
@@ -110,6 +114,6 @@ import Treeview from './components/treeview.js';
 import View from './components/view.js';
 import Views from './components/views.js';
 
-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 { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-react",
-  "version": "7.0.0-beta.10",
+  "version": "7.0.0-beta.15",
   "description": "Build full featured iOS & Android apps using Framework7 & React",
   "type": "module",
   "exports": {
@@ -25,6 +25,7 @@
     "ipad",
     "apple",
     "phonegap",
+    "capacitor",
     "native",
     "touch",
     "appstore",