mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix: fix adhocpopovers tab animate. (#14478)
* fix popover * addd tabs default css * fix lint * fix tests * address comments * lint fix * fix test * lint
This commit is contained in:
parent
2bd0b62902
commit
e4e23ea487
@ -128,10 +128,10 @@ describe('DashboardBuilder', () => {
|
|||||||
expect(parentSize.find(Tabs.TabPane)).toHaveLength(2);
|
expect(parentSize.find(Tabs.TabPane)).toHaveLength(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should set animated=true on Tabs for perf', () => {
|
it('should have default animated=true on Tabs for perf', () => {
|
||||||
const wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs });
|
const wrapper = setup({ dashboardLayout: undoableDashboardLayoutWithTabs });
|
||||||
const tabProps = wrapper.find(ParentSize).find(Tabs).props();
|
const tabProps = wrapper.find(ParentSize).find(Tabs).props();
|
||||||
expect(tabProps.animated).toEqual({ inkBar: true, tabPane: false });
|
expect(tabProps.animated).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render a TabPane and DashboardGrid for first Tab', () => {
|
it('should render a TabPane and DashboardGrid for first Tab', () => {
|
||||||
@ -182,7 +182,7 @@ describe('DashboardBuilder', () => {
|
|||||||
dashboardLayout: undoableDashboardLayoutWithTabs,
|
dashboardLayout: undoableDashboardLayoutWithTabs,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.find(Tabs).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
|
expect(wrapper.find(Tabs).at(1).prop('activeKey')).toBe(DASHBOARD_GRID_ID);
|
||||||
|
|
||||||
wrapper
|
wrapper
|
||||||
.find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab')
|
.find('.dashboard-component-tabs .ant-tabs .ant-tabs-tab')
|
||||||
|
@ -26,75 +26,73 @@ export interface TabsProps extends AntDTabsProps {
|
|||||||
allowOverflow?: boolean;
|
allowOverflow?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const notForwardedProps = ['fullWidth', 'allowOverflow'];
|
const StyledTabs = ({
|
||||||
|
animated = false,
|
||||||
|
fullWidth = true,
|
||||||
|
allowOverflow = true,
|
||||||
|
...props
|
||||||
|
}: TabsProps) => (
|
||||||
|
<AntDTabs
|
||||||
|
animated={animated}
|
||||||
|
{...props}
|
||||||
|
css={theme => css`
|
||||||
|
overflow: ${allowOverflow ? 'visible' : 'hidden'};
|
||||||
|
|
||||||
const StyledTabs = styled(AntDTabs, {
|
.ant-tabs-content-holder {
|
||||||
shouldForwardProp: prop => !notForwardedProps.includes(String(prop)),
|
overflow: ${allowOverflow ? 'visible' : 'auto'};
|
||||||
})<TabsProps>`
|
}
|
||||||
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
|
.ant-tabs-tab {
|
||||||
|
flex: 1 1 auto;
|
||||||
.ant-tabs-content-holder {
|
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||||
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'auto')};
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
.ant-tabs-tab {
|
.anchor-link-container {
|
||||||
flex: 1 1 auto;
|
cursor: pointer;
|
||||||
|
.fa.fa-link {
|
||||||
&.ant-tabs-tab-active .ant-tabs-tab-btn {
|
visibility: visible;
|
||||||
color: inherit;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&:hover {
|
.short-link-trigger.btn {
|
||||||
.anchor-link-container {
|
padding: 0 ${theme.gridUnit}px;
|
||||||
cursor: pointer;
|
& > .fa.fa-link {
|
||||||
|
top: 0;
|
||||||
.fa.fa-link {
|
}
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
${fullWidth &&
|
||||||
|
css`
|
||||||
|
.ant-tabs-nav-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.short-link-trigger.btn {
|
.ant-tabs-tab {
|
||||||
padding: 0 ${({ theme }) => theme.gridUnit}px;
|
width: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
`};
|
||||||
|
|
||||||
& > .fa.fa-link {
|
.ant-tabs-tab-btn {
|
||||||
top: 0;
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: ${theme.typography.sizes.s}px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
user-select: none;
|
||||||
|
.required {
|
||||||
|
margin-left: ${theme.gridUnit / 2}px;
|
||||||
|
color: ${theme.colors.error.base};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
.ant-tabs-ink-bar {
|
||||||
}
|
background: ${theme.colors.secondary.base};
|
||||||
|
|
||||||
${({ fullWidth }) =>
|
|
||||||
fullWidth &&
|
|
||||||
css`
|
|
||||||
.ant-tabs-nav-list {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
`}
|
||||||
.ant-tabs-tab {
|
/>
|
||||||
width: 0;
|
);
|
||||||
}
|
|
||||||
`};
|
|
||||||
|
|
||||||
.ant-tabs-tab-btn {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
.required {
|
|
||||||
margin-left: ${({ theme }) => theme.gridUnit / 2}px;
|
|
||||||
color: ${({ theme }) => theme.colors.error.base};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-tabs-ink-bar {
|
|
||||||
background: ${({ theme }) => theme.colors.secondary.base};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledTabPane = styled(AntDTabs.TabPane)``;
|
const StyledTabPane = styled(AntDTabs.TabPane)``;
|
||||||
|
|
||||||
@ -102,11 +100,6 @@ const Tabs = Object.assign(StyledTabs, {
|
|||||||
TabPane: StyledTabPane,
|
TabPane: StyledTabPane,
|
||||||
});
|
});
|
||||||
|
|
||||||
Tabs.defaultProps = {
|
|
||||||
fullWidth: true,
|
|
||||||
animated: { inkBar: true, tabPane: false },
|
|
||||||
};
|
|
||||||
|
|
||||||
const StyledEditableTabs = styled(StyledTabs)`
|
const StyledEditableTabs = styled(StyledTabs)`
|
||||||
.ant-tabs-content-holder {
|
.ant-tabs-content-holder {
|
||||||
background: white;
|
background: white;
|
||||||
|
@ -72,6 +72,7 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
|
|||||||
activeKey={activeKey}
|
activeKey={activeKey}
|
||||||
renderTabBar={() => <></>}
|
renderTabBar={() => <></>}
|
||||||
fullWidth={false}
|
fullWidth={false}
|
||||||
|
animated
|
||||||
allowOverflow
|
allowOverflow
|
||||||
>
|
>
|
||||||
{childIds.map((id, index) => (
|
{childIds.map((id, index) => (
|
||||||
|
Loading…
Reference in New Issue
Block a user