543b7ec72d
* WIP: Performance improvements in entity explorer * WIP: Achieve feature parity for entity explorer with release * Update unit tests * Add sentry profiling to current page entity properties component * Fix page add/delete not showing up on entity explorer issue. Update memoization logic for pagegroup entity * Deal with the ban-ts-ignore eslint issues * Update unit tests * Fix widget entity children visibility * Fix tests and code * Fix tests for scenarios where the collapsed entities are unmount, as this is a part of the performance optimization * Filter undefined children when generating structureDSL * Remove rule from eslintrc Consolidate createPage test command * Update CreatePage tests to remove redundant dsl updates * Revert CreatePage test changes, as adding more checks within this command globally causes other tests to have issues. * re-enable eslint rule, as without it CI tests fail * Revert to ban-ts-comment * Fix typescript ban-ts-ignore issue by upgrading react-scripts and fixing typescript issue across the application * Typescript errors handled Co-authored-by: vicky-primathon.in <vicky.bansal@primathon.in>
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
import "react-tabs/style/react-tabs.css";
|
|
import styled from "styled-components";
|
|
|
|
const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
|
|
height: 100%;
|
|
.react-tabs {
|
|
height: 100%;
|
|
}
|
|
.react-tabs__tab-panel {
|
|
height: calc(100% - 46px);
|
|
scrollbar-width: none;
|
|
}
|
|
.react-tabs__tab-list {
|
|
border-bottom-color: #d0d7dd;
|
|
color: #a3b3bf;
|
|
${props =>
|
|
props.shouldOverflow &&
|
|
`
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
`}
|
|
}
|
|
.react-tabs__tab {
|
|
padding: 6px 9px;
|
|
}
|
|
.react-tabs__tab:focus {
|
|
box-shadow: none;
|
|
border-color: ${props => props.theme.colors.primaryOld};
|
|
}
|
|
.react-tabs__tab--selected {
|
|
color: ${props => props.theme.colors.primaryOld};
|
|
border-color: #d0d7dd;
|
|
border-top: ${props => props.theme.colors.primaryOld} 5px solid;
|
|
border-radius: 0;
|
|
}
|
|
`;
|
|
|
|
type TabbedViewComponentType = {
|
|
tabs: Array<{
|
|
key: string;
|
|
title: string;
|
|
panelComponent: JSX.Element;
|
|
}>;
|
|
selectedIndex?: number;
|
|
setSelectedIndex?: (selectedIndex: number) => void;
|
|
overflow?: boolean;
|
|
};
|
|
|
|
export const BaseTabbedView = (props: TabbedViewComponentType) => {
|
|
return (
|
|
<TabsWrapper shouldOverflow={props.overflow}>
|
|
<Tabs
|
|
selectedIndex={props.selectedIndex}
|
|
onSelect={(index: number) => {
|
|
props.setSelectedIndex && props.setSelectedIndex(index);
|
|
}}
|
|
>
|
|
<TabList>
|
|
{props.tabs.map(tab => (
|
|
<Tab key={tab.key}>{tab.title}</Tab>
|
|
))}
|
|
</TabList>
|
|
{props.tabs.map(tab => (
|
|
<TabPanel key={tab.key}>{tab.panelComponent}</TabPanel>
|
|
))}
|
|
</Tabs>
|
|
</TabsWrapper>
|
|
);
|
|
};
|