framework7-react 6.3.15 → 7.0.0-beta.11

package/esm/components/col.js

@@ -1,71 +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';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-
-var Col = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _classNames;
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$tag = props.tag,
-      tag = _props$tag === void 0 ? 'div' : _props$tag,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 'auto' : _props$width,
-      xsmall = props.xsmall,
-      small = props.small,
-      medium = props.medium,
-      large = props.large,
-      xlarge = props.xlarge,
-      resizable = props.resizable,
-      resizableFixed = props.resizableFixed,
-      resizableAbsolute = props.resizableAbsolute,
-      _props$resizableHandl = props.resizableHandler,
-      resizableHandler = _props$resizableHandl === void 0 ? true : _props$resizableHandl;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var onClick = function onClick(event) {
-    emit(props, 'click', event);
-  };
-
-  var onResize = function onResize(el) {
-    if (el === elRef.current) {
-      emit(props, 'gridResize');
-    }
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var ColTag = tag;
-  var classes = classNames(className, (_classNames = {
-    col: width === 'auto'
-  }, _classNames["col-" + width] = width !== 'auto', _classNames["xsmall-" + xsmall] = xsmall, _classNames["small-" + small] = small, _classNames["medium-" + medium] = medium, _classNames["large-" + large] = large, _classNames["xlarge-" + xlarge] = xlarge, _classNames.resizable = resizable, _classNames['resizable-fixed'] = resizableFixed, _classNames['resizable-absolute'] = resizableAbsolute, _classNames), colorClasses(props));
-  useEffect(function () {
-    f7ready(function () {
-      f7.on('gridResize', onResize);
-    });
-    return function () {
-      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/esm/components/fab-buttons.js

@@ -1,29 +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';
-import { colorClasses } from '../shared/mixins';
-
-var FabButtons = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      position = props.position;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'fab-buttons', "fab-buttons-" + position, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-FabButtons.displayName = 'f7-fab-buttons';
-export default FabButtons;

package/esm/components/gauge.js

@@ -1,117 +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); }
-
-/* eslint no-nested-ternary: off */
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-
-var Gauge = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'circle' : _props$type,
-      _props$value = props.value,
-      value = _props$value === void 0 ? 0 : _props$value,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 200 : _props$size,
-      _props$bgColor = props.bgColor,
-      bgColor = _props$bgColor === void 0 ? 'transparent' : _props$bgColor,
-      _props$borderBgColor = props.borderBgColor,
-      borderBgColor = _props$borderBgColor === void 0 ? '#eeeeee' : _props$borderBgColor,
-      _props$borderColor = props.borderColor,
-      borderColor = _props$borderColor === void 0 ? '#000000' : _props$borderColor,
-      _props$borderWidth = props.borderWidth,
-      borderWidth = _props$borderWidth === void 0 ? 10 : _props$borderWidth,
-      valueText = props.valueText,
-      _props$valueTextColor = props.valueTextColor,
-      valueTextColor = _props$valueTextColor === void 0 ? '#000000' : _props$valueTextColor,
-      _props$valueFontSize = props.valueFontSize,
-      valueFontSize = _props$valueFontSize === void 0 ? 31 : _props$valueFontSize,
-      _props$valueFontWeigh = props.valueFontWeight,
-      valueFontWeight = _props$valueFontWeigh === void 0 ? 500 : _props$valueFontWeigh,
-      labelText = props.labelText,
-      _props$labelTextColor = props.labelTextColor,
-      labelTextColor = _props$labelTextColor === void 0 ? '#888888' : _props$labelTextColor,
-      _props$labelFontSize = props.labelFontSize,
-      labelFontSize = _props$labelFontSize === void 0 ? 14 : _props$labelFontSize,
-      _props$labelFontWeigh = props.labelFontWeight,
-      labelFontWeight = _props$labelFontWeigh === void 0 ? 400 : _props$labelFontWeigh;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'gauge');
-  var semiCircle = type === 'semicircle';
-  var radius = size / 2 - borderWidth / 2;
-  var length = 2 * Math.PI * radius;
-  var progress = Math.max(Math.min(value, 1), 0);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
-    className: "gauge-svg",
-    width: size + "px",
-    height: (semiCircle ? size / 2 : size) + "px",
-    viewBox: "0 0 " + size + " " + (semiCircle ? size / 2 : size)
-  }, semiCircle && /*#__PURE__*/React.createElement("path", {
-    className: "gauge-back-semi",
-    d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
-    stroke: borderBgColor,
-    strokeWidth: borderWidth,
-    fill: bgColor || 'none'
-  }), semiCircle && /*#__PURE__*/React.createElement("path", {
-    className: "gauge-front-semi",
-    d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
-    stroke: borderColor,
-    strokeWidth: borderWidth,
-    strokeDasharray: length / 2,
-    strokeDashoffset: length / 2 * (1 + progress),
-    fill: borderBgColor ? 'none' : bgColor || 'none'
-  }), !semiCircle && borderBgColor && /*#__PURE__*/React.createElement("circle", {
-    className: "gauge-back-circle",
-    stroke: borderBgColor,
-    strokeWidth: borderWidth,
-    fill: bgColor || 'none',
-    cx: size / 2,
-    cy: size / 2,
-    r: radius
-  }), !semiCircle && /*#__PURE__*/React.createElement("circle", {
-    className: "gauge-front-circle",
-    transform: "rotate(-90 " + size / 2 + " " + size / 2 + ")",
-    stroke: borderColor,
-    strokeWidth: borderWidth,
-    strokeDasharray: length,
-    strokeDashoffset: length * (1 - progress),
-    fill: borderBgColor ? 'none' : bgColor || 'none',
-    cx: size / 2,
-    cy: size / 2,
-    r: radius
-  }), valueText && /*#__PURE__*/React.createElement("text", {
-    className: "gauge-value-text",
-    x: "50%",
-    y: semiCircle ? '100%' : '50%',
-    fontWeight: valueFontWeight,
-    fontSize: valueFontSize,
-    fill: valueTextColor,
-    dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
-    textAnchor: "middle",
-    dominantBaseline: !semiCircle ? 'middle' : null
-  }, valueText), labelText && /*#__PURE__*/React.createElement("text", {
-    className: "gauge-label-text",
-    x: "50%",
-    y: semiCircle ? '100%' : '50%',
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    fill: labelTextColor,
-    dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
-    textAnchor: "middle",
-    dominantBaseline: !semiCircle ? 'middle' : null
-  }, labelText)));
-});
-Gauge.displayName = 'f7-gauge';
-export default Gauge;

