framework7-react 6.3.15 → 7.0.0-beta.11

package/components/photo-browser.js

@@ -0,0 +1,164 @@
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { extend, emit } from '../shared/utils.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { f7ready, f7 } from '../shared/f7.js';
+
+
+const PhotoBrowser = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7PhotoBrowser = useRef(null);
+  const {
+    init = true,
+    params,
+    photos,
+    exposition = true,
+    expositionHideCaptions = false,
+    type,
+    navbar = true,
+    toolbar = true,
+    theme,
+    captionsTheme,
+    iconsColor,
+    swipeToClose = true,
+    pageBackLinkText,
+    popupCloseLinkText,
+    navbarOfText,
+    navbarShowCount,
+    swiper,
+    url,
+    routableModals = false,
+    virtualSlides = true,
+    view,
+    renderNavbar,
+    renderToolbar,
+    renderCaption,
+    renderObject,
+    renderLazyPhoto,
+    renderPhoto,
+    renderPage,
+    renderPopup,
+    renderStandalone
+  } = props;
+
+  const open = index => {
+    return f7PhotoBrowser.current.open(index);
+  };
+
+  const close = () => {
+    return f7PhotoBrowser.current.close();
+  };
+
+  const expositionToggle = () => {
+    return f7PhotoBrowser.current.expositionToggle();
+  };
+
+  const expositionEnable = () => {
+    return f7PhotoBrowser.current.expositionEnable();
+  };
+
+  const expositionDisable = () => {
+    return f7PhotoBrowser.current.expositionDisable();
+  };
+
+  useImperativeHandle(ref, () => ({
+    f7PhotoBrowser: () => f7PhotoBrowser.current,
+    open,
+    close,
+    expositionToggle,
+    expositionEnable,
+    expositionDisable
+  }));
+  watchProp(photos, newValue => {
+    const pb = f7PhotoBrowser.current;
+    if (!pb) return;
+    pb.params.photos = newValue;
+
+    if (pb.opened && pb.swiper) {
+      pb.swiper.update();
+    }
+  });
+
+  const onMount = () => {
+    if (!init) return;
+    f7ready(() => {
+      let paramsComputed;
+
+      if (typeof params !== 'undefined') {
+        paramsComputed = params;
+      } else {
+        paramsComputed = {
+          photos,
+          exposition,
+          expositionHideCaptions,
+          type,
+          navbar,
+          toolbar,
+          theme,
+          captionsTheme,
+          iconsColor,
+          swipeToClose,
+          pageBackLinkText,
+          popupCloseLinkText,
+          navbarOfText,
+          navbarShowCount,
+          swiper,
+          url,
+          routableModals,
+          virtualSlides,
+          view,
+          renderNavbar,
+          renderToolbar,
+          renderCaption,
+          renderObject,
+          renderLazyPhoto,
+          renderPhoto,
+          renderPage,
+          renderPopup,
+          renderStandalone
+        };
+      }
+
+      Object.keys(paramsComputed).forEach(param => {
+        if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
+      });
+      paramsComputed = extend({}, paramsComputed, {
+        on: {
+          open() {
+            emit(props, 'photoBrowserOpen');
+          },
+
+          close() {
+            emit(props, 'photoBrowserClose');
+          },
+
+          opened() {
+            emit(props, 'photoBrowserOpened');
+          },
+
+          closed() {
+            emit(props, 'photoBrowserClosed');
+          },
+
+          swipeToClose() {
+            emit(props, 'photoBrowserSwipeToClose');
+          }
+
+        }
+      });
+      f7PhotoBrowser.current = f7.photoBrowser.create(paramsComputed);
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7PhotoBrowser.current && f7PhotoBrowser.current.destroy) f7PhotoBrowser.current.destroy();
+    f7PhotoBrowser.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  return null;
+});
+PhotoBrowser.displayName = 'f7-photo-browser';
+export default PhotoBrowser;

package/components/pie-chart.js

