framework7-react 6.3.16 → 7.0.0-beta.12

package/esm/components/progressbar.js

@@ -1,46 +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';
-import { f7 } from '../shared/f7';
-
-var Progressbar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      progress = props.progress,
-      infinite = props.infinite;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var set = function set(newProgress, speed) {
-    if (!f7) return;
-    f7.progressbar.set(elRef.current, newProgress, speed);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      set: set
-    };
-  });
-  var transformStyle = {
-    transform: progress ? "translate3d(" + (-100 + progress) + "%, 0, 0)" : '',
-    WebkitTransform: progress ? "translate3d(" + (-100 + progress) + "%, 0, 0)" : ''
-  };
-  var classes = classNames(className, 'progressbar', {
-    'progressbar-infinite': infinite
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("span", _extends({
-    ref: elRef,
-    id: id,
-    style: style,
-    className: classes,
-    "data-progress": progress
-  }, extraAttrs), /*#__PURE__*/React.createElement("span", {
-    style: transformStyle
-  }));
-});
-Progressbar.displayName = 'f7-progressbar';
-export default Progressbar;

package/esm/components/range.js

@@ -1,149 +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, noUndefinedProps, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-
-var Range = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Range = 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,
-      _props$value = props.value,
-      value = _props$value === void 0 ? 0 : _props$value,
-      _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 100 : _props$max,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      _props$label = props.label,
-      label = _props$label === void 0 ? false : _props$label,
-      _props$dual = props.dual,
-      dual = _props$dual === void 0 ? false : _props$dual,
-      _props$vertical = props.vertical,
-      vertical = _props$vertical === void 0 ? false : _props$vertical,
-      _props$verticalRevers = props.verticalReversed,
-      verticalReversed = _props$verticalRevers === void 0 ? false : _props$verticalRevers,
-      _props$draggableBar = props.draggableBar,
-      draggableBar = _props$draggableBar === void 0 ? true : _props$draggableBar,
-      formatLabel = props.formatLabel,
-      _props$scale = props.scale,
-      scale = _props$scale === void 0 ? false : _props$scale,
-      _props$scaleSteps = props.scaleSteps,
-      scaleSteps = _props$scaleSteps === void 0 ? 5 : _props$scaleSteps,
-      _props$scaleSubSteps = props.scaleSubSteps,
-      scaleSubSteps = _props$scaleSubSteps === void 0 ? 0 : _props$scaleSubSteps,
-      formatScaleLabel = props.formatScaleLabel,
-      _props$limitKnobPosit = props.limitKnobPosition,
-      limitKnobPosition = _props$limitKnobPosit === void 0 ? undefined : _props$limitKnobPosit,
-      name = props.name,
-      input = props.input,
-      inputId = props.inputId,
-      disabled = props.disabled;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Range: function f7Range() {
-        return _f7Range.current;
-      }
-    };
-  });
-  watchProp(value, function (newValue) {
-    if (!_f7Range.current) return;
-    var rangeValue = _f7Range.current.value;
-
-    if (Array.isArray(newValue) && Array.isArray(rangeValue)) {
-      if (rangeValue[0] !== newValue[0] || rangeValue[1] !== newValue[1]) {
-        _f7Range.current.setValue(newValue);
-      }
-    } else {
-      _f7Range.current.setValue(newValue);
-    }
-  });
-
-  var onChange = function onChange(range, val) {
-    emit(props, 'rangeChange', val);
-  };
-
-  var onChanged = function onChanged(range, val) {
-    emit(props, 'rangeChanged', val);
-  };
-
-  var rangeEvents = function rangeEvents(method) {
-    if (!_f7Range.current) return;
-
-    _f7Range.current[method]('change', onChange);
-
-    _f7Range.current[method]('changed', onChanged);
-  };
-
-  var onMount = function onMount() {
-    f7ready(function () {
-      if (!init || !elRef.current) return;
-      _f7Range.current = f7.range.create(noUndefinedProps({
-        el: elRef.current,
-        value: value,
-        min: min,
-        max: max,
-        step: step,
-        label: label,
-        dual: dual,
-        draggableBar: draggableBar,
-        vertical: vertical,
-        verticalReversed: verticalReversed,
-        formatLabel: formatLabel,
-        scale: scale,
-        scaleSteps: scaleSteps,
-        scaleSubSteps: scaleSubSteps,
-        formatScaleLabel: formatScaleLabel,
-        limitKnobPosition: limitKnobPosition
-      }));
-      rangeEvents('on');
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Range.current && _f7Range.current.destroy) _f7Range.current.destroy();
-    _f7Range.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    rangeEvents('on');
-    return function () {
-      rangeEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var classes = classNames(className, 'range-slider', {
-    'range-slider-horizontal': !vertical,
-    'range-slider-vertical': vertical,
-    'range-slider-vertical-reversed': vertical && verticalReversed,
-    disabled: disabled
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
-    id: id,
-    style: style,
-    className: classes
-  }, extraAttrs), input && /*#__PURE__*/React.createElement("input", {
-    type: "range",
-    name: name,
-    id: inputId
-  }), children);
-});
-Range.displayName = 'f7-range';
-export default Range;

