framework7-react 7.0.8 → 8.0.0-beta.1

package/shared/utils.js

@@ -18,11 +18,9 @@ export function extend() {
   let deep = true;
   let to;
   let from;
-
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   if (typeof args[0] === 'boolean') {
     [deep, to] = args;
     args.splice(0, 2);
@@ -32,17 +30,13 @@ export function extend() {
     args.splice(0, 1);
     from = args;
   }
-
   for (let i = 0; i < from.length; i += 1) {
     const nextSource = args[i];
-
     if (nextSource !== undefined && nextSource !== null) {
       const keysArray = Object.keys(Object(nextSource));
-
       for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
         const nextKey = keysArray[nextIndex];
         const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
-
         if (desc !== undefined && desc.enumerable) {
           if (!deep) {
             to[nextKey] = nextSource[nextKey];
@@ -58,16 +52,13 @@ export function extend() {
       }
     }
   }
-
   return to;
 }
 export function flattenArray() {
   const arr = [];
-
   for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     args[_key2] = arguments[_key2];
   }
-
   args.forEach(arg => {
     if (Array.isArray(arg)) arr.push(...flattenArray(...arg));else arr.push(arg);
   });
@@ -75,11 +66,9 @@ export function flattenArray() {
 }
 export function classNames() {
   const classes = [];
-
   for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     args[_key3] = arguments[_key3];
   }
-
   args.forEach(arg => {
     if (typeof arg === 'object' && arg.constructor === Object) {
       Object.keys(arg).forEach(key => {
@@ -97,20 +86,16 @@ export function getSlots(props) {
   if (props === void 0) {
     props = {};
   }
-
   const slots = {};
   if (!props) return slots;
   const children = props.children;
-
   if (!children || children.length === 0) {
     return slots;
   }
-
   function addChildToSlot(name, child) {
     if (!slots[name]) slots[name] = [];
     slots[name].push(child);
   }
-
   if (Array.isArray(children)) {
     children.forEach(child => {
       if (!child) return;
@@ -122,14 +107,12 @@ export function getSlots(props) {
     if (children.props && children.props.slot) slotName = children.props.slot;
     addChildToSlot(slotName, children);
   }
-
   return slots;
 }
 export function emit(props, events) {
   for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
     args[_key4 - 2] = arguments[_key4];
   }
-
   if (!events || !events.trim().length || typeof events !== 'string') return;
   events.trim().split(' ').forEach(event => {
     let eventName = (event || '').trim();
@@ -143,7 +126,6 @@ export function getExtraAttrs(props) {
   if (props === void 0) {
     props = {};
   }
-
   const extraAttrs = {};
   Object.keys(props).forEach(key => {
     if (key.indexOf('data-') === 0 || key.indexOf('aria-') === 0 || key === 'role') {

package/shared/watch-prop.js

@@ -6,7 +6,6 @@ export const watchProp = (value, callback) => {
     if (value !== valueRef.current && callback) {
       callback(value, valueRef.current);
     }
-
     valueRef.current = value;
   }, [value]);
 };

package/components/appbar.d.ts

@@ -1,28 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface AppbarProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  noShadow?: boolean;
-  noHairline?: boolean;
-  inner?: boolean;
-  innerClass?: string;
-  innerClassName?: string;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-}
-declare const Appbar: React.FunctionComponent<AppbarProps>;
-
-export default Appbar;
-  

package/components/appbar.js

@@ -1,45 +0,0 @@
-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, getSlots } from '../shared/utils.js';
-import { colorClasses } from '../shared/mixins.js';
-
-const Appbar = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    id,
-    style,
-    children,
-    inner = true,
-    innerClass,
-    innerClassName,
-    noShadow,
-    noHairline
-  } = props;
-  const extraAttrs = getExtraAttrs(props);
-  const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  let innerEl;
-
-  if (inner) {
-    innerEl = /*#__PURE__*/React.createElement("div", {
-      className: classNames('appbar-inner', innerClass, innerClassName)
-    }, children);
-  }
-
-  const classes = classNames(className, 'appbar', {
-    'no-shadow': noShadow,
-    'no-hairline': noHairline
-  }, colorClasses(props));
-  const slots = getSlots(props);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), slots['before-inner'], innerEl || slots.default, slots['after-inner']);
-});
-Appbar.displayName = 'f7-appbar';
-export default Appbar;

package/components/col.d.ts

@@ -1,36 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface ColProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  tag ?: string;
-  width ?: number | string;
-  xsmall ?: number | string;
-  small ?: number | string;
-  medium ?: number | string;
-  large ?: number | string;
-  xlarge ?: number | string;
-  resizable ?: boolean;
-  resizableFixed ?: boolean;
-  resizableAbsolute ?: boolean;
-  resizableHandler ?: boolean;
-  onClick ?: (event?: any) => void;
-  onGridResize ?: (...args: any[]) => void;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-}
-declare const Col: React.FunctionComponent<ColProps>;
-
-export default Col;
-  

package/components/col.js

@@ -1,75 +0,0 @@
-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, useEffect } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
-import { colorClasses } from '../shared/mixins.js';
-import { f7ready, f7 } from '../shared/f7.js';
-
-const Col = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    id,
-    style,
-    children,
-    tag = 'div',
-    width = 'auto',
-    xsmall,
-    small,
-    medium,
-    large,
-    xlarge,
-    resizable,
-    resizableFixed,
-    resizableAbsolute,
-    resizableHandler = true
-  } = props;
-  const extraAttrs = getExtraAttrs(props);
-  const elRef = useRef(null);
-
-  const onClick = event => {
-    emit(props, 'click', event);
-  };
-
-  const onResize = el => {
-    if (el === elRef.current) {
-      emit(props, 'gridResize');
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  const ColTag = tag;
-  const classes = classNames(className, {
-    col: width === 'auto',
-    [`col-${width}`]: width !== 'auto',
-    [`xsmall-${xsmall}`]: xsmall,
-    [`small-${small}`]: small,
-    [`medium-${medium}`]: medium,
-    [`large-${large}`]: large,
-    [`xlarge-${xlarge}`]: xlarge,
-    resizable,
-    'resizable-fixed': resizableFixed,
-    'resizable-absolute': resizableAbsolute
-  }, colorClasses(props));
-  useEffect(() => {
-    f7ready(() => {
-      f7.on('gridResize', onResize);
-    });
-    return () => {
-      f7.off('gridResize', onResize);
-    };
-  });
-  return /*#__PURE__*/React.createElement(ColTag, _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs, {
-    onClick: onClick
-  }), children, resizable && resizableHandler && /*#__PURE__*/React.createElement("span", {
-    className: "resize-handler"
-  }));
-});
-Col.displayName = 'f7-col';
-export default Col;

package/components/list-item-cell.d.ts

@@ -1,23 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface ListItemCellProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-}
-declare const ListItemCell: React.FunctionComponent<ListItemCellProps>;
-
-export default ListItemCell;
-  

package/components/list-item-cell.js

@@ -1,28 +0,0 @@
-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.js';
-import { colorClasses } from '../shared/mixins.js';
-
-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,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-ListItemCell.displayName = 'f7-list-item-cell';
-export default ListItemCell;

package/components/list-item-row.d.ts

@@ -1,23 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface ListItemRowProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-}
-declare const ListItemRow: React.FunctionComponent<ListItemRowProps>;
-
-export default ListItemRow;
-  

package/components/list-item-row.js

@@ -1,28 +0,0 @@
-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.js';
-import { colorClasses } from '../shared/mixins.js';
-
-const ListItemRow = /*#__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-row', colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-ListItemRow.displayName = 'f7-list-item-row';
-export default ListItemRow;

package/components/menu-dropdown-item.d.ts

@@ -1,68 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface MenuDropdownItemProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  text ?: string;
-  link ?: boolean;
-  href ?: string;
-  target ?: string;
-  divider ?: boolean;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-  back?: boolean;
-  external?: boolean;
-  force?: boolean;
-  animate?: boolean;
-  ignoreCache?: boolean;
-  reloadCurrent?: boolean;
-  reloadAll?: boolean;
-  reloadPrevious?: boolean;
-  reloadDetail?: boolean;
-  routeTabId?: string;
-  view?: string;
-  routeProps?: any;
-  preventRouter?: boolean;
-  transition?: string;
-  openIn?: string;
-  searchbarEnable?: boolean | string;
-  searchbarDisable?: boolean | string;
-  searchbarClear?: boolean | string;
-  searchbarToggle?: boolean | string;
-  panelOpen?: boolean | string;
-  panelClose?: boolean | string;
-  panelToggle?: boolean | string;
-  popupOpen?: boolean | string;
-  popupClose?: boolean | string;
-  actionsOpen?: boolean | string;
-  actionsClose?: boolean | string;
-  popoverOpen?: boolean | string;
-  popoverClose?: boolean | string;
-  loginScreenOpen?: boolean | string;
-  loginScreenClose?: boolean | string;
-  sheetOpen?: boolean | string;
-  sheetClose?: boolean | string;
-  sortableEnable?: boolean | string;
-  sortableDisable?: boolean | string;
-  sortableToggle?: boolean | string;
-  cardOpen?: boolean | string;
-  cardPreventOpen?: boolean | string;
-  cardClose?: boolean | string;
-  menuClose?: boolean | string;
-  onClick ?: (event?: any) => void;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-}
-declare const MenuDropdownItem: React.FunctionComponent<MenuDropdownItemProps>;
-
-export default MenuDropdownItem;
-  

package/components/menu-dropdown-item.js

@@ -1,59 +0,0 @@
-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.js';
-import { colorClasses, routerAttrs, routerClasses, actionsAttrs, actionsClasses } from '../shared/mixins.js';
-import { useRouteProps } from '../shared/use-route-props.js';
-
-const MenuDropdownItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    id,
-    style,
-    children,
-    link,
-    href,
-    target,
-    text,
-    divider,
-    menuClose
-  } = props;
-  const extraAttrs = getExtraAttrs(props);
-  const elRef = useRef(null);
-
-  const onClick = e => {
-    emit(props, 'click', e);
-  };
-
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  useRouteProps(elRef, props);
-  const isLink = link || href || href === '';
-  const Tag = isLink ? 'a' : 'div';
-  const classes = classNames({
-    'menu-dropdown-link': isLink && !divider,
-    'menu-dropdown-item': !isLink && !divider,
-    'menu-dropdown-divider': divider
-  }, className, colorClasses(props), routerClasses(props), actionsClasses(props), {
-    'menu-close': typeof menuClose === 'undefined'
-  });
-  let hrefComputed = href;
-  if (typeof hrefComputed === 'undefined' && link) hrefComputed = '#';
-  const attrs = {
-    href: hrefComputed,
-    target,
-    ...routerAttrs(props),
-    ...actionsAttrs(props)
-  };
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: classes,
-    id: id,
-    style: style,
-    ref: elRef
-  }, attrs, extraAttrs, {
-    onClick: onClick
-  }), text, children);
-});
-MenuDropdownItem.displayName = 'f7-menu-dropdown-item';
-export default MenuDropdownItem;

package/components/menu-dropdown.d.ts

@@ -1,28 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface MenuDropdownProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  contentHeight ?: string;
-  position ?: string;
-  left ?: boolean;
-  center ?: boolean;
-  right ?: boolean;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-}
-declare const MenuDropdown: React.FunctionComponent<MenuDropdownProps>;
-
-export default MenuDropdown;
-  

package/components/menu-dropdown.js

@@ -1,42 +0,0 @@
-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.js';
-import { colorClasses } from '../shared/mixins.js';
-
-const MenuDropdown = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    id,
-    style,
-    children,
-    contentHeight,
-    position,
-    left,
-    center,
-    right
-  } = props;
-  const extraAttrs = getExtraAttrs(props);
-  const elRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    el: elRef.current
-  }));
-  let positionComputed = position || 'left';
-  if (left) positionComputed = 'left';
-  if (center) positionComputed = 'center';
-  if (right) positionComputed = 'right';
-  const classes = classNames('menu-dropdown', `menu-dropdown-${positionComputed}`, colorClasses(props), className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), /*#__PURE__*/React.createElement("div", {
-    className: "menu-dropdown-content",
-    style: {
-      height: contentHeight
-    }
-  }, children));
-});
-MenuDropdown.displayName = 'f7-menu-dropdown';
-export default MenuDropdown;

