framework7-react 6.3.15 → 7.0.0-beta.11

package/esm/components/messagebar.js

@@ -1,211 +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, noUndefinedProps } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import Link from './link';
-import Input from './input';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-
-var Messagebar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Messagebar = useRef(null);
-
-  var updateSheetVisible = useRef(false);
-  var updateAttachmentsVisible = useRef(false);
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      sheetVisible = props.sheetVisible,
-      attachmentsVisible = props.attachmentsVisible,
-      top = props.top,
-      _props$resizable = props.resizable,
-      resizable = _props$resizable === void 0 ? true : _props$resizable,
-      _props$bottomOffset = props.bottomOffset,
-      bottomOffset = _props$bottomOffset === void 0 ? 0 : _props$bottomOffset,
-      _props$topOffset = props.topOffset,
-      topOffset = _props$topOffset === void 0 ? 0 : _props$topOffset,
-      maxHeight = props.maxHeight,
-      _props$resizePage = props.resizePage,
-      resizePage = _props$resizePage === void 0 ? true : _props$resizePage,
-      sendLink = props.sendLink,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      textareaId = props.textareaId,
-      name = props.name,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? 'Message' : _props$placeholder,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var areaElRef = useRef(null);
-
-  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 onClick = function onClick(event) {
-    var inputValue = areaElRef.current.el.value;
-    var clear = _f7Messagebar.current ? function () {
-      _f7Messagebar.current.clear();
-    } : function () {};
-    emit(props, 'submit', inputValue, clear);
-    emit(props, 'send', inputValue, clear);
-    emit(props, 'click', event);
-  };
-
-  var onAttachmentDelete = function onAttachmentDelete(instance, attachmentEl, attachmentElIndex) {
-    emit(props, 'messagebarAttachmentDelete', instance, attachmentEl, attachmentElIndex);
-  };
-
-  var onAttachmentClick = function onAttachmentClick(instance, attachmentEl, attachmentElIndex) {
-    emit(props, 'messagebarAttachmentClick', instance, attachmentEl, attachmentElIndex);
-  };
-
-  var onResizePage = function onResizePage(instance) {
-    emit(props, 'messagebarResizePage', instance);
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Messagebar: function f7Messagebar() {
-        return _f7Messagebar.current;
-      }
-    };
-  });
-  watchProp(sheetVisible, function () {
-    if (!resizable || !_f7Messagebar.current) return;
-    updateSheetVisible.current = true;
-  });
-  watchProp(attachmentsVisible, function () {
-    if (!resizable || !_f7Messagebar.current) return;
-    updateAttachmentsVisible.current = true;
-  });
-  useIsomorphicLayoutEffect(function () {
-    if (!_f7Messagebar.current) return;
-
-    if (updateSheetVisible.current) {
-      updateSheetVisible.current = false;
-      _f7Messagebar.current.sheetVisible = sheetVisible;
-
-      _f7Messagebar.current.resizePage();
-    }
-
-    if (updateAttachmentsVisible.current) {
-      updateAttachmentsVisible.current = false;
-      _f7Messagebar.current.attachmentsVisible = attachmentsVisible;
-
-      _f7Messagebar.current.resizePage();
-    }
-  });
-
-  var onMount = function onMount() {
-    if (!init) return;
-    if (!elRef.current) return;
-    var params = noUndefinedProps({
-      el: elRef.current,
-      top: top,
-      resizePage: resizePage,
-      bottomOffset: bottomOffset,
-      topOffset: topOffset,
-      maxHeight: maxHeight,
-      on: {
-        attachmentDelete: onAttachmentDelete,
-        attachmentClick: onAttachmentClick,
-        resizePage: onResizePage
-      }
-    });
-    f7ready(function () {
-      _f7Messagebar.current = f7.messagebar.create(params);
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Messagebar.current && _f7Messagebar.current.destroy) _f7Messagebar.current.destroy();
-    _f7Messagebar.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var slots = getSlots(props);
-  var slotsDefault = slots.default,
-      slotsBeforeInner = slots['before-inner'],
-      slotsAfterInner = slots['after-inner'],
-      slotsSendLink = slots['send-link'],
-      slotsInnerStart = slots['inner-start'],
-      slotsInnerEnd = slots['inner-end'],
-      slotsBeforeArea = slots['before-area'],
-      slotsAfterArea = slots['after-area'];
-  var innerEndEls = [];
-  var messagebarAttachmentsEl;
-  var messagebarSheetEl;
-
-  if (slotsDefault) {
-    slotsDefault.forEach(function (child) {
-      if (typeof child === 'undefined') return;
-      var tag = child.type && (child.type.displayName || child.type.name);
-
-      if (tag && (tag.indexOf('messagebar-attachments') >= 0 || tag === 'F7MessagebarAttachments' || tag === 'f7-messagebar-attachments')) {
-        messagebarAttachmentsEl = child;
-      } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'F7MessagebarSheet' || tag === 'f7-messagebar-sheet')) {
-        messagebarSheetEl = child;
-      } else {
-        innerEndEls.push(child);
-      }
-    });
-  }
-
-  var valueProps = {};
-  if ('value' in props) valueProps.value = value;
-  var classes = classNames(className, 'toolbar', 'messagebar', {
-    'messagebar-attachments-visible': attachmentsVisible,
-    'messagebar-sheet-visible': sheetVisible
-  }, colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), slotsBeforeInner, /*#__PURE__*/React.createElement("div", {
-    className: "toolbar-inner"
-  }, slotsInnerStart, /*#__PURE__*/React.createElement("div", {
-    className: "messagebar-area"
-  }, slotsBeforeArea, messagebarAttachmentsEl, /*#__PURE__*/React.createElement(Input, _extends({
-    id: textareaId,
-    ref: areaElRef,
-    type: "textarea",
-    wrap: false,
-    placeholder: placeholder,
-    disabled: disabled,
-    name: name,
-    readonly: readonly,
-    resizable: resizable,
-    onInput: onInput,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur
-  }, valueProps)), slotsAfterArea), (sendLink && sendLink.length > 0 || slotsSendLink) && /*#__PURE__*/React.createElement(Link, {
-    onClick: onClick
-  }, slotsSendLink || sendLink), slotsInnerEnd, innerEndEls), slotsAfterInner, messagebarSheetEl);
-});
-Messagebar.displayName = 'f7-messagebar';
-export default Messagebar;

