framework7-react 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/swipeout-button.js

@@ -1,34 +1,34 @@
 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 } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var SwipeoutButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      text = props.text,
-      confirmTitle = props.confirmTitle,
-      confirmText = props.confirmText,
-      overswipe = props.overswipe,
-      close = props.close,
-      deleteProp = props.delete,
-      href = props.href;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const SwipeoutButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    text,
+    confirmTitle,
+    confirmText,
+    overswipe,
+    close,
+    delete: deleteProp,
+    href
+  } = 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
-    };
-  });
-  var classes = classNames(className, {
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, {
     'swipeout-overswipe': overswipe,
     'swipeout-delete': deleteProp,
     'swipeout-close': close

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

@@ -1,73 +1,73 @@
 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, useContext } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getComponentId } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7routers, f7, f7events } from '../shared/f7';
-import { useTab } from '../shared/use-tab';
-import { RouterContext } from '../shared/router-context';
-import { useAsyncComponent } from '../shared/use-async-component';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getComponentId } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+import { RouterContext } from '../shared/router-context.js';
+import { useAsyncComponent } from '../shared/use-async-component.js';
 
-var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      tabActive = props.tabActive;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var routerData = useRef(null);
-  var routerContext = useContext(RouterContext);
-  var initialTabContent = null;
+const Tab = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    tabActive
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const routerData = useRef(null);
+  const routerContext = useContext(RouterContext);
+  let initialTabContent = null;
 
   if (!routerData.current && routerContext && routerContext.route && routerContext.route.route && routerContext.route.route.tab && routerContext.route.route.tab.id === id) {
-    var _routerContext$route$ = routerContext.route.route.tab,
-        component = _routerContext$route$.component,
-        asyncComponent = _routerContext$route$.asyncComponent,
-        tabRouteOptions = _routerContext$route$.options;
+    const {
+      component,
+      asyncComponent,
+      options: tabRouteOptions
+    } = routerContext.route.route.tab;
 
     if (component || asyncComponent) {
-      var parentProps = routerContext.route.route.options && routerContext.route.route.options.props;
+      const parentProps = routerContext.route.route.options && routerContext.route.route.options.props;
       initialTabContent = {
         id: getComponentId(),
         component: component || asyncComponent,
         isAsync: !!asyncComponent,
-        props: _extends({}, parentProps || {}, tabRouteOptions && tabRouteOptions.props || {}, {
+        props: { ...(parentProps || {}),
+          ...(tabRouteOptions && tabRouteOptions.props || {}),
           f7router: routerContext.router,
-          f7route: routerContext.route
-        }, routerContext.route.params)
+          f7route: routerContext.route,
+          ...routerContext.route.params
+        }
       };
     }
   }
 