package/esm/components/searchbar.js

@@ -1,243 +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, getSlots, noUndefinedProps, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-
-
-var Searchbar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Searchbar = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      noShadow = props.noShadow,
-      noHairline = props.noHairline,
-      _props$form = props.form,
-      form = _props$form === void 0 ? true : _props$form,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? 'Search' : _props$placeholder,
-      spellcheck = props.spellcheck,
-      _props$disableButton = props.disableButton,
-      disableButton = _props$disableButton === void 0 ? true : _props$disableButton,
-      _props$disableButtonT = props.disableButtonText,
-      disableButtonText = _props$disableButtonT === void 0 ? 'Cancel' : _props$disableButtonT,
-      _props$clearButton = props.clearButton,
-      clearButton = _props$clearButton === void 0 ? true : _props$clearButton,
-      value = props.value,
-      _props$inputEvents = props.inputEvents,
-      inputEvents = _props$inputEvents === void 0 ? 'change input compositionend' : _props$inputEvents,
-      expandable = props.expandable,
-      inline = props.inline,
-      searchContainer = props.searchContainer,
-      _props$searchIn = props.searchIn,
-      searchIn = _props$searchIn === void 0 ? '.item-title' : _props$searchIn,
-      _props$searchItem = props.searchItem,
-      searchItem = _props$searchItem === void 0 ? 'li' : _props$searchItem,
-      _props$searchGroup = props.searchGroup,
-      searchGroup = _props$searchGroup === void 0 ? '.list-group' : _props$searchGroup,
-      _props$searchGroupTit = props.searchGroupTitle,
-      searchGroupTitle = _props$searchGroupTit === void 0 ? '.item-divider, .list-group-title' : _props$searchGroupTit,
-      _props$foundEl = props.foundEl,
-      foundEl = _props$foundEl === void 0 ? '.searchbar-found' : _props$foundEl,
-      _props$notFoundEl = props.notFoundEl,
-      notFoundEl = _props$notFoundEl === void 0 ? '.searchbar-not-found' : _props$notFoundEl,
-      backdrop = props.backdrop,
-      backdropEl = props.backdropEl,
-      _props$hideOnEnableEl = props.hideOnEnableEl,
-      hideOnEnableEl = _props$hideOnEnableEl === void 0 ? '.searchbar-hide-on-enable' : _props$hideOnEnableEl,
-      _props$hideOnSearchEl = props.hideOnSearchEl,
-      hideOnSearchEl = _props$hideOnSearchEl === void 0 ? '.searchbar-hide-on-search' : _props$hideOnSearchEl,
-      _props$ignore = props.ignore,
-      ignore = _props$ignore === void 0 ? '.searchbar-ignore' : _props$ignore,
-      _props$customSearch = props.customSearch,
-      customSearch = _props$customSearch === void 0 ? false : _props$customSearch,
-      _props$removeDiacriti = props.removeDiacritics,
-      removeDiacritics = _props$removeDiacriti === void 0 ? false : _props$removeDiacriti,
-      _props$hideDividers = props.hideDividers,
-      hideDividers = _props$hideDividers === void 0 ? true : _props$hideDividers,
-      _props$hideGroups = props.hideGroups,
-      hideGroups = _props$hideGroups === void 0 ? true : _props$hideGroups,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var search = function search(query) {
-    if (!_f7Searchbar.current) return undefined;
-    return _f7Searchbar.current.search(query);
-  };
-
-  var enable = function enable() {
-    if (!_f7Searchbar.current) return undefined;
-    return _f7Searchbar.current.enable();
-  };
-
-  var disable = function disable() {
-    if (!_f7Searchbar.current) return undefined;
-    return _f7Searchbar.current.disable();
-  };
-
-  var toggle = function toggle() {
-    if (!_f7Searchbar.current) return undefined;
-    return _f7Searchbar.current.toggle();
-  };
-
-  var clear = function clear() {
-    if (!_f7Searchbar.current) return undefined;
-    return _f7Searchbar.current.clear();
-  };
-
-  var onChange = function onChange(event) {
-    emit(props, 'change', event);
-  };
-
-  var onInput = function onInput(event) {
-    emit(props, 'input', event);
-  };
-
-  var onFocus = function onFocus(event) {
-    emit(props, 'focus', event);
-  };
-
-  var onBlur = function onBlur(event) {
-    emit(props, 'blur', event);
-  };
-
-  var onSubmit = function onSubmit(event) {
-    emit(props, 'submit', event);
-  };
-
-  var onClearButtonClick = function onClearButtonClick(event) {
-    emit(props, 'click:clear clickClear', event);
-  };
-
-  var onDisableButtonClick = function onDisableButtonClick(event) {
-    emit(props, 'click:disable clickDisable', event);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Searchbar: function f7Searchbar() {
-        return _f7Searchbar.current;
-      },
-      search: search,
-      enable: enable,
-      disable: disable,
-      toggle: toggle,
-      clear: clear
-    };
-  });
-
-  var onMount = function onMount() {
-    if (!init) return;
-    f7ready(function () {
-      var params = noUndefinedProps({
-        el: elRef.current,
-        inputEvents: inputEvents,
-        searchContainer: searchContainer,
-        searchIn: searchIn,
-        searchItem: searchItem,
-        searchGroup: searchGroup,
-        searchGroupTitle: searchGroupTitle,
-        hideOnEnableEl: hideOnEnableEl,
-        hideOnSearchEl: hideOnSearchEl,
-        foundEl: foundEl,
-        notFoundEl: notFoundEl,
-        backdrop: backdrop,
-        backdropEl: backdropEl,
-        disableButton: disableButton,
-        ignore: ignore,
-        customSearch: customSearch,
-        removeDiacritics: removeDiacritics,
-        hideDividers: hideDividers,
-        hideGroups: hideGroups,
-        expandable: expandable,
-        inline: inline,
-        on: {
-          search: function search(searchbar, query, previousQuery) {
-            emit(props, 'searchbarSearch', searchbar, query, previousQuery);
-          },
-          clear: function clear(searchbar, previousQuery) {
-            emit(props, 'searchbarClear', searchbar, previousQuery);
-          },
-          enable: function enable(searchbar) {
-            emit(props, 'searchbarEnable', searchbar);
-          },
-          disable: function disable(searchbar) {
-            emit(props, 'searchbarDisable', searchbar);
-          }
-        }
-      });
-      Object.keys(params).forEach(function (key) {
-        if (params[key] === '') {
-          delete params[key];
-        }
-      });
-      _f7Searchbar.current = f7.searchbar.create(params);
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Searchbar.current && _f7Searchbar.current.destroy) _f7Searchbar.current.destroy();
-    _f7Searchbar.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var clearEl;
-  var disableEl;
-
-  if (clearButton) {
-    clearEl = /*#__PURE__*/React.createElement("span", {
-      className: "input-clear-button",
-      onClick: onClearButtonClick
-    });
-  }
-
-  if (disableButton) {
-    disableEl = /*#__PURE__*/React.createElement("span", {
-      className: "searchbar-disable-button",
-      onClick: onDisableButtonClick
-    }, disableButtonText);
-  }
-
-  var SearchbarTag = form ? 'form' : 'div';
-  var classes = classNames(className, 'searchbar', {
-    'searchbar-inline': inline,
-    'no-shadow': noShadow,
-    'no-hairline': noHairline,
-    'searchbar-expandable': expandable
-  }, colorClasses(props));
-  var slots = getSlots(props);
-  return /*#__PURE__*/React.createElement(SearchbarTag, _extends({
-    ref: elRef,
-    id: id,
-    style: style,
-    className: classes
-  }, extraAttrs, {
-    onSubmit: onSubmit
-  }), slots['before-inner'], /*#__PURE__*/React.createElement("div", {
-    className: "searchbar-inner"
-  }, slots['inner-start'], /*#__PURE__*/React.createElement("div", {
-    className: "searchbar-input-wrap"
-  }, slots['input-wrap-start'], /*#__PURE__*/React.createElement("input", {
-    value: value,
-    placeholder: placeholder,
-    spellCheck: spellcheck,
-    type: "search",
-    onInput: onInput,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }), /*#__PURE__*/React.createElement("i", {
-    className: "searchbar-icon"
-  }), clearEl, slots['input-wrap-end']), disableEl, slots['inner-end'], slots.default), slots['after-inner']);
-});
-Searchbar.displayName = 'f7-searchbar';
-export default Searchbar;

