framework7-react 6.3.15 → 7.0.0-beta.11

package/components/messagebar.js

@@ -0,0 +1,202 @@
+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, emit, getSlots, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import Link from './link.js';
+import Input from './input.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+
+
+const Messagebar = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Messagebar = useRef(null);
+  const updateSheetVisible = useRef(false);
+  const updateAttachmentsVisible = useRef(false);
+  const {
+    className,
+    id,
+    style,
+    sheetVisible,
+    attachmentsVisible,
+    top,
+    resizable = true,
+    bottomOffset = 0,
+    topOffset = 0,
+    maxHeight,
+    resizePage = true,
+    sendLink,
+    value,
+    disabled,
+    readonly,
+    textareaId,
+    name,
+    placeholder = 'Message',
+    init = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const areaElRef = useRef(null);
+
+  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 onClick = event => {
+    const inputValue = areaElRef.current.el.value;
+    const clear = f7Messagebar.current ? () => {
+      f7Messagebar.current.clear();
+    } : () => {};
+    emit(props, 'submit', inputValue, clear);
+    emit(props, 'send', inputValue, clear);
+    emit(props, 'click', event);
+  };
+
+  const onAttachmentDelete = (instance, attachmentEl, attachmentElIndex) => {
+    emit(props, 'messagebarAttachmentDelete', instance, attachmentEl, attachmentElIndex);
+  };
+
+  const onAttachmentClick = (instance, attachmentEl, attachmentElIndex) => {
+    emit(props, 'messagebarAttachmentClick', instance, attachmentEl, attachmentElIndex);
+  };
+
+  const onResizePage = instance => {
+    emit(props, 'messagebarResizePage', instance);
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Messagebar: () => f7Messagebar.current
+  }));
+  watchProp(sheetVisible, () => {
+    if (!resizable || !f7Messagebar.current) return;
+    updateSheetVisible.current = true;
+  });
+  watchProp(attachmentsVisible, () => {
+    if (!resizable || !f7Messagebar.current) return;
+    updateAttachmentsVisible.current = true;
+  });
+  useIsomorphicLayoutEffect(() => {
+    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();
+    }
+  });
+
+  const onMount = () => {
+    if (!init) return;
+    if (!elRef.current) return;
+    const params = noUndefinedProps({
+      el: elRef.current,
+      top,
+      resizePage,
+      bottomOffset,
+      topOffset,
+      maxHeight,
+      on: {
+        attachmentDelete: onAttachmentDelete,
+        attachmentClick: onAttachmentClick,
+        resizePage: onResizePage
+      }
+    });
+    f7ready(() => {
+      f7Messagebar.current = f7.messagebar.create(params);
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Messagebar.current && f7Messagebar.current.destroy) f7Messagebar.current.destroy();
+    f7Messagebar.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const slots = getSlots(props);
+  const {
+    default: slotsDefault,
+    'before-inner': slotsBeforeInner,
+    'after-inner': slotsAfterInner,
+    'send-link': slotsSendLink,
+    'inner-start': slotsInnerStart,
+    'inner-end': slotsInnerEnd,
+    'before-area': slotsBeforeArea,
+    'after-area': slotsAfterArea
+  } = slots;
+  const innerEndEls = [];
+  let messagebarAttachmentsEl;
+  let messagebarSheetEl;
+
+  if (slotsDefault) {
+    slotsDefault.forEach(child => {
+      if (typeof child === 'undefined') return;
+      const 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);
+      }
+    });
+  }
+
+  const valueProps = {};
+  if ('value' in props) valueProps.value = value;
+  const 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 → components}/messages-title.js

@@ -1,22 +1,22 @@
 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 { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var MessagesTitle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'messages-title', colorClasses(props));
+const MessagesTitle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'messages-title', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/components/messages.js

