External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-29 15:24:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

hide overflow in ExpandingContainer while opening

Browse Source
This commit is contained in:
Keith Grant 2019-09-06 09:59:58 -07:00
parent 4e73f4b778
commit 9777b79818
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx
View File

@ -4,13 +4,19 @@ import styled from 'styled-components';
const Container = styled.div`
margin: 15px 0;
transition: all 0.2s ease-out;
${props => !props.isExpanded && `overflow: hidden;`}
transition: height 0.2s ease-out;
${props => props.hideOverflow && `overflow: hidden;`}
`;
function ExpandingContainer({ isExpanded, children }) {
const [contentHeight, setContentHeight] = useState(0);
const [hideOverflow, setHideOverflow] = useState(!isExpanded);
const ref = useRef(null);
useEffect(() => {
ref.current.addEventListener('transitionend', () => {
setHideOverflow(!isExpanded);
});
})
useEffect(() => {
setContentHeight(ref.current.scrollHeight);
});
@ -21,7 +27,7 @@ function ExpandingContainer({ isExpanded, children }) {
css={`
height: ${height}px;
`}
isExpanded={isExpanded}
hideOverflow={!isExpanded || hideOverflow}
>
{children}
</Container>