etendo-ui-library 1.0.70 → 1.0.71

package/components/tab/Tab.test.tsx

@@ -2,26 +2,23 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Tab from './Tab';
 
-const dataset = [
-  {name: 'Prods. of interest', route: '', key: 'prodsOfInterest'},
-  {name: 'Assigned pop', route: '', key: 'Assigned pop'},
-  {name: 'Incidents', route: '', key: 'incidents'},
-  {name: 'Competition', route: '', key: 'competition'},
-  {name: 'Questions', route: '', key: 'questions'},
-  {name: 'Observations', route: '', key: 'observations'},
+const datasetTab = [
+  {name: 'Home', route: '/home', key: 'user'},
+  {name: 'About', route: '/about', key: 'vehicles'},
+  {name: 'Staff', route: '/staff', key: 'staff'},
+  {name: 'Login', route: '/login', key: 'skills'},
+  {name: 'Logout', route: '/logout', key: 'movilApp'},
 ];
 
-const onCheckSelectedMock = () => dataset[0];
-
 describe('Running Test for Tab', () => {
   it('Check Tab Disabled', () => {
     const tree = renderer
       .create(
         <Tab
-          data={dataset}
-          onChangeSelected={onCheckSelectedMock}
-          style="primary"
-          typeSizeText="medium"
+          tabInformation={datasetTab}
+          selectedTab={1}
+          setSelectedTab={() => {}}
+          height={40}
         />,
       )
       .toJSON();

package/components/tab/Tab.tsx

@@ -1,62 +1,60 @@
-/* Imports */
-import React, {useState} from 'react';
-import {ScrollView, View} from 'react-native';
+// Imports
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {BLUE, GREY_BLUE_50, WHITE, YELLOW} from '../../styles/colors';
+import {TabProps} from './Tab.types';
 
-import TabItem from './TabItem';
-import {TabProps, Info, TabStyleType} from './Tab.types';
-import {TabStyleVariant} from './Tab.styles';
-
-/* Styles - This function allows you to obtain the styles of the Tab component */
-const getStyle = (style: TabStyleType, item: Info, pathname: any) => {
-  /* Returns the style chosen by the programmer */
-  if (item.route === pathname) {
-    return [TabStyleVariant[style].tabs, TabStyleVariant[style].tabsActive];
-  } else {
-    return TabStyleVariant[style].tabs;
-  }
-};
-
-/* Tab component */
 const Tab = ({
-  data,
-  onChangeSelected,
-  style,
-  typeSizeText,
-  renderItem,
-  pathname,
+  tabInformation,
+  selectedTab,
+  setSelectedTab,
+  height,
+  fontFamily,
+  fontWeight,
 }: TabProps) => {
-  /* Variable to handle the state of the tabs */
-  const [toggleItem, setToggleItem] = useState<number>(-1);
-
   return (
-    <View style={TabStyleVariant.primary.container}>
-      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
-        {data.map((item: Info, index: number) => {
-          return (
-            <TabItem
-              style={getStyle(style, item, pathname)}
-              styleText={style}
-              sizeText={typeSizeText}
-              item={item}
-              index={index}
-              onPress={() => {
-                /* Allows to detect the selected item */
-                setToggleItem(index);
-                onChangeSelected({
-                  name: item.name,
-                  route: item.route,
-                  key: item.key,
-                });
-              }}
-              key={item.key}
-              toggleItem={toggleItem}
-              renderItem={renderItem}
-            />
-          );
-        })}
-      </ScrollView>
+    <View style={styles.container}>
+      {tabInformation.map((tabItem: any, index: number) => (
+        <TouchableOpacity
+          key={index}
+          style={[
+            styles.tab,
+            {
+              flex: 1 / tabInformation.length,
+              backgroundColor: index === selectedTab ? BLUE : GREY_BLUE_50,
+              height: height,
+              borderTopColor: index === selectedTab ? YELLOW : 'transparent',
+            },
+          ]}
+          onPress={() => (setSelectedTab ? setSelectedTab(index) : {})}
+        >
+          <Text
+            style={{
+              color: index === selectedTab ? WHITE : BLUE,
+              fontFamily: fontFamily,
+              fontWeight: fontWeight,
+            }}
+          >
+            {tabItem.name}
+          </Text>
+        </TouchableOpacity>
+      ))}
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tab: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomWidth: 3,
+    borderBottomColor: BLUE,
+    borderTopWidth: 4,
+  },
+});
+
 export default Tab;

package/components/tab/Tab.types.ts

@@ -1,56 +1,11 @@
 /* Imports */
-import {StyleProp, TextStyle, ViewStyle} from 'react-native';
-
-/* Type declaration */
-export type Info = {
-  name: string;
-  route: string;
-  key: string;
-};
 
 export interface TabProps {
-  data: Info[];
-  onChangeSelected: (Info: Info | undefined) => Info | Array<Info>;
-  style: TabStyleType;
-  typeSizeText: TabStyleFontSize;
-  renderItem?: any;
-  pathname?: any;
-}
-
-export interface TabItemProps {
-  style: StyleProp<ViewStyle>;
-  item: Info;
-  onPress: () => void;
-  index: number;
-  toggleItem: number;
-  styleText: TabStyleType;
-  sizeText: TabStyleFontSize;
-  renderItem: (item: any, styles: any) => JSX.Element;
-  pathname?: string;
+  tabInformation: any[];
+  selectedTab: number;
+  setSelectedTab?: (any: any | undefined) => any | Array<any>;
+  height?: number | string;
+  renderItem?: JSX.Element | Array<JSX.Element>;
+  fontFamily?: string | number | any;
+  fontWeight?: string | number | any;
 }
-
-/* Declaration of style types */
-export type TabStyleType = 'primary' | 'secondary';
-export type TabStyleFontSize = 'small' | 'medium' | 'large';
-
-export type TabStyleRecord = Record<
-  TabStyleType,
-  {
-    container: ViewStyle;
-    containerSecundary: ViewStyle;
-    containerTabs?: ViewStyle;
-    tabs: ViewStyle;
-    tabsSecundary: ViewStyle;
-    tabsActive: ViewStyle;
-    tabsActiveSecundary: ViewStyle;
-    itemText: TextStyle;
-    itemTextSecundary: TextStyle;
-  }
->;
-
-export type TabStyleText = Record<
-  TabStyleFontSize,
-  {
-    fontSize: TextStyle;
-  }
->;

package/components/tab/Tabs.stories.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Story, Meta} from '@storybook/react';
 
 import Tab from './Tab';
-import {TabProps} from './Tab.types';
 import {View} from 'react-native';
-import { styles } from './Tab.styles';
-import addMarginContainer from '../../helpers/addMargin';
 
 const meta: Meta = {
   title: 'Etendo/Tab',
@@ -15,32 +12,30 @@ const meta: Meta = {
 export default meta;
 
 /* Information to pass */
-const dataset = [
-  {name: 'User', route: '', key: 'user'},
-  {name: 'Vehicles', route: '', key: 'vehicles'},
-  {name: 'Skills', route: '', key: 'skills'},
-  {name: 'Mobile app', route: '', key: 'movilApp'},
-  {name: 'Staff', route: '', key: 'staff'},
-  {name: 'Routing options', route: '', key: 'routing options'},
-  {name: 'Map', route: '', key: 'map'},
+const datasetTab = [
+  {name: 'Home', route: '/home', key: 'user'},
+  {name: 'About', route: '/about', key: 'vehicles'},
+  {name: 'Staff', route: '/staff', key: 'staff'},
+  {name: 'Login', route: '/login', key: 'skills'},
+  {name: 'Logout', route: '/logout', key: 'movilApp'},
 ];
 
-/* This function allows you to select by default the first tab */
-const onCheckSelectedMock = () => dataset[0];
-
 /* Templates */
-const Template0: Story<TabProps> = args => (
-  <View style={[styles.storiesContainer, addMarginContainer()]}>
-    <Tab {...args} />
-  </View>
-);
 
-/* Story exports */
-export const TabsDefault = Template0.bind({});
+const Template0: Story<any> = args => {
+  const [selectedTab, setSelectedTab] = useState(0);
 
-TabsDefault.args = {
-  data: dataset,
-  onChangeSelected: onCheckSelectedMock,
-  style: 'primary',
-  typeSizeText: 'small',
+  return (
+    <View style={{padding: 20}}>
+      <Tab
+        tabInformation={datasetTab}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+        height={40}
+      />
+    </View>
+  );
 };
+
+/* Story exports */
+export const TabDefault = Template0.bind({});