framework7-react 6.3.5 → 7.0.0-beta.10

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

@@ -1,32 +1,32 @@
 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 } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { ListContext } from '../shared/list-context';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { ListContext } from '../shared/list-context.js';
 
-var ListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      simpleList = props.simpleList,
-      mediaList = props.mediaList,
-      sortable = props.sortable,
-      sortableOpposite = props.sortableOpposite,
-      sortableTapHold = props.sortableTapHold,
-      sortableMoveElements = props.sortableMoveElements;
-  var extraAttrs = getExtraAttrs(props);
-  var listContext = useContext(ListContext);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'list-group', {
+const ListGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    simpleList,
+    mediaList,
+    sortable,
+    sortableOpposite,
+    sortableTapHold,
+    sortableMoveElements
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const listContext = useContext(ListContext);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'list-group', {
     'media-list': mediaList,
-    sortable: sortable,
+    sortable,
     'sortable-tap-hold': sortableTapHold,
     'sortable-opposite': sortableOpposite
   }, colorClasses(props));

package/components/list-index.js

@@ -0,0 +1,94 @@
+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';
+
+const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7ListIndex = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    init = true,
+    listEl,
+    indexes = 'auto',
+    scrollList = true,
+    label = false,
+    iosItemHeight = 14,
+    mdItemHeight = 14,
+    auroraItemHeight = 14
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const update = () => {
+    if (!f7ListIndex.current) return;
+    f7ListIndex.current.update();
+  };
+
+  const scrollListToIndex = indexContent => {
+    if (!f7ListIndex.current) return;
+    f7ListIndex.current.scrollListToIndex(indexContent);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7ListIndex: () => f7ListIndex.current,
+    update,
+    scrollListToIndex
+  }));
+  watchProp(indexes, newValue => {
+    if (!f7ListIndex.current) return;
+    f7ListIndex.current.params.indexes = newValue;
+    update();
+  });
+
+  const onMount = () => {
+    if (!init) return;
+    f7ready(() => {
+      f7ListIndex.current = f7.listIndex.create({
+        el: elRef.current,
+        listEl,
+        indexes,
+        iosItemHeight,
+        mdItemHeight,
+        auroraItemHeight,
+        scrollList,
+        label,
+        on: {
+          select(index, itemContent, itemIndex) {
+            emit(props, 'listIndexSelect', itemContent, itemIndex);
+          }
+
+        }
+      });
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7ListIndex.current && f7ListIndex.current.destroy) {
+      f7ListIndex.current.destroy();
+    }
+
+    f7ListIndex.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'list-index', colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+ListIndex.displayName = 'f7-list-index';
+export default ListIndex;

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

@@ -1,113 +1,110 @@
 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, emit, getSlots, extend } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import TextEditor from './text-editor';
-import { watchProp } from '../shared/watch-prop';
-import { ListContext } from '../shared/list-context';
-
-
-var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      sortable = props.sortable,
-      media = props.media,
-      _props$dropdown = props.dropdown,
-      dropdown = _props$dropdown === void 0 ? 'auto' : _props$dropdown,
-      _props$wrap = props.wrap,
-      wrap = _props$wrap === void 0 ? true : _props$wrap,
-      _props$input = props.input,
-      renderInput = _props$input === void 0 ? true : _props$input,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'text' : _props$type,
-      name = props.name,
-      value = props.value,
-      defaultValue = props.defaultValue,
-      inputmode = props.inputmode,
-      readonly = props.readonly,
-      required = props.required,
-      disabled = props.disabled,
-      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,
-      max = props.max,
-      min = props.min,
-      step = props.step,
-      maxlength = props.maxlength,
-      minlength = props.minlength,
-      multiple = props.multiple,
-      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,
-      label = props.label,
-      inlineLabel = props.inlineLabel,
-      floatingLabel = props.floatingLabel,
-      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 listContext = useContext(ListContext);
-
-  var _ref = listContext || {},
-      _ref$listIsSortable = _ref.listIsSortable,
-      listIsSortable = _ref$listIsSortable === void 0 ? false : _ref$listIsSortable;
-
-  var extraAttrs = getExtraAttrs(props);
-  var f7Calendar = useRef(null);
-  var f7ColorPicker = useRef(null);
-  var elRef = useRef(null);
-  var inputElRef = useRef(null);
-  var itemContentElRef = useRef(null);
-  var updateInputOnDidUpdate = useRef(false);
-
-  var getDomValue = function getDomValue() {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import TextEditor from './text-editor.js';
+import { watchProp } from '../shared/watch-prop.js';
+import { ListContext } from '../shared/list-context.js';
+
+
+const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    sortable,
+    media,
+    dropdown = 'auto',
+    wrap = true,
+    // Inputs
+    input: renderInput = true,
+    type = 'text',
+    name,
+    value,
+    defaultValue,
+    inputmode,
+    readonly,
+    required,
+    disabled,
+    placeholder,
+    inputId,
+    size,
+    accept,
+    autocomplete,
+    autocorrect,
+    autocapitalize,
+    spellcheck,
+    autofocus,
+    autosave,
+    max,
+    min,
+    step,
+    maxlength,
+    minlength,
+    multiple,
+    inputStyle,
+    pattern,
+    validate,
+    validateOnBlur,
+    onValidate,
+    tabindex,
+    resizable,
+    clearButton,
+    // Form
+    noFormStoreData,
+    noStoreData,
+    ignoreStoreData,
+    // Error, Info
+    errorMessage,
+    errorMessageForce,
+    info,
+    // Outline
+    outline,
+    // Label
+    label,
+    inlineLabel,
+    floatingLabel,
+    // Datepicker
+    calendarParams,
+    // Colorpicker
+    colorPickerParams,
+    // Text editor
+    textEditorParams
+  } = props;
+  const [inputInvalid, setInputInvalid] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+  const listContext = useContext(ListContext);
+  const {
+    listIsSortable = false
+  } = listContext || {};
+  const extraAttrs = getExtraAttrs(props);
+  const f7Calendar = useRef(null);
+  const f7ColorPicker = useRef(null);
+  const elRef = useRef(null);
+  const inputElRef = useRef(null);
+  const itemContentElRef = 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) {
@@ -125,49 +122,37 @@ var ListInput = /*#__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(inputElRef.current);
     }
   };
 
-  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(inputElRef.current);
@@ -176,27 +161,21 @@ var ListInput = /*#__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[0]);
     }
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var onMount = function onMount() {
+  const onMount = () => {
     if (!elRef.current && !itemContentElRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       if (!inputElRef.current) return;
       inputElRef.current.addEventListener('input:notempty', onInputNotEmpty, false);
       inputElRef.current.addEventListener('textarea:resize', onTextareaResize, false);
@@ -204,31 +183,35 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
       inputElRef.current.addEventListener('input:clear', onInputClear, false);
 
       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, 'colorpicker:change colorPickerChange', colorPickerValue);
             }
-          }
-        }, colorPickerParams || {}));
+
+          },
+          ...(colorPickerParams || {})
+        });
       }
 
       if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && (typeof value !== 'undefined' && value !== null && value !== '' || typeof defaultValue !== 'undefined' && defaultValue !== null && defaultValue !== '')) {
-        setTimeout(function () {
+        setTimeout(() => {
           validateInput();
         }, 0);
       }
@@ -239,7 +222,7 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (inputElRef.current) {
       inputElRef.current.removeEventListener('input:notempty', onInputNotEmpty, false);
       inputElRef.current.removeEventListener('textarea:resize', onTextareaResize, false);
@@ -258,11 +241,11 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!f7) return;
 
     if (updateInputOnDidUpdate.current) {
@@ -278,15 +261,15 @@ var ListInput = /*#__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 (!f7) return;
     updateInputOnDidUpdate.current = true;
 
@@ -298,35 +281,35 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
       f7ColorPicker.current.setValue(newValue);
     }
   });
-  var slots = getSlots(props);
-  var domValue = getDomValue();
-  var inputHasValue = isInputHasValue();
-  var isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
-  var inputEl;
+  const slots = getSlots(props);
+  const domValue = getDomValue();
+  const inputHasValue = isInputHasValue();
+  const isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
+  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({
+    const inputClassName = classNames({
       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;
@@ -396,11 +379,11 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
-  var hasErrorMessage = !!errorMessage || slots['error-message'] && slots['error-message'].length;
-  var ItemContent = /*#__PURE__*/React.createElement("div", {
+  const hasErrorMessage = !!errorMessage || slots['error-message'] && slots['error-message'].length;
+  const ItemContent = /*#__PURE__*/React.createElement("div", {
     ref: itemContentElRef,
     className: classNames('item-content item-input', !wrap && className, !wrap && {
-      disabled: disabled
+      disabled
     }, !wrap && colorClasses(props), {
       'inline-label': inlineLabel,
       'item-input-outline': outline,
@@ -441,7 +424,7 @@ var ListInput = /*#__PURE__*/forwardRef(function (props, ref) {
     id: id,
     style: style,
     className: classNames(className, {
-      disabled: disabled
+      disabled
     }, colorClasses(props))
   }, extraAttrs), slots['root-start'], ItemContent, isSortableComputed && /*#__PURE__*/React.createElement("div", {
     className: "sortable-handler"

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