zmp-react/cjs/components/list-item.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 _useRouteProps = require("../shared/use-route-props");

var _useSmartSelect = require("../shared/use-smart-select");

var _useTooltip = require("../shared/use-tooltip");

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

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

var _listItemContent = _interopRequireDefault(require("./list-item-content"));

var _listContext = require("../shared/list-context");

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



/*
const ListItemContent = ({
  props,
  slots,
  inputElRef,
  onChange,
  onClick,
  isMediaComputed,
  isSortableComputed,
  isSortableOppositeComputed,
} = {}) => {
  const {
    radio,
    checkbox,
    value,
    name,
    readonly,
    disabled,
    checked,
    defaultChecked,
    required,
    media,
    header,
    footer,
    title,
    subtitle,
    text,
    after,
    badge,
    badgeColor,
    radioIcon,
    swipeout,
    sortable,
    accordionItem,
  } = props;

};
*/
var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var className = props.className,
      id = props.id,
      style = props.style,
      children = props.children,
      title = props.title,
      link = props.link,
      target = props.target,
      tabLink = props.tabLink,
      tabLinkActive = props.tabLinkActive,
      selected = props.selected,
      mediaItem = props.mediaItem,
      mediaList = props.mediaList,
      divider = props.divider,
      groupTitle = props.groupTitle,
      swipeout = props.swipeout,
      swipeoutOpened = props.swipeoutOpened,
      sortable = props.sortable,
      sortableOpposite = props.sortableOpposite,
      accordionItem = props.accordionItem,
      accordionItemOpened = props.accordionItemOpened,
      smartSelect = props.smartSelect,
      smartSelectParams = props.smartSelectParams,
      noChevron = props.noChevron,
      chevronCenter = props.chevronCenter,
      checkbox = props.checkbox,
      radio = props.radio,
      disabled = props.disabled,
      virtualListIndex = props.virtualListIndex,
      href = props.href;
  var listContext = (0, _react.useContext)(_listContext.ListContext);

  var _ref = listContext || {},
      _ref$listIsMedia = _ref.listIsMedia,
      listIsMedia = _ref$listIsMedia === void 0 ? false : _ref$listIsMedia,
      _ref$listIsSortable = _ref.listIsSortable,
      listIsSortable = _ref$listIsSortable === void 0 ? false : _ref$listIsSortable,
      _ref$listIsSortableOp = _ref.listIsSortableOpposite,
      listIsSortableOpposite = _ref$listIsSortableOp === void 0 ? false : _ref$listIsSortableOp,
      _ref$listIsSimple = _ref.listIsSimple,
      listIsSimple = _ref$listIsSimple === void 0 ? false : _ref$listIsSimple;

  var extraAttrs = (0, _utils.getExtraAttrs)(props);
  var elRef = (0, _react.useRef)(null);
  var linkElRef = (0, _react.useRef)(null);

  var _zmpSmartSelect = (0, _react.useRef)(null);

  var onClick = function onClick(event) {
    if (event.target.tagName.toLowerCase() !== 'input') {
      (0, _utils.emit)(props, 'click', event);
    }
  };

  var onSwipeoutOverswipeEnter = function onSwipeoutOverswipeEnter(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutOverswipeEnter');
  };

  var onSwipeoutOverswipeExit = function onSwipeoutOverswipeExit(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutOverswipeExit');
  };

  var onSwipeoutDeleted = function onSwipeoutDeleted(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutDeleted');
  };

  var onSwipeoutDelete = function onSwipeoutDelete(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutDelete');
  };

  var onSwipeoutClose = function onSwipeoutClose(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutClose');
  };

  var onSwipeoutClosed = function onSwipeoutClosed(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutClosed');
  };

  var onSwipeoutOpen = function onSwipeoutOpen(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutOpen');
  };

  var onSwipeoutOpened = function onSwipeoutOpened(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeoutOpened');
  };

  var onSwipeout = function onSwipeout(el, progress) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'swipeout', progress);
  };

  var onAccBeforeClose = function onAccBeforeClose(el, prevent) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionBeforeClose', prevent);
  };

  var onAccClose = function onAccClose(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionClose');
  };

  var onAccClosed = function onAccClosed(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionClosed');
  };

  var onAccBeforeOpen = function onAccBeforeOpen(el, prevent) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionBeforeOpen', prevent);
  };

  var onAccOpen = function onAccOpen(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionOpen');
  };

  var onAccOpened = function onAccOpened(el) {
    if (elRef.current !== el) return;
    (0, _utils.emit)(props, 'accordionOpened');
  };

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

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      el: elRef.current,
      zmpSmartSelect: function zmpSmartSelect() {
        return _zmpSmartSelect.current;
      }
    };
  });
  (0, _useTooltip.useTooltip)(elRef, props);
  (0, _useRouteProps.useRouteProps)(linkElRef, props);
  (0, _watchProp.watchProp)(swipeoutOpened, function (newValue) {
    if (!swipeout || !elRef.current || !_zmp.zmp) return;

    if (newValue) {
      _zmp.zmp.swipeout.open(elRef.current);
    } else {
      _zmp.zmp.swipeout.close(elRef.current);
    }
  });

  var attachEvents = function attachEvents() {
    (0, _zmp.zmpready)(function () {
      if (swipeout) {
        _zmp.zmp.on('swipeoutOpen', onSwipeoutOpen);

        _zmp.zmp.on('swipeoutOpened', onSwipeoutOpened);

        _zmp.zmp.on('swipeoutClose', onSwipeoutClose);

        _zmp.zmp.on('swipeoutClosed', onSwipeoutClosed);

        _zmp.zmp.on('swipeoutDelete', onSwipeoutDelete);

        _zmp.zmp.on('swipeoutDeleted', onSwipeoutDeleted);

        _zmp.zmp.on('swipeoutOverswipeEnter', onSwipeoutOverswipeEnter);

        _zmp.zmp.on('swipeoutOverswipeExit', onSwipeoutOverswipeExit);

        _zmp.zmp.on('swipeout', onSwipeout);
      }

      if (accordionItem) {
        _zmp.zmp.on('accordionBeforeOpen', onAccBeforeOpen);

        _zmp.zmp.on('accordionOpen', onAccOpen);

        _zmp.zmp.on('accordionOpened', onAccOpened);

        _zmp.zmp.on('accordionBeforeClose', onAccBeforeClose);

        _zmp.zmp.on('accordionClose', onAccClose);

        _zmp.zmp.on('accordionClosed', onAccClosed);
      }
    });
  };

  var detachEvents = function detachEvents() {
    if (!_zmp.zmp) return;

    _zmp.zmp.off('swipeoutOpen', onSwipeoutOpen);

    _zmp.zmp.off('swipeoutOpened', onSwipeoutOpened);

    _zmp.zmp.off('swipeoutClose', onSwipeoutClose);

    _zmp.zmp.off('swipeoutClosed', onSwipeoutClosed);

    _zmp.zmp.off('swipeoutDelete', onSwipeoutDelete);

    _zmp.zmp.off('swipeoutDeleted', onSwipeoutDeleted);

    _zmp.zmp.off('swipeoutOverswipeEnter', onSwipeoutOverswipeEnter);

    _zmp.zmp.off('swipeoutOverswipeExit', onSwipeoutOverswipeExit);

    _zmp.zmp.off('swipeout', onSwipeout);

    _zmp.zmp.off('accordionBeforeOpen', onAccBeforeOpen);

    _zmp.zmp.off('accordionOpen', onAccOpen);

    _zmp.zmp.off('accordionOpened', onAccOpened);

    _zmp.zmp.off('accordionBeforeClose', onAccBeforeClose);

    _zmp.zmp.off('accordionClose', onAccClose);

    _zmp.zmp.off('accordionClosed', onAccClosed);
  };

  (0, _useSmartSelect.useSmartSelect)(smartSelect, smartSelectParams, _zmpSmartSelect, function () {
    return elRef.current.querySelector('a.smart-select');
  });
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    (0, _zmp.zmpready)(function () {
      if (swipeout && swipeoutOpened) {
        _zmp.zmp.swipeout.open(elRef.current);
      }
    });
  }, []);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    attachEvents();
    return detachEvents;
  });
  var slots = (0, _utils.getSlots)(props);
  var linkEl;
  var itemContentEl;
  var isMediaComputed = mediaItem || mediaList || listIsMedia;
  var isSortableComputed = sortable || listIsSortable;
  var isSortableOppositeComputed = isSortableComputed && (sortableOpposite || listIsSortableOpposite);

  if (!listIsSimple) {
    // Item Content
    itemContentEl = /*#__PURE__*/_react.default.createElement(_listItemContent.default, (0, _extends2.default)({}, props, {
      slots: slots,
      onChange: onChange,
      onClick: link || href || accordionItem || smartSelect ? undefined : onClick,
      isMediaComputed: isMediaComputed,
      isSortableComputed: isSortableComputed,
      isSortableOppositeComputed: isSortableOppositeComputed
    })); // Link

    if (link || href || accordionItem || smartSelect) {
      var linkAttrs = (0, _extends2.default)({
        href: link === true ? '' : link || href,
        target: target,
        'data-tab': (0, _utils.isStringProp)(tabLink) && tabLink || undefined
      }, (0, _mixins.routerAttrs)(props), (0, _mixins.actionsAttrs)(props));
      var linkClasses = (0, _utils.classNames)({
        'item-link': true,
        'smart-select': smartSelect,
        'tab-link': tabLink || tabLink === '',
        'tab-link-active': tabLinkActive,
        'item-selected': selected
      }, (0, _mixins.routerClasses)(props), (0, _mixins.actionsClasses)(props));
      linkEl = /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
        ref: linkElRef,
        className: linkClasses
      }, linkAttrs, {
        onClick: onClick
      }), itemContentEl);
    }
  }

  var liClasses = (0, _utils.classNames)(className, {
    'item-divider': divider,
    'list-group-title': groupTitle,
    'media-item': isMediaComputed,
    swipeout: swipeout,
    'accordion-item': accordionItem,
    'accordion-item-opened': accordionItemOpened,
    disabled: disabled && !(radio || checkbox),
    'no-chevron': noChevron,
    'chevron-center': chevronCenter,
    'disallow-sorting': sortable === false
  }, (0, _mixins.colorClasses)(props));

  if (divider || groupTitle) {
    return /*#__PURE__*/_react.default.createElement("li", {
      ref: elRef,
      id: id,
      style: style,
      className: liClasses,
      "data-virtual-list-index": virtualListIndex,
      onClick: onClick
    }, /*#__PURE__*/_react.default.createElement("span", null, title, children));
  }

  if (listIsSimple) {
    return /*#__PURE__*/_react.default.createElement("li", {
      ref: elRef,
      id: id,
      style: style,
      className: liClasses,
      "data-virtual-list-index": virtualListIndex,
      onClick: onClick
    }, title, children);
  }

  var linkItemEl = link || href || smartSelect || accordionItem ? linkEl : itemContentEl;
  return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
    ref: elRef,
    id: id,
    style: style,
    className: liClasses,
    "data-virtual-list-index": virtualListIndex
  }, extraAttrs), slots['root-start'], swipeout ? /*#__PURE__*/_react.default.createElement("div", {
    className: "swipeout-content"
  }, linkItemEl) : linkItemEl, isSortableComputed && sortable !== false && !isSortableOppositeComputed && /*#__PURE__*/_react.default.createElement("div", {
    className: "sortable-handler"
  }), (swipeout || accordionItem) && slots.default, slots.root, slots['root-end']);
});
ListItem.displayName = 'zmp-list-item';
var _default = ListItem;
exports.default = _default;