chayns-components/lib/react-chayns-list/component/ListItem/ListItem.js

A set of beautiful React components for developing chayns® applications.

import _extends from "@babel/runtime/helpers/extends";
/**
 * @component
 */

import classnames from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import ListItemHeader from './ListItemHeader';

/**
 * The items in a list to display related data in a structured format. Should be
 * used inside of a `List` component.
 */
const ListItem = _ref => {
  let {
    title,
    subtitle,
    image,
    images,
    icon,
    className,
    onClick,
    right,
    style,
    circle = false,
    headerProps,
    hoverItem,
    onLongPress,
    onMouseDown,
    onMouseUp,
    onTouchStart,
    onTouchEnd,
    onTouchCancel,
    longPressTimeout = 450,
    noContentClass,
    onOpen,
    imageBorderColor = 'rgba(var(--chayns-color-rgb--009), .08)',
    left,
    headMultiline = false,
    // eslint-disable-next-line react/prop-types
    notExpandable,
    openImageOnClick = false,
    ...props
  } = _ref;
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classnames('list-item', className, onClick && 'list-item--clickable'),
    style: style
  }, props), /*#__PURE__*/React.createElement(ListItemHeader, _extends({
    title: title,
    subtitle: subtitle,
    onClick: onClick,
    image: image,
    images: images,
    icon: icon,
    className: className,
    right: right,
    style: style && style.head ? style.head : null,
    circle: circle,
    hoverItem: hoverItem,
    longPressTimeout: longPressTimeout,
    onLongPress: onLongPress,
    onKeyDown: onMouseDown,
    onKeyUp: onMouseUp,
    onTouchStart: onTouchStart,
    onTouchEnd: onTouchEnd,
    onTouchCancel: onTouchCancel,
    imageBorderColor: imageBorderColor,
    left: left,
    openImageOnClick: openImageOnClick
  }, headerProps)));
};
ListItem.propTypes = {
  /**
   * A string or `ReactNode` that will be rendered as the title of the list
   * item.
   */
  title: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
  /**
   * A string or `ReactNode` that will be rendered as the subtitle of the list
   * item.
   */
  subtitle: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  /**
   * The URL to an image that will be shown on the left of the list item.
   */
  image: PropTypes.string,
  /**
   * An array of URLs for creating a puzzle of images on the left hand of the
   * image item.
   */
  images: PropTypes.arrayOf(PropTypes.string),
  /**
   * Whether the image/images should be opened at full size when clicked
   * only works if either image or images is defined
   */
  openImageOnClick: PropTypes.bool,
  /**
   * An icon to show on the left side of the list item.
   */
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  /**
   * A classname string that will be applied ot the outer-most `<div>`-element
   * of the list item.
   */
  className: PropTypes.string,
  /**
   * An `onClick`-listener for the list item header.
   */
  onClick: PropTypes.func,
  /**
   * A `ReactNode` that should be displayed on the right side of the list
   * item.
   */
  right: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  /**
   * A React style object that will be applied to the outer-most
   * `<div>`-element of the list item.
   *
   * `style.body` and `style.head` will be applied to the body and head parts
   * of the list item accordingly.
   */
  style: PropTypes.shape({
    head: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
    body: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
  }),
  /**
   * Any additional props that will be applied to the head of the list item.
   */
  headerProps: PropTypes.object,
  // eslint-disable-line react/forbid-prop-types

  /**
   * Wether the image should be in a circular shape rather than a rectangle.
   */
  circle: PropTypes.bool,
  /**
   * A ReactNode that is shown on the right side of the list item on hover.
   */
  hoverItem: PropTypes.node,
  /**
   * This function will be called when the user long-presses on the list item
   * header.
   */
  onLongPress: PropTypes.func,
  /**
   * A callback for the `mousedown`-event on the list item header.
   */
  onMouseDown: PropTypes.func,
  /**
   * A callback for the `mousemove`-event on the list item header.
   */
  onMouseMove: PropTypes.func,
  /**
   * A callback for the `mouseup`-event on the list item header.
   */
  onMouseUp: PropTypes.func,
  /**
   * A callback for the `touchstart`-event on the list item header.
   */
  onTouchStart: PropTypes.func,
  /**
   * A callback for the `touchmove`-event on the list item header.
   */
  onTouchMove: PropTypes.func,
  /**
   * A callback for the `touchend`-event on the list item header.
   */
  onTouchEnd: PropTypes.func,
  /**
   * A callback for the `touchcancel`-event on the list item header.
   */
  onTouchCancel: PropTypes.func,
  /**
   * Control the time after which a press is considered a long press.
   */
  longPressTimeout: PropTypes.number,
  /**
   * Whether the default classname for the children container should be
   * removed, which removes the padding around the list item content.
   */
  noContentClass: PropTypes.bool,
  /**
   * This function will be called when the list item is opening.
   */
  onOpen: PropTypes.func,
  /**
   * A CSS color that will be applied to the border of the image.
   */
  imageBorderColor: PropTypes.string,
  left: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  /**
   * Whether the head of the list item should be multiline or ellipsis in expanded state
   */
  headMultiline: PropTypes.bool
};
ListItem.displayName = 'ListItem';
export default ListItem;
//# sourceMappingURL=ListItem.js.map