package/esm/components/sheet.js

@@ -1,196 +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, getSlots } 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 Sheet = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Sheet = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      top = props.top,
-      bottom = props.bottom,
-      position = props.position,
-      push = props.push,
-      opened = props.opened,
-      animate = props.animate,
-      backdrop = props.backdrop,
-      backdropEl = props.backdropEl,
-      closeByBackdropClick = props.closeByBackdropClick,
-      closeByOutsideClick = props.closeByOutsideClick,
-      closeOnEscape = props.closeOnEscape,
-      swipeToClose = props.swipeToClose,
-      swipeToStep = props.swipeToStep,
-      swipeHandler = props.swipeHandler,
-      containerEl = props.containerEl;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var isOpened = useRef(opened);
-  var isClosing = useRef(false);
-
-  var onStepProgress = function onStepProgress(instance, progress) {
-    emit(props, 'sheetStepProgress', instance, progress);
-  };
-
-  var onStepOpen = function onStepOpen(instance) {
-    emit(props, 'sheetStepOpen', instance);
-  };
-
-  var onStepClose = function onStepClose(instance) {
-    emit(props, 'sheetStepClose', instance);
-  };
-
-  var onOpen = function onOpen(instance) {
-    isOpened.current = true;
-    isClosing.current = false;
-    emit(props, 'sheetOpen', instance);
-  };
-
-  var onOpened = function onOpened(instance) {
-    emit(props, 'sheetOpened', instance);
-  };
-
-  var onClose = function onClose(instance) {
-    isOpened.current = false;
-    isClosing.current = true;
-    emit(props, 'sheetClose', instance);
-  };
-
-  var onClosed = function onClosed(instance) {
-    isClosing.current = false;
-    emit(props, 'sheetClosed', instance);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Sheet: function f7Sheet() {
-        return _f7Sheet.current;
-      }
-    };
-  });
-
-  var modalEvents = function modalEvents(method) {
-    if (!_f7Sheet.current) return;
-
-    _f7Sheet.current[method]('open', onOpen);
-
-    _f7Sheet.current[method]('opened', onOpened);
-
-    _f7Sheet.current[method]('close', onClose);
-
-    _f7Sheet.current[method]('closed', onClosed);
-
-    _f7Sheet.current[method]('stepOpen', onStepOpen);
-
-    _f7Sheet.current[method]('stepClose', onStepClose);
-
-    _f7Sheet.current[method]('stepProgress', onStepProgress);
-  };
-
-  var onMount = function onMount() {
-    if (!elRef.current) return;
-    var sheetParams = {
-      el: elRef.current
-    };
-    if ('animate' in props && typeof animate !== 'undefined') sheetParams.animate = animate;
-    if ('backdrop' in props && typeof backdrop !== 'undefined') sheetParams.backdrop = backdrop;
-    if ('backdropEl' in props) sheetParams.backdropEl = backdropEl;
-    if ('closeByBackdropClick' in props) sheetParams.closeByBackdropClick = closeByBackdropClick;
-    if ('closeByOutsideClick' in props) sheetParams.closeByOutsideClick = closeByOutsideClick;
-    if ('closeOnEscape' in props) sheetParams.closeOnEscape = closeOnEscape;
-    if ('swipeToClose' in props) sheetParams.swipeToClose = swipeToClose;
-    if ('swipeToStep' in props) sheetParams.swipeToStep = swipeToStep;
-    if ('swipeHandler' in props) sheetParams.swipeHandler = swipeHandler;
-    if ('containerEl' in props) sheetParams.containerEl = containerEl;
-    f7ready(function () {
-      _f7Sheet.current = f7.sheet.create(sheetParams);
-      modalEvents('on');
-
-      if (opened) {
-        _f7Sheet.current.open(false);
-      }
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Sheet.current) {
-      _f7Sheet.current.destroy();
-    }
-
-    _f7Sheet.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    modalEvents('on');
-    return function () {
-      modalEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  watchProp(opened, function (value) {
-    if (!_f7Sheet.current) return;
-
-    if (value) {
-      _f7Sheet.current.open();
-    } else {
-      _f7Sheet.current.close();
-    }
-  });
-  var slots = getSlots(props);
-  var fixedList = [];
-  var staticList = [];
-  var fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(function (tagName) {
-    return "f7-" + tagName;
-  });
-  var slotsDefault = slots.default;
-
-  if (slotsDefault && slotsDefault.length) {
-    slotsDefault.forEach(function (child) {
-      if (typeof child === 'undefined') return;
-      var isFixedTag = false;
-      var tag = child.type && (child.type.displayName || child.type.name);
-
-      if (!tag) {
-        staticList.push(child);
-        return;
-      }
-
-      if (fixedTags.indexOf(tag) >= 0) {
-        isFixedTag = true;
-      }
-
-      if (isFixedTag) fixedList.push(child);else staticList.push(child);
-    });
-  }
-
-  var innerEl = /*#__PURE__*/React.createElement("div", {
-    className: "sheet-modal-inner"
-  }, staticList, slots.static);
-  var positionComputed = 'bottom';
-  if (position) positionComputed = position;else if (top) positionComputed = 'top';else if (bottom) positionComputed = 'bottom';
-  var classes = classNames(className, 'sheet-modal', "sheet-modal-" + positionComputed, {
-    'sheet-modal-push': push
-  }, modalStateClasses({
-    isOpened: isOpened,
-    isClosing: isClosing
-  }), colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), fixedList, slots.fixed, innerEl);
-});
-Sheet.displayName = 'f7-sheet';
-export default Sheet;