framework7-react 6.3.5 → 7.0.0-beta.10

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

@@ -1,100 +1,100 @@
 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 } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, getSlots, emit, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import Toggle from './toggle';
-import Range from './range';
-import TextEditor from './text-editor';
-
-
-var Input = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      type = props.type,
-      name = props.name,
-      value = props.value,
-      defaultValue = props.defaultValue,
-      inputmode = props.inputmode,
-      placeholder = props.placeholder,
-      inputId = props.inputId,
-      size = props.size,
-      accept = props.accept,
-      autocomplete = props.autocomplete,
-      autocorrect = props.autocorrect,
-      autocapitalize = props.autocapitalize,
-      spellcheck = props.spellcheck,
-      autofocus = props.autofocus,
-      autosave = props.autosave,
-      checked = props.checked,
-      disabled = props.disabled,
-      max = props.max,
-      min = props.min,
-      step = props.step,
-      maxlength = props.maxlength,
-      minlength = props.minlength,
-      multiple = props.multiple,
-      readonly = props.readonly,
-      required = props.required,
-      inputStyle = props.inputStyle,
-      pattern = props.pattern,
-      validate = props.validate,
-      validateOnBlur = props.validateOnBlur,
-      onValidate = props.onValidate,
-      tabindex = props.tabindex,
-      resizable = props.resizable,
-      clearButton = props.clearButton,
-      noFormStoreData = props.noFormStoreData,
-      noStoreData = props.noStoreData,
-      ignoreStoreData = props.ignoreStoreData,
-      errorMessage = props.errorMessage,
-      errorMessageForce = props.errorMessageForce,
-      info = props.info,
-      outline = props.outline,
-      _props$wrap = props.wrap,
-      wrap = _props$wrap === void 0 ? true : _props$wrap,
-      _props$dropdown = props.dropdown,
-      dropdown = _props$dropdown === void 0 ? 'auto' : _props$dropdown,
-      calendarParams = props.calendarParams,
-      colorPickerParams = props.colorPickerParams,
-      textEditorParams = props.textEditorParams;
-
-  var _useState = useState(false),
-      inputInvalid = _useState[0],
-      setInputInvalid = _useState[1];
-
-  var _useState2 = useState(false),
-      inputFocused = _useState2[0],
-      setInputFocused = _useState2[1];
-
-  var extraAttrs = getExtraAttrs(props);
-  var f7Calendar = useRef(null);
-  var f7ColorPicker = useRef(null);
-  var elRef = useRef(null);
-  var inputElRef = useRef(null);
-  var updateInputOnDidUpdate = useRef(false);
-
-  var getDomValue = function getDomValue() {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, getSlots, emit, extend } 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 Toggle from './toggle.js';
+import Range from './range.js';
+import TextEditor from './text-editor.js';
+
+
+const Input = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    type,
+    name,
+    value,
+    defaultValue,
+    inputmode,
+    placeholder,
+    inputId,
+    size,
+    accept,
+    autocomplete,
+    autocorrect,
+    autocapitalize,
+    spellcheck,
+    autofocus,
+    autosave,
+    checked,
+    disabled,
+    max,
+    min,
+    step,
+    maxlength,
+    minlength,
+    multiple,
+    readonly,
+    required,
+    inputStyle,
+    pattern,
+    validate,
+    validateOnBlur,
+    onValidate,
+    tabindex,
+    resizable,
+    clearButton,
+    // Form
+    noFormStoreData,
+    noStoreData,
+    ignoreStoreData,
+    // Error, Info
+    errorMessage,
+    errorMessageForce,
+    info,
+    // Outline
+    outline,
+    // Components
+    wrap = true,
+    dropdown = 'auto',
+    // Datepicker
+    calendarParams,
+    // Colorpciker
+    colorPickerParams,
+    // Text editor
+    textEditorParams
+  } = props;
+  const [inputInvalid, setInputInvalid] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+  const extraAttrs = getExtraAttrs(props);
+  const f7Calendar = useRef(null);
+  const f7ColorPicker = useRef(null);
+  const elRef = useRef(null);
+  const inputElRef = useRef(null);
+  const updateInputOnDidUpdate = useRef(false);
+
+  const getDomValue = () => {
     if (!inputElRef.current) return undefined;
     return inputElRef.current.value;
   };
 
