{"size": 1027, "ext": "js", "max_stars_repo_path": "src/components/Tab.js", "max_stars_repo_name": "Goalof/graphite", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Tab.js", "max_issues_repo_name": "Goalof/graphite", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Tab.js", "max_forks_repo_name": "Goalof/graphite", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.54, "max_line_length": 91, "alphanum_fraction": 0.6260954236}
import atomize from '@quarkly/atomize';
import { Box } from '@quarkly/widgets';
import React, { useEffect, useRef, useMemo } from 'react';
import { useTabs } from './Tabs';

const SimpleTab = ({
	index,
	...props
}) => {
	const ref = useRef();
	const {
		addTab,
		currentTab,
		removeTab
	} = useTabs();
	const tabId = props.tabId || props['data-qid'];
	useEffect(() => {
		console.log('Call Add', tabId, index);
		addTab({
			tabId,
			index
		});
		return () => {
			console.log('Call Remove', tabId, index);
			removeTab({
				tabId,
				index
			});
		};
	}, [tabId, index]);
	const isHidden = currentTab !== tabId;
	return <Box ref={ref} role="tabpanel" hidden={isHidden} {...props} />;
};

const propInfo = {
	tabId: {
		title: 'Tab ID',
		description: {
			en: 'The ID of the TabPanel to show when clicked.'
		},
		control: 'input'
	}
};
export default atomize(SimpleTab)({
	name: 'SimpleTab',
	description: {
		en: 'Контейнер для ресурсов связанных с вкладкой. Должен располагаться внутри SimpleTabs'
	},
	propInfo
});