wix-style-react
Version:
wix-style-react
54 lines • 2.14 kB
JavaScript
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import Toggle from '../Transition/Toggle';
import { timingMap } from '../Transition/constants';
// Returns the height of element including vertical margin
export const getElementHeight = wrapper => element => {
const offsetTop = wrapper
? element.getBoundingClientRect().y - wrapper.getBoundingClientRect().y
: 0;
const marginBottom = parseInt(window.getComputedStyle(element).getPropertyValue('margin-bottom') || 0, 10);
return element.scrollHeight + offsetTop + marginBottom;
};
/** `<Collapse/>` component is used for hideable content.
*
* Easily create accordions or within `<Card/>` to collapse its `<Card.Content/>`.
*/
const Collapse = ({ children, open = true, dataHook, mountOnEnter = true, unmountOnExit = true, onExpandAnimationEnd, onCollapseAnimationEnd, }) => {
const wrapperRef = useRef();
return (React.createElement("div", { "data-hook": dataHook, "data-open": open, ref: wrapperRef },
React.createElement(Toggle, { timeout: timingMap['medium01'], show: open, unmountOnExit: unmountOnExit, mountOnEnter: mountOnEnter, onStart: onExpandAnimationEnd, onEnd: onCollapseAnimationEnd }, children)));
};
Collapse.displayName = 'Collapse';
Collapse.propTypes = {
/**
* any node to be rendered inside
*/
children: PropTypes.node,
/**
* determinants whether the element is collapsed.
*/
open: PropTypes.bool,
/**
* string based data hook for testing
*/
dataHook: PropTypes.string,
/**
* lazy-mounting of component. If false, will be mounted immediately. It true, will be mounted with first enter.
*/
mountOnEnter: PropTypes.bool,
/**
* unmount component after it finishes exiting. If false, will stay mounted after exit.
*/
unmountOnExit: PropTypes.bool,
/**
* callback for expand animation end
*/
onExpandAnimationEnd: PropTypes.func,
/**
* callback for collapse animation end
*/
onCollapseAnimationEnd: PropTypes.func,
};
export default Collapse;
//# sourceMappingURL=Collapse.js.map