mirror of
https://github.com/SomboChea/ui
synced 2024-09-30 21:37:48 +07:00
111f0c50e5
* chore: updated emotion dependency * feat: introduced theme * refactor: updated emotion styles * fix: fixed emotion error * fix: fixed tests * chore: add missing types Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import React, { ChangeEvent, useState, useEffect } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
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;
|