7ed65ebf7b
* Add max-width to content * Add padding to content and change Query position * Add max-width constants Co-authored-by: Jaco Greeff <jacogr@gmail.com>
84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
// Copyright 2017-2020 @polkadot/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import type { ThemeProps } from '../types';
|
|
import type { TabItem } from './types';
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import styled from 'styled-components';
|
|
|
|
import Tab from './Tab';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
basePath: string;
|
|
hidden?: (string | boolean | undefined)[];
|
|
items: TabItem[];
|
|
isSequence?: boolean;
|
|
}
|
|
|
|
function Tabs ({ basePath, className = '', hidden, isSequence, items }: Props): React.ReactElement<Props> {
|
|
const location = useLocation();
|
|
|
|
// redirect on invalid tabs
|
|
useEffect((): void => {
|
|
if (location.pathname !== basePath) {
|
|
// Has the form /staking/query/<something>
|
|
const [,, section] = location.pathname.split('/');
|
|
const alias = items.find(({ alias }) => alias === section);
|
|
|
|
if (alias) {
|
|
window.location.hash = alias.isRoot
|
|
? basePath
|
|
: `${basePath}/${alias.name}`;
|
|
} else if (hidden && (hidden.includes(section) || !items.some(({ isRoot, name }) => !isRoot && name === section))) {
|
|
window.location.hash = basePath;
|
|
}
|
|
}
|
|
}, [basePath, hidden, items, location]);
|
|
|
|
const filtered = hidden
|
|
? items.filter(({ name }) => !hidden.includes(name))
|
|
: items;
|
|
|
|
return (
|
|
<div className={`ui--Tabs ${className}`}>
|
|
<div className='tabs-container'>
|
|
{filtered.map((tab, index) => (
|
|
<Tab
|
|
{...tab}
|
|
basePath={basePath}
|
|
index={index}
|
|
isSequence={isSequence}
|
|
key={tab.name}
|
|
num={filtered.length}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default React.memo(styled(Tabs)(({ theme }: ThemeProps) => `
|
|
align-items: flex-end;
|
|
background: ${theme.bgTabs};
|
|
border-bottom: 1px solid ${theme.borderTabs};
|
|
|
|
text-align: left;
|
|
z-index: 1;
|
|
|
|
& .tabs-container {
|
|
max-width: ${theme.contentMaxWidth};
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 1.5rem 1.5rem 0;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0px;
|
|
}
|
|
`));
|