zmp-vue/esm/components/messagebar.js

Build full featured iOS & Android apps using ZMP & Vue

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 { h, computed, ref, onMounted, onBeforeUnmount, watch, onUpdated } from 'vue';
import { classNames, noUndefinedProps } from '../shared/utils';
import { colorClasses, colorProps } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';
import Link from './link';
import Input from './input';
export default {
  name: 'zmp-messagebar',
  props: _extends({
    sheetVisible: Boolean,
    attachmentsVisible: Boolean,
    top: Boolean,
    resizable: {
      type: Boolean,
      default: true
    },
    bottomOffset: {
      type: Number,
      default: 0
    },
    topOffset: {
      type: Number,
      default: 0
    },
    maxHeight: Number,
    resizePage: {
      type: Boolean,
      default: true
    },
    sendLink: String,
    value: [String, Number, Array],
    disabled: Boolean,
    readonly: Boolean,
    textareaId: [Number, String],
    name: String,
    placeholder: {
      type: String,
      default: 'Message'
    },
    init: {
      type: Boolean,
      default: true
    }
  }, colorProps),
  emits: ['change', 'input', 'focus', 'blur', 'submit', 'send', 'click', 'messagebar:attachmentdelete', 'messagebar:attachmentclick', 'messagebar:resizepage', 'update:value'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        slots = _ref.slots;
    var elRef = ref(null);
    var areaElRef = ref(null);
    var zmpMessagebar = null;
    var updateSheetVisible = false;
    var updateAttachmentsVisible = false;

    var onChange = function onChange(event) {
      emit('change', event);
    };

    var onInput = function onInput(event) {
      emit('input', event);
      emit('update:value', event.target.value);
    };

    var onFocus = function onFocus(event) {
      emit('focus', event);
    };

    var onBlur = function onBlur(event) {
      emit('blur', event);
    };

    var onClick = function onClick(event) {
      var inputValue = areaElRef.value.$el;
      var clear = zmpMessagebar ? function () {
        zmpMessagebar.clear();
      } : function () {};
      emit('submit', inputValue, clear);
      emit('send', inputValue, clear);
      emit('click', event);
    };

    var onAttachmentDelete = function onAttachmentDelete(instance, attachmentEl, attachmentElIndex) {
      emit('messagebar:attachmentdelete', instance, attachmentEl, attachmentElIndex);
    };

    var onAttachmentClick = function onAttachmentClick(instance, attachmentEl, attachmentElIndex) {
      emit('messagebar:attachmentclick', instance, attachmentEl, attachmentElIndex);
    };

    var onResizePage = function onResizePage(instance) {
      emit('messagebar:resizepage', instance);
    };

    watch(function () {
      return props.sheetVisible;
    }, function () {
      if (!props.resizable || !zmpMessagebar) return;
      updateSheetVisible = true;
    });
    watch(function () {
      return props.attachmentsVisible;
    }, function () {
      if (!props.resizable || !zmpMessagebar) return;
      updateAttachmentsVisible = true;
    });
    onMounted(function () {
      if (!props.init) return;
      if (!elRef.value) return;
      var params = noUndefinedProps({
        el: elRef.value,
        top: props.top,
        resizePage: props.resizePage,
        bottomOffset: props.bottomOffset,
        topOffset: props.topOffset,
        maxHeight: props.maxHeight,
        on: {
          attachmentDelete: onAttachmentDelete,
          attachmentClick: onAttachmentClick,
          resizePage: onResizePage
        }
      });
      zmpready(function () {
        zmpMessagebar = zmp.messagebar.create(params);
      });
    });
    onUpdated(function () {
      if (!zmpMessagebar) return;

      if (updateSheetVisible) {
        updateSheetVisible = false;
        zmpMessagebar.sheetVisible = props.sheetVisible;
        zmpMessagebar.resizePage();
      }

      if (updateAttachmentsVisible) {
        updateAttachmentsVisible = false;
        zmpMessagebar.attachmentsVisible = props.attachmentsVisible;
        zmpMessagebar.resizePage();
      }
    });
    onBeforeUnmount(function () {
      if (zmpMessagebar && zmpMessagebar.destroy) zmpMessagebar.destroy();
      zmpMessagebar = null;
    });
    var classes = computed(function () {
      return classNames('toolbar', 'messagebar', {
        'messagebar-attachments-visible': props.attachmentsVisible,
        'messagebar-sheet-visible': props.sheetVisible
      }, colorClasses(props));
    });
    return function () {
      var valueProps = {};
      if ('value' in props) valueProps.value = props.value;
      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 (vnode) {
          if (typeof vnode === 'undefined') return;
          var tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;

          if (tag && (tag.indexOf('messagebar-attachments') >= 0 || tag === 'ZMPMessagebarAttachments' || tag === 'zmp-messagebar-attachments')) {
            messagebarAttachmentsEl = vnode;
          } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'ZMPMessagebarSheet' || tag === 'zmp-messagebar-sheet')) {
            messagebarSheetEl = vnode;
          } else {
            innerEndEls.push(vnode);
          }
        });
      }

      return h('div', {
        class: classes.value,
        ref: elRef
      }, [slotsBeforeInner && slotsBeforeInner(), h('div', {
        class: 'toolbar-inner'
      }, [slotsInnerStart && slotsInnerStart(), h('div', {
        class: 'messagebar-area'
      }, [slotsBeforeArea && slotsBeforeArea(), messagebarAttachmentsEl, h(Input, _extends({
        id: props.textareaId,
        ref: areaElRef,
        type: 'textarea',
        wrap: false,
        placeholder: props.placeholder,
        disabled: props.disabled,
        name: props.name,
        readonly: props.readonly,
        resizable: props.resizable,
        onInput: onInput,
        onChange: onChange,
        onFocus: onFocus,
        onBlur: onBlur
      }, valueProps)), slotsAfterArea && slotsAfterArea()]), (props.sendLink && props.sendLink.length > 0 || slotsSendLink) && h(Link, {
        onClick: onClick
      }, [slotsSendLink ? slotsSendLink() : props.sendLink]), slotsInnerEnd && slotsInnerEnd(), innerEndEls]), slotsAfterInner && slotsAfterInner(), messagebarSheetEl]);
    };
  }
};