package/esm/components/messages.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 } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-
-var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _f7Messages = useRef(null);
-
-  var mounted = useRef(false);
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$autoLayout = props.autoLayout,
-      autoLayout = _props$autoLayout === void 0 ? false : _props$autoLayout,
-      _props$messages = props.messages,
-      messages = _props$messages === void 0 ? [] : _props$messages,
-      _props$newMessagesFir = props.newMessagesFirst,
-      newMessagesFirst = _props$newMessagesFir === void 0 ? false : _props$newMessagesFir,
-      _props$scrollMessages = props.scrollMessages,
-      scrollMessages = _props$scrollMessages === void 0 ? true : _props$scrollMessages,
-      _props$scrollMessages2 = props.scrollMessagesOnEdge,
-      scrollMessagesOnEdge = _props$scrollMessages2 === void 0 ? true : _props$scrollMessages2,
-      firstMessageRule = props.firstMessageRule,
-      lastMessageRule = props.lastMessageRule,
-      tailMessageRule = props.tailMessageRule,
-      sameNameMessageRule = props.sameNameMessageRule,
-      sameHeaderMessageRule = props.sameHeaderMessageRule,
-      sameFooterMessageRule = props.sameFooterMessageRule,
-      sameAvatarMessageRule = props.sameAvatarMessageRule,
-      customClassMessageRule = props.customClassMessageRule,
-      renderMessage = props.renderMessage,
-      _props$typing = props.typing,
-      typing = _props$typing === void 0 ? false : _props$typing,
-      _props$init = props.init,
-      init = _props$init === void 0 ? true : _props$init;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var childrenBeforeUpdated = useRef(null);
-  var reactChildrenBefore = useRef(children ? React.Children.count(children) : 0);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Messages: function f7Messages() {
-        return _f7Messages.current;
-      }
-    };
-  });
-
-  var onMount = function onMount() {
-    if (!init) return;
-    f7ready(function () {
-      _f7Messages.current = f7.messages.create(noUndefinedProps({
-        el: elRef.current,
-        autoLayout: autoLayout,
-        messages: messages,
-        newMessagesFirst: newMessagesFirst,
-        scrollMessages: scrollMessages,
-        scrollMessagesOnEdge: scrollMessagesOnEdge,
-        firstMessageRule: firstMessageRule,
-        lastMessageRule: lastMessageRule,
-        tailMessageRule: tailMessageRule,
-        sameNameMessageRule: sameNameMessageRule,
-        sameHeaderMessageRule: sameHeaderMessageRule,
-        sameFooterMessageRule: sameFooterMessageRule,
-        sameAvatarMessageRule: sameAvatarMessageRule,
-        customClassMessageRule: customClassMessageRule,
-        renderMessage: renderMessage
-      }));
-
-      if (typing) {
-        _f7Messages.current.showTyping();
-      }
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Messages.current && _f7Messages.current.destroy) _f7Messages.current.destroy();
-    _f7Messages.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var currentChildrenLength = children ? React.Children.count(children) : 0;
-
-  if (_f7Messages.current && scrollMessages) {
-    var beforeChildrenLength = reactChildrenBefore.current || 0;
-
-    if (currentChildrenLength !== beforeChildrenLength) {
-      _f7Messages.current.setScrollData();
-    }
-  }
-
-  reactChildrenBefore.current = currentChildrenLength;
-  useIsomorphicLayoutEffect(function () {
-    var wasMounted = mounted.current;
-    mounted.current = true;
-    if (!init || !elRef.current) return;
-    var childElements = elRef.current.children;
-    if (!childElements) return;
-    var childrenAfterUpdated = childElements.length;
-
-    if (!wasMounted) {
-      for (var i = 0; i < childElements.length; i += 1) {
-        childElements[i].classList.add('message-appeared');
-      }
-
-      return;
-    }
-
-    for (var _i = 0; _i < childElements.length; _i += 1) {
-      if (!childElements[_i].classList.contains('message-appeared')) {
-        childElements[_i].classList.add('message-appear-from-bottom');
-      }
-    }
-
-    if (_f7Messages.current) {
-      if (_f7Messages.current.layout && autoLayout) {
-        _f7Messages.current.layout();
-      }
-
-      if (childrenBeforeUpdated.current !== childrenAfterUpdated && _f7Messages.current.scroll && _f7Messages.current.scrollData && scrollMessages) {
-        _f7Messages.current.scrollWithEdgeCheck(true);
-      }
-    }
-
-    childrenBeforeUpdated.current = childrenAfterUpdated;
-  });
-  watchProp(typing, function (newValue) {
-    if (!_f7Messages.current) return;
-    if (newValue) _f7Messages.current.showTyping();else _f7Messages.current.hideTyping();
-  });
-  var classes = classNames(className, 'messages', colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children);
-});
-Messages.displayName = 'f7-messages';
-export default Messages;

