@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
317 lines • 12.7 kB
JavaScript
import { AnimatePresence, MotionConfig } from 'motion/react';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useUuid } from '../../hooks/uuid';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import { AreaContext } from '../area-provider/AreaContextProvider';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
import AccordionBody from './accordion-body/AccordionBody';
import { AccordionGroupContext } from './accordion-group/AccordionGroup';
import AccordionHead from './accordion-head/AccordionHead';
import { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';
import { StyledMotionAccordion } from './Accordion.styles';
import { useInitialRenderRef } from '../../hooks/ref';
export const AccordionContext = /*#__PURE__*/React.createContext({
isWrapped: undefined
});
const Accordion = ({
bodyMaxHeight,
children,
icon,
isDefaultOpen = false,
isDisabled = false,
isFixed = false,
isOpened,
isTitleGreyed = false,
onBodyScroll,
onClose,
onHoverEnd,
onHoverStart,
onOpen,
onSearchChange,
rightElement,
searchPlaceholder,
searchValue,
shouldForceBackground = false,
shouldForceBottomLine = false,
shouldHideBackground = false,
shouldRenderClosed = false,
shouldRotateIcon = true,
shouldHideBottomLine = false,
title,
titleElement,
onTitleInputChange,
titleInputProps,
shouldSkipAnimation: shouldSkipAnimationProp = false,
colors,
shouldIndex = false,
onBodyAnimationComplete,
shouldEnableKeyboardHighlighting
}) => {
const {
isWrapped: groupIsWrapped,
openAccordionUuid,
accordionGroupUuid,
accordionUuids,
updateOpenAccordionUuid,
activeAccordionUuid,
updateActiveAccordionUuid,
registerAccordionUuid,
unregisterAccordionUuid
} = useContext(AccordionGroupContext);
const {
isWrapped: isParentWrapped
} = useContext(AccordionContext);
const {
isWrapped: contextIsWrapped
} = useContext(AccordionWrappedContext);
const colorScheme = useColorScheme();
const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
const isWrapped = useMemo(() => groupIsWrapped ?? contextIsWrapped, [contextIsWrapped, groupIsWrapped]);
const [isAccordionOpen, setIsAccordionOpen] = useState(isDefaultOpen ?? isOpened);
const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);
const uuid = useUuid();
const isInitialRenderRef = useRef(true);
const initialRenderSkipRef = useInitialRenderRef(true);
const shouldSkipAnimation = shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);
const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';
const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
const isOpenRef = useRef(isOpen);
const onCloseRef = useRef(onClose);
const onOpenRef = useRef(onOpen);
const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
const isKeyboardFocusable = !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);
const isInKeyboardNavigationGroup = isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string';
useEffect(() => {
if (typeof accordionGroupUuid === 'string' && typeof registerAccordionUuid === 'function' && typeof unregisterAccordionUuid === 'function') {
registerAccordionUuid(uuid);
return () => {
unregisterAccordionUuid(uuid);
};
}
return undefined;
}, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);
const isLastAccordion = useMemo(() => accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false, [accordionUuids, uuid]);
useEffect(() => {
isOpenRef.current = isOpen;
onCloseRef.current = onClose;
onOpenRef.current = onOpen;
}, [isOpen, onClose, onOpen]);
const handleHeadClick = useCallback(() => {
if (isDisabled) {
return;
}
if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {
updateActiveAccordionUuid(uuid);
}
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid);
}
setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
}, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);
useEffect(() => {
if (isDisabled && isOpen) {
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid);
}
setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
}
}, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);
useEffect(() => {
if (isInitialRenderRef.current) {
isInitialRenderRef.current = false;
} else if (isOpen) {
if (typeof onOpenRef.current === 'function') {
onOpenRef.current();
}
} else if (typeof onCloseRef.current === 'function') {
onCloseRef.current();
}
}, [isOpen]);
useEffect(() => {
if (isDefaultOpen) {
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid, {
shouldOnlyOpen: true
});
} else {
setIsAccordionOpen(true);
}
}
}, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
useEffect(() => {
if (typeof isOpened === 'boolean') {
if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {
updateOpenAccordionUuid(uuid);
} else {
setIsAccordionOpen(isOpened);
}
}
}, [isOpened, updateOpenAccordionUuid, uuid]);
const accordionContextProviderValue = useMemo(() => ({
isWrapped: isWrapped === true
}), [isWrapped]);
const areaContextProviderValue = useMemo(() => ({
shouldChangeColor: !shouldHideBackground
}), [shouldHideBackground]);
const accordionWrappedContextProviderValue = useMemo(() => ({
isWrapped: true
}), []);
const initialAnimation = useMemo(() => {
if (shouldSkipAnimation) {
return {
height: 'auto',
opacity: 1
};
}
return isOpen ? {
height: 'auto',
opacity: 1
} : {
height: 0,
opacity: 0
};
}, [isOpen, shouldSkipAnimation]);
const tabIndex = useMemo(() => isKeyboardFocusable ? 0 : -1, [isKeyboardFocusable]);
const handleKeyDown = useCallback(e => {
const isCurrentAccordionTarget = e.currentTarget === e.target;
if (isCurrentAccordionTarget && isInKeyboardNavigationGroup && accordionUuids?.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
const currentIndex = accordionUuids.indexOf(uuid);
if (currentIndex !== -1) {
const nextIndex = e.key === 'ArrowDown' ? (currentIndex + 1) % accordionUuids.length : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;
const nextAccordionUuid = accordionUuids[nextIndex];
if (nextAccordionUuid && nextAccordionUuid !== uuid) {
const nextAccordionElement = document.querySelector(`[data-uuid="${accordionGroupUuid}---${nextAccordionUuid}"]`);
if (nextAccordionElement) {
updateActiveAccordionUuid(nextAccordionUuid);
nextAccordionElement.focus();
return;
}
}
}
}
if (isCurrentAccordionTarget && (e.key === 'Enter' || e.key === ' ') && isKeyboardFocusable) {
handleHeadClick();
}
if (isCurrentAccordionTarget && e.key === 'ArrowRight' && isKeyboardFocusable && !isOpen) {
e.preventDefault();
handleHeadClick();
}
if (isCurrentAccordionTarget && (e.key === 'Escape' || e.key === 'ArrowLeft')) {
if (isOpen && isKeyboardFocusable) {
e.preventDefault();
handleHeadClick();
return;
}
if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
e.preventDefault();
updateActiveAccordionUuid(undefined);
let parentAccordion = e.currentTarget.parentElement?.closest('.beta-chayns-accordion');
while (parentAccordion) {
const parentGroupId = parentAccordion.getAttribute('data-uuid')?.split('---')[0];
if (parentGroupId !== accordionGroupUuid) {
parentAccordion.focus();
break;
}
parentAccordion = parentAccordion.parentElement?.closest('.beta-chayns-accordion');
}
}
}
}, [accordionGroupUuid, accordionUuids, handleHeadClick, isInKeyboardNavigationGroup, isKeyboardFocusable, isOpen, updateActiveAccordionUuid, uuid]);
const handleFocus = useCallback(e => {
if (e.currentTarget === e.target && isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function') {
setIsGroupFocusWithin(true);
updateActiveAccordionUuid(uuid);
}
}, [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
const handleBlur = useCallback(e => {
if (isInKeyboardNavigationGroup && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string') {
const nextFocusedElement = e.relatedTarget;
const currentGroupElement = e.currentTarget;
if (!nextFocusedElement || !currentGroupElement.contains(nextFocusedElement)) {
setIsGroupFocusWithin(false);
updateActiveAccordionUuid(undefined);
}
}
}, [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid]);
useEffect(() => {
if (!isInKeyboardNavigationGroup) {
setIsGroupFocusWithin(false);
} else if (activeAccordionUuid == null && typeof updateActiveAccordionUuid === 'function' && accordionUuids?.[0] === uuid) {
updateActiveAccordionUuid(uuid);
}
}, [accordionUuids, activeAccordionUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
return /*#__PURE__*/React.createElement(StyledMotionAccordion, {
animate: {
height: 'auto',
opacity: 1
},
"data-uuid": `${accordionGroupUuid ?? ''}---${uuid}`,
className: "beta-chayns-accordion",
exit: {
height: 0,
opacity: 0
},
initial: initialAnimation,
$isOpen: isOpen,
tabIndex: tabIndex,
$shouldShowLines: !isLastAccordion || !isWrapped,
$isParentWrapped: isParentWrapped,
$isWrapped: isWrapped,
$shouldForceBackground: shouldForceBackground,
$shouldForceBottomLine: shouldForceBottomLine,
$shouldHideBackground: shouldHideBackground,
$shouldHideBottomLine: shouldHideBottomLine,
$bottomBorderColor: colors?.borderBottomColor,
$shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
onBlur: handleBlur,
onMouseEnter: onHoverStart,
onMouseLeave: onHoverEnd,
transition: {
duration: shouldSkipAnimation ? 0 : 0.25
}
}, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
value: accordionContextProviderValue
}, /*#__PURE__*/React.createElement(MotionConfig, {
transition: {
type: 'tween'
}
}, /*#__PURE__*/React.createElement(AccordionHead, {
uuid: uuid,
icon: icon,
isOpen: isOpen,
shouldSkipAnimation: shouldSkipAnimation,
isFixed: isFixed,
isTitleGreyed: isTitleGreyed || isDisabled,
isWrapped: isWrapped === true,
onClick: handleHeadClick,
onSearchChange: onSearchChange,
rightElement: rightElement,
searchPlaceholder: searchPlaceholder,
searchValue: searchValue,
shouldRotateIcon: shouldRotateIcon,
title: title,
titleElement: titleElement,
onTitleInputChange: onTitleInputChange,
titleInputProps: titleInputProps,
titleColor: colors?.titleColor,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective
}), /*#__PURE__*/React.createElement(AnimatePresence, {
initial: false
}, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {
shouldSkipAnimation: shouldSkipAnimation,
maxHeight: bodyMaxHeight,
onScroll: onBodyScroll,
onAnimationComplete: onBodyAnimationComplete,
shouldHideBody: shouldRenderClosed && !isOpen
}, /*#__PURE__*/React.createElement(AccordionWrappedContext.Provider, {
value: accordionWrappedContextProviderValue
}, /*#__PURE__*/React.createElement(AreaContext.Provider, {
value: areaContextProviderValue
}, children)))))));
};
Accordion.displayName = 'Accordion';
export default Accordion;
//# sourceMappingURL=Accordion.js.map