Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Tabs widget - full height when showTabs is false (#6949)

Browse Source 
* Fix - Tabs widget - full height when showTabs is false

* added conditional height for ChildrenWrapper based on tab visibility state
This commit is contained in:
ashit-rath 2021-09-08 10:13:11 +05:30 committed by GitHub
parent b61be1eb66
commit 863d992d77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/src/components/designSystems/appsmith/TabsComponent.tsx
View File

@ -22,6 +22,12 @@ interface TabsComponentProps extends ComponentProps {
}>; }>;
} }
type ChildrenWrapperProps = Pick<TabsComponentProps, "shouldShowTabs">;
const TAB_CONTAINER_HEIGHT = "40px";
const CHILDREN_WRAPPER_HEIGHT_WITH_TABS = `calc(100% - ${TAB_CONTAINER_HEIGHT})`;
const CHILDREN_WRAPPER_HEIGHT_WITHOUT_TABS = "100%";
const scrollContents = css` const scrollContents = css`
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
@ -41,8 +47,11 @@ const TabsContainerWrapper = styled.div<{
overflow: hidden; overflow: hidden;
`; `;
const ChildrenWrapper = styled.div` const ChildrenWrapper = styled.div<ChildrenWrapperProps>`
height: calc(100% - 40px); height: ${({ shouldShowTabs }) =>
shouldShowTabs
? CHILDREN_WRAPPER_HEIGHT_WITH_TABS
: CHILDREN_WRAPPER_HEIGHT_WITHOUT_TABS};
width: 100%; width: 100%;
position: relative; position: relative;
background: ${(props) => props.theme.colors.builderBodyBG}; background: ${(props) => props.theme.colors.builderBodyBG};
@ -66,7 +75,7 @@ const TabsContainer = styled.div`
background: ${(props) => props.theme.colors.builderBodyBG}; background: ${(props) => props.theme.colors.builderBodyBG};
overflow: hidden; overflow: hidden;
&& { && {
height: 40px; height: ${TAB_CONTAINER_HEIGHT};
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -123,6 +132,7 @@ function TabsComponent(props: TabsComponentProps) {
tabContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" }); tabContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
} }
}, [props.shouldScrollContents]); }, [props.shouldScrollContents]);
return ( return (
<TabsContainerWrapper ref={tabContainerRef}> <TabsContainerWrapper ref={tabContainerRef}>
{props.shouldShowTabs ? ( {props.shouldShowTabs ? (
@ -146,7 +156,7 @@ function TabsComponent(props: TabsComponentProps) {
) : ( ) : (
undefined undefined
)} )}
<ChildrenWrapper> <ChildrenWrapper shouldShowTabs={props.shouldShowTabs}>
<ScrollableCanvasWrapper <ScrollableCanvasWrapper
{...remainingProps} {...remainingProps}
className={`${ className={`${