@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
290 lines (289 loc) • 11.8 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 _List2 = require("../List.utils");
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"));
var _element = require("../../../hooks/element");
var _useKeyboardFocusHighlighting = require("../../../hooks/useKeyboardFocusHighlighting");
var _useListItemFocus = require("./useListItemFocus");
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 = /*#__PURE__*/(0, _react2.forwardRef)(({
backgroundColor,
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,
onImageError,
onSizeChange,
onTitleInputChange,
titleElement,
titleInputProps,
shouldDisableAnimation = false,
cornerElement,
isSelected = false,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp
}, ref) => {
const {
isAnyItemExpandable,
isWrapped,
openItemUuid,
updateOpenItemUuid,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,
listGroupUuid,
listItemUuids,
registerListItemUuid,
unregisterListItemUuid,
activeListItemUuid,
updateActiveListItemUuid
} = (0, _react2.useContext)(_List.ListContext);
const shouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingProp ?? shouldEnableKeyboardHighlightingContext;
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 isInDialog = (0, _element.useIsInsideDialog)(listItemRef);
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 [titleWidth, setTitleWidth] = (0, _react2.useState)(0);
const [titleMaxWidth, setTitleMaxWidth] = (0, _react2.useState)(0);
(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 (isDefaultOpen) {
updateOpenItemUuid(uuid, {
shouldOnlyOpen: true
});
}
}, [isDefaultOpen, updateOpenItemUuid, uuid]);
const isClickable = typeof onClick === 'function' || isExpandable;
(0, _react2.useEffect)(() => {
if (typeof onSizeChange === 'function') {
onSizeChange({
titleWidth,
titleMaxWidth
});
}
}, [onSizeChange, titleMaxWidth, titleWidth]);
(0, _react2.useImperativeHandle)(ref, () => ({
titleWidth,
titleMaxWidth
}), [titleMaxWidth, titleWidth]);
const handleTitleWidthChange = (0, _react2.useCallback)((width, maxWidth) => {
setTitleWidth(width);
setTitleMaxWidth(maxWidth);
}, []);
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
const isInKeyboardNavigationGroup = shouldEnableKeyboardHighlighting && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function';
(0, _react2.useEffect)(() => {
if (shouldEnableKeyboardHighlighting && typeof registerListItemUuid === 'function' && typeof unregisterListItemUuid === 'function') {
registerListItemUuid(uuid);
return () => {
unregisterListItemUuid(uuid);
};
}
return undefined;
}, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);
const tabIndex = (0, _react2.useMemo)(() => shouldEnableKeyboardHighlighting ? 0 : -1, [shouldEnableKeyboardHighlighting]);
const handleKeyDown = (0, _react2.useCallback)(event => {
const isCurrentListItemTarget = event.currentTarget === event.target;
const currentListItemElement = event.currentTarget;
const targetElement = event.target;
[() => shouldEnableKeyboardHighlighting && (0, _List2.handleHorizontalArrowNavigation)({
event,
currentListItemElement,
targetElement,
isCurrentListItemTarget
}), () => (0, _List2.handleListItemTabNavigation)({
event,
currentListItemElement,
targetElement,
isCurrentListItemTarget,
isInKeyboardNavigationGroup,
listItemUuids,
currentUuid: uuid,
listGroupUuid,
updateActiveListItemUuid
}), () => (0, _List2.handleVerticalListGroupNavigation)({
event,
isCurrentListItemTarget,
isInKeyboardNavigationGroup,
listItemUuids,
currentUuid: uuid,
listGroupUuid,
updateActiveListItemUuid
}), () => (0, _List2.handleListItemToggleKey)({
event,
isCurrentListItemTarget,
isExpandable,
isItemOpen,
shouldEnableKeyboardHighlighting,
toggleItem: () => handleHeadClick(event)
})].some(handleKey => handleKey());
}, [handleHeadClick, isExpandable, isInKeyboardNavigationGroup, isItemOpen, listGroupUuid, listItemUuids, shouldEnableKeyboardHighlighting, updateActiveListItemUuid, uuid]);
const {
isFocusWithinListItem,
handleFocus,
handleBlur
} = (0, _useListItemFocus.useListItemFocus)({
uuid,
listGroupUuid,
isInKeyboardNavigationGroup,
updateActiveListItemUuid
});
(0, _react2.useEffect)(() => {
if (isInKeyboardNavigationGroup && activeListItemUuid == null && typeof updateActiveListItemUuid === 'function' && (listItemUuids === null || listItemUuids === void 0 ? void 0 : listItemUuids[0]) === uuid) {
updateActiveListItemUuid(uuid);
}
}, [activeListItemUuid, isInKeyboardNavigationGroup, listItemUuids, updateActiveListItemUuid, uuid]);
return /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItem, {
as: shouldDisableAnimation ? undefined : _react.motion.div,
animate: shouldDisableAnimation ? undefined : {
height: 'auto',
opacity: 1
},
className: "beta-chayns-list-item",
exit: shouldDisableAnimation ? undefined : {
height: 0,
opacity: 0
},
initial: shouldDisableAnimation ? undefined : {
height: 0,
opacity: 0
},
key: `list-item-${uuid}`,
ref: listItemRef,
"data-uuid": `${listGroupUuid ?? ''}---${uuid}`,
layout: shouldPreventLayoutAnimation || shouldDisableAnimation ? undefined : 'position',
$backgroundColor: backgroundColor,
$isClickable: isClickable,
$isInAccordion: typeof isParentAccordionWrapped === 'boolean' && !areaProvider.shouldDisableListItemPadding,
$isOpen: isItemOpen,
$isWrapped: isWrapped,
$isInDialog: isInDialog,
$isSelected: isSelected,
$shouldChangeColor: areaProvider.shouldChangeColor,
$shouldForceBackground: shouldForceBackground,
$shouldForceBottomLine: shouldForceBottomLine,
$shouldHideBottomLine: shouldHideBottomLine,
$shouldHideIndicator: shouldHideIndicator,
$shouldShowSeparatorBelow: shouldShowSeparatorBelow,
"data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined,
tabIndex: tabIndex,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
onBlur: handleBlur
}, /*#__PURE__*/_react2.default.createElement(_Tooltip.default, {
shouldUseFullWidth: true,
isDisabled: !shouldShowTooltipOnTitleOverflow || !shouldEnableTooltip,
item: /*#__PURE__*/_react2.default.createElement(_ListItem.StyledListItemTooltip, {
style: {
cursor: 'default'
},
key: `list-item-tooltip-${uuid}`
}, title)
}, /*#__PURE__*/_react2.default.createElement(_ListItemHead.default, {
hoverItem: hoverItem,
careOfLocationId: careOfLocationId,
cornerElement: cornerElement,
cornerImage: cornerImage,
icons: icons,
imageBackground: imageBackground,
images: images,
isAnyItemExpandable: isAnyItemExpandable,
isExpandable: isExpandable,
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,
onTitleInputChange: onTitleInputChange,
onTitleWidthChange: handleTitleWidthChange,
titleInputProps: titleInputProps,
titleElement: titleElement,
setShouldEnableTooltip: setShouldEnableTooltip,
shouldDisableAnimation: shouldDisableAnimation,
onImageError: onImageError
})), /*#__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