package/esm/components/link.js

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

@@ -1,105 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-var ListIndex = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7ListIndex = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init,
-      listEl = props.listEl,
-      _props$indexes = props.indexes,
-      indexes = _props$indexes === void 0 ? 'auto' : _props$indexes,
-      _props$scrollList = props.scrollList,
-      scrollList = _props$scrollList === void 0 ? true : _props$scrollList,
-      _props$label = props.label,
-      label = _props$label === void 0 ? false : _props$label,
-      _props$iosItemHeight = props.iosItemHeight,
-      iosItemHeight = _props$iosItemHeight === void 0 ? 14 : _props$iosItemHeight,
-      _props$mdItemHeight = props.mdItemHeight,
-      mdItemHeight = _props$mdItemHeight === void 0 ? 14 : _props$mdItemHeight,
-      _props$auroraItemHeig = props.auroraItemHeight,
-      auroraItemHeight = _props$auroraItemHeig === void 0 ? 14 : _props$auroraItemHeig;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var update = function update() {
-    if (!_f7ListIndex.current) return;
-
-    _f7ListIndex.current.update();
-  };
-
-  var scrollListToIndex = function scrollListToIndex(indexContent) {
-    if (!_f7ListIndex.current) return;
-
-    _f7ListIndex.current.scrollListToIndex(indexContent);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7ListIndex: function f7ListIndex() {
-        return _f7ListIndex.current;
-      },
-      update: update,
-      scrollListToIndex: scrollListToIndex
-    };
-  });
-  watchProp(indexes, function (newValue) {
-    if (!_f7ListIndex.current) return;
-    _f7ListIndex.current.params.indexes = newValue;
-    update();
-  });
-
-  var onMount = function onMount() {
-    if (!init) return;
-    f7ready(function () {
-      _f7ListIndex.current = f7.listIndex.create({
-        el: elRef.current,
-        listEl: listEl,
-        indexes: indexes,
-        iosItemHeight: iosItemHeight,
-        mdItemHeight: mdItemHeight,
-        auroraItemHeight: auroraItemHeight,
-        scrollList: scrollList,
-        label: label,
-        on: {
-          select: function select(index, itemContent, itemIndex) {
-            emit(props, 'listIndexSelect', itemContent, itemIndex);
-          }
-        }
-      });
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7ListIndex.current && _f7ListIndex.current.destroy) {
-      _f7ListIndex.current.destroy();
-    }
-
-    _f7ListIndex.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var 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/login-screen.js

@@ -1,126 +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 { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-import { modalStateClasses } from '../shared/modal-state-classes';
-
-
-var LoginScreen = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7LoginScreen = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      opened = props.opened,
-      animate = props.animate,
-      containerEl = props.containerEl;
-  var extraAttrs = getExtraAttrs(props);
-  var isOpened = useRef(opened);
-  var isClosing = useRef(false);
-  var elRef = useRef(null);
-
-  var onOpen = function onOpen(instance) {
-    isOpened.current = true;
-    isClosing.current = false;
-    emit(props, 'loginScreenOpen', instance);
-  };
-
-  var onOpened = function onOpened(instance) {
-    emit(props, 'loginScreenOpened', instance);
-  };
-
-  var onClose = function onClose(instance) {
-    isOpened.current = false;
-    isClosing.current = true;
-    emit(props, 'loginScreenClose', instance);
-  };
-
-  var onClosed = function onClosed(instance) {
-    isClosing.current = false;
-    emit(props, 'loginScreenClosed', instance);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7LoginScreen: function f7LoginScreen() {
-        return _f7LoginScreen.current;
-      }
-    };
-  }); // watch opened changes
-
-  watchProp(opened, function (value) {
-    if (!_f7LoginScreen.current) return;
-
-    if (value) {
-      _f7LoginScreen.current.open();
-    } else {
-      _f7LoginScreen.current.close();
-    }
-  });
-
-  var modalEvents = function modalEvents(method) {
-    if (!_f7LoginScreen.current) return;
-
-    _f7LoginScreen.current[method]('open', onOpen);
-
-    _f7LoginScreen.current[method]('opened', onOpened);
-
-    _f7LoginScreen.current[method]('close', onClose);
-
-    _f7LoginScreen.current[method]('closed', onClosed);
-  };
-
-  var onMount = function onMount() {
-    if (!elRef.current) return;
-    f7ready(function () {
-      var loginScreenParams = {
-        el: elRef.current
-      };
-      if ('animate' in props) loginScreenParams.animate = animate;
-      if ('containerEl' in props) loginScreenParams.containerEl = containerEl;
-      _f7LoginScreen.current = f7.loginScreen.create(loginScreenParams);
-      modalEvents('on');
-
-      if (opened) {
-        _f7LoginScreen.current.open(false);
-      }
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7LoginScreen.current) {
-      _f7LoginScreen.current.destroy();
-    }
-
-    _f7LoginScreen.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    modalEvents('on');
-    return function () {
-      modalEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var classes = classNames(className, 'login-screen', modalStateClasses({
-    isOpened: isOpened,
-    isClosing: isClosing
-  }), colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-LoginScreen.displayName = 'f7-login-screen';
-export default LoginScreen;