feat: Tab component

player/react/src/lib/components/index.ts

@@ -17,6 +17,7 @@ import * as progressIndicator from './ui-progress-indicator';
 import * as row from './ui-row';
 import * as tag from './ui-tag';
 import * as searchinput from './ui-search-input';
+import * as tabs from './ui-tabs';
 import * as text from './ui-text';
 import * as textarea from './ui-text-area';
 import * as textinput from './ui-text-input';
@@ -56,6 +57,7 @@ export const allComponents = {
 	row,
 	searchinput,
 	tag,
+	tabs,
 	text,
 	textarea,
 	textinput,

player/react/src/lib/components/ui-tabs.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { CssClasses, SendSignal } from '../types';
+import { renderComponents, setItemInState } from '../utils';
+import { cx } from 'emotion';
+import { commonSlots, slotsDisabled } from '../common-slots';
+
+export interface TabsState {
+	type: string;
+	id: string | number;
+	tabType: string;
+	isFollowFocused: boolean;
+	isCacheActive: boolean;
+	isNavigation: boolean;
+	items?: [];
+	selectedTab: number;
+	cssClasses?: CssClasses[];
+	codeContext?: {
+		name: string;
+	};
+}
+
+export interface TabState {
+	type: string;
+	id?: string | number;
+	disabled?: boolean;
+	label: string;
+	items?: any[];
+	cssClasses?: CssClasses[];
+	codeContext: {
+		name?: string;
+	};
+}
+
+export const type = 'tabs';
+
+export const signals = ['click'];
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	type: 'string',
+	isFollowFocused: 'boolean',
+	followFocus: (state: TabsState) => ({
+		...state,
+		isFollowFocused: true
+	}),
+	deFollowFocus: (state: TabsState) => ({
+		...state,
+		isFollowFocused: false
+	}),
+	toggleFollowFocus: (state: TabsState) => ({
+		...state,
+		isFollowFocused: !state.isFollowFocused
+	}),
+	isCacheActive: 'boolean',
+	cacheActive: (state: TabsState) => ({
+		...state,
+		isCacheActive: true
+	}),
+	deCacheActive: (state: TabsState) => ({
+		...state,
+		isCacheActive: false
+	}),
+	toggleCacheActive: (state: TabsState) => ({
+		...state,
+		isCacheActive: !state.isCacheActive
+	}),
+	isNavigation: 'boolean',
+	navigation: (state: TabsState) => ({
+		...state,
+		isNavigation: true
+	}),
+	deNavigation: (state: TabsState) => ({
+		...state,
+		isNavigation: false
+	}),
+	toggleNavigation: (state: TabsState) => ({
+		...state,
+		isNavigation: !state.isNavigation
+	})
+};
+
+export const UITabs = ({ state, setState, setGlobalState, sendSignal }: {
+	state: TabsState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'tabs') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+	return <Tabs>
+		<TabList aria-label='List of tabs' {...(state.tabType !== 'line' ? { contained: true } : {})}>
+			{
+				state.items?.map((step: any, index: any) => <Tab
+					className={cx(step.className, step.cssClasses?.map((cc: any) => cc.id).join(' '))}
+					onClick={(i: any) => state.selectedTab = i}
+					key= {index}
+					disabled={step.disabled}>
+						{step.labelText}
+					</Tab>)
+			}
+		</TabList>
+		<TabPanels>
+			{
+				state.items?.map((step: any, index: any) => {
+					const setTabItem = (i: any) => setItemInState(i, step, setState);
+					return <TabPanel key={index}>
+						{
+							step.items?.map((element: any) => {
+								const setItem = (j: any) => setItemInState(j, element, setTabItem);
+								return renderComponents(element, setItem, setGlobalState, sendSignal);
+							})
+						}
+					</TabPanel>;
+				})
+			}
+		</TabPanels>
+	</Tabs>;
+};

player/react/src/lib/utils.tsx

@@ -35,6 +35,7 @@ import { UITile } from './components/ui-tile';
 import { UITileFold } from './components/ui-tile-fold';
 import { UIToggle } from './components/ui-toggle';
 import { kebabCase } from 'lodash';
+import { UITabs } from './components/ui-tabs';
 import { SendSignal } from './types';
 
 export const setItemInState = (item: any, state: any, setState: (state: any) => void) => {
@@ -313,6 +314,8 @@ export const renderComponents = (
 		case 'radio-tile-group':
 			return <UIRadioTileGroup key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'tabs':
+			return <UITabs key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 		default:
 			break;
 	}