-  var _useState = useState(initialTabContent || null),
-      tabContent = _useState[0],
-      setTabContent = _useState[1];
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  const [tabContent, setTabContent] = useState(initialTabContent || null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
   if (f7 && !routerData.current) {
     routerData.current = {
-      setTabContent: setTabContent
+      setTabContent
     };
     f7routers.tabs.push(routerData.current);
   }
 
-  var onMount = function onMount() {
+  const onMount = () => {
     if (elRef.current && initialTabContent) {
       elRef.current.f7RouterTabLoaded = true;
     }
 
-    f7ready(function () {
+    f7ready(() => {
       if (!routerData.current) {
         routerData.current = {
           el: elRef.current,
-          setTabContent: setTabContent
+          setTabContent
         };
         f7routers.tabs.push(routerData.current);
       } else {
@@ -76,33 +76,33 @@ var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (!routerData.current) return;
     f7routers.tabs.splice(f7routers.tabs.indexOf(routerData.current), 1);
     routerData.current = null;
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!routerData.current || !f7) return;
     f7events.emit('tabRouterDidUpdate', routerData.current);
   });
   useTab(elRef, props);
-  var classes = classNames(className, 'tab', {
+  const classes = classNames(className, 'tab', {
     'tab-active': tabActive
   }, colorClasses(props));
 
-  var renderChildren = function renderChildren() {
+  const renderChildren = () => {
     if (!tabContent) return children;
 
     if (tabContent.isAsync) {
       return useAsyncComponent(tabContent.component, tabContent.props, tabContent.id);
     }
 
-    var TabContent = tabContent.component;
+    const TabContent = tabContent.component;
     return /*#__PURE__*/React.createElement(TabContent, _extends({
       key: tabContent.id
     }, tabContent.props));

package/{esm/components → components}/tabs.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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
 
-var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      animated = props.animated,
-      swipeable = props.swipeable,
-      routable = props.routable,
-      swiperParams = props.swiperParams;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
+const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    animated,
+    swipeable,
+    routable,
+    swiperParams
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  useIsomorphicLayoutEffect(() => {
     if (!swipeable || !swiperParams) return;
     if (!elRef.current) return;
     elRef.current.f7SwiperParams = swiperParams;
   }, []);
-  var classes = classNames(className, colorClasses(props));
-  var wrapClasses = classNames({
+  const classes = classNames(className, colorClasses(props));
+  const wrapClasses = classNames({
     'tabs-animated-wrap': animated,
     'tabs-swipeable-wrap': swipeable
   });
-  var tabsClasses = classNames({
+  const tabsClasses = classNames({
     tabs: true,
     'tabs-routable': routable
   });

package/components/text-editor.js

@@ -0,0 +1,141 @@
+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, getSlots, noUndefinedProps, 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';
+
+
+const TextEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7TextEditor = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    mode,
+    value,
+    buttons,
+    customButtons,
+    dividers,
+    imageUrlText,
+    linkUrlText,
+    placeholder,
+    clearFormattingOnPaste,
+    resizable = false
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const onChange = (editor, editorValue) => {
+    emit(props, 'textEditorChange', editorValue);
+  };
+
+  const onInput = (editor, editorValue) => {
+    emit(props, 'textEditorInput', editorValue);
+  };
+
+  const onFocus = () => {
+    emit(props, 'textEditorFocus');
+  };
+
+  const onBlur = () => {
+    emit(props, 'textEditorBlur');
+  };
+
+  const onButtonClick = (editor, button) => {
+    emit(props, 'textEditorButtonClick', button);
+  };
+
+  const onKeyboardOpen = () => {
+    emit(props, 'textEditorKeyboardOpen');
+  };
+
+  const onKeyboardClose = () => {
+    emit(props, 'textEditorKeyboardClose');
+  };
+
+  const onPopoverOpen = () => {
+    emit(props, 'textEditorPopoverOpen');
+  };
+
+  const onPopoverClose = () => {
+    emit(props, 'textEditorPopoverClose');
+  };
+
+  const onInsertLink = (editor, url) => {
+    emit(props, 'textEditorInsertLink', url);
+  };
+
+  const onInsertImage = (editor, url) => {
+    emit(props, 'textEditorInsertImage', url);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7TextEditor: () => f7TextEditor.current
+  }));
+  watchProp(value, newValue => {
+    if (f7TextEditor.current) {
+      f7TextEditor.current.setValue(newValue);
+    }
+  });
+
+  const onMount = () => {
+    const params = noUndefinedProps({
+      el: elRef.current,
+      mode,
+      value,
+      buttons,
+      customButtons,
+      dividers,
+      imageUrlText,
+      linkUrlText,
+      placeholder,
+      clearFormattingOnPaste,
+      on: {
+        change: onChange,
+        input: onInput,
+        focus: onFocus,
+        blur: onBlur,
+        buttonClick: onButtonClick,
+        keyboardOpen: onKeyboardOpen,
+        keyboardClose: onKeyboardClose,
+        popoverOpen: onPopoverOpen,
+        popoverClose: onPopoverClose,
+        insertLink: onInsertLink,
+        insertImage: onInsertImage
+      }
+    });
+    f7ready(() => {
+      f7TextEditor.current = f7.textEditor.create(params);
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7TextEditor.current && f7TextEditor.current.destroy) {
+      f7TextEditor.current.destroy();
+    }
+
+    f7TextEditor.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const slots = getSlots(props);
+  const classes = classNames(className, 'text-editor', resizable && 'text-editor-resizable', colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: elRef,
+    id: id,
+    style: style,
+    className: classes
+  }, extraAttrs), slots['root-start'], /*#__PURE__*/React.createElement("div", {
+    className: "text-editor-content",
+    contentEditable: true
+  }, slots.default), slots['root-end'], slots.root);
+});
+TextEditor.displayName = 'f7-text-editor';
+export default TextEditor;

package/components/toggle.js

@@ -0,0 +1,114 @@
+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 { useTooltip } from '../shared/use-tooltip.js';
+
+
+const Toggle = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Toggle = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    init = true,
+    checked,
+    defaultChecked,
+    disabled,
+    readonly,
+    name,
+    value
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const inputElRef = useRef(null);
+
+  const onChange = event => {
+    emit(props, 'change', event);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Toggle: () => f7Toggle.current
+  }));
+  useTooltip(elRef, props);
+  watchProp(checked, newValue => {
+    if (!f7Toggle.current) return;
+    f7Toggle.current.checked = newValue;
+  });
+
+  const onToggleChange = toggleInstance => {
+    emit(props, 'toggleChange', toggleInstance.checked);
+  };
+
+  const toggleEvents = method => {
+    if (!f7Toggle.current) return;
+    f7Toggle.current[method]('toggleChange', onToggleChange);
+  };
+
+  const onMount = () => {
+    f7ready(() => {
+      if (!init || !elRef.current) return;
+      f7Toggle.current = f7.toggle.create({
+        el: elRef.current
+      });
+      toggleEvents('on');
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Toggle.current && f7Toggle.current.destroy && f7Toggle.current.$el) {
+      f7Toggle.current.destroy();
+    }
+
+    f7Toggle.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    toggleEvents('on');
+
+    if (inputElRef.current) {
+      inputElRef.current.addEventListener('change', onChange);
+    }
+
+    return () => {
+      toggleEvents('off');
+
+      if (inputElRef.current) {
+        inputElRef.current.removeEventListener('change', onChange);
+      }
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const labelClasses = classNames('toggle', className, {
+    disabled
+  }, colorClasses(props));
+  const inputEl = /*#__PURE__*/React.createElement("input", {
+    ref: inputElRef,
+    type: "checkbox",
+    name: name,
+    disabled: disabled,
+    readOnly: readonly,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    value: value,
+    onChange: () => {}
+  });
+  return /*#__PURE__*/React.createElement("label", _extends({
+    id: id,
+    style: style,
+    className: labelClasses,
+    ref: elRef
+  }, extraAttrs), inputEl, /*#__PURE__*/React.createElement("span", {
+    className: "toggle-icon"
+  }));
+});
+Toggle.displayName = 'f7-toggle';
+export default Toggle;