zmp-react/esm/zalo-ui-kits/list-item.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { useImperativeHandle, useRef, forwardRef, useMemo } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import ListItem from '../components/list-item';
import { zmp } from '../shared/zmp';
import { validateUrl } from '../../common/utils';
import { classNames } from '../shared/utils';
/* dts-imports
import { SmartSelect } from 'zmp-core/types';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  title? : string | number
  text? : string | number
  media? : string
  subtitle? : string | number
  description? : string | number
  tooltip? : string
  tooltipTrigger? : string
  link? : boolean | string
  tabLink? : boolean | string
  tabLinkActive? : boolean
  selected?: boolean
  after? : string | number
  badge? : string | number
  badgeColor? : string
  mediaItem? : boolean
  mediaList? : boolean
  divider? : boolean
  groupTitle? : boolean
  swipeout? : boolean
  swipeoutOpened? : boolean
  sortable? : boolean
  sortableOpposite? : boolean
  accordionItem? : boolean
  accordionItemOpened? : boolean
  smartSelect? : boolean
  smartSelectParams? : SmartSelect.Parameters
  noChevron? : boolean
  chevronCenter? : boolean
  checkbox? : boolean
  radio? : boolean
  radioIcon? : string
  checked? : boolean
  defaultChecked? : boolean
  indeterminate? : boolean
  name? : string
  value? : string | number | Array<any>
  readonly? : boolean
  required? : boolean
  disabled? : boolean
  virtualListIndex? : number
  COLOR_PROPS
  ROUTER_PROPS
  ACTIONS_PROPS
  onClick? : (event?: any) => void
  onTapHold?: (...args: any[]) => void
  onSwipeoutOverswipeEnter? : (...args: any[]) => void
  onSwipeoutOverswipeExit? : (...args: any[]) => void
  onSwipeoutDeleted? : (...args: any[]) => void
  onSwipeoutDelete? : (...args: any[]) => void
  onSwipeoutClose? : (...args: any[]) => void
  onSwipeoutClosed? : (...args: any[]) => void
  onSwipeoutOpen? : (...args: any[]) => void
  onSwipeoutOpened? : (...args: any[]) => void
  onSwipeout? : (progress?: any) => void
  onAccordionBeforeClose? : (prevent?: any) => void
  onAccordionClose? : (...args: any[]) => void
  onAccordionClosed? : (...args: any[]) => void
  onAccordionBeforeOpen? : (prevent?: any) => void
  onAccordionOpen? : (...args: any[]) => void
  onAccordionOpened? : (...args: any[]) => void
  onChange? : (event?: any) => void
  ref?: React.MutableRefObject<{el: HTMLElement | null;>;
  CHILDREN_PROP
*/

var ZMPListItem = /*#__PURE__*/forwardRef(function (props, ref) {
  var itemRef = useRef(null);

  var description = props.description,
      footer = props.footer,
      link = props.link,
      href = props.href,
      onTapHold = props.onTapHold,
      className = props.className,
      others = _objectWithoutPropertiesLoose(props, ["description", "footer", "link", "href", "onTapHold", "className"]);

  var handleClickLink = function handleClickLink(e, _link) {
    e.preventDefault();
    var options = {};
    var routeProps = props.routeProps,
        reloadCurrent = props.reloadCurrent,
        reloadPrevious = props.reloadPrevious,
        reloadAll = props.reloadAll,
        animate = props.animate,
        ignoreCache = props.ignoreCache,
        transition = props.transition;

    if (routeProps !== undefined) {
      options.props = routeProps;
    }

    if (reloadCurrent !== undefined) {
      options.reloadCurrent = reloadCurrent;
    }

    if (reloadPrevious !== undefined) {
      options.reloadPrevious = reloadPrevious;
    }

    if (reloadAll !== undefined) {
      options.reloadAll = reloadAll;
    }

    if (animate !== undefined) {
      options.animate = animate;
    }

    if (ignoreCache !== undefined) {
      options.ignoreCache = ignoreCache;
    }

    if (transition !== undefined) {
      options.transition = transition;
    }

    zmp.views.current.router.navigate(_link, options);
  };

  function preventContextMenu(e) {
    if (onTapHold) {
      e.preventDefault();
    }

    return true;
  }

  useImperativeHandle(ref, function () {
    return itemRef.current;
  });
  useIsomorphicLayoutEffect(function () {
    var _itemRef$current$el, _itemRef$current$el2;

    itemRef == null ? void 0 : (_itemRef$current$el = itemRef.current.el) == null ? void 0 : _itemRef$current$el.addEventListener('taphold', onTapHold);
    itemRef == null ? void 0 : (_itemRef$current$el2 = itemRef.current.el) == null ? void 0 : _itemRef$current$el2.addEventListener('contextmenu', preventContextMenu, false);
    return function () {
      var _itemRef$current$el3, _itemRef$current$el4;

      itemRef == null ? void 0 : (_itemRef$current$el3 = itemRef.current.el) == null ? void 0 : _itemRef$current$el3.removeEventListener('taphold', onTapHold);
      itemRef == null ? void 0 : (_itemRef$current$el4 = itemRef.current.el) == null ? void 0 : _itemRef$current$el4.removeEventListener('contextmenu', preventContextMenu);
    };
  }, []);
  var classes = classNames({
    'list-item-taphold': onTapHold
  }, className);

  if (link || href) {
    var _zmp$routes = zmp.routes,
        routes = _zmp$routes === void 0 ? [] : _zmp$routes;
    var paths = useMemo(function () {
      return routes.map(function (route) {
        return route.path;
      });
    }, []);

    if (link && link !== '#' && validateUrl(link, paths) || href && href !== '#' && validateUrl(href, paths)) {
      var url = link || href;
      return /*#__PURE__*/React.createElement(ListItem, _extends({}, others, {
        className: classes,
        header: null,
        footer: description || footer,
        ref: itemRef,
        link: true,
        onClick: function onClick(e) {
          return handleClickLink(e, url);
        }
      }), props.children);
    }
  }

  return /*#__PURE__*/React.createElement(ListItem, _extends({}, others, {
    className: classes,
    link: false,
    header: null,
    footer: description || footer,
    ref: itemRef
  }), props.children);
});
ZMPListItem.displayName = 'zmp-list-item';
export default ZMPListItem;