framework7-react 7.1.5 → 8.0.0-beta.2

package/components/list-index.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -7,6 +6,7 @@ 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 {
@@ -20,22 +20,18 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
     scrollList = true,
     label = false,
     iosItemHeight = 14,
-    mdItemHeight = 14,
-    auroraItemHeight = 14
+    mdItemHeight = 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,
@@ -47,7 +43,6 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
     f7ListIndex.current.params.indexes = newValue;
     update();
   });
-
   const onMount = () => {
     if (!init) return;
     f7ready(() => {
@@ -57,27 +52,22 @@ const ListIndex = /*#__PURE__*/forwardRef((props, ref) => {
         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;

package/components/list-input.d.ts

@@ -54,7 +54,6 @@ export interface ListInputProps {
   info ?: string;
   outline ?: boolean;
   label ?: string | number;
-  inlineLabel ?: boolean;
   floatingLabel ?: boolean;
   calendarParams ?: Calendar.Parameters;
   colorPickerParams ?: ColorPicker.Parameters;

package/components/list-input.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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.js';
 import { classNames, getExtraAttrs, emit, getSlots, extend } from '../shared/utils.js';
@@ -65,7 +64,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
     outline,
     // Label
     label,
-    inlineLabel,
     floatingLabel,
     // Datepicker
     calendarParams,
@@ -87,108 +85,83 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
   const inputElRef = useRef(null);
   const itemContentElRef = useRef(null);
   const updateInputOnDidUpdate = useRef(false);
-
   const getDomValue = () => {
     if (!inputElRef.current) return undefined;
     return inputElRef.current.value;
   };
-
   const isInputHasValue = () => {
     if (type === 'datepicker' && Array.isArray(value) && value.length === 0) {
       return false;
     }
-
     const domValue = getDomValue();
     return typeof value === 'undefined' ? domValue || domValue === 0 : value || value === 0;
   };
-
   const validateInput = () => {
     if (!f7 || !inputElRef.current) return;
     const validity = inputElRef.current.validity;
     if (!validity) return;
-
     if (!validity.valid) {
       if (onValidate) onValidate(false);
-
       if (inputInvalid !== true) {
         setInputInvalid(true);
       }
     } else {
       if (onValidate) onValidate(true);
-
       if (inputInvalid !== false) {
         setInputInvalid(false);
       }
     }
   };
-
   const onTextareaResize = event => {
     emit(props, 'textareaResize', event);
   };
-
   const onInputNotEmpty = event => {
     emit(props, 'inputNotEmpty', event);
   };
-
   const onInputEmpty = event => {
     emit(props, 'inputEmpty', event);
   };
-
   const onInputClear = event => {
     emit(props, 'inputClear', event);
   };
-
   const onInput = function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     emit(props, 'input', ...args);
-
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputElRef.current) {
       validateInput(inputElRef.current);
     }
   };
-
   const onFocus = function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     emit(props, 'focus', ...args);
     setInputFocused(true);
   };
-
   const onBlur = function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     emit(props, 'blur', ...args);
-
     if ((validate || validate === '' || validateOnBlur || validateOnBlur === '') && inputElRef.current) {
       validateInput(inputElRef.current);
     }
-
     setInputFocused(false);
   };
-
   const onChange = function () {
     for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       args[_key4] = arguments[_key4];
     }
-
     emit(props, 'change', ...args);
-
     if (type === 'texteditor') {
       emit(props, 'textEditorChange', args[0]);
     }
   };
-
   useImperativeHandle(ref, () => ({
     el: elRef.current
   }));
-
   const onMount = () => {
     if (!elRef.current && !itemContentElRef.current) return;
     f7ready(() => {
@@ -197,7 +170,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
       inputElRef.current.addEventListener('textarea:resize', onTextareaResize, false);
       inputElRef.current.addEventListener('input:empty', onInputEmpty, false);
       inputElRef.current.addEventListener('input:clear', onInputClear, false);
-
       if (type === 'datepicker') {
         f7Calendar.current = f7.calendar.create({
           inputEl: inputElRef.current,
@@ -206,12 +178,10 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
             change(calendar, calendarValue) {
               emit(props, 'calendarChange', calendarValue);
             }
-
           },
           ...(calendarParams || {})
         });
       }
-
       if (type === 'colorpicker') {
         f7ColorPicker.current = f7.colorPicker.create({
           inputEl: inputElRef.current,
@@ -220,24 +190,20 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
             change(colorPicker, colorPickerValue) {
               emit(props, 'colorpicker:change colorPickerChange', colorPickerValue);
             }
-
           },
           ...(colorPickerParams || {})
         });
       }
-
       if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && (typeof value !== 'undefined' && value !== null && value !== '' || typeof defaultValue !== 'undefined' && defaultValue !== null && defaultValue !== '')) {
         setTimeout(() => {
           validateInput();
         }, 0);
       }
-
       if (type === 'textarea' && resizable) {
         f7.input.resizeTextarea(inputElRef.current);
       }
     });
   };