@@ -0,0 +1,171 @@
+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, useState, useEffect } from 'react';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { f7 } from '../shared/f7.js';
+
+const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    size = 320,
+    tooltip = false,
+    datasets = [],
+    formatTooltip,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const [currentIndex, setCurrentIndex] = useState(null);
+  const previousIndex = useRef(null);
+  const elRef = useRef(null);
+  const f7Tooltip = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const getSummValue = () => {
+    let summ = 0;
+    datasets.map(d => d.value || 0).forEach(value => {
+      summ += value;
+    });
+    return summ;
+  };
+
+  const getPaths = () => {
+    const paths = [];
+    let cumulativePercentage = 0;
+
+    function getCoordinatesForPercentage(percentage) {
+      const x = Math.cos(2 * Math.PI * percentage) * (size / 3);
+      const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
+      return [x, y];
+    }
+
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
+      const percentage = value / getSummValue();
+      const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
+      cumulativePercentage += percentage;
+      const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
+      const largeArcFlag = percentage > 0.5 ? 1 : 0;
+      const points = [`M ${startX} ${startY}`, // Move
+      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+      'L 0 0' // Line
+      ].join(' ');
+      paths.push({
+        points,
+        label,
+        color
+      });
+    });
+    return paths;
+  };
+
+  const formatTooltipText = () => {
+    if (currentIndex === null) return '';
+    const {
+      value,
+      label,
+      color
+    } = datasets[currentIndex];
+    const percentage = value / getSummValue() * 100;
+
+    const round = v => {
+      if (parseInt(v, 10) === v) return v;
+      return Math.round(v * 100) / 100;
+    };
+
+    if (formatTooltip) {
+      return formatTooltip({
+        index: currentIndex,
+        value,
+        label,
+        color,
+        percentage
+      });
+    }
+
+    const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
+    return `
+      <div class="pie-chart-tooltip-label">
+        <span class="pie-chart-tooltip-color" style="background-color: ${color};"></span> ${tooltipText}
+      </div>
+    `;
+  };
+
+  const setTooltip = () => {
+    if (currentIndex === null && !f7Tooltip.current) return;
+    if (!tooltip || !elRef.current || !f7) return;
+
+    if (currentIndex !== null && !f7Tooltip.current) {
+      f7Tooltip.current = f7.tooltip.create({
+        trigger: 'manual',
+        containerEl: elRef.current,
+        targetEl: elRef.current.querySelector(`path[data-index="${currentIndex}"]`),
+        text: formatTooltipText(),
+        cssClass: 'pie-chart-tooltip'
+      });
+      f7Tooltip.current.show();
+      return;
+    }
+
+    if (!f7Tooltip.current) return;
+
+    if (currentIndex !== null) {
+      f7Tooltip.current.setText(formatTooltipText());
+      f7Tooltip.current.setTargetEl(elRef.current.querySelector(`path[data-index="${currentIndex}"]`));
+      f7Tooltip.current.show();
+    } else {
+      f7Tooltip.current.hide();
+    }
+  };
+
+  useEffect(() => {
+    if (previousIndex.current === currentIndex) return;
+    previousIndex.current = currentIndex;
+    emit(props, 'select', currentIndex, datasets[currentIndex]);
+    setTooltip();
+  }, [currentIndex]);
+  useEffect(() => {
+    return () => {
+      if (f7Tooltip.current && f7Tooltip.current.destroy) {
+        f7Tooltip.current.destroy();
+      }
+
+      f7Tooltip.current = null;
+    };
+  }, []);
+  const classes = classNames('pie-chart', className);
+  const paths = getPaths();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: `-${size / 3} -${size / 3} ${size * 2 / 3} ${size * 2 / 3}`,
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  }, paths.map((path, index) => /*#__PURE__*/React.createElement("path", {
+    key: path.label || index,
+    d: path.points,
+    fill: path.color,
+    "data-index": index,
+    className: classNames({
+      'pie-chart-hidden': currentIndex !== null && currentIndex !== index
+    }),
+    onClick: () => setCurrentIndex(index),
+    onMouseEnter: () => setCurrentIndex(index),
+    onMouseLeave: () => setCurrentIndex(null)
+  }))), children);
+});
+PieChart.displayName = 'f7-pie-chart';
+export default PieChart;

package/components/popover.js

