framework7-react 6.3.16 → 7.0.0-beta.12

package/esm/components/stepper.js

@@ -1,244 +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, noUndefinedProps } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-
-var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Stepper = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      _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,
-      formatValue = props.formatValue,
-      name = props.name,
-      inputId = props.inputId,
-      _props$input = props.input,
-      input = _props$input === void 0 ? true : _props$input,
-      _props$inputType = props.inputType,
-      inputType = _props$inputType === void 0 ? 'text' : _props$inputType,
-      _props$inputReadonly = props.inputReadonly,
-      inputReadonly = _props$inputReadonly === void 0 ? false : _props$inputReadonly,
-      _props$autorepeat = props.autorepeat,
-      autorepeat = _props$autorepeat === void 0 ? false : _props$autorepeat,
-      _props$autorepeatDyna = props.autorepeatDynamic,
-      autorepeatDynamic = _props$autorepeatDyna === void 0 ? false : _props$autorepeatDyna,
-      _props$wraps = props.wraps,
-      wraps = _props$wraps === void 0 ? false : _props$wraps,
-      _props$manualInputMod = props.manualInputMode,
-      manualInputMode = _props$manualInputMod === void 0 ? false : _props$manualInputMod,
-      _props$decimalPoint = props.decimalPoint,
-      decimalPoint = _props$decimalPoint === void 0 ? 4 : _props$decimalPoint,
-      _props$buttonsEndInpu = props.buttonsEndInputMode,
-      buttonsEndInputMode = _props$buttonsEndInpu === void 0 ? true : _props$buttonsEndInpu,
-      disabled = props.disabled,
-      buttonsOnly = props.buttonsOnly,
-      round = props.round,
-      roundMd = props.roundMd,
-      roundIos = props.roundIos,
-      roundAurora = props.roundAurora,
-      fill = props.fill,
-      fillMd = props.fillMd,
-      fillIos = props.fillIos,
-      fillAurora = props.fillAurora,
-      large = props.large,
-      largeMd = props.largeMd,
-      largeIos = props.largeIos,
-      largeAurora = props.largeAurora,
-      small = props.small,
-      smallMd = props.smallMd,
-      smallIos = props.smallIos,
-      smallAurora = props.smallAurora,
-      raised = props.raised,
-      raisedMd = props.raisedMd,
-      raisedIos = props.raisedIos,
-      raisedAurora = props.raisedAurora;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var increment = function increment() {
-    if (!_f7Stepper.current) return;
-
-    _f7Stepper.current.increment();
-  };
-
-  var decrement = function decrement() {
-    if (!_f7Stepper.current) return;
-
-    _f7Stepper.current.decrement();
-  };
-
-  var setValue = function setValue(newValue) {
-    if (_f7Stepper.current && _f7Stepper.current.setValue) _f7Stepper.current.setValue(newValue);
-  };
-
-  var getValue = function getValue() {
-    if (_f7Stepper.current && _f7Stepper.current.getValue) {
-      return _f7Stepper.current.getValue();
-    }
-
-    return undefined;
-  };
-
-  var onInput = function onInput(event) {
-    emit(props, 'input', event, _f7Stepper.current);
-  };
-
-  var onChange = function onChange(event) {
-    emit(props, 'change', event, _f7Stepper.current);
-  };
-
-  var onMinusClick = function onMinusClick(event) {
-    emit(props, 'stepperMinusClick', event, _f7Stepper.current);
-  };
-
-  var onPlusClick = function onPlusClick(event) {
-    emit(props, 'stepperPlusClick', event, _f7Stepper.current);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Stepper: function f7Stepper() {
-        return _f7Stepper.current;
-      },
-      increment: increment,
-      decrement: decrement,
-      setValue: setValue,
-      getValue: getValue
-    };
-  });
-  watchProp(value, function (newValue) {
-    if (!_f7Stepper.current) return;
-
-    _f7Stepper.current.setValue(newValue);
-  });
-
-  var onStepperChange = function onStepperChange(stepper, newValue) {
-    emit(props, 'stepperChange', newValue);
-  };
-
-  var stepperEvents = function stepperEvents(method) {
-    if (!_f7Stepper.current) return;
-
-    _f7Stepper.current[method]('change', onStepperChange);
-  };
-
-  var onMount = function onMount() {
-    f7ready(function () {
-      if (!init || !elRef.current) return;
-      _f7Stepper.current = f7.stepper.create(noUndefinedProps({
-        el: elRef.current,
-        min: min,
-        max: max,
-        value: value,
-        step: step,
-        formatValue: formatValue,
-        autorepeat: autorepeat,
-        autorepeatDynamic: autorepeatDynamic,
-        wraps: wraps,
-        manualInputMode: manualInputMode,
-        decimalPoint: decimalPoint,
-        buttonsEndInputMode: buttonsEndInputMode
-      }));
-      stepperEvents('on');
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Stepper.current && _f7Stepper.current.destroy) {
-      _f7Stepper.current.destroy();
-    }
-
-    _f7Stepper.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    stepperEvents('on');
-    return function () {
-      stepperEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var inputWrapEl;
-  var valueEl;
-
-  if (input && !buttonsOnly) {
-    var inputEl = /*#__PURE__*/React.createElement("input", {
-      name: name,
-      id: inputId,
-      type: inputType,
-      min: inputType === 'number' ? min : undefined,
-      max: inputType === 'number' ? max : undefined,
-      step: inputType === 'number' ? step : undefined,
-      onInput: onInput,
-      onChange: onChange,
-      value: value,
-      readOnly: inputReadonly
-    });
-    inputWrapEl = /*#__PURE__*/React.createElement("div", {
-      className: "stepper-input-wrap"
-    }, inputEl);
-  }
-
-  if (!input && !buttonsOnly) {
-    valueEl = /*#__PURE__*/React.createElement("div", {
-      className: "stepper-value"
-    }, value);
-  }
-
-  var classes = classNames(className, 'stepper', {
-    disabled: disabled,
-    'stepper-round': round,
-    'stepper-round-ios': roundIos,
-    'stepper-round-md': roundMd,
-    'stepper-round-aurora': roundAurora,
-    'stepper-fill': fill,
-    'stepper-fill-ios': fillIos,
-    'stepper-fill-md': fillMd,
-    'stepper-fill-aurora': fillAurora,
-    'stepper-large': large,
-    'stepper-large-ios': largeIos,
-    'stepper-large-md': largeMd,
-    'stepper-large-aurora': largeAurora,
-    'stepper-small': small,
-    'stepper-small-ios': smallIos,
-    'stepper-small-md': smallMd,
-    'stepper-small-aurora': smallAurora,
-    'stepper-raised': raised,
-    'stepper-raised-ios': raisedIos,
-    'stepper-raised-md': raisedMd,
-    'stepper-raised-aurora': raisedAurora
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
-    id: id,
-    style: style,
-    className: classes
-  }, extraAttrs), /*#__PURE__*/React.createElement("div", {
-    className: "stepper-button-minus",
-    onClick: onMinusClick
-  }), inputWrapEl, valueEl, /*#__PURE__*/React.createElement("div", {
-    className: "stepper-button-plus",
-    onClick: onPlusClick
-  }));
-});
-Stepper.displayName = 'f7-stepper';
-export default Stepper;

