iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(explore): make horizontal scroll appears in data panel (#13566) 

* fix(explore): make horizontal scroll appear

* fix(explore): 34px -> 33px

* fix(lint): dataTablesPane lint

* fix(lint): prettier dataTablesPane

* fix(explore): use gridUnit rather than hardcode

Co-authored-by: liuyaozong <liuyaozong@baijiahulian.com>
This commit is contained in:
Yaozong Liu 2021-03-24 23:47:57 +08:00 committed by GitHub
parent 9773aba522
commit f18d14a51a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset-frontend/src/components/TableView/TableView.tsx
View File

@ -77,7 +77,7 @@ const TableViewStyles = styled.div<{
isPaginationSticky &&
`
position: sticky;
bottom: ${theme.gridUnit * 4}px;
bottom: 0;
left: 0;
`};
}

96
superset-frontend/src/explore/components/DataTablesPane.tsx
View File

@ -17,7 +17,7 @@
* under the License.
*/
import React, { useCallback, useEffect, useState } from 'react';
import { styled, t, css } from '@superset-ui/core';
import { styled, t } from '@superset-ui/core';
import Collapse from 'src/common/components/Collapse';
import Tabs from 'src/common/components/Tabs';
import Loading from 'src/components/Loading';
@ -80,6 +80,26 @@ const TabsWrapper = styled.div<{ contentHeight: number }>`
}
`;
const CollapseWrapper = styled.div`
height: 100%;
.collapse-inner {
height: 100%;
.ant-collapse-item {
height: 100%;
.ant-collapse-content {
height: calc(100% - ${({ theme }) => theme.gridUnit * 8}px);
.ant-collapse-content-box {
height: 100%;
}
}
}
}
`;
export const DataTablesPane = ({
queryFormData,
tableSectionHeight,
@ -257,49 +277,39 @@ export const DataTablesPane = ({
return (
<SouthPane>
<TabsWrapper contentHeight={tableSectionHeight}>
<Collapse
accordion
bordered={false}
defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
onChange={handleCollapseChange}
bold
ghost
css={css`
height: 100%;
.ant-collapse-item {
height: 100%;
.ant-collapse-content {
height: 100%;
.ant-collapse-content-box {
height: 100%;
}
}
}
`}
>
<Collapse.Panel
header={t('Data')}
key={DATAPANEL_KEY}
css={{ paddingBottom: 12 }}
<CollapseWrapper>
<Collapse
accordion
bordered={false}
defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
onChange={handleCollapseChange}
bold
ghost
className="collapse-inner"
>
<Tabs
fullWidth={false}
tabBarExtraContent={TableControls}
activeKey={activeTabKey}
onChange={setActiveTabKey}
>
<Tabs.TabPane tab={t('View results')} key={RESULT_TYPES.results}>
{renderDataTable(RESULT_TYPES.results)}
</Tabs.TabPane>
<Tabs.TabPane tab={t('View samples')} key={RESULT_TYPES.samples}>
{renderDataTable(RESULT_TYPES.samples)}
</Tabs.TabPane>
</Tabs>
</Collapse.Panel>
</Collapse>
<Collapse.Panel header={t('Data')} key={DATAPANEL_KEY}>
<Tabs
fullWidth={false}
tabBarExtraContent={TableControls}
activeKey={activeTabKey}
onChange={setActiveTabKey}
>
<Tabs.TabPane
tab={t('View results')}
key={RESULT_TYPES.results}
>
{renderDataTable(RESULT_TYPES.results)}
</Tabs.TabPane>
<Tabs.TabPane
tab={t('View samples')}
key={RESULT_TYPES.samples}
>
{renderDataTable(RESULT_TYPES.samples)}
</Tabs.TabPane>
</Tabs>
</Collapse.Panel>
</Collapse>
</CollapseWrapper>
</TabsWrapper>
</SouthPane>
);