@razorpay/blade/build/lib/native/components/Tabs/Tabs.native.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { TabBar, TabView } from 'react-native-tab-view';
import { Dimensions } from 'react-native';
import { TabsContext } from './TabsContext.js';
import { StyledTabButton } from './TabItem.native.js';
import { iconColor, textColor, trackColor } from './tabTokens.js';
import { useTabsItemPropRestriction, iconSizeMap } from './utils.js';
import { TabIndicator } from './TabIndicator.native.js';
import { SafeSceneMap } from './SafeSceneMap.native.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { Box } from '../Box/Box.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useControllableState } from '../../utils/useControllable.js';
import { Divider } from '../Divider/Divider.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import getIn from '../../utils/lodashButBetter/get.js';

var initialLayout={height:0,width:Dimensions.get('window').width};var getTabs=function getTabs(node){var children=React__default.Children.toArray(node);var tabList=children.find(function(child){return getComponentId(child)==='TabList';});if(!tabList||!React__default.isValidElement(tabList)){throw new Error('TabList is required');}return tabList.props.children;};var getTabPanels=function getTabPanels(node){var children=React__default.Children.toArray(node);return children.filter(function(child){return getComponentId(child)==='TabPanel';}).reduce(function(prev,curr){return Object.assign({},prev,_defineProperty({},curr.props.value,function(){return curr.props.children;}));},{});};var getRoutes=function getRoutes(tabs){return tabs.map(function(TabComponent,index){return {index:index,title:TabComponent.props.children,key:TabComponent.props.value,value:TabComponent.props.value,leading:TabComponent.props.leading,trailing:TabComponent.props.trailing};});};var getRouteIndexFromValue=function getRouteIndexFromValue(_ref){var value=_ref.value,routes=_ref.routes;return routes.findIndex(function(route){return route.value===value;});};var getRouteValueFromIndex=function getRouteValueFromIndex(_ref2){var _routes$find;var index=_ref2.index,routes=_ref2.routes;return (_routes$find=routes.find(function(route){return route.index===index;}))==null?void 0:_routes$find.value;};var _Tabs=function _Tabs(_ref3){var children=_ref3.children,defaultValue=_ref3.defaultValue,value=_ref3.value,_onChange=_ref3.onChange,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'bordered':_ref3$variant,_ref3$isFullWidthTabI=_ref3.isFullWidthTabItem,isFullWidthTabItem=_ref3$isFullWidthTabI===void 0?false:_ref3$isFullWidthTabI,_ref3$isLazy=_ref3.isLazy,isLazy=_ref3$isLazy===void 0?false:_ref3$isLazy;var _useTheme=useTheme(),theme=_useTheme.theme;var tabs=getTabs(children);var panels=getTabPanels(children);var routes=getRoutes(tabs);var isFilled=variant==='filled';var _useControllableState=useControllableState({defaultValue:defaultValue,value:value,onChange:function onChange(value){_onChange==null?void 0:_onChange(value);}}),_useControllableState2=_slicedToArray(_useControllableState,2),selectedValue=_useControllableState2[0],setSelectedValue=_useControllableState2[1];var routeIndex=getRouteIndexFromValue({value:selectedValue,routes:routes});var setIndex=React__default.useCallback(function(index){var skipUpdate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var value=getRouteValueFromIndex({index:index,routes:routes});setSelectedValue(function(){return value;},skipUpdate);},[routes,setSelectedValue]);var isVertical=false;var contextValue={baseId:'',selectedValue:selectedValue,isVertical:isVertical,size:size,variant:variant,isFullWidthTabItem:isFullWidthTabItem};React__default.useLayoutEffect(function(){if(selectedValue)return;setIndex(0,true);},[selectedValue,setIndex]);var renderTabLabel=React__default.useCallback(function(_ref4){var route=_ref4.route,focused=_ref4.focused;var title=route.title,Leading=route.leading,trailing=route.trailing;var selectedState=focused?'selected':'unselected';var validatedTrailingComponent=useTabsItemPropRestriction(trailing,size);return jsx(StyledTabButton,Object.assign({size:size,variant:variant,isFullWidthTabItem:!isFullWidthTabItem&&!isFilled},metaAttribute({name:MetaConstants.TabItem}),{children:jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",gap:"spacing.3",children:[Leading?jsx(Leading,{size:iconSizeMap[size],color:iconColor[selectedState].default}):null,jsx(Text,{color:textColor[selectedState].default,size:size==='medium'?'medium':'large',weight:"semibold",children:title}),validatedTrailingComponent]})}));},[isFullWidthTabItem,isFilled,size,variant]);var renderTabBar=React__default.useCallback(function(props){return jsx(TabBar,Object.assign({},props,metaAttribute({name:MetaConstants.TabList}),{gap:0,android_ripple:{borderless:true,color:'transparent'},scrollEnabled:!isFullWidthTabItem&&!isFilled,tabStyle:{padding:0,margin:0,minHeight:0},style:Object.assign({},isFilled?{shadowOpacity:0,shadowColor:'transparent',borderRadius:theme.border.radius.small,borderWidth:theme.border.width.thick,borderColor:theme.colors.interactive.border.gray.faded,backgroundColor:theme.colors.surface.background.gray.intense,padding:theme.spacing[2]}:Object.assign({shadowOpacity:0,shadowColor:'transparent',backgroundColor:'transparent'},variant!=='borderless'&&{borderBottomColor:getIn(theme.colors,trackColor),borderBottomWidth:theme.border.width.thin})),renderIndicator:TabIndicator,renderLabel:renderTabLabel,renderBadge:function renderBadge(){if(!isFilled)return null;if(routeIndex===0){return null;}return jsx(Divider,{left:"1px",height:"20px",variant:"normal",orientation:"vertical",top:size==='large'?'6px':'4px'});}}));},[isFullWidthTabItem,isFilled,renderTabLabel]);return jsx(TabsContext.Provider,{value:contextValue,children:jsx(TabView,{navigationState:{index:routeIndex,routes:routes},renderScene:SafeSceneMap(panels),renderTabBar:renderTabBar,onIndexChange:function onIndexChange(idx){setIndex(idx);},initialLayout:initialLayout,lazy:isLazy})});};var Tabs=React__default.forwardRef(_Tabs);

export { Tabs };
//# sourceMappingURL=Tabs.native.js.map