package/esm/components/text-editor.js

@@ -1,145 +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';
-import { watchProp } from '../shared/watch-prop';
-
-
-var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7TextEditor = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      mode = props.mode,
-      value = props.value,
-      buttons = props.buttons,
-      customButtons = props.customButtons,
-      dividers = props.dividers,
-      imageUrlText = props.imageUrlText,
-      linkUrlText = props.linkUrlText,
-      placeholder = props.placeholder,
-      clearFormattingOnPaste = props.clearFormattingOnPaste,
-      _props$resizable = props.resizable,
-      resizable = _props$resizable === void 0 ? false : _props$resizable;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var onChange = function onChange(editor, editorValue) {
-    emit(props, 'textEditorChange', editorValue);
-  };
-
-  var onInput = function onInput(editor, editorValue) {
-    emit(props, 'textEditorInput', editorValue);
-  };
-
-  var onFocus = function onFocus() {
-    emit(props, 'textEditorFocus');
-  };
-
-  var onBlur = function onBlur() {
-    emit(props, 'textEditorBlur');
-  };
-
-  var onButtonClick = function onButtonClick(editor, button) {
-    emit(props, 'textEditorButtonClick', button);
-  };
-
-  var onKeyboardOpen = function onKeyboardOpen() {
-    emit(props, 'textEditorKeyboardOpen');
-  };
-
-  var onKeyboardClose = function onKeyboardClose() {
-    emit(props, 'textEditorKeyboardClose');
-  };
-
-  var onPopoverOpen = function onPopoverOpen() {
-    emit(props, 'textEditorPopoverOpen');
-  };
-
-  var onPopoverClose = function onPopoverClose() {
-    emit(props, 'textEditorPopoverClose');
-  };
-
-  var onInsertLink = function onInsertLink(editor, url) {
-    emit(props, 'textEditorInsertLink', url);
-  };
-
-  var onInsertImage = function onInsertImage(editor, url) {
-    emit(props, 'textEditorInsertImage', url);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7TextEditor: function f7TextEditor() {
-        return _f7TextEditor.current;
-      }
-    };
-  });
-  watchProp(value, function (newValue) {
-    if (_f7TextEditor.current) {
-      _f7TextEditor.current.setValue(newValue);
-    }
-  });
-
-  var onMount = function onMount() {
-    var params = noUndefinedProps({
-      el: elRef.current,
-      mode: mode,
-      value: value,
-      buttons: buttons,
-      customButtons: customButtons,
-      dividers: dividers,
-      imageUrlText: imageUrlText,
-      linkUrlText: linkUrlText,
-      placeholder: placeholder,
-      clearFormattingOnPaste: clearFormattingOnPaste,
-      on: {
-        change: onChange,
-        input: onInput,
-        focus: onFocus,
-        blur: onBlur,
-        buttonClick: onButtonClick,
-        keyboardOpen: onKeyboardOpen,
-        keyboardClose: onKeyboardClose,
-        popoverOpen: onPopoverOpen,
-        popoverClose: onPopoverClose,
-        insertLink: onInsertLink,
-        insertImage: onInsertImage
-      }
-    });
-    f7ready(function () {
-      _f7TextEditor.current = f7.textEditor.create(params);
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7TextEditor.current && _f7TextEditor.current.destroy) {
-      _f7TextEditor.current.destroy();
-    }
-
-    _f7TextEditor.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var slots = getSlots(props);
-  var classes = classNames(className, 'text-editor', resizable && 'text-editor-resizable', colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elRef,
-    id: id,
-    style: style,
-    className: classes
-  }, extraAttrs), slots['root-start'], /*#__PURE__*/React.createElement("div", {
-    className: "text-editor-content",
-    contentEditable: true
-  }, slots.default), slots['root-end'], slots.root);
-});
-TextEditor.displayName = 'f7-text-editor';
-export default TextEditor;

