@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
80 lines (77 loc) • 2.41 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../../defaultTheme";
import Slide from "../../../utils/Slide";
import mq from "../../../utils/mediaQuery";
const StyledCardSectionContent = styled.div.withConfig({
displayName: "SectionContent__StyledCardSectionContent",
componentId: "gtsta3-0"
})(["font-family:", ";font-size:", ";line-height:", ";color:", ";width:100%;border-top:", ";padding-top:", ";transition:padding ", " linear,border-top ", " linear;", ""], ({
theme
}) => theme.orbit.fontFamily, ({
theme
}) => theme.orbit.fontSizeTextNormal, ({
theme
}) => theme.orbit.lineHeightTextNormal, ({
theme
}) => theme.orbit.colorTextPrimary, ({
theme,
expanded,
noSeparator
}) => expanded && !noSeparator ? `1px solid ${theme.orbit.paletteCloudNormal}` : `0px solid ${theme.orbit.paletteCloudNormal}`, ({
hasPaddingTop,
theme
}) => hasPaddingTop && theme.orbit.spaceMedium, ({
theme
}) => theme.orbit.durationFast, ({
theme
}) => theme.orbit.durationFast, mq.tablet(css(["padding-top:", ";"], ({
theme,
hasPaddingTop
}) => hasPaddingTop && theme.orbit.spaceLarge)));
StyledCardSectionContent.defaultProps = {
theme: defaultTheme
};
const SectionContent = ({
expandable,
expanded,
children,
noSeparator,
hasPaddingTop,
slideID,
labelID
}) => {
const ref = React.useRef(null);
const [contentHeight, setContentHeight] = React.useState(expanded ? null : 0);
React.useEffect(() => {
const calculateHeight = () => {
if (ref && ref.current) {
const {
height
} = ref.current.getBoundingClientRect();
setContentHeight(height);
}
};
calculateHeight();
window.addEventListener("resize", calculateHeight);
return () => {
window.removeEventListener("resize", calculateHeight);
};
}, []);
return React.createElement(React.Fragment, null, expandable ? React.createElement(Slide, {
maxHeight: contentHeight,
expanded: expanded,
id: slideID,
ariaLabelledBy: labelID
}, React.createElement(StyledCardSectionContent, {
noSeparator: noSeparator,
ref: ref,
expanded: expanded,
hasPaddingTop: hasPaddingTop,
expandable: expandable
}, children)) : React.createElement(StyledCardSectionContent, {
ref: ref,
hasPaddingTop: hasPaddingTop
}, children));
};
export default SectionContent;