chayns-components/dist/cjs/react-chayns-list/component/ListItem/ListItem.js

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

"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 _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _ListItemHeader = _interopRequireDefault(require("./ListItemHeader"));
/**
 * @component
 */

/**
 * 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.default.createElement("div", (0, _extends2.default)({
    className: (0, _clsx.default)('list-item', className, onClick && 'list-item--clickable'),
    style: style
  }, props), /*#__PURE__*/_react.default.createElement(_ListItemHeader.default, (0, _extends2.default)({
    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.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired,
  /**
   * A string or `ReactNode` that will be rendered as the subtitle of the list
   * item.
   */
  subtitle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
  /**
   * The URL to an image that will be shown on the left of the list item.
   */
  image: _propTypes.default.string,
  /**
   * An array of URLs for creating a puzzle of images on the left hand of the
   * image item.
   */
  images: _propTypes.default.arrayOf(_propTypes.default.string),
  /**
   * Whether the image/images should be opened at full size when clicked
   * only works if either image or images is defined
   */
  openImageOnClick: _propTypes.default.bool,
  /**
   * An icon to show on the left side of the list item.
   */
  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  /**
   * A classname string that will be applied ot the outer-most `<div>`-element
   * of the list item.
   */
  className: _propTypes.default.string,
  /**
   * An `onClick`-listener for the list item header.
   */
  onClick: _propTypes.default.func,
  /**
   * A `ReactNode` that should be displayed on the right side of the list
   * item.
   */
  right: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
    head: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
    body: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
  }),
  /**
   * Any additional props that will be applied to the head of the list item.
   */
  headerProps: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types

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