framework7-react 6.3.15 → 7.0.0-beta.11

package/components/progressbar.js

@@ -0,0 +1,46 @@
+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';
+import { f7 } from '../shared/f7.js';
+
+const Progressbar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    progress,
+    infinite
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const set = (newProgress, speed) => {
+    if (!f7) return;
+    f7.progressbar.set(elRef.current, newProgress, speed);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    set
+  }));
+  const transformStyle = {
+    transform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : '',
+    WebkitTransform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : ''
+  };
+  const 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 → components}/radio.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 } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const Radio = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    value,
+    disabled,
+    readonly,
+    checked,
+    defaultChecked
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onChange = function onChange(event) {
+  const onChange = event => {
     emit(props, 'change', event);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var inputEl = /*#__PURE__*/React.createElement("input", {
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const inputEl = /*#__PURE__*/React.createElement("input", {
     type: "radio",
     name: name,
     value: value,
@@ -36,11 +36,11 @@ var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultChecked: defaultChecked,
     onChange: onChange
   });
-  var iconEl = /*#__PURE__*/React.createElement("i", {
+  const iconEl = /*#__PURE__*/React.createElement("i", {
     className: "icon-radio"
   });
-  var classes = classNames(className, 'radio', {
-    disabled: disabled
+  const classes = classNames(className, 'radio', {
+    disabled
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("label", _extends({
     id: id,

package/components/range.js

@@ -0,0 +1,130 @@
+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, noUndefinedProps, 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 Range = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Range = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    children,
+    init = true,
+    value = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    label = false,
+    dual = false,
+    vertical = false,
+    verticalReversed = false,
+    draggableBar = true,
+    formatLabel,
+    scale = false,
+    scaleSteps = 5,
+    scaleSubSteps = 0,
+    formatScaleLabel,
+    limitKnobPosition = undefined,
+    name,
+    input,
+    inputId,
+    disabled
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Range: () => f7Range.current
+  }));
+  watchProp(value, newValue => {
+    if (!f7Range.current) return;
+    const 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);
+    }
+  });
+
+  const onChange = (range, val) => {
+    emit(props, 'rangeChange', val);
+  };
+
+  const onChanged = (range, val) => {
+    emit(props, 'rangeChanged', val);
+  };
+
+  const rangeEvents = method => {
+    if (!f7Range.current) return;
+    f7Range.current[method]('change', onChange);
+    f7Range.current[method]('changed', onChanged);
+  };
+
+  const onMount = () => {
+    f7ready(() => {
+      if (!init || !elRef.current) return;
+      f7Range.current = f7.range.create(noUndefinedProps({
+        el: elRef.current,
+        value,
+        min,
+        max,
+        step,
+        label,
+        dual,
+        draggableBar,
+        vertical,
+        verticalReversed,
+        formatLabel,
+        scale,
+        scaleSteps,
+        scaleSubSteps,
+        formatScaleLabel,
+        limitKnobPosition
+      }));
+      rangeEvents('on');
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Range.current && f7Range.current.destroy) f7Range.current.destroy();
+    f7Range.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    rangeEvents('on');
+    return () => {
+      rangeEvents('off');
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const classes = classNames(className, 'range-slider', {
+    'range-slider-horizontal': !vertical,
+    'range-slider-vertical': vertical,
+    'range-slider-vertical-reversed': vertical && verticalReversed,
+    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 → components}/routable-modals.js

@@ -1,54 +1,52 @@
 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 } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import { f7events, f7routers, f7 } from '../shared/f7';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import { f7events, f7routers, f7 } from '../shared/f7.js';
 
-var RoutableModals = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useState = useState([]),
-      modals = _useState[0],
-      _setModals = _useState[1];
-
-  var elRef = useRef(null);
-  var routerData = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+const RoutableModals = /*#__PURE__*/forwardRef((props, ref) => {
+  const [modals, setModals] = useState([]);
+  const elRef = useRef(null);
+  const routerData = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
 
-  var onMount = function onMount() {
+  const onMount = () => {
     routerData.current = {
-      modals: modals,
+      modals,
       el: elRef.current,
-      setModals: function setModals(newModals) {
-        _setModals([].concat(newModals));
+
+      setModals(newModals) {
+        setModals([...newModals]);
       }
+
     };
     f7routers.modals = routerData.current;
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (!routerData.current) return;
     f7routers.modals = null;
     routerData.current = null;
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!routerData.current || !f7) return;
     f7events.emit('modalsRouterDidUpdate', routerData.current);
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: elRef,
     className: "framework7-modals"
-  }, modals.map(function (_ref) {
-    var ModalComponent = _ref.component,
-        modalId = _ref.id,
-        modalProps = _ref.props;
+  }, modals.map(({
+    component: ModalComponent,
+    id: modalId,
+    props: modalProps
+  }) => {
     return /*#__PURE__*/React.createElement(ModalComponent, _extends({
       key: modalId
     }, modalProps));

package/{esm/components → components}/row.js

@@ -1,53 +1,51 @@
 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';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
 
-var Row = /*#__PURE__*/forwardRef(function (props, ref) {
-  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,
-      noGap = props.noGap,
-      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);
+const Row = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    tag = 'div',
+    noGap,
+    resizable,
+    resizableFixed,
+    resizableAbsolute,
+    resizableHandler = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onClick = function onClick(event) {
+  const onClick = event => {
     emit(props, 'click', event);
   };
 
-  var onResize = function onResize(el) {
+  const onResize = el => {
     if (el === elRef.current) {
       emit(props, 'gridResize');
     }
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  useEffect(function () {
-    f7ready(function () {
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  useEffect(() => {
+    f7ready(() => {
       f7.on('gridResize', onResize);
     });
-    return function () {
+    return () => {
       f7.off('gridResize', onResize);
     };
   });
-  var RowTag = tag;
-  var classes = classNames(className, 'row', {
+  const RowTag = tag;
+  const classes = classNames(className, 'row', {
     'no-gap': noGap,
-    resizable: resizable,
+    resizable,
     'resizable-fixed': resizableFixed,
     'resizable-absolute': resizableAbsolute
   }, colorClasses(props));

package/components/searchbar.js

@@ -0,0 +1,226 @@
+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, getSlots, noUndefinedProps, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+
+
+const Searchbar = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Searchbar = useRef(null);
+  const {
+    className,
+    id,
+    style,
+    noShadow,
+    noHairline,
+    form = true,
+    placeholder = 'Search',
+    spellcheck,
+    disableButton = true,
+    disableButtonText = 'Cancel',
+    clearButton = true,
+    // Input Value
+    value,
+    // SB Params
+    inputEvents = 'change input compositionend',
+    expandable,
+    inline,
+    searchContainer,
+    searchIn = '.item-title',
+    searchItem = 'li',
+    searchGroup = '.list-group',
+    searchGroupTitle = '.item-divider, .list-group-title',
+    foundEl = '.searchbar-found',
+    notFoundEl = '.searchbar-not-found',
+    backdrop,
+    backdropEl,
+    hideOnEnableEl = '.searchbar-hide-on-enable',
+    hideOnSearchEl = '.searchbar-hide-on-search',
+    ignore = '.searchbar-ignore',
+    customSearch = false,
+    removeDiacritics = false,
+    hideDividers = true,
+    hideGroups = true,
+    init = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const search = query => {
+    if (!f7Searchbar.current) return undefined;
+    return f7Searchbar.current.search(query);
+  };
+
+  const enable = () => {
+    if (!f7Searchbar.current) return undefined;
+    return f7Searchbar.current.enable();
+  };
+
+  const disable = () => {
+    if (!f7Searchbar.current) return undefined;
+    return f7Searchbar.current.disable();
+  };
+
+  const toggle = () => {
+    if (!f7Searchbar.current) return undefined;
+    return f7Searchbar.current.toggle();
+  };
+
+  const clear = () => {
+    if (!f7Searchbar.current) return undefined;
+    return f7Searchbar.current.clear();
+  };
+
+  const onChange = event => {
+    emit(props, 'change', event);
+  };
+
+  const onInput = event => {
+    emit(props, 'input', event);
+  };
+
+  const onFocus = event => {
+    emit(props, 'focus', event);
+  };
+
+  const onBlur = event => {
+    emit(props, 'blur', event);
+  };
+
+  const onSubmit = event => {
+    emit(props, 'submit', event);
+  };
+
+  const onClearButtonClick = event => {
+    emit(props, 'click:clear clickClear', event);
+  };
+
+  const onDisableButtonClick = event => {
+    emit(props, 'click:disable clickDisable', event);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Searchbar: () => f7Searchbar.current,
+    search,
+    enable,
+    disable,
+    toggle,
+    clear
+  }));
+
+  const onMount = () => {
+    if (!init) return;
+    f7ready(() => {
+      const params = noUndefinedProps({
+        el: elRef.current,
+        inputEvents,
+        searchContainer,
+        searchIn,
+        searchItem,
+        searchGroup,
+        searchGroupTitle,
+        hideOnEnableEl,
+        hideOnSearchEl,
+        foundEl,
+        notFoundEl,
+        backdrop,
+        backdropEl,
+        disableButton,
+        ignore,
+        customSearch,
+        removeDiacritics,
+        hideDividers,
+        hideGroups,
+        expandable,
+        inline,
+        on: {
+          search(searchbar, query, previousQuery) {
+            emit(props, 'searchbarSearch', searchbar, query, previousQuery);
+          },
+
+          clear(searchbar, previousQuery) {
+            emit(props, 'searchbarClear', searchbar, previousQuery);
+          },
+
+          enable(searchbar) {
+            emit(props, 'searchbarEnable', searchbar);
+          },
+
+          disable(searchbar) {
+            emit(props, 'searchbarDisable', searchbar);
+          }
+
+        }
+      });
+      Object.keys(params).forEach(key => {
+        if (params[key] === '') {
+          delete params[key];
+        }
+      });
+      f7Searchbar.current = f7.searchbar.create(params);
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Searchbar.current && f7Searchbar.current.destroy) f7Searchbar.current.destroy();
+    f7Searchbar.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  let clearEl;
+  let 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);
+  }
+
+  const SearchbarTag = form ? 'form' : 'div';
+  const classes = classNames(className, 'searchbar', {
+    'searchbar-inline': inline,
+    'no-shadow': noShadow,
+    'no-hairline': noHairline,
+    'searchbar-expandable': expandable
+  }, colorClasses(props));
+  const 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;