chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
205 lines (201 loc) • 6.58 kB
JavaScript
"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