External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 15:27:47 -02: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
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` const Container = styled.div`
margin: 15px 0; margin: 15px 0;
transition: all 0.2s ease-out; transition: height 0.2s ease-out;
${props => !props.isExpanded && `overflow: hidden;`} ${props => props.hideOverflow && `overflow: hidden;`}
`; `;
function ExpandingContainer({ isExpanded, children }) { function ExpandingContainer({ isExpanded, children }) {
const [contentHeight, setContentHeight] = useState(0); const [contentHeight, setContentHeight] = useState(0);
const [hideOverflow, setHideOverflow] = useState(!isExpanded);
const ref = useRef(null); const ref = useRef(null);
useEffect(() => {
ref.current.addEventListener('transitionend', () => {
setHideOverflow(!isExpanded);
});
})
useEffect(() => { useEffect(() => {
setContentHeight(ref.current.scrollHeight); setContentHeight(ref.current.scrollHeight);
}); });
@@ -21,7 +27,7 @@ function ExpandingContainer({ isExpanded, children }) {
css={` css={`
height: ${height}px; height: ${height}px;
`} `}
isExpanded={isExpanded} hideOverflow={!isExpanded || hideOverflow}
> >
{children} {children}
</Container> </Container>