package/esm/components/panel.js

@@ -1,216 +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 Panel = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _classNames;
-
-  var _f7Panel = useRef(null);
-
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      side = props.side,
-      effect = props.effect,
-      cover = props.cover,
-      reveal = props.reveal,
-      push = props.push,
-      left = props.left,
-      opened = props.opened,
-      resizable = props.resizable,
-      _props$backdrop = props.backdrop,
-      backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
-      backdropEl = props.backdropEl,
-      containerEl = props.containerEl,
-      visibleBreakpoint = props.visibleBreakpoint,
-      collapsedBreakpoint = props.collapsedBreakpoint,
-      swipe = props.swipe,
-      swipeNoFollow = props.swipeNoFollow,
-      swipeOnlyClose = props.swipeOnlyClose,
-      _props$swipeActiveAre = props.swipeActiveArea,
-      swipeActiveArea = _props$swipeActiveAre === void 0 ? 0 : _props$swipeActiveAre,
-      _props$swipeThreshold = props.swipeThreshold,
-      swipeThreshold = _props$swipeThreshold === void 0 ? 0 : _props$swipeThreshold;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var isOpened = useRef(false);
-  var isClosing = useRef(false);
-  var isCollapsed = useRef(false);
-  var isBreakpoint = useRef(false);
-
-  var onOpen = function onOpen(event) {
-    isOpened.current = true;
-    isClosing.current = false;
-    emit(props, 'panelOpen', event);
-  };
-
-  var onOpened = function onOpened(event) {
-    emit(props, 'panelOpened', event);
-  };
-
-  var onClose = function onClose(event) {
-    isOpened.current = false;
-    isClosing.current = true;
-    emit(props, 'panelClose', event);
-  };
-
-  var onClosed = function onClosed(event) {
-    isClosing.current = false;
-    emit(props, 'panelClosed', event);
-  };
-
-  var onBackdropClick = function onBackdropClick(event) {
-    emit(props, 'click panelBackdropClick', event);
-  };
-
-  var onSwipe = function onSwipe(event) {
-    emit(props, 'panelSwipe', event);
-  };
-
-  var onSwipeOpen = function onSwipeOpen(event) {
-    emit(props, 'panelSwipeOpen', event);
-  };
-
-  var onBreakpoint = function onBreakpoint(event) {
-    isBreakpoint.current = true;
-    isCollapsed.current = false;
-    emit(props, 'panelBreakpoint', event);
-  };
-
-  var onCollapsedBreakpoint = function onCollapsedBreakpoint(event) {
-    isBreakpoint.current = false;
-    isCollapsed.current = true;
-    emit(props, 'panelCollapsedBreakpoint', event);
-  };
-
-  var onResize = function onResize() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    emit.apply(void 0, [props, 'panelResize'].concat(args));
-  };
-
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      f7Panel: function f7Panel() {
-        return _f7Panel.current;
-      }
-    };
-  });
-  watchProp(resizable, function (newValue) {
-    if (!_f7Panel.current) return;
-    if (newValue) _f7Panel.current.enableResizable();else _f7Panel.current.disableResizable();
-  });
-  watchProp(opened, function (newValue) {
-    if (!_f7Panel.current) return;
-
-    if (newValue) {
-      _f7Panel.current.open();
-    } else {
-      _f7Panel.current.close();
-    }
-  });
-
-  var modalEvents = function modalEvents(method) {
-    if (!_f7Panel.current) return;
-
-    _f7Panel.current[method]('open', onOpen);
-
-    _f7Panel.current[method]('opened', onOpened);
-
-    _f7Panel.current[method]('close', onClose);
-
-    _f7Panel.current[method]('closed', onClosed);
-
-    _f7Panel.current[method]('backdropClick', onBackdropClick);
-
-    _f7Panel.current[method]('swipe', onSwipe);
-
-    _f7Panel.current[method]('swipeOpen', onSwipeOpen);
-
-    _f7Panel.current[method]('collapsedBreakpoint', onCollapsedBreakpoint);
-
-    _f7Panel.current[method]('breakpoint', onBreakpoint);
-
-    _f7Panel.current[method]('resize', onResize);
-  };
-
-  var onMount = function onMount() {
-    f7ready(function () {
-      var $ = f7.$;
-      if (!$) return;
-
-      if ($('.panel-backdrop').length === 0) {
-        $('<div class="panel-backdrop"></div>').insertBefore(elRef.current);
-      }
-
-      var params = noUndefinedProps({
-        el: elRef.current,
-        resizable: resizable,
-        backdrop: backdrop,
-        backdropEl: backdropEl,
-        containerEl: containerEl,
-        visibleBreakpoint: visibleBreakpoint,
-        collapsedBreakpoint: collapsedBreakpoint,
-        swipe: swipe,
-        swipeNoFollow: swipeNoFollow,
-        swipeOnlyClose: swipeOnlyClose,
-        swipeActiveArea: swipeActiveArea,
-        swipeThreshold: swipeThreshold
-      });
-      _f7Panel.current = f7.panel.create(params);
-      modalEvents('on');
-
-      if (opened) {
-        _f7Panel.current.open(false);
-      }
-    });
-  };
-
-  var onDestroy = function onDestroy() {
-    if (_f7Panel.current && _f7Panel.current.destroy) {
-      _f7Panel.current.destroy();
-    }
-
-    _f7Panel.current = null;
-  };
-
-  useIsomorphicLayoutEffect(function () {
-    modalEvents('on');
-    return function () {
-      modalEvents('off');
-    };
-  });
-  useIsomorphicLayoutEffect(function () {
-    onMount();
-    return onDestroy;
-  }, []);
-  var sideComputed = side || (left ? 'left' : 'right'); // eslint-disable-next-line
-
-  var effectComputed = effect || (reveal ? 'reveal' : push ? 'push' : 'cover');
-  var classes = classNames(className, 'panel', (_classNames = {
-    'panel-in': isOpened.current && !isClosing.current && !isBreakpoint.current,
-    'panel-in-breakpoint': isBreakpoint.current,
-    'panel-in-collapsed': isCollapsed.current,
-    'panel-resizable': resizable
-  }, _classNames["panel-" + sideComputed] = sideComputed, _classNames["panel-" + effectComputed] = effectComputed, _classNames), colorClasses(props));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    style: style,
-    className: classes,
-    ref: elRef
-  }, extraAttrs), children, resizable && /*#__PURE__*/React.createElement("div", {
-    className: "panel-resize-handler"
-  }));
-});
-Panel.displayName = 'f7-panel';
-export default Panel;