@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
189 lines (188 loc) • 7.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _uuid = require("../../../hooks/uuid");
var _Accordion = require("../../accordion/Accordion");
var _AreaContextProvider = _interopRequireWildcard(require("../../area-provider/AreaContextProvider"));
var _List = require("../List");
var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
var _ListItemHead = _interopRequireDefault(require("./list-item-head/ListItemHead"));
var _ListItem = require("./ListItem.styles");
var _Tooltip = _interopRequireDefault(require("../../tooltip/Tooltip"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ListItem = ({
careOfLocationId,
children,
cornerImage,
hoverItem,
icons,
imageBackground,
images,
isDefaultOpen,
isOpen,
isTitleGreyed,
leftElements,
onClick,
onClose,
onLongPress,
onOpen,
rightElements,
shouldShowTooltipOnTitleOverflow = false,
shouldForceBackground = false,
shouldForceBottomLine = false,
shouldForceHover = false,
shouldHideBottomLine = false,
shouldOpenImageOnClick = false,
shouldHideImageOrIconBackground,
shouldHideIndicator = false,
shouldPreventLayoutAnimation = false,
shouldRenderClosed = false,
shouldShowRoundImageOrIcon,
shouldShowSeparatorBelow = false,
subtitle,
title,
titleElement
}) => {
const {
incrementExpandableItemCount,
isAnyItemExpandable,
isWrapped,
openItemUuid,
updateOpenItemUuid
} = (0, _react2.useContext)(_List.ListContext);
const {
isWrapped: isParentAccordionWrapped
} = (0, _react2.useContext)(_Accordion.AccordionContext);
const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
const isInitialRenderRef = (0, _react2.useRef)(true);
const listItemRef = (0, _react2.useRef)(null);
const uuid = (0, _uuid.useUuid)();
const isExpandable = children !== undefined;
const isItemOpen = isOpen ?? openItemUuid === uuid;
const onCloseRef = (0, _react2.useRef)(onClose);
const onOpenRef = (0, _react2.useRef)(onOpen);
const [shouldEnableTooltip, setShouldEnableTooltip] = (0, _react2.useState)(false);
const shouldDisablePadding = (0, _react2.useMemo)(() => areaProvider.shouldDisableListItemPadding ?? false, [areaProvider.shouldDisableListItemPadding]);
(0, _react2.useEffect)(() => {
onCloseRef.current = onClose;
onOpenRef.current = onOpen;
}, [isOpen, onClose, onOpen]);
(0, _react2.useEffect)(() => {
if (isInitialRenderRef.current) {
isInitialRenderRef.current = false;
} else if (isItemOpen) {
if (typeof onOpenRef.current === 'function') {
onOpenRef.current();
}
} else if (typeof onCloseRef.current === 'function') {
onCloseRef.current();
}
}, [isItemOpen]);
const handleHeadClick = (0, _react2.useCallback)(event => {
if (isExpandable) {
updateOpenItemUuid(uuid);
}
if (typeof onClick === 'function') {
onClick(event);
}
}, [isExpandable, onClick, updateOpenItemUuid, uuid]);
(0, _react2.useEffect)(() => {
if (isExpandable && !shouldHideIndicator) {
// The incrementExpandableItemCount function returns an cleanup
// function to decrement expandableItemCount if component unmounts
return incrementExpandableItemCount();
}
return undefined;
}, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);
(0, _react2.useEffect)(() => {
if (isDefaultOpen) {
updateOpenItemUuid(uuid, {
shouldOnlyOpen: true
});
}
}, [isDefaultOpen, updateOpenItemUuid, uuid]);
const isClickable = typeof onClick === 'function' || isExpandable;
const handleTitleWidthChange = titleWidth => {
if (listItemRef.current) {
const {
offsetWidth
} = listItemRef.current;
if (offsetWidth - 18 < titleWidth) {
setShouldEnableTooltip(true);
} else {
setShouldEnableTooltip(false);
}
}
};
const headContent = (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_ListItemHead.default, {
hoverItem: hoverItem,
careOfLocationId: careOfLocationId,
cornerImage: cornerImage,
icons: icons,
imageBackground: imageBackground,
images: images,
isAnyItemExpandable: isAnyItemExpandable,
isExpandable: isExpandable,
onTitleWidthChange: handleTitleWidthChange,
isOpen: isItemOpen,
isTitleGreyed: isTitleGreyed,
leftElements: leftElements,
onClick: isClickable ? handleHeadClick : undefined,
onLongPress: onLongPress,
shouldForceHover: shouldForceHover,
rightElements: rightElements,
shouldHideImageOrIconBackground: shouldHideImageOrIconBackground,
shouldHideIndicator: shouldHideIndicator,
shouldOpenImageOnClick: shouldOpenImageOnClick,
shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
subtitle: subtitle,
title: title,
titleElement: titleElement
}), [careOfLocationId, cornerImage, handleHeadClick, hoverItem, icons, imageBackground, images, isAnyItemExpandable, isClickable, isExpandable, isItemOpen, isTitleGreyed, leftElements, onLongPress, rightElements, shouldForceHover, shouldHideImageOrIconBackground, shouldHideIndicator, shouldOpenImageOnClick, shouldShowRoundImageOrIcon, subtitle, title, titleElement]);
return /*#__PURE__*/_react2.default.createElement(_ListItem.StyledMotionListItem, {
animate: {
height: 'auto',
opacity: 1
},
className: "beta-chayns-list-item",
exit: {
height: 0,
opacity: 0
},
initial: {
height: 0,
opacity: 0
},
key: `list-item-${uuid}`,
ref: listItemRef,
layout: shouldPreventLayoutAnimation ? undefined : 'position',
$isClickable: isClickable,
$isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !shouldDisablePadding,
$isOpen: isItemOpen,
$isWrapped: isWrapped,
$shouldForceBackground: shouldForceBackground,
$shouldForceBottomLine: shouldForceBottomLine,
$shouldHideBottomLine: shouldHideBottomLine,
$shouldHideIndicator: shouldHideIndicator,
$shouldShowSeparatorBelow: shouldShowSeparatorBelow
}, shouldShowTooltipOnTitleOverflow && shouldEnableTooltip ? /*#__PURE__*/_react2.default.createElement(_Tooltip.default, {
shouldUseFullWidth: true,
item: /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItemTooltip, {
key: `list-item-tooltip-${uuid}`
}, title)
}, headContent) : headContent, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/_react2.default.createElement(_ListItemBody.default, {
id: uuid,
key: `listItemBody-${uuid}`,
shouldHideBody: shouldRenderClosed && !isItemOpen
}, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, null, children))));
};
ListItem.displayName = 'ListItem';
var _default = exports.default = ListItem;
//# sourceMappingURL=ListItem.js.map