zmp-react/cjs/components/messagebar.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

var _link = _interopRequireDefault(require("./link"));

var _input = _interopRequireDefault(require("./input"));

var _zmp = require("../shared/zmp");

var _watchProp = require("../shared/watch-prop");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }


var Messagebar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _zmpMessagebar = (0, _react.useRef)(null);

  var updateSheetVisible = (0, _react.useRef)(false);
  var updateAttachmentsVisible = (0, _react.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 = (0, _utils.getExtraAttrs)(props);
  var elRef = (0, _react.useRef)(null);
  var areaElRef = (0, _react.useRef)(null);

  var onChange = function onChange(event) {
    (0, _utils.emit)(props, 'change', event);
  };

  var onInput = function onInput(event) {
    (0, _utils.emit)(props, 'input', event);
  };

  var onFocus = function onFocus(event) {
    (0, _utils.emit)(props, 'focus', event);
  };

  var onBlur = function onBlur(event) {
    (0, _utils.emit)(props, 'blur', event);
  };

  var onClick = function onClick(event) {
    var inputValue = areaElRef.current.el.value;
    var clear = _zmpMessagebar.current ? function () {
      _zmpMessagebar.current.clear();
    } : function () {};
    (0, _utils.emit)(props, 'submit', inputValue, clear);
    (0, _utils.emit)(props, 'send', inputValue, clear);
    (0, _utils.emit)(props, 'click', event);
  };

  var onAttachmentDelete = function onAttachmentDelete(instance, attachmentEl, attachmentElIndex) {
    (0, _utils.emit)(props, 'messagebarAttachmentDelete', instance, attachmentEl, attachmentElIndex);
  };

  var onAttachmentClick = function onAttachmentClick(instance, attachmentEl, attachmentElIndex) {
    (0, _utils.emit)(props, 'messagebarAttachmentClick', instance, attachmentEl, attachmentElIndex);
  };

  var onResizePage = function onResizePage(instance) {
    (0, _utils.emit)(props, 'messagebarResizePage', instance);
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      el: elRef.current,
      zmpMessagebar: function zmpMessagebar() {
        return _zmpMessagebar.current;
      }
    };
  });
  (0, _watchProp.watchProp)(sheetVisible, function () {
    if (!resizable || !_zmpMessagebar.current) return;
    updateSheetVisible.current = true;
  });
  (0, _watchProp.watchProp)(attachmentsVisible, function () {
    if (!resizable || !_zmpMessagebar.current) return;
    updateAttachmentsVisible.current = true;
  });
  (0, _useIsomorphicLayoutEffect.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 = (0, _utils.noUndefinedProps)({
      el: elRef.current,
      top: top,
      resizePage: resizePage,
      bottomOffset: bottomOffset,
      topOffset: topOffset,
      maxHeight: maxHeight,
      on: {
        attachmentDelete: onAttachmentDelete,
        attachmentClick: onAttachmentClick,
        resizePage: onResizePage
      }
    });
    (0, _zmp.zmpready)(function () {
      _zmpMessagebar.current = _zmp.zmp.messagebar.create(params);
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpMessagebar.current && _zmpMessagebar.current.destroy) _zmpMessagebar.current.destroy();
    _zmpMessagebar.current = null;
  };

  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    onMount();
    return onDestroy;
  }, []);
  var slots = (0, _utils.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 = (0, _utils.classNames)(className, 'toolbar', 'messagebar', {
    'messagebar-attachments-visible': attachmentsVisible,
    'messagebar-sheet-visible': sheetVisible
  }, (0, _mixins.colorClasses)(props));
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    id: id,
    style: style,
    className: classes,
    ref: elRef
  }, extraAttrs), slotsBeforeInner, /*#__PURE__*/_react.default.createElement("div", {
    className: "toolbar-inner"
  }, slotsInnerStart, /*#__PURE__*/_react.default.createElement("div", {
    className: "messagebar-area"
  }, slotsBeforeArea, messagebarAttachmentsEl, /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
    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.default.createElement(_link.default, {
    onClick: onClick
  }, slotsSendLink || sendLink), slotsInnerEnd, innerEndEls), slotsAfterInner, messagebarSheetEl);
});
Messagebar.displayName = 'zmp-messagebar';
var _default = Messagebar;
exports.default = _default;