framework7-react 6.3.5 → 7.0.0-beta.10

package/{esm/components → components}/list-item-content.js

@@ -1,57 +1,59 @@
 import React, { useRef, useEffect } from 'react';
-import { classNames } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import Badge from './badge';
-
-var ListItemContent = function ListItemContent(props) {
-  var indeterminate = props.indeterminate,
-      radio = props.radio,
-      checkbox = props.checkbox,
-      value = props.value,
-      name = props.name,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked,
-      required = props.required,
-      media = props.media,
-      header = props.header,
-      footer = props.footer,
-      title = props.title,
-      subtitle = props.subtitle,
-      text = props.text,
-      after = props.after,
-      badge = props.badge,
-      badgeColor = props.badgeColor,
-      radioIcon = props.radioIcon,
-      swipeout = props.swipeout,
-      sortable = props.sortable,
-      accordionItem = props.accordionItem,
-      onChange = props.onChange,
-      onClick = props.onClick,
-      isMediaComputed = props.isMediaComputed,
-      isSortableComputed = props.isSortableComputed,
-      isSortableOppositeComputed = props.isSortableOppositeComputed,
-      slots = props.slots;
-  var inputElRef = useRef(null);
-  useEffect(function () {
+import { classNames } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import Badge from './badge.js';
+
+const ListItemContent = props => {
+  const {
+    indeterminate,
+    radio,
+    checkbox,
+    value,
+    name,
+    readonly,
+    disabled,
+    checked,
+    defaultChecked,
+    required,
+    media,
+    header,
+    footer,
+    title,
+    subtitle,
+    text,
+    after,
+    badge,
+    badgeColor,
+    radioIcon,
+    swipeout,
+    sortable,
+    accordionItem,
+    onChange,
+    onClick,
+    isMediaComputed,
+    isSortableComputed,
+    isSortableOppositeComputed,
+    slots
+  } = props;
+  const inputElRef = useRef(null);
+  useEffect(() => {
     if (inputElRef.current) {
       inputElRef.current.indeterminate = !!indeterminate;
     }
   }, [indeterminate]);
-  var titleEl;
-  var afterWrapEl;
-  var afterEl;
-  var badgeEl;
-  var innerEl;
-  var titleRowEl;
-  var subtitleEl;
-  var textEl;
-  var mediaEl;
-  var inputEl;
-  var inputIconEl;
-  var headerEl;
-  var footerEl; // Input
+  let titleEl;
+  let afterWrapEl;
+  let afterEl;
+  let badgeEl;
+  let innerEl;
+  let titleRowEl;
+  let subtitleEl;
+  let textEl;
+  let mediaEl;
+  let inputEl;
+  let inputIconEl;
+  let headerEl;
+  let footerEl; // Input
 
   if (radio || checkbox) {
     inputEl = /*#__PURE__*/React.createElement("input", {
@@ -67,13 +69,13 @@ var ListItemContent = function ListItemContent(props) {
       onChange: onChange
     });
     inputIconEl = /*#__PURE__*/React.createElement("i", {
-      className: "icon icon-" + (radio ? 'radio' : 'checkbox')
+      className: `icon icon-${radio ? 'radio' : 'checkbox'}`
     });
   } // Media
 
 
   if (media || slots.media) {
-    var mediaImgEl;
+    let mediaImgEl;
 
     if (media) {
       mediaImgEl = /*#__PURE__*/React.createElement("img", {
@@ -146,8 +148,8 @@ var ListItemContent = function ListItemContent(props) {
     }, slots['inner-start'], slots['before-title'], titleEl, slots['after-title'], afterWrapEl, swipeout || accordionItem ? null : slots.default, slots.inner, slots['inner-end']);
   }
 
-  var ItemContentTag = checkbox || radio ? 'label' : 'div';
-  var classes = classNames('item-content', {
+  const ItemContentTag = checkbox || radio ? 'label' : 'div';
+  const classes = classNames('item-content', {
     'item-checkbox': checkbox,
     'item-radio': radio,
     'item-radio-icon-start': radio && radioIcon === 'start',

package/{esm/components → components}/list-item-row.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 ListItemRow = /*#__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, 'item-row', colorClasses(props));
+const ListItemRow = /*#__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, 'item-row', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

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

@@ -1,16 +1,16 @@
 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, useContext } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useRouteProps } from '../shared/use-route-props';
-import { useSmartSelect } from '../shared/use-smart-select';
-import { useTooltip } from '../shared/use-tooltip';
-import { watchProp } from '../shared/watch-prop';
-import { f7ready, f7 } from '../shared/f7';
-import ListItemContent from './list-item-content';
-import { ListContext } from '../shared/list-context';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import ListItemContent from './list-item-content.js';
+import { ListContext } from '../shared/list-context.js';
 
 
 /*
@@ -52,150 +52,142 @@ const ListItemContent = ({
 };
 */
 
-var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      title = props.title,
-      link = props.link,
-      target = props.target,
-      tabLink = props.tabLink,
-      tabLinkActive = props.tabLinkActive,
-      selected = props.selected,
-      mediaItem = props.mediaItem,
-      mediaList = props.mediaList,
-      divider = props.divider,
-      groupTitle = props.groupTitle,
-      swipeout = props.swipeout,
-      swipeoutOpened = props.swipeoutOpened,
-      sortable = props.sortable,
-      sortableOpposite = props.sortableOpposite,
-      accordionItem = props.accordionItem,
-      accordionItemOpened = props.accordionItemOpened,
-      smartSelect = props.smartSelect,
-      smartSelectParams = props.smartSelectParams,
-      noChevron = props.noChevron,
-      chevronCenter = props.chevronCenter,
-      checkbox = props.checkbox,
-      radio = props.radio,
-      disabled = props.disabled,
-      virtualListIndex = props.virtualListIndex,
-      href = props.href;
-  var listContext = useContext(ListContext);
-
-  var _ref = listContext || {},
-      _ref$listIsMedia = _ref.listIsMedia,
-      listIsMedia = _ref$listIsMedia === void 0 ? false : _ref$listIsMedia,
-      _ref$listIsSortable = _ref.listIsSortable,
-      listIsSortable = _ref$listIsSortable === void 0 ? false : _ref$listIsSortable,
-      _ref$listIsSortableOp = _ref.listIsSortableOpposite,
-      listIsSortableOpposite = _ref$listIsSortableOp === void 0 ? false : _ref$listIsSortableOp,
-      _ref$listIsSimple = _ref.listIsSimple,
-      listIsSimple = _ref$listIsSimple === void 0 ? false : _ref$listIsSimple;
-
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var linkElRef = useRef(null);
-
-  var _f7SmartSelect = useRef(null);
-
-  var onClick = function onClick(event) {
+const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    title,
+    link,
+    target,
+    tabLink,
+    tabLinkActive,
+    selected,
+    mediaItem,
+    mediaList,
+    divider,
+    groupTitle,
+    swipeout,
+    swipeoutOpened,
+    sortable,
+    sortableOpposite,
+    accordionItem,
+    accordionItemOpened,
+    smartSelect,
+    smartSelectParams,
+    noChevron,
+    chevronCenter,
+    checkbox,
+    radio,
+    disabled,
+    virtualListIndex,
+    href
+  } = props;
+  const listContext = useContext(ListContext);
+  const {
+    listIsMedia = false,
+    listIsSortable = false,
+    listIsSortableOpposite = false,
+    listIsSimple = false
+  } = listContext || {};
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const linkElRef = useRef(null);
+  const f7SmartSelect = useRef(null);
+
+  const onClick = event => {
     if (event.target.tagName.toLowerCase() !== 'input') {
       emit(props, 'click', event);
     }
   };
 
-  var onSwipeoutOverswipeEnter = function onSwipeoutOverswipeEnter(el) {
+  const onSwipeoutOverswipeEnter = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutOverswipeEnter');
   };
 
-  var onSwipeoutOverswipeExit = function onSwipeoutOverswipeExit(el) {
+  const onSwipeoutOverswipeExit = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutOverswipeExit');
   };
 
-  var onSwipeoutDeleted = function onSwipeoutDeleted(el) {
+  const onSwipeoutDeleted = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutDeleted');
   };
 
-  var onSwipeoutDelete = function onSwipeoutDelete(el) {
+  const onSwipeoutDelete = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutDelete');
   };
 
-  var onSwipeoutClose = function onSwipeoutClose(el) {
+  const onSwipeoutClose = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutClose');
   };
 
-  var onSwipeoutClosed = function onSwipeoutClosed(el) {
+  const onSwipeoutClosed = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutClosed');
   };
 
-  var onSwipeoutOpen = function onSwipeoutOpen(el) {
+  const onSwipeoutOpen = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutOpen');
   };
 
-  var onSwipeoutOpened = function onSwipeoutOpened(el) {
+  const onSwipeoutOpened = el => {
     if (elRef.current !== el) return;
     emit(props, 'swipeoutOpened');
   };
 
-  var onSwipeout = function onSwipeout(el, progress) {
+  const onSwipeout = (el, progress) => {
     if (elRef.current !== el) return;
     emit(props, 'swipeout', progress);
   };
 
-  var onAccBeforeClose = function onAccBeforeClose(el, prevent) {
+  const onAccBeforeClose = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'accordionBeforeClose', prevent);
   };
 
-  var onAccClose = function onAccClose(el) {
+  const onAccClose = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionClose');
   };
 
-  var onAccClosed = function onAccClosed(el) {
+  const onAccClosed = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionClosed');
   };
 
-  var onAccBeforeOpen = function onAccBeforeOpen(el, prevent) {
+  const onAccBeforeOpen = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'accordionBeforeOpen', prevent);
   };
 
-  var onAccOpen = function onAccOpen(el) {
+  const onAccOpen = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionOpen');
   };
 
-  var onAccOpened = function onAccOpened(el) {
+  const onAccOpened = el => {
     if (elRef.current !== el) return;
     emit(props, 'accordionOpened');
   };
 
-  var onChange = function onChange(event) {
+  const onChange = event => {
     emit(props, 'change', event);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7SmartSelect: function f7SmartSelect() {
-        return _f7SmartSelect.current;
-      }
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7SmartSelect: () => f7SmartSelect.current
+  }));
   useTooltip(elRef, props);
   useRouteProps(linkElRef, props);
-  watchProp(swipeoutOpened, function (newValue) {
+  watchProp(swipeoutOpened, newValue => {
     if (!swipeout || !elRef.current || !f7) return;
 
     if (newValue) {
@@ -205,8 +197,8 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   });
 
-  var attachEvents = function attachEvents() {
-    f7ready(function () {
+  const attachEvents = () => {
+    f7ready(() => {
       if (swipeout) {
         f7.on('swipeoutOpen', onSwipeoutOpen);
         f7.on('swipeoutOpened', onSwipeoutOpened);
@@ -230,7 +222,7 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('swipeoutOpen', onSwipeoutOpen);
     f7.off('swipeoutOpened', onSwipeoutOpened);
@@ -249,26 +241,24 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('accordionClosed', onAccClosed);
   };
 
-  useSmartSelect(smartSelect, smartSelectParams, _f7SmartSelect, function () {
-    return elRef.current.querySelector('a.smart-select');
-  });
-  useIsomorphicLayoutEffect(function () {
-    f7ready(function () {
+  useSmartSelect(smartSelect, smartSelectParams, f7SmartSelect, () => elRef.current.querySelector('a.smart-select'));
+  useIsomorphicLayoutEffect(() => {
+    f7ready(() => {
       if (swipeout && swipeoutOpened) {
         f7.swipeout.open(elRef.current);
       }
     });
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  var slots = getSlots(props);
-  var linkEl;
-  var itemContentEl;
-  var isMediaComputed = mediaItem || mediaList || listIsMedia;
-  var isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
-  var isSortableOppositeComputed = isSortableComputed && (sortableOpposite || listIsSortableOpposite);
+  const slots = getSlots(props);
+  let linkEl;
+  let itemContentEl;
+  const isMediaComputed = mediaItem || mediaList || listIsMedia;
+  const isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
+  const isSortableOppositeComputed = isSortableComputed && (sortableOpposite || listIsSortableOpposite);
 
   if (!listIsSimple) {
     // Item Content
@@ -282,13 +272,14 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     })); // Link
 
     if (link || href || accordionItem || smartSelect) {
-      var linkAttrs = _extends({
+      const linkAttrs = {
         href: link === true ? '' : link || href,
-        target: target,
-        'data-tab': isStringProp(tabLink) && tabLink || undefined
-      }, routerAttrs(props), actionsAttrs(props));
-
-      var linkClasses = classNames({
+        target,
+        'data-tab': isStringProp(tabLink) && tabLink || undefined,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+      const linkClasses = classNames({
         'item-link': true,
         'smart-select': smartSelect,
         'tab-link': tabLink || tabLink === '',
@@ -304,11 +295,11 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
-  var liClasses = classNames(className, {
+  const liClasses = classNames(className, {
     'item-divider': divider,
     'list-group-title': groupTitle,
     'media-item': isMediaComputed,
-    swipeout: swipeout,
+    swipeout,
     'accordion-item': accordionItem,
     'accordion-item-opened': accordionItemOpened,
     disabled: disabled && !(radio || checkbox),
@@ -339,7 +330,7 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }, title, children);
   }
 
-  var linkItemEl = link || href || smartSelect || accordionItem ? linkEl : itemContentEl;
+  const linkItemEl = link || href || smartSelect || accordionItem ? linkEl : itemContentEl;
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: elRef,
     id: id,