-
   const onDestroy = () => {
     if (inputElRef.current) {
       inputElRef.current.removeEventListener('input:notempty', onInputNotEmpty, false);
@@ -245,33 +211,27 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
       inputElRef.current.removeEventListener('input:empty', onInputEmpty, false);
       inputElRef.current.removeEventListener('input:clear', onInputClear, false);
     }
-
     if (f7Calendar.current && f7Calendar.current.destroy) {
       f7Calendar.current.destroy();
       f7Calendar.current = null;
     }
-
     if (f7ColorPicker.current && f7ColorPicker.current.destroy) {
       f7ColorPicker.current.destroy();
       f7ColorPicker.current = null;
     }
   };
-
   useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
   useIsomorphicLayoutEffect(() => {
     if (!f7) return;
-
     if (updateInputOnDidUpdate.current) {
       if (!inputElRef.current) return;
       updateInputOnDidUpdate.current = false;
-
       if (validate && !validateOnBlur) {
         validateInput();
       }
-
       if (type === 'textarea' && resizable) {
         f7.input.resizeTextarea(inputElRef.current);
       }
@@ -288,11 +248,9 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
   watchProp(value, newValue => {
     if (!f7) return;
     updateInputOnDidUpdate.current = true;
-
     if (f7Calendar.current) {
       f7Calendar.current.setValue(newValue);
     }
-
     if (f7ColorPicker.current) {
       f7ColorPicker.current.setValue(newValue);
     }
@@ -302,16 +260,13 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
   const inputHasValue = isInputHasValue();
   const isSortableComputed = sortable === true || sortable === false ? sortable : listIsSortable;
   let inputEl;
-
   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';
     }
-
     const inputClassName = classNames({
       resizable: inputType === 'textarea' && resizable,
       'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
@@ -320,18 +275,14 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
       'input-focused': inputFocused
     });
     let inputValue;
-
     if (needsValue) {
       if (typeof value !== 'undefined') inputValue = value;else inputValue = domValue;
     }
-
     const valueProps = {};
-
     if (type !== 'datepicker' && type !== 'colorpicker') {
       if ('value' in props) valueProps.value = inputValue;
       if ('defaultValue' in props) valueProps.defaultValue = defaultValue;
     }
-
     return /*#__PURE__*/React.createElement(InputTag, _extends({
       ref: inputElRef,
       style: inputStyle,
@@ -370,7 +321,6 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
       onChange: onChange
     }, valueProps), children);
   };
-
   if (renderInput) {
     if (type === 'select' || type === 'textarea' || type === 'file') {
       if (type === 'select') {
@@ -394,14 +344,12 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
       inputEl = createInput('input');
     }
   }
-
   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
     }, !wrap && colorClasses(props), {
-      'inline-label': inlineLabel,
       'item-input-outline': outline,
       'item-input-focused': inputFocused,
       'item-input-with-info': !!info || slots.info && slots.info.length,
@@ -430,11 +378,9 @@ const ListInput = /*#__PURE__*/forwardRef((props, ref) => {
   }), (info || slots.info) && /*#__PURE__*/React.createElement("div", {
     className: "item-input-info"
   }, info, slots.info)), slots.inner, slots['inner-end']), slots.content, slots['content-end']);
-
   if (!wrap) {
     return ItemContent;
   }
-
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: elRef,
     id: id,

package/components/list-item-content.js

@@ -2,7 +2,6 @@ import React, { useRef, useEffect } from 'react';
 import { classNames } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import Badge from './badge.js';
-
 const ListItemContent = props => {
   const {
     indeterminate,
@@ -24,6 +23,7 @@ const ListItemContent = props => {
     after,
     badge,
     badgeColor,
+    checkboxIcon,
     radioIcon,
     swipeout,
     sortable,
@@ -53,8 +53,9 @@ const ListItemContent = props => {
   let inputEl;
   let inputIconEl;
   let headerEl;
-  let footerEl; // Input
+  let footerEl;
 
+  // Input
   if (radio || checkbox) {
     inputEl = /*#__PURE__*/React.createElement("input", {
       ref: inputElRef,
@@ -71,70 +72,58 @@ const ListItemContent = props => {
     inputIconEl = /*#__PURE__*/React.createElement("i", {
       className: `icon icon-${radio ? 'radio' : 'checkbox'}`
     });
-  } // Media
-
-
+  }
+  // Media
   if (media || slots.media) {
     let mediaImgEl;
-
     if (media) {
       mediaImgEl = /*#__PURE__*/React.createElement("img", {
         src: media
       });
     }
-
     mediaEl = /*#__PURE__*/React.createElement("div", {
       className: "item-media"
     }, mediaImgEl, slots.media);
-  } // Inner Elements
-
-
+  }
+  // Inner Elements
   if (header || slots.header) {
     headerEl = /*#__PURE__*/React.createElement("div", {
       className: "item-header"
     }, header, slots.header);
   }
-
   if (footer || slots.footer) {
     footerEl = /*#__PURE__*/React.createElement("div", {
       className: "item-footer"
     }, footer, slots.footer);
   }
-
   if (title || slots.title || !isMediaComputed && headerEl || !isMediaComputed && footerEl) {
     titleEl = /*#__PURE__*/React.createElement("div", {
       className: "item-title"
     }, !isMediaComputed && headerEl, title, slots.title, !isMediaComputed && footerEl);
   }
-
   if (subtitle || slots.subtitle) {
     subtitleEl = /*#__PURE__*/React.createElement("div", {
       className: "item-subtitle"
     }, subtitle, slots.subtitle);
   }
-
   if (text || slots.text) {
     textEl = /*#__PURE__*/React.createElement("div", {
       className: "item-text"
     }, text, slots.text);
   }
-
   if (after || badge || slots.after) {
     if (after) {
       afterEl = /*#__PURE__*/React.createElement("span", null, after);
     }
-
     if (badge) {
       badgeEl = /*#__PURE__*/React.createElement(Badge, {
         color: badgeColor
       }, badge);
     }
-
     afterWrapEl = /*#__PURE__*/React.createElement("div", {
       className: "item-after"
     }, slots['after-start'], afterEl, badgeEl, slots.after, slots['after-end']);
   }
-
   if (isMediaComputed) {
     titleRowEl = /*#__PURE__*/React.createElement("div", {
       className: "item-title-row"
@@ -147,11 +136,12 @@ const ListItemContent = props => {
       className: "item-inner"
     }, slots['inner-start'], slots['before-title'], titleEl, slots['after-title'], afterWrapEl, swipeout || accordionItem ? null : slots.default, slots.inner, slots['inner-end']);
   }
-
   const ItemContentTag = checkbox || radio ? 'label' : 'div';
   const classes = classNames('item-content', {
     'item-checkbox': checkbox,
     'item-radio': radio,
+    'item-checkbox-icon-start': checkbox && checkboxIcon === 'start',
+    'item-checkbox-icon-end': checkbox && checkboxIcon === 'end',
     'item-radio-icon-start': radio && radioIcon === 'start',
     'item-radio-icon-end': radio && radioIcon === 'end'
   }, colorClasses(props));
@@ -162,6 +152,5 @@ const ListItemContent = props => {
     className: "sortable-handler"
   }), slots['content-start'], inputEl, inputIconEl, mediaEl, innerEl, slots.content, slots['content-end']);
 };
-
 ListItemContent.displayName = 'f7-list-item-content';
 export default ListItemContent;

package/components/list-item.d.ts

@@ -27,7 +27,6 @@ export interface ListItemProps {
   badgeColor ?: string;
   mediaItem ?: boolean;
   mediaList ?: boolean;
-  divider ?: boolean;
   groupTitle ?: boolean;
   swipeout ?: boolean;
   swipeoutOpened ?: boolean;
@@ -40,6 +39,7 @@ export interface ListItemProps {
   noChevron ?: boolean;
   chevronCenter ?: boolean;
   checkbox ?: boolean;
+  checkboxIcon ?: boolean;
   radio ?: boolean;
   radioIcon ?: string;
   checked ?: boolean;