1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-06-15 16:09:43 +07:00
verdaccio-ui/src/components/DetailContainer/DetailContainerTabs.tsx
Priscila Oliveira b56e43846b fix: rest MUI components - Introduced ForwardRef (#224)
* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors
2019-10-31 08:12:18 +01:00

45 lines
1.4 KiB
TypeScript

import React, { ChangeEvent, useState, useEffect } from 'react';
import styled from 'react-emotion';
import { default as MuiTabs } from '../../muiComponents/Tabs';
import Tab from '../../muiComponents/Tab';
import { TabPosition } from './tabs';
interface Props {
tabPosition: TabPosition;
onChangeTabPosition: (event: ChangeEvent<{}>) => void;
}
const Tabs = styled(MuiTabs)({
marginBottom: 16,
});
const getTabIndex = (tabPosition: TabPosition): number =>
Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
const [tabPositionIndex, setTabPositionIndex] = useState(0);
useEffect(() => {
const tabIndex = getTabIndex(tabPosition);
setTabPositionIndex(tabIndex);
}, [tabPosition]);
return (
<Tabs
indicatorColor={'primary'}
onChange={onChangeTabPosition}
textColor={'primary'}
value={tabPositionIndex}
variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
</Tabs>
);
};
export default DetailContainerTabs;