@janiscommerce/ui-native 1.8.1 → 1.9.0

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+interface Scene {
+    title: string;
+    scene: ReactNode;
+    disabled?: boolean;
+}
+export declare const positions: {
+    top: string;
+    bottom: string;
+};
+export type positionsType = typeof positions;
+export type keyPosition = keyof positionsType;
+interface TabsProps {
+    scenes: Scene[];
+    initialTab?: number | null;
+    position?: keyPosition;
+    onPressTabCb?: (activeTab: number) => void;
+    scrollContentStyle?: ViewStyle;
+    style?: ViewStyle;
+}
+declare const Tabs: FC<TabsProps>;
+export default Tabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,113 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View, ScrollView, FlatList } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { base, black, grey, primary } from '../../theme/palette';
+import BaseButton from '../BaseButton';
+import Text from '../Text';
+import { viewportWidth } from '../../scale';
+import { isObject } from '../../utils';
+export const positions = {
+    top: 'top',
+    bottom: 'bottom',
+};
+const Tabs = ({ scenes, initialTab = null, position = positions.top, onPressTabCb = () => { }, scrollContentStyle = {}, style = {}, ...props }) => {
+    if (!scenes || !Array.isArray(scenes) || !scenes.length) {
+        return null;
+    }
+    const [activeTab, setActiveTab] = useState(0);
+    const scrollViewRef = useRef(null);
+    const validScenes = scenes.filter(({ scene, title }) => scene && title);
+    const areScenesValid = !!validScenes && Array.isArray(validScenes) && !!validScenes.length;
+    const isValidCurrentScene = !!validScenes[activeTab] &&
+        isObject(validScenes[activeTab]) &&
+        !!Object.keys(validScenes[activeTab]).length;
+    const contentDirection = position === positions.bottom ? 'column-reverse' : 'column';
+    const quantityScenes = scenes?.length;
+    const isScrollViewTab = quantityScenes && quantityScenes > 3;
+    const calculateTabs = isScrollViewTab ? { width: viewportWidth / 3 } : { flex: 1 };
+    const contentMargin = position === positions.bottom ? { marginBottom: 45 } : { marginTop: 45 };
+    const styles = StyleSheet.create({
+        wrapper: {
+            flex: 1,
+            position: 'relative',
+            flexDirection: contentDirection,
+        },
+        wrapperTab: {
+            position: 'absolute',
+            width: '100%',
+            height: scaledForDevice(48, moderateScale),
+            flexDirection: 'row',
+            backgroundColor: base.white,
+            zIndex: 1,
+            elevation: scaledForDevice(5, moderateScale),
+        },
+        tabButton: {
+            ...calculateTabs,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderBottomWidth: scaledForDevice(2, moderateScale),
+        },
+        title: {
+            textTransform: 'uppercase',
+            fontFamily: 'Roboto-Medium',
+        },
+        content: {
+            ...contentMargin,
+        },
+    });
+    useEffect(() => {
+        if (typeof initialTab === 'number') {
+            setActiveTab(initialTab);
+        }
+    }, [initialTab]);
+    useEffect(() => {
+        if (isScrollViewTab) {
+            scrollViewRef?.current?.scrollToIndex({
+                index: activeTab,
+                animated: true,
+            });
+        }
+    }, [activeTab, isScrollViewTab]);
+    const getItemLayout = (data, index) => ({
+        length: viewportWidth / 3,
+        offset: (viewportWidth / 3) * index,
+        index,
+    });
+    const handleScrollToIndexFailed = (info) => {
+        setTimeout(() => {
+            scrollViewRef?.current?.scrollToIndex({
+                index: info.index,
+                animated: true,
+            });
+        }, 300);
+    };
+    const TitleTab = ({ title, disabled, index }) => {
+        const borderBottomColor = index === activeTab ? primary.main : base.white;
+        const inactiveText = disabled ? grey[400] : black.main;
+        const textColor = index === activeTab ? primary.main : inactiveText;
+        const handleOnPress = (idx) => {
+            setActiveTab(idx);
+            return onPressTabCb(idx);
+        };
+        return (<BaseButton key={title + index} style={{ ...styles.tabButton, borderBottomColor }} disabled={disabled} onPress={() => handleOnPress(index)}>
+				<Text style={{ ...styles.title, color: textColor }} selectable={false} numberOfLines={1}>
+					{title}
+				</Text>
+			</BaseButton>);
+    };
+    const renderItem = ({ item, index }) => (<TitleTab title={item.title} disabled={item.disabled} index={index}/>);
+    return (<View style={[styles.wrapper, style]} {...props}>
+			{!isScrollViewTab && (<View style={styles.wrapperTab}>
+					{areScenesValid &&
+                validScenes.map((scene, idx) => (<TitleTab key={scene.title} title={scene.title} disabled={scene.disabled} index={idx}/>))}
+				</View>)}
+
+			{isScrollViewTab && (<FlatList style={styles.wrapperTab} data={scenes} renderItem={renderItem} ref={scrollViewRef} horizontal pagingEnabled={true} showsHorizontalScrollIndicator={false} keyExtractor={(item, index) => item.title + index} getItemLayout={getItemLayout} onScrollToIndexFailed={handleScrollToIndexFailed} initialNumToRender={quantityScenes}/>)}
+
+			{isValidCurrentScene && (<ScrollView contentContainerStyle={scrollContentStyle} style={styles.content}>
+					{validScenes[activeTab].scene}
+				</ScrollView>)}
+		</View>);
+};
+export default Tabs;

package/dist/index.d.ts

@@ -22,5 +22,6 @@ import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import Toast from 'react-native-toast-message';
 import { configToast } from './components/Toast/utils';
+import Tabs from './components/Tabs';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, Tabs, };

package/dist/index.js

@@ -22,5 +22,6 @@ import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import Toast from 'react-native-toast-message';
 import { configToast } from './components/Toast/utils';
+import Tabs from './components/Tabs';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, Tabs, };

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const isObject: (obj: Object) => boolean;

package/dist/utils/index.js

@@ -0,0 +1 @@
+export const isObject = (obj) => !!(obj && obj.constructor === Object);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.8.1",
+	"version": "1.9.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",