@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
199 lines (198 loc) • 7.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.AccordionContext = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _uuid = require("../../hooks/uuid");
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
var _AccordionBody = _interopRequireDefault(require("./accordion-body/AccordionBody"));
var _AccordionGroup = require("./accordion-group/AccordionGroup");
var _AccordionHead = _interopRequireDefault(require("./accordion-head/AccordionHead"));
var _AccordionContextProvider = require("./accordion-provider/AccordionContextProvider");
var _Accordion = require("./Accordion.styles");
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 AccordionContext = exports.AccordionContext = /*#__PURE__*/_react2.default.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,
shouldHideBackground = false,
shouldRenderClosed = false,
shouldRotateIcon = true,
shouldHideBottomLine = false,
title,
titleElement,
onTitleInputChange,
titleInputProps,
titleColor,
onBodyAnimationComplete
}) => {
const {
isWrapped: groupIsWrapped,
openAccordionUuid,
accordionGroupUuid,
accordionUuids,
updateOpenAccordionUuid
} = (0, _react2.useContext)(_AccordionGroup.AccordionGroupContext);
const {
isWrapped: isParentWrapped
} = (0, _react2.useContext)(AccordionContext);
const {
isWrapped: contextIsWrapped
} = (0, _react2.useContext)(_AccordionContextProvider.AccordionWrappedContext);
const isWrapped = (0, _react2.useMemo)(() => groupIsWrapped ?? contextIsWrapped, [contextIsWrapped, groupIsWrapped]);
const [isAccordionOpen, setIsAccordionOpen] = (0, _react2.useState)(isDefaultOpen ?? isOpened);
const uuid = (0, _uuid.useUuid)();
const isInitialRenderRef = (0, _react2.useRef)(true);
const isInGroup = typeof updateOpenAccordionUuid === 'function';
const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
const isOpenRef = (0, _react2.useRef)(isOpen);
const onCloseRef = (0, _react2.useRef)(onClose);
const onOpenRef = (0, _react2.useRef)(onOpen);
const isLastAccordion = (0, _react2.useMemo)(() => accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false, [accordionUuids, uuid]);
(0, _react2.useEffect)(() => {
isOpenRef.current = isOpen;
onCloseRef.current = onClose;
onOpenRef.current = onOpen;
}, [isOpen, onClose, onOpen]);
const handleHeadClick = (0, _react2.useCallback)(() => {
if (isDisabled) {
return;
}
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid);
}
setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
}, [isDisabled, updateOpenAccordionUuid, uuid]);
(0, _react2.useEffect)(() => {
if (isDisabled && isOpen) {
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid);
}
setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
}
}, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);
(0, _react2.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]);
(0, _react2.useEffect)(() => {
if (isDefaultOpen) {
if (typeof updateOpenAccordionUuid === 'function') {
updateOpenAccordionUuid(uuid, {
shouldOnlyOpen: true
});
} else {
setIsAccordionOpen(true);
}
}
}, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
(0, _react2.useEffect)(() => {
if (typeof isOpened === 'boolean') {
if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {
updateOpenAccordionUuid(uuid);
} else {
setIsAccordionOpen(isOpened);
}
}
}, [isOpened, updateOpenAccordionUuid, uuid]);
const accordionContextProviderValue = (0, _react2.useMemo)(() => ({
isWrapped: isWrapped === true
}), [isWrapped]);
const areaContextProviderValue = (0, _react2.useMemo)(() => ({
shouldChangeColor: !shouldHideBackground
}), [shouldHideBackground]);
const accordionWrappedContextProviderValue = (0, _react2.useMemo)(() => ({
isWrapped: true
}), []);
return /*#__PURE__*/_react2.default.createElement(_Accordion.StyledMotionAccordion, {
animate: {
height: 'auto',
opacity: 1
},
"data-uuid": `${accordionGroupUuid ?? ''}---${uuid}`,
className: "beta-chayns-accordion",
exit: {
height: 0,
opacity: 0
},
initial: {
height: 0,
opacity: 0
},
$isOpen: isOpen,
$shouldShowLines: !isLastAccordion || !isWrapped,
$isParentWrapped: isParentWrapped,
$isWrapped: isWrapped,
$shouldForceBackground: shouldForceBackground,
$shouldHideBackground: shouldHideBackground,
$shouldHideBottomLine: shouldHideBottomLine,
onMouseEnter: onHoverStart,
onMouseLeave: onHoverEnd
}, /*#__PURE__*/_react2.default.createElement(AccordionContext.Provider, {
value: accordionContextProviderValue
}, /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
transition: {
type: 'tween'
}
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.default, {
uuid: uuid,
icon: icon,
isOpen: isOpen,
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: titleColor
}), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
initial: false
}, (isOpen || shouldRenderClosed) && /*#__PURE__*/_react2.default.createElement(_AccordionBody.default, {
maxHeight: bodyMaxHeight,
onScroll: onBodyScroll,
onAnimationComplete: onBodyAnimationComplete,
shouldHideBody: shouldRenderClosed && !isOpen
}, /*#__PURE__*/_react2.default.createElement(_AccordionContextProvider.AccordionWrappedContext.Provider, {
value: accordionWrappedContextProviderValue
}, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.AreaContext.Provider, {
value: areaContextProviderValue
}, children)))))));
};
Accordion.displayName = 'Accordion';
var _default = exports.default = Accordion;
//# sourceMappingURL=Accordion.js.map