zmp-react/esm/components/messagebar.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
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 { zmpready, zmp } from '../shared/zmp';
import { watchProp } from '../shared/watch-prop';


var Messagebar = /*#__PURE__*/forwardRef(function (props, ref) {
  var _zmpMessagebar = 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 = _zmpMessagebar.current ? function () {
      _zmpMessagebar.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,
      zmpMessagebar: function zmpMessagebar() {
        return _zmpMessagebar.current;
      }
    };
  });
  watchProp(sheetVisible, function () {
    if (!resizable || !_zmpMessagebar.current) return;
    updateSheetVisible.current = true;
  });
  watchProp(attachmentsVisible, function () {
    if (!resizable || !_zmpMessagebar.current) return;
    updateAttachmentsVisible.current = true;
  });
  useIsomorphicLayoutEffect(function () {
    if (!_zmpMessagebar.current) return;

    if (updateSheetVisible.current) {
      updateSheetVisible.current = false;
      _zmpMessagebar.current.sheetVisible = sheetVisible;

      _zmpMessagebar.current.resizePage();
    }

    if (updateAttachmentsVisible.current) {
      updateAttachmentsVisible.current = false;
      _zmpMessagebar.current.attachmentsVisible = attachmentsVisible;

      _zmpMessagebar.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
      }
    });
    zmpready(function () {
      _zmpMessagebar.current = zmp.messagebar.create(params);
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpMessagebar.current && _zmpMessagebar.current.destroy) _zmpMessagebar.current.destroy();
    _zmpMessagebar.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 === 'ZMPMessagebarAttachments' || tag === 'zmp-messagebar-attachments')) {
        messagebarAttachmentsEl = child;
      } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'ZMPMessagebarSheet' || tag === 'zmp-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 = 'zmp-messagebar';
export default Messagebar;