@@ -0,0 +1,139 @@
+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 } 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 Messages = /*#__PURE__*/forwardRef((props, ref) => {
+  const f7Messages = useRef(null);
+  const mounted = useRef(false);
+  const {
+    className,
+    id,
+    style,
+    children,
+    autoLayout = false,
+    messages = [],
+    newMessagesFirst = false,
+    scrollMessages = true,
+    scrollMessagesOnEdge = true,
+    firstMessageRule,
+    lastMessageRule,
+    tailMessageRule,
+    sameNameMessageRule,
+    sameHeaderMessageRule,
+    sameFooterMessageRule,
+    sameAvatarMessageRule,
+    customClassMessageRule,
+    renderMessage,
+    typing = false,
+    init = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const childrenBeforeUpdated = useRef(null);
+  const reactChildrenBefore = useRef(children ? React.Children.count(children) : 0);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    f7Messages: () => f7Messages.current
+  }));
+
+  const onMount = () => {
+    if (!init) return;
+    f7ready(() => {
+      f7Messages.current = f7.messages.create(noUndefinedProps({
+        el: elRef.current,
+        autoLayout,
+        messages,
+        newMessagesFirst,
+        scrollMessages,
+        scrollMessagesOnEdge,
+        firstMessageRule,
+        lastMessageRule,
+        tailMessageRule,
+        sameNameMessageRule,
+        sameHeaderMessageRule,
+        sameFooterMessageRule,
+        sameAvatarMessageRule,
+        customClassMessageRule,
+        renderMessage
+      }));
+
+      if (typing) {
+        f7Messages.current.showTyping();
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    if (f7Messages.current && f7Messages.current.destroy) f7Messages.current.destroy();
+    f7Messages.current = null;
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    onMount();
+    return onDestroy;
+  }, []);
+  const currentChildrenLength = children ? React.Children.count(children) : 0;
+
+  if (f7Messages.current && scrollMessages) {
+    const beforeChildrenLength = reactChildrenBefore.current || 0;
+
+    if (currentChildrenLength !== beforeChildrenLength) {
+      f7Messages.current.setScrollData();
+    }
+  }
+
+  reactChildrenBefore.current = currentChildrenLength;
+  useIsomorphicLayoutEffect(() => {
+    const wasMounted = mounted.current;
+    mounted.current = true;
+    if (!init || !elRef.current) return;
+    const childElements = elRef.current.children;
+    if (!childElements) return;
+    const childrenAfterUpdated = childElements.length;
+
+    if (!wasMounted) {
+      for (let i = 0; i < childElements.length; i += 1) {
+        childElements[i].classList.add('message-appeared');
+      }
+
+      return;
+    }
+
+    for (let 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, newValue => {
+    if (!f7Messages.current) return;
+    if (newValue) f7Messages.current.showTyping();else f7Messages.current.hideTyping();
+  });
+  const 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 → components}/nav-left.js

@@ -1,40 +1,40 @@
 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 { useTheme } from '../shared/use-theme';
-import Link from './link';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+import Link from './link.js';
 
-var NavLeft = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      backLink = props.backLink,
-      backLinkUrl = props.backLinkUrl,
-      backLinkForce = props.backLinkForce,
-      backLinkShowText = props.backLinkShowText,
-      sliding = props.sliding;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const NavLeft = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    backLink,
+    backLinkUrl,
+    backLinkForce,
+    backLinkShowText,
+    sliding
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onBackClick = function onBackClick(event) {
+  const onBackClick = event => {
     emit(props, 'backClick clickBack', event);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var theme = useTheme();
-  var linkEl;
-  var needBackLinkText = backLinkShowText;
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const theme = useTheme();
+  let linkEl;
+  let needBackLinkText = backLinkShowText;
   if (typeof needBackLinkText === 'undefined') needBackLinkText = !theme.md;
 
   if (backLink) {
-    var text = backLink !== true && needBackLinkText ? backLink : undefined;
+    const text = backLink !== true && needBackLinkText ? backLink : undefined;
     linkEl = /*#__PURE__*/React.createElement(Link, {
       href: backLinkUrl || '#',
       back: true,
@@ -46,8 +46,8 @@ var NavLeft = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  var classes = classNames(className, 'left', {
-    sliding: sliding
+  const classes = classNames(className, 'left', {
+    sliding
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,

package/{esm/components → components}/nav-right.js

@@ -1,24 +1,24 @@
 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 { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var NavRight = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      sliding = props.sliding;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'right', {
-    sliding: sliding
+const NavRight = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    sliding
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'right', {
+    sliding
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,

package/{esm/components → components}/nav-title-large.js

@@ -1,22 +1,22 @@
 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 { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var NavTitleLarge = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'title-large', colorClasses(props));
+const NavTitleLarge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'title-large', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/nav-title.js

@@ -1,25 +1,25 @@
 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 { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var NavTitle = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      title = props.title,
-      subtitle = props.subtitle,
-      sliding = props.sliding;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var subtitleEl;
+const NavTitle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    title,
+    subtitle,
+    sliding
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  let subtitleEl;
 
   if (subtitle) {
     subtitleEl = /*#__PURE__*/React.createElement("span", {
@@ -27,8 +27,8 @@ var NavTitle = /*#__PURE__*/forwardRef(function (props, ref) {
     }, subtitle);
   }
 
-  var classes = classNames(className, 'title', {
-    sliding: sliding
+  const classes = classNames(className, 'title', {
+    sliding
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,