package/esm/components/toggle.js

@@ -1,119 +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 { useTooltip } from '../shared/use-tooltip';
-
-
-var Toggle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Toggle = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      name = props.name,
-      value = props.value;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var inputElRef = useRef(null);
-
-  var onChange = function onChange(event) {
-    emit(props, 'change', event);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Toggle: function f7Toggle() {
-        return _f7Toggle.current;
-      }
-    };
-  });
-  useTooltip(elRef, props);
-  watchProp(checked, function (newValue) {
-    if (!_f7Toggle.current) return;
-    _f7Toggle.current.checked = newValue;
-  });
-
-  var onToggleChange = function onToggleChange(toggleInstance) {
-    emit(props, 'toggleChange', toggleInstance.checked);
-  };
-
-  var toggleEvents = function toggleEvents(method) {
-    if (!_f7Toggle.current) return;
-
-    _f7Toggle.current[method]('toggleChange', onToggleChange);
-  };
-
-  var onMount = function onMount() {
-    f7ready(function () {
-      if (!init || !elRef.current) return;
-      _f7Toggle.current = f7.toggle.create({
-        el: elRef.current
-      });
-      toggleEvents('on');
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Toggle.current && _f7Toggle.current.destroy && _f7Toggle.current.$el) {
-      _f7Toggle.current.destroy();
-    }
-
-    _f7Toggle.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    toggleEvents('on');
-
-    if (inputElRef.current) {
-      inputElRef.current.addEventListener('change', onChange);
-    }
-
-    return function () {
-      toggleEvents('off');
-
-      if (inputElRef.current) {
-        inputElRef.current.removeEventListener('change', onChange);
-      }
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var labelClasses = classNames('toggle', className, {
-    disabled: disabled
-  }, colorClasses(props));
-  var inputEl = /*#__PURE__*/React.createElement("input", {
-    ref: inputElRef,
-    type: "checkbox",
-    name: name,
-    disabled: disabled,
-    readOnly: readonly,
-    checked: checked,
-    defaultChecked: defaultChecked,
-    value: value,
-    onChange: function onChange() {}
-  });
-  return /*#__PURE__*/React.createElement("label", _extends({
-    id: id,
-    style: style,
-    className: labelClasses,
-    ref: elRef
-  }, extraAttrs), inputEl, /*#__PURE__*/React.createElement("span", {
-    className: "toggle-icon"
-  }));
-});
-Toggle.displayName = 'f7-toggle';
-export default Toggle;