zmp-react/esm/components/list-item.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { classNames, getExtraAttrs, getSlots, emit, isStringProp } from '../shared/utils';
import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
import { useRouteProps } from '../shared/use-route-props';
import { useSmartSelect } from '../shared/use-smart-select';
import { useTooltip } from '../shared/use-tooltip';
import { watchProp } from '../shared/watch-prop';
import { zmpready, zmp } from '../shared/zmp';
import ListItemContent from './list-item-content';
import { ListContext } from '../shared/list-context';


/*
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__*/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 = useContext(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 = getExtraAttrs(props);
  var elRef = useRef(null);
  var linkElRef = useRef(null);

  var _zmpSmartSelect = useRef(null);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  var attachEvents = function attachEvents() {
    zmpready(function () {
      if (swipeout) {
        zmp.on('swipeoutOpen', onSwipeoutOpen);
        zmp.on('swipeoutOpened', onSwipeoutOpened);
        zmp.on('swipeoutClose', onSwipeoutClose);
        zmp.on('swipeoutClosed', onSwipeoutClosed);
        zmp.on('swipeoutDelete', onSwipeoutDelete);
        zmp.on('swipeoutDeleted', onSwipeoutDeleted);
        zmp.on('swipeoutOverswipeEnter', onSwipeoutOverswipeEnter);
        zmp.on('swipeoutOverswipeExit', onSwipeoutOverswipeExit);
        zmp.on('swipeout', onSwipeout);
      }

      if (accordionItem) {
        zmp.on('accordionBeforeOpen', onAccBeforeOpen);
        zmp.on('accordionOpen', onAccOpen);
        zmp.on('accordionOpened', onAccOpened);
        zmp.on('accordionBeforeClose', onAccBeforeClose);
        zmp.on('accordionClose', onAccClose);
        zmp.on('accordionClosed', onAccClosed);
      }
    });
  };

  var detachEvents = function detachEvents() {
    if (!zmp) return;
    zmp.off('swipeoutOpen', onSwipeoutOpen);
    zmp.off('swipeoutOpened', onSwipeoutOpened);
    zmp.off('swipeoutClose', onSwipeoutClose);
    zmp.off('swipeoutClosed', onSwipeoutClosed);
    zmp.off('swipeoutDelete', onSwipeoutDelete);
    zmp.off('swipeoutDeleted', onSwipeoutDeleted);
    zmp.off('swipeoutOverswipeEnter', onSwipeoutOverswipeEnter);
    zmp.off('swipeoutOverswipeExit', onSwipeoutOverswipeExit);
    zmp.off('swipeout', onSwipeout);
    zmp.off('accordionBeforeOpen', onAccBeforeOpen);
    zmp.off('accordionOpen', onAccOpen);
    zmp.off('accordionOpened', onAccOpened);
    zmp.off('accordionBeforeClose', onAccBeforeClose);
    zmp.off('accordionClose', onAccClose);
    zmp.off('accordionClosed', onAccClosed);
  };

  useSmartSelect(smartSelect, smartSelectParams, _zmpSmartSelect, function () {
    return elRef.current.querySelector('a.smart-select');
  });
  useIsomorphicLayoutEffect(function () {
    zmpready(function () {
      if (swipeout && swipeoutOpened) {
        zmp.swipeout.open(elRef.current);
      }
    });
  }, []);
  useIsomorphicLayoutEffect(function () {
    attachEvents();
    return detachEvents;
  });
  var slots = 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.createElement(ListItemContent, _extends({}, 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 = _extends({
        href: link === true ? '' : link || href,
        target: target,
        'data-tab': isStringProp(tabLink) && tabLink || undefined
      }, routerAttrs(props), actionsAttrs(props));

      var linkClasses = classNames({
        'item-link': true,
        'smart-select': smartSelect,
        'tab-link': tabLink || tabLink === '',
        'tab-link-active': tabLinkActive,
        'item-selected': selected
      }, routerClasses(props), actionsClasses(props));
      linkEl = /*#__PURE__*/React.createElement("a", _extends({
        ref: linkElRef,
        className: linkClasses
      }, linkAttrs, {
        onClick: onClick
      }), itemContentEl);
    }
  }

  var liClasses = 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
  }, colorClasses(props));

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

  if (listIsSimple) {
    return /*#__PURE__*/React.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.createElement("li", _extends({
    ref: elRef,
    id: id,
    style: style,
    className: liClasses,
    "data-virtual-list-index": virtualListIndex
  }, extraAttrs), slots['root-start'], swipeout ? /*#__PURE__*/React.createElement("div", {
    className: "swipeout-content"
  }, linkItemEl) : linkItemEl, isSortableComputed && sortable !== false && !isSortableOppositeComputed && /*#__PURE__*/React.createElement("div", {
    className: "sortable-handler"
  }), (swipeout || accordionItem) && slots.default, slots.root, slots['root-end']);
});
ListItem.displayName = 'zmp-list-item';
export default ListItem;