@@ -0,0 +1,134 @@
+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 Popover = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Popover = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    opened,
+    animate,
+    targetEl,
+    backdrop,
+    backdropEl,
+    closeByBackdropClick,
+    closeByOutsideClick,
+    closeOnEscape,
+    containerEl
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const isOpened = useRef(opened);
+  const isClosing = useRef(false);
+
+  const onOpen = instance => {
+    isOpened.current = true;
+    isClosing.current = false;
+    emit(props, 'popoverOpen', instance);
+  };
+
+  const onOpened = instance => {
+    emit(props, 'popoverOpened', instance);
+  };
+
+  const onClose = instance => {
+    isOpened.current = false;
+    isClosing.current = true;
+    emit(props, 'popoverClose', instance);
+  };
+
+  const onClosed = instance => {
+    isClosing.current = false;
+    emit(props, 'popoverClosed', instance);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Popover: () => f7Popover.current
+  }));
+  watchProp(opened, value => {
+    if (!f7Popover.current) return;
+
+    if (value) {
+      f7Popover.current.open();
+    } else {
+      f7Popover.current.close();
+    }
+  });
+
+  const modalEvents = method => {
+    if (!f7Popover.current) return;
+    f7Popover.current[method]('open', onOpen);
+    f7Popover.current[method]('opened', onOpened);
+    f7Popover.current[method]('close', onClose);
+    f7Popover.current[method]('closed', onClosed);
+  };
+
+  const onMount = () => {
+    if (!elRef.current) return;
+    const popoverParams = {
+      el: elRef.current
+    };
+    if (targetEl) popoverParams.targetEl = targetEl;
+    if ('closeByBackdropClick' in props) popoverParams.closeByBackdropClick = closeByBackdropClick;
+    if ('closeByOutsideClick' in props) popoverParams.closeByOutsideClick = closeByOutsideClick;
+    if ('closeOnEscape' in props) popoverParams.closeOnEscape = closeOnEscape;
+    if ('backdrop' in props) popoverParams.backdrop = backdrop;
+    if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
+    if ('animate' in props) popoverParams.animate = animate;
+    if ('containerEl' in props) popoverParams.containerEl = containerEl;
+    f7ready(() => {
+      f7Popover.current = f7.popover.create(popoverParams);
+      modalEvents('on');
+
+      if (opened && targetEl) {
+        f7Popover.current.open(targetEl, false);
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Popover.current) {
+      f7Popover.current.destroy();
+    }
+
+    f7Popover.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    modalEvents('on');
+    return () => {
+      modalEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'popover', modalStateClasses({
+    isOpened,
+    isClosing
+  }), colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), /*#__PURE__*/React.createElement("div", {
+    className: "popover-angle"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "popover-inner"
+  }, children));
+});
+Popover.displayName = 'f7-popover';
+export default Popover;

package/components/popup.js