package/components/menu-item.d.ts

@@ -1,81 +0,0 @@
-
-import * as React from 'react';
-
-
-export interface MenuItemProps {
-  slot?: string;
-  id?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  text?: string;
-  iconOnly?: boolean;
-  href?: string;
-  link?: boolean;
-  target?: string;
-  dropdown?: boolean;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  color?: string;
-  colorTheme?: string;
-  textColor?: string;
-  bgColor?: string;
-  borderColor?: string;
-  rippleColor?: string;
-  dark?: boolean;
-  icon?: string;
-  iconMaterial?: string;
-  iconF7?: string;
-  iconIos?: string;
-  iconMd?: string;
-  iconAurora?: string;
-  iconColor?: string;
-  iconSize?: string | number;
-  back?: boolean;
-  external?: boolean;
-  force?: boolean;
-  animate?: boolean;
-  ignoreCache?: boolean;
-  reloadCurrent?: boolean;
-  reloadAll?: boolean;
-  reloadPrevious?: boolean;
-  reloadDetail?: boolean;
-  routeTabId?: string;
-  view?: string;
-  routeProps?: any;
-  preventRouter?: boolean;
-  transition?: string;
-  openIn?: string;
-  searchbarEnable?: boolean | string;
-  searchbarDisable?: boolean | string;
-  searchbarClear?: boolean | string;
-  searchbarToggle?: boolean | string;
-  panelOpen?: boolean | string;
-  panelClose?: boolean | string;
-  panelToggle?: boolean | string;
-  popupOpen?: boolean | string;
-  popupClose?: boolean | string;
-  actionsOpen?: boolean | string;
-  actionsClose?: boolean | string;
-  popoverOpen?: boolean | string;
-  popoverClose?: boolean | string;
-  loginScreenOpen?: boolean | string;
-  loginScreenClose?: boolean | string;
-  sheetOpen?: boolean | string;
-  sheetClose?: boolean | string;
-  sortableEnable?: boolean | string;
-  sortableDisable?: boolean | string;
-  sortableToggle?: boolean | string;
-  cardOpen?: boolean | string;
-  cardPreventOpen?: boolean | string;
-  cardClose?: boolean | string;
-  menuClose?: boolean | string;
-  onClick ?: (event?: any) => void;
-  onMenuOpened ?: (el?: HTMLElement) => void;
-  onMenuClosed ?: (el?: HTMLElement) => void;
-  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
-  children?: React.ReactNode;
-}
-declare const MenuItem: React.FunctionComponent<MenuItemProps>;
-
-export default MenuItem;
-