zmp-vue/cjs/zalo-ui-kits/list-item.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

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

var _vue = require("vue");

var _listItem = _interopRequireDefault(require("../components/list-item"));

var _useLink2 = require("../shared/use-link");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

function render(_ctx, _cache) {
  var _component_ListItem = (0, _vue.resolveComponent)("ListItem");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_ListItem, (0, _vue.mergeProps)({
    id: "li" + _ctx.id
  }, _extends({}, _ctx.$attrs, _ctx.$props), {
    link: undefined,
    href: undefined,
    onClick: _ctx.handleClick,
    class: {
      'list-item-taphold': !!_ctx.$attrs.onTaphold
    }
  }), (0, _vue.createSlots)({
    footer: (0, _vue.withCtx)(function () {
      return [(0, _vue.renderSlot)(_ctx.$slots, "footer", {}, function () {
        return [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.description), 1)];
      })];
    }),
    _: 2
  }, [(0, _vue.renderList)(_ctx.$slots, function (_, slot) {
    return {
      name: slot,
      fn: (0, _vue.withCtx)(function (scope) {
        return [(0, _vue.renderSlot)(_ctx.$slots, slot, scope)];
      })
    };
  })]), 1040, ["id", "onClick", "class"]);
}

var _default = {
  name: 'zmp-list-item',
  render: render,
  components: {
    ListItem: _listItem.default
  },
  props: _extends({}, _listItem.default.props, {
    description: String
  }),
  emits: ['taphold'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        attrs = _ref.attrs;

    var _useLink = (0, _useLink2.useLink)(props),
        handleClickLink = _useLink[0];

    var handleClick = function handleClick(e) {
      handleClickLink(_extends({}, e, {
        preventDefault: function preventDefault() {}
      }));
    };

    var preventContextMenu = function preventContextMenu(e) {
      if (attrs.onTaphold) {
        e.preventDefault();
      }

      return true;
    };

    var onTaphold = function onTaphold() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      emit.apply(void 0, ['taphold'].concat(args));
    };

    var id = (0, _vue.computed)(function () {
      return attrs.id || props.id || +new Date();
    });
    (0, _vue.onMounted)(function () {
      var listEl = document.getElementById(id.value);

      if (listEl) {
        listEl.addEventListener('taphold', onTaphold);
        listEl.addEventListener('contextmenu', preventContextMenu, false);
      }
    });
    (0, _vue.onBeforeUnmount)(function () {
      var listEl = document.getElementById(id.value);

      if (listEl) {
        listEl.removeEventListener('taphold', onTaphold);
        listEl.removeEventListener('contextmenu', preventContextMenu);
      }
    });
    return {
      handleClick: handleClick,
      id: id
    };
  }
};
exports.default = _default;