@@ -0,0 +1,155 @@
+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, useImperativeHandle, useRef } from 'react';
+import { f7, f7ready } from '../shared/f7.js';
+import { colorClasses } from '../shared/mixins.js';
+import { modalStateClasses } from '../shared/modal-state-classes.js';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, emit, getExtraAttrs } from '../shared/utils.js';
+import { watchProp } from '../shared/watch-prop.js';
+
+
+const Popup = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Popup = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    tabletFullscreen,
+    push,
+    opened,
+    closeByBackdropClick,
+    backdrop,
+    backdropEl,
+    animate,
+    closeOnEscape,
+    swipeToClose = false,
+    swipeHandler,
+    containerEl
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const isOpened = useRef(opened);
+  const isClosing = useRef(false);
+
+  const onSwipeStart = instance => {
+    emit(props, 'popupSwipeStart', instance);
+  };
+
+  const onSwipeMove = instance => {
+    emit(props, 'popupSwipeMove', instance);
+  };
+
+  const onSwipeEnd = instance => {
+    emit(props, 'popupSwipeEnd', instance);
+  };
+
+  const onSwipeClose = instance => {
+    emit(props, 'popupSwipeClose', instance);
+  };
+
+  const onOpen = instance => {
+    isOpened.current = true;
+    isClosing.current = false;
+    emit(props, 'popupOpen', instance);
+  };
+
+  const onOpened = instance => {
+    emit(props, 'popupOpened', instance);
+  };
+
+  const onClose = instance => {
+    isOpened.current = false;
+    isClosing.current = true;
+    emit(props, 'popupClose', instance);
+  };
+
+  const onClosed = instance => {
+    isClosing.current = false;
+    emit(props, 'popupClosed', instance);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Popup: () => f7Popup.current
+  }));
+  watchProp(opened, value => {
+    if (!f7Popup.current) return;
+
+    if (value) {
+      f7Popup.current.open();
+    } else {
+      f7Popup.current.close();
+    }
+  });
+
+  const modalEvents = method => {
+    if (!f7Popup.current) return;
+    f7Popup.current[method]('swipeStart', onSwipeStart);
+    f7Popup.current[method]('swipeMove', onSwipeMove);
+    f7Popup.current[method]('swipeEnd', onSwipeEnd);
+    f7Popup.current[method]('swipeClose', onSwipeClose);
+    f7Popup.current[method]('open', onOpen);
+    f7Popup.current[method]('opened', onOpened);
+    f7Popup.current[method]('close', onClose);
+    f7Popup.current[method]('closed', onClosed);
+  };
+
+  const onMount = () => {
+    if (!elRef.current) return;
+    const popupParams = {
+      el: elRef.current
+    };
+    if ('closeByBackdropClick' in props) popupParams.closeByBackdropClick = closeByBackdropClick;
+    if ('closeOnEscape' in props) popupParams.closeOnEscape = closeOnEscape;
+    if ('animate' in props) popupParams.animate = animate;
+    if ('backdrop' in props) popupParams.backdrop = backdrop;
+    if ('backdropEl' in props) popupParams.backdropEl = backdropEl;
+    if ('swipeToClose' in props) popupParams.swipeToClose = swipeToClose;
+    if ('swipeHandler' in props) popupParams.swipeHandler = swipeHandler;
+    if ('containerEl' in props) popupParams.containerEl = containerEl;
+    f7ready(() => {
+      f7Popup.current = f7.popup.create(popupParams);
+      modalEvents('on');
+
+      if (opened) {
+        f7Popup.current.open(false);
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Popup.current) {
+      f7Popup.current.destroy();
+    }
+
+    f7Popup.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    modalEvents('on');
+    return () => {
+      modalEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'popup', {
+    'popup-tablet-fullscreen': tabletFullscreen,
+    'popup-push': push
+  }, modalStateClasses({
+    isOpened,
+    isClosing
+  }), colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+Popup.displayName = 'f7-popup';
+export default Popup;

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

@@ -1,38 +1,38 @@
 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, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTheme } from '../shared/use-theme';
+import { classNames, getExtraAttrs, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
 
-var Preloader = /*#__PURE__*/forwardRef(function (props, ref) {
-  var theme = useTheme();
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      size = props.size;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var preloaderStyle = {};
-  var sizeComputed = size;
+const Preloader = /*#__PURE__*/forwardRef((props, ref) => {
+  const theme = useTheme();
+  const {
+    className,
+    id,
+    style,
+    size
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const preloaderStyle = {};
+  let sizeComputed = size;
 
   if (sizeComputed && typeof sizeComputed === 'string' && sizeComputed.indexOf('px') >= 0) {
     sizeComputed = sizeComputed.replace('px', '');
   }
 
   if (sizeComputed) {
-    preloaderStyle.width = sizeComputed + "px";
-    preloaderStyle.height = sizeComputed + "px";
-    preloaderStyle['--f7-preloader-size'] = sizeComputed + "px";
+    preloaderStyle.width = `${sizeComputed}px`;
+    preloaderStyle.height = `${sizeComputed}px`;
+    preloaderStyle['--f7-preloader-size'] = `${sizeComputed}px`;
   }
 
   if (style) extend(preloaderStyle, style || {});
-  var innerEl;
+  let innerEl;
 
   if (theme && theme.md) {
     innerEl = /*#__PURE__*/React.createElement("span", {
@@ -76,7 +76,7 @@ var Preloader = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  var classes = classNames(className, 'preloader', colorClasses(props));
+  const classes = classNames(className, 'preloader', colorClasses(props));
   return /*#__PURE__*/React.createElement("span", _extends({
     id: id,
     style: preloaderStyle,