-  var isInputHasValue = function isInputHasValue() {
+  const isInputHasValue = () => {
     if (type === 'datepicker' && Array.isArray(value) && value.length === 0) {
       return false;
     }
 
-    var domValue = getDomValue();
+    const domValue = getDomValue();
     return typeof value === 'undefined' ? domValue || domValue === 0 : value || value === 0;
   };
 
-  var validateInput = function validateInput() {
+  const validateInput = () => {
     if (!f7 || !inputElRef.current) return;
-    var validity = inputElRef.current.validity;
+    const validity = inputElRef.current.validity;
     if (!validity) return;
 
     if (!validity.valid) {
@@ -112,49 +112,37 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  var onTextareaResize = function onTextareaResize(event) {
+  const onTextareaResize = event => {
     emit(props, 'textareaResize', event);
   };
 
-  var onInputNotEmpty = function onInputNotEmpty(event) {
+  const onInputNotEmpty = event => {
     emit(props, 'inputNotEmpty', event);
   };
 
-  var onInputEmpty = function onInputEmpty(event) {
+  const onInputEmpty = event => {
     emit(props, 'inputEmpty', event);
   };
 
-  var onInputClear = function onInputClear(event) {
+  const onInputClear = event => {
     emit(props, 'inputClear', event);
   };
 
-  var onInput = function onInput() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    emit.apply(void 0, [props, 'input'].concat(args));
+  const onInput = (...args) => {
+    emit(props, 'input', ...args);
 
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
       validateInput();
     }
   };
 
-  var onFocus = function onFocus() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    emit.apply(void 0, [props, 'focus'].concat(args));
+  const onFocus = (...args) => {
+    emit(props, 'focus', ...args);
     setInputFocused(true);
   };
 
-  var onBlur = function onBlur() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-
-    emit.apply(void 0, [props, 'blur'].concat(args));
+  const onBlur = (...args) => {
+    emit(props, 'blur', ...args);
 
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
       validateInput();
@@ -163,26 +151,20 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     setInputFocused(false);
   };
 
-  var onChange = function onChange() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-
-    emit.apply(void 0, [props, 'change'].concat(args));
+  const onChange = (...args) => {
+    emit(props, 'change', ...args);
 
     if (type === 'texteditor') {
       emit(props, 'textEditorChange', args[1]);
     }
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var onMount = function onMount() {
-    f7ready(function () {
+  const onMount = () => {
+    f7ready(() => {
       if (type === 'range' || type === 'toggle') return;
       if (!inputElRef.current) return;
       inputElRef.current.addEventListener('input:notempty', onInputNotEmpty, false);
@@ -197,33 +179,37 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       }
 
       if (type === 'datepicker') {
-        f7Calendar.current = f7.calendar.create(_extends({
+        f7Calendar.current = f7.calendar.create({
           inputEl: inputElRef.current,
-          value: value,
+          value,
           on: {
-            change: function change(calendar, calendarValue) {
+            change(calendar, calendarValue) {
               emit(props, 'calendarChange', calendarValue);
             }
-          }
-        }, calendarParams || {}));
+
+          },
+          ...(calendarParams || {})
+        });
       }
 
       if (type === 'colorpicker') {
-        f7ColorPicker.current = f7.colorPicker.create(_extends({
+        f7ColorPicker.current = f7.colorPicker.create({
           inputEl: inputElRef.current,
-          value: value,
+          value,
           on: {
-            change: function change(colorPicker, colorPickerValue) {
+            change(colorPicker, colorPickerValue) {
               emit(props, 'colorPickerChange', colorPickerValue);
             }
-          }
-        }, colorPickerParams || {}));
+
+          },
+          ...(colorPickerParams || {})
+        });
       }
 
       f7.input.checkEmptyState(inputElRef.current);
 
       if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && (typeof value !== 'undefined' && value !== null && value !== '' || typeof defaultValue !== 'undefined' && defaultValue !== null && defaultValue !== '')) {
-        setTimeout(function () {
+        setTimeout(() => {
           validateInput();
         }, 0);
       }
@@ -234,7 +220,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (type === 'range' || type === 'toggle') return;
     if (!inputElRef.current) return;
     inputElRef.current.removeEventListener('input:notempty', onInputNotEmpty, false);
@@ -259,11 +245,11 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!f7) return;
 
     if (updateInputOnDidUpdate.current) {
@@ -280,15 +266,15 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   });
-  watchProp(colorPickerParams, function (newValue) {
+  watchProp(colorPickerParams, newValue => {
     if (!f7 || !f7ColorPicker.current) return;
     extend(f7ColorPicker.current.params, newValue || {});
   });
-  watchProp(calendarParams, function (newValue) {
+  watchProp(calendarParams, newValue => {
     if (!f7 || !f7Calendar.current) return;
     extend(f7Calendar.current.params, newValue || {});
   });
-  watchProp(value, function (newValue) {
+  watchProp(value, newValue => {
     if (type === 'range' || type === 'toggle') return;
     if (!f7) return;
     updateInputOnDidUpdate.current = true;
@@ -301,34 +287,34 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       f7ColorPicker.current.setValue(newValue);
     }
   });
-  var domValue = getDomValue();
-  var inputHasValue = isInputHasValue();
-  var slots = getSlots(props);
-  var inputEl;
+  const domValue = getDomValue();
+  const inputHasValue = isInputHasValue();
+  const slots = getSlots(props);
+  let inputEl;
 
-  var createInput = function createInput(InputTag, children) {
-    var needsValue = type !== 'file' && type !== 'datepicker' && type !== 'colorpicker';
-    var needsType = InputTag === 'input';
-    var inputType = type;
+  const createInput = (InputTag, children) => {
+    const needsValue = type !== 'file' && type !== 'datepicker' && type !== 'colorpicker';
+    const needsType = InputTag === 'input';
+    let inputType = type;
 
     if (inputType === 'datepicker' || inputType === 'colorpicker') {
       inputType = 'text';
     }
 
-    var inputClassName = classNames(!wrap && className, {
+    const inputClassName = classNames(!wrap && className, {
       resizable: inputType === 'textarea' && resizable,
       'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
       'input-invalid': errorMessage && errorMessageForce || inputInvalid,
       'input-with-value': inputHasValue,
       'input-focused': inputFocused
     });
-    var inputValue;
+    let inputValue;
 
     if (needsValue) {
       if (typeof value !== 'undefined') inputValue = value;else inputValue = domValue;
     }
 
-    var valueProps = {};
+    const valueProps = {};
 
     if (type !== 'datepicker' && type !== 'colorpicker') {
       if ('value' in props) valueProps.value = inputValue;
@@ -422,7 +408,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   if (wrap) {
-    var wrapClasses = classNames(className, 'input', {
+    const wrapClasses = classNames(className, 'input', {
       'input-outline': outline,
       'input-dropdown': dropdown === 'auto' ? type === 'select' : dropdown,
       'input-invalid': errorMessage && errorMessageForce || inputInvalid

package/components/link.js

@@ -0,0 +1,102 @@
+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 { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
+import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { TabbarContext } from '../shared/tabbar-context.js';
+import Badge from './badge.js';
+import { useSmartSelect } from '../shared/use-smart-select.js';
+
+
+const Link = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7SmartSelect = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    noLinkClass,
+    text,
+    tabLink,
+    tabLinkActive,
+    tabbarLabel,
+    iconOnly,
+    badge,
+    badgeColor,
+    href = '#',
+    target,
+    // Smart Select
+    smartSelect,
+    smartSelectParams
+  } = props;
+  const tabbarContext = useContext(TabbarContext);
+  const isTabbarLabel = tabbarLabel || tabbarContext.tabbarHasLabels;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7SmartSelect: () => f7SmartSelect.current
+  }));
+  useTooltip(elRef, props);
+  useRouteProps(elRef, props);
+  useSmartSelect(smartSelect, smartSelectParams, f7SmartSelect, () => {
+    return elRef.current;
+  });
+  let textEl;
+  let badgeEl;
+
+  if (text) {
+    if (badge) badgeEl = /*#__PURE__*/React.createElement(Badge, {
+      color: badgeColor
+    }, badge);
+    textEl = /*#__PURE__*/React.createElement("span", {
+      className: isTabbarLabel ? 'tabbar-label' : ''
+    }, text, badgeEl);
+  }
+
+  const iconEl = useIcon(props);
+  let iconOnlyComputed;
+
+  if (iconOnly || !text && children && children.length === 0 || !text && !children) {
+    iconOnlyComputed = true;
+  } else {
+    iconOnlyComputed = false;
+  }
+
+  const classes = classNames(className, {
+    link: !(noLinkClass || isTabbarLabel),
+    'icon-only': iconOnlyComputed,
+    'tab-link': tabLink || tabLink === '',
+    'tab-link-active': tabLinkActive,
+    'smart-select': smartSelect
+  }, colorClasses(props), routerClasses(props), actionsClasses(props));
+  let hrefComputed = href;
+  if (href === true) hrefComputed = '#';
+  if (href === false) hrefComputed = undefined; // no href attribute
+
+  const attrs = {
+    href: hrefComputed,
+    target,
+    'data-tab': isStringProp(tabLink) && tabLink || undefined,
+    ...routerAttrs(props),
+    ...actionsAttrs(props)
+  };
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: elRef,
+    id: id,
+    style: style,
+    className: classes
+  }, attrs, extraAttrs, {
+    onClick: onClick
+  }), iconEl, textEl, children);
+});
+Link.displayName = 'f7-link';
+export default Link;

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

@@ -1,50 +1,53 @@
 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, isStringProp, emit } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useRouteProps } from '../shared/use-route-props';
+import { classNames, getExtraAttrs, isStringProp, emit } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useRouteProps } from '../shared/use-route-props.js';
 
-var ListButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      title = props.title,
-      text = props.text,
-      tabLink = props.tabLink,
-      tabLinkActive = props.tabLinkActive,
-      link = props.link,
-      href = props.href,
-      target = props.target;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var linkElRef = useRef(null);
+const ListButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    title,
+    text,
+    tabLink,
+    tabLinkActive,
+    link,
+    href,
+    target
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const linkElRef = 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
+  }));
   useTooltip(linkElRef, props);
   useRouteProps(linkElRef, props);
-
-  var linkAttrs = _extends({
+  const linkAttrs = {
     href: typeof link === 'boolean' && typeof href === 'boolean' ? '#' : link || href,
-    target: target,
-    'data-tab': isStringProp(tabLink) && tabLink
-  }, routerAttrs(props), actionsAttrs(props));
-
-  var linkClasses = classNames(_extends({
+    target,
+    'data-tab': isStringProp(tabLink) && tabLink,
+    ...routerAttrs(props),
+    ...actionsAttrs(props)
+  };
+  const linkClasses = classNames({
     'list-button': true,
     'tab-link': tabLink || tabLink === '',
-    'tab-link-active': tabLinkActive
-  }, colorClasses(props), routerClasses(props), actionsClasses(props)));
+    'tab-link-active': tabLinkActive,
+    ...colorClasses(props),
+    ...routerClasses(props),
+    ...actionsClasses(props)
+  });
   return /*#__PURE__*/React.createElement("li", _extends({
     id: id,
     style: style,