framework7-react 6.3.5 → 7.0.0-beta.10

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

@@ -1,157 +1,160 @@
 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, flattenArray, emit, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7, f7ready } from '../shared/f7';
-import { ListContext } from '../shared/list-context';
-import { useTab } from '../shared/use-tab';
-
-
-var List = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7VirtualList = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      inset = props.inset,
-      xsmallInset = props.xsmallInset,
-      smallInset = props.smallInset,
-      mediumInset = props.mediumInset,
-      largeInset = props.largeInset,
-      xlargeInset = props.xlargeInset,
-      mediaList = props.mediaList,
-      sortable = props.sortable,
-      sortableTapHold = props.sortableTapHold,
-      sortableEnabled = props.sortableEnabled,
-      sortableMoveElements = props.sortableMoveElements,
-      sortableOpposite = props.sortableOpposite,
-      accordionList = props.accordionList,
-      accordionOpposite = props.accordionOpposite,
-      contactsList = props.contactsList,
-      simpleList = props.simpleList,
-      linksList = props.linksList,
-      menuList = props.menuList,
-      noHairlines = props.noHairlines,
-      noHairlinesBetween = props.noHairlinesBetween,
-      noHairlinesMd = props.noHairlinesMd,
-      noHairlinesBetweenMd = props.noHairlinesBetweenMd,
-      noHairlinesIos = props.noHairlinesIos,
-      noHairlinesBetweenIos = props.noHairlinesBetweenIos,
-      noHairlinesAurora = props.noHairlinesAurora,
-      noHairlinesBetweenAurora = props.noHairlinesBetweenAurora,
-      noChevron = props.noChevron,
-      chevronCenter = props.chevronCenter,
-      tab = props.tab,
-      tabActive = props.tabActive,
-      form = props.form,
-      formStoreData = props.formStoreData,
-      inlineLabels = props.inlineLabels,
-      virtualList = props.virtualList,
-      virtualListParams = props.virtualListParams;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var onSubmit = function onSubmit(event) {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, flattenArray, emit, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import { ListContext } from '../shared/list-context.js';
+import { useTab } from '../shared/use-tab.js';
+
+
+const List = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7VirtualList = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    inset,
+    xsmallInset,
+    smallInset,
+    mediumInset,
+    largeInset,
+    xlargeInset,
+    mediaList,
+    sortable,
+    sortableTapHold,
+    sortableEnabled,
+    sortableMoveElements,
+    sortableOpposite,
+    accordionList,
+    accordionOpposite,
+    contactsList,
+    simpleList,
+    linksList,
+    menuList,
+    noHairlines,
+    noHairlinesBetween,
+    noHairlinesMd,
+    noHairlinesBetweenMd,
+    noHairlinesIos,
+    noHairlinesBetweenIos,
+    noHairlinesAurora,
+    noHairlinesBetweenAurora,
+    noChevron,
+    chevronCenter,
+    tab,
+    tabActive,
+    form,
+    formStoreData,
+    inlineLabels,
+    virtualList,
+    virtualListParams
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const onSubmit = event => {
     emit(props, 'submit', event);
   };
 
-  var onSortableEnable = function onSortableEnable(el) {
+  const onSortableEnable = el => {
     if (elRef.current !== el) return;
     emit(props, 'sortableEnable');
   };
 
-  var onSortableDisable = function onSortableDisable(el) {
+  const onSortableDisable = el => {
     if (elRef.current !== el) return;
     emit(props, 'sortableDisable');
   };
 
-  var onSortableSort = function onSortableSort(el, sortData, listEl) {
+  const onSortableSort = (el, sortData, listEl) => {
     if (elRef.current !== listEl) return;
     emit(props, 'sortableSort', sortData);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7VirtualList: function f7VirtualList() {
-        return _f7VirtualList.current;
-      }
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7VirtualList: () => f7VirtualList.current
+  }));
   useTab(elRef, props);
 
-  var attachEvents = function attachEvents() {
-    f7ready(function () {
+  const attachEvents = () => {
+    f7ready(() => {
       f7.on('sortableEnable', onSortableEnable);
       f7.on('sortableDisable', onSortableDisable);
       f7.on('sortableSort', onSortableSort);
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('sortableEnable', onSortableEnable);
     f7.off('sortableDisable', onSortableDisable);
     f7.off('sortableSort', onSortableSort);
   };
 
-  var onMount = function onMount() {
-    f7ready(function () {
+  const onMount = () => {
+    f7ready(() => {
       if (!virtualList) return;
-      var vlParams = virtualListParams || {};
+      const vlParams = virtualListParams || {};
       if (!vlParams.renderItem && !vlParams.renderExternal) return;
-      _f7VirtualList.current = f7.virtualList.create(extend({
+      f7VirtualList.current = f7.virtualList.create(extend({
         el: elRef.current,
         on: {
-          itemBeforeInsert: function itemBeforeInsert(itemEl, item) {
-            var vl = this;
+          itemBeforeInsert(itemEl, item) {
+            const vl = this;
             emit(props, 'virtualItemBeforeInsert', vl, itemEl, item);
           },
-          beforeClear: function beforeClear(fragment) {
-            var vl = this;
+
+          beforeClear(fragment) {
+            const vl = this;
             emit(props, 'virtualBeforeClear', vl, fragment);
           },
-          itemsBeforeInsert: function itemsBeforeInsert(fragment) {
-            var vl = this;
+
+          itemsBeforeInsert(fragment) {
+            const vl = this;
             emit(props, 'virtualItemsBeforeInsert', vl, fragment);
           },
-          itemsAfterInsert: function itemsAfterInsert(fragment) {
-            var vl = this;
+
+          itemsAfterInsert(fragment) {
+            const vl = this;
             emit(props, 'virtualItemsAfterInsert', vl, fragment);
           }
+
         }
       }, vlParams));
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (!f7) return;
-    if (!(virtualList && _f7VirtualList.current)) return;
-    if (_f7VirtualList.current.destroy) _f7VirtualList.current.destroy();
-    _f7VirtualList.current = null;
+    if (!(virtualList && f7VirtualList.current)) return;
+    if (f7VirtualList.current.destroy) f7VirtualList.current.destroy();
+    f7VirtualList.current = null;
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var slots = getSlots(props);
-  var slotsList = slots.list,
-      slotsDefault = slots.default;
-  var rootChildrenBeforeList = [];
-  var rootChildrenAfterList = [];
-  var ulChildren = slotsList || [];
-  var flattenSlots = flattenArray(slotsDefault);
-  var wasUlChild = false;
-  flattenSlots.forEach(function (child) {
+  const slots = getSlots(props);
+  const {
+    list: slotsList,
+    default: slotsDefault
+  } = slots;
+  const rootChildrenBeforeList = [];
+  const rootChildrenAfterList = [];
+  const ulChildren = slotsList || [];
+  const flattenSlots = flattenArray(slotsDefault);
+  let wasUlChild = false;
+  flattenSlots.forEach(child => {
     if (typeof child === 'undefined') return;
-    var tag = child.type && (child.type.displayName || child.type.name);
+    let tag = child.type && (child.type.displayName || child.type.name);
 
     if (!tag && typeof child.type === 'string') {
       tag = child.type;
@@ -164,9 +167,9 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
       ulChildren.push(child);
     }
   });
-  var ListTag = form ? 'form' : 'div';
-  var classes = classNames(className, 'list', {
-    inset: inset,
+  const ListTag = form ? 'form' : 'div';
+  const classes = classNames(className, 'list', {
+    inset,
     'xsmall-inset': xsmallInset,
     'small-inset': smallInset,
     'medium-inset': mediumInset,
@@ -176,7 +179,7 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
     'simple-list': simpleList,
     'links-list': linksList,
     'menu-list': menuList,
-    sortable: sortable,
+    sortable,
     'sortable-tap-hold': sortableTapHold,
     'sortable-enabled': sortableEnabled,
     'sortable-opposite': sortableOpposite,
@@ -184,7 +187,7 @@ var List = /*#__PURE__*/forwardRef(function (props, ref) {
     'accordion-opposite': accordionOpposite,
     'contacts-list': contactsList,
     'virtual-list': virtualList,
-    tab: tab,
+    tab,
     'tab-active': tabActive,
     'no-hairlines': noHairlines,
     'no-hairlines-md': noHairlinesMd,

package/{esm/components → components}/login-screen-title.js

@@ -1,22 +1,22 @@
 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';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var LoginScreenTitle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'login-screen-title', colorClasses(props));
+const LoginScreenTitle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'login-screen-title', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/components/login-screen.js

@@ -0,0 +1,119 @@
+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, 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';
+import { modalStateClasses } from '../shared/modal-state-classes.js';
+
+
+const LoginScreen = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7LoginScreen = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    opened,
+    animate,
+    containerEl
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const isOpened = useRef(opened);
+  const isClosing = useRef(false);
+  const elRef = useRef(null);
+
+  const onOpen = instance => {
+    isOpened.current = true;
+    isClosing.current = false;
+    emit(props, 'loginScreenOpen', instance);
+  };
+
+  const onOpened = instance => {
+    emit(props, 'loginScreenOpened', instance);
+  };
+
+  const onClose = instance => {
+    isOpened.current = false;
+    isClosing.current = true;
+    emit(props, 'loginScreenClose', instance);
+  };
+
+  const onClosed = instance => {
+    isClosing.current = false;
+    emit(props, 'loginScreenClosed', instance);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7LoginScreen: () => f7LoginScreen.current
+  })); // watch opened changes
+
+  watchProp(opened, value => {
+    if (!f7LoginScreen.current) return;
+
+    if (value) {
+      f7LoginScreen.current.open();
+    } else {
+      f7LoginScreen.current.close();
+    }
+  });
+
+  const modalEvents = method => {
+    if (!f7LoginScreen.current) return;
+    f7LoginScreen.current[method]('open', onOpen);
+    f7LoginScreen.current[method]('opened', onOpened);
+    f7LoginScreen.current[method]('close', onClose);
+    f7LoginScreen.current[method]('closed', onClosed);
+  };
+
+  const onMount = () => {
+    if (!elRef.current) return;
+    f7ready(() => {
+      const loginScreenParams = {
+        el: elRef.current
+      };
+      if ('animate' in props) loginScreenParams.animate = animate;
+      if ('containerEl' in props) loginScreenParams.containerEl = containerEl;
+      f7LoginScreen.current = f7.loginScreen.create(loginScreenParams);
+      modalEvents('on');
+
+      if (opened) {
+        f7LoginScreen.current.open(false);
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7LoginScreen.current) {
+      f7LoginScreen.current.destroy();
+    }
+
+    f7LoginScreen.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    modalEvents('on');
+    return () => {
+      modalEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'login-screen', modalStateClasses({
+    isOpened,
+    isClosing
+  }), colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+LoginScreen.displayName = 'f7-login-screen';
+export default LoginScreen;

package/{esm/components → components}/menu-dropdown-item.js

@@ -1,51 +1,51 @@
 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';
-import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
 
-var MenuDropdownItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      link = props.link,
-      href = props.href,
-      target = props.target,
-      text = props.text,
-      divider = props.divider,
-      menuClose = props.menuClose;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const MenuDropdownItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    link,
+    href,
+    target,
+    text,
+    divider,
+    menuClose
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onClick = function onClick(e) {
+  const onClick = e => {
     emit(props, 'click', e);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
   useRouteProps(elRef, props);
-  var isLink = link || href || href === '';
-  var Tag = isLink ? 'a' : 'div';
-  var classes = classNames({
+  const isLink = link || href || href === '';
+  const Tag = isLink ? 'a' : 'div';
+  const classes = classNames({
     'menu-dropdown-link': isLink && !divider,
     'menu-dropdown-item': !isLink && !divider,
     'menu-dropdown-divider': divider
   }, className, colorClasses(props), routerClasses(props), actionsClasses(props), {
     'menu-close': typeof menuClose === 'undefined'
   });
-  var hrefComputed = href;
+  let hrefComputed = href;
   if (typeof hrefComputed === 'undefined' && link) hrefComputed = '#';
-
-  var attrs = _extends({
+  const attrs = {
     href: hrefComputed,
-    target: target
-  }, routerAttrs(props), actionsAttrs(props));
-
+    target,
+    ...routerAttrs(props),
+    ...actionsAttrs(props)
+  };
   return /*#__PURE__*/React.createElement(Tag, _extends({
     className: classes,
     id: id,

package/{esm/components → components}/menu-dropdown.js

@@ -1,31 +1,31 @@
 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';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var MenuDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      contentHeight = props.contentHeight,
-      position = props.position,
-      left = props.left,
-      center = props.center,
-      right = props.right;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var positionComputed = position || 'left';
+const MenuDropdown = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    contentHeight,
+    position,
+    left,
+    center,
+    right
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  let positionComputed = position || 'left';
   if (left) positionComputed = 'left';
   if (center) positionComputed = 'center';
   if (right) positionComputed = 'right';
-  var classes = classNames('menu-dropdown', "menu-dropdown-" + positionComputed, colorClasses(props), className);
+  const classes = classNames('menu-dropdown', `menu-dropdown-${positionComputed}`, colorClasses(props), className);
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,