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

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import GorhomBottomSheet, { BottomSheetFooter } from '@gorhom/bottom-sheet';
import React__default from 'react';
import { Portal } from '@gorhom/portal';
import styled from 'styled-components/native';
import { Dimensions, Keyboard, View, findNodeHandle, AccessibilityInfo } from 'react-native';
export { BottomSheetHeader } from './BottomSheetHeader.native.js';
import { BottomSheetGrabHandle } from './BottomSheetGrabHandle.native.js';
export { BottomSheetBody } from './BottomSheetBody.native.js';
export { BottomSheetFooter } from './BottomSheetFooter.native.js';
import { ComponentIds } from './componentIds.js';
import { useBottomSheetAndDropdownGlue, BottomSheetContext } from './BottomSheetContext.js';
import { BottomSheetBackdrop } from './BottomSheetBackdrop.native.js';
import { useBottomSheetStack } from './BottomSheetStack.js';
import { useDropdown, DropdownContext } from '../Dropdown/useDropdown.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { useId } from '../../utils/useId.js';
import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { componentZIndices } from '../../utils/componentZIndices.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var BottomSheetSurface=styled(BaseBox)(function(_ref){var theme=_ref.theme;return {borderTopLeftRadius:makeSpace(theme.spacing[5]),borderTopRightRadius:makeSpace(theme.spacing[5]),backgroundColor:theme.colors.popup.background.subtle,justifyContent:'center',alignItems:'center',position:'relative'};});var focusOnElement=function focusOnElement(element){var reactTag=findNodeHandle(element);if(reactTag){AccessibilityInfo.setAccessibilityFocus(reactTag);}};var _BottomSheet=function _BottomSheet(_ref2){var children=_ref2.children,_ref2$snapPoints=_ref2.snapPoints,snapPoints=_ref2$snapPoints===void 0?[0.35,0.5,0.85]:_ref2$snapPoints,isOpen=_ref2.isOpen,onDismiss=_ref2.onDismiss,initialFocusRef=_ref2.initialFocusRef,_ref2$zIndex=_ref2.zIndex,zIndex=_ref2$zIndex===void 0?componentZIndices.bottomSheet:_ref2$zIndex;var bottomSheetAndDropdownGlue=useBottomSheetAndDropdownGlue();var defaultInitialFocusRef=React__default.useRef(null);var sheetRef=React__default.useRef(null);var _React$useState=React__default.useState(),_React$useState2=_slicedToArray(_React$useState,2),header=_React$useState2[0],setHeader=_React$useState2[1];var _React$useState3=React__default.useState(),_React$useState4=_slicedToArray(_React$useState3,2),footer=_React$useState4[0],setFooter=_React$useState4[1];var _React$useState5=React__default.useState(),_React$useState6=_slicedToArray(_React$useState5,2),body=_React$useState6[0],setBody=_React$useState6[1];var _isOpen=isOpen!=null?isOpen:bottomSheetAndDropdownGlue==null?void 0:bottomSheetAndDropdownGlue.isOpen;var _React$useState7=React__default.useState(0),_React$useState8=_slicedToArray(_React$useState7,2),headerHeight=_React$useState8[0],setHeaderHeight=_React$useState8[1];var _React$useState9=React__default.useState(0),_React$useState10=_slicedToArray(_React$useState9,2),footerHeight=_React$useState10[0],setFooterHeight=_React$useState10[1];var _React$useState11=React__default.useState(0),_React$useState12=_slicedToArray(_React$useState11,2),contentHeight=_React$useState12[0],setContentHeight=_React$useState12[1];var _React$useState13=React__default.useState(true),_React$useState14=_slicedToArray(_React$useState13,2),hasBodyPadding=_React$useState14[0],setHasBodyPadding=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),isHeaderEmpty=_React$useState16[0],setIsHeaderEmpty=_React$useState16[1];var initialSnapPoint=React__default.useRef(0);var totalHeight=React__default.useMemo(function(){return headerHeight+footerHeight+contentHeight;},[contentHeight,footerHeight,headerHeight]);var id=useId();var _useBottomSheetStack=useBottomSheetStack(),addBottomSheetToStack=_useBottomSheetStack.addBottomSheetToStack,removeBottomSheetFromStack=_useBottomSheetStack.removeBottomSheetFromStack,getCurrentStackIndexById=_useBottomSheetStack.getCurrentStackIndexById,getTopOfTheStack=_useBottomSheetStack.getTopOfTheStack;var currentStackIndex=getCurrentStackIndexById(id);var bottomSheetZIndex=zIndex-currentStackIndex;useIsomorphicLayoutEffect(function(){if(bottomSheetAndDropdownGlue!=null&&bottomSheetAndDropdownGlue.hasAutoCompleteInHeader){initialSnapPoint.current=2;}else {var height=Dimensions.get('window').height;var middleSnapPoint=snapPoints[1]*height;if(totalHeight>middleSnapPoint){initialSnapPoint.current=1;}}},[snapPoints,totalHeight]);var _snapPoints=React__default.useMemo(function(){return snapPoints.map(function(point){return `${point*100}%`;});},[snapPoints]);var close=React__default.useCallback(function(){onDismiss==null?void 0:onDismiss();bottomSheetAndDropdownGlue==null?void 0:bottomSheetAndDropdownGlue.onBottomSheetDismiss();},[bottomSheetAndDropdownGlue,onDismiss]);var handleOnOpen=React__default.useCallback(function(){var _sheetRef$current;(_sheetRef$current=sheetRef.current)==null?void 0:_sheetRef$current.snapToIndex(initialSnapPoint.current);},[]);var handleOnClose=React__default.useCallback(function(){var _sheetRef$current2;(_sheetRef$current2=sheetRef.current)==null?void 0:_sheetRef$current2.close();Keyboard.dismiss();},[sheetRef]);React__default.useEffect(function(){if(_isOpen){handleOnOpen();if(!initialFocusRef){focusOnElement(defaultInitialFocusRef.current);}else {focusOnElement(initialFocusRef.current);}}else {handleOnClose();}},[_isOpen,handleOnClose,handleOnOpen,initialFocusRef]);React__default.useEffect(function(){if(!bottomSheetAndDropdownGlue)return;bottomSheetAndDropdownGlue.setDropdownHasBottomSheet(true);},[bottomSheetAndDropdownGlue]);React__default.useLayoutEffect(function(){React__default.Children.forEach(children,function(child){if(getComponentId(child)===ComponentIds.BottomSheetHeader){setHeader(child);}if(getComponentId(child)===ComponentIds.BottomSheetFooter){setFooter(child);}if(getComponentId(child)===ComponentIds.BottomSheetBody){setBody(child);}});},[children]);var renderFooter=React__default.useCallback(function(props){return jsx(BottomSheetFooter,Object.assign({},props,{children:jsx(View,{onLayout:function onLayout(event){setFooterHeight(event.nativeEvent.layout.height);},children:footer})}));},[footer]);var renderBackdrop=React__default.useCallback(function(props){return jsx(BottomSheetBackdrop,Object.assign({},props,{zIndex:bottomSheetZIndex}));},[bottomSheetZIndex]);var renderHandle=React__default.useCallback(function(){return jsxs(BaseBox,{position:isHeaderEmpty?'absolute':'relative',top:"spacing.0",left:"spacing.0",right:"spacing.0",onLayout:function onLayout(_ref3){var nativeEvent=_ref3.nativeEvent;setHeaderHeight(nativeEvent.layout.height);},children:[jsx(BaseBox,{zIndex:bottomSheetZIndex,children:jsx(BottomSheetGrabHandle,{})}),header]});},[isHeaderEmpty,bottomSheetZIndex,header]);var isHeaderFloating=!hasBodyPadding&&isHeaderEmpty;var contextValue=React__default.useMemo(function(){return {isInBottomSheet:true,isOpen:Boolean(_isOpen),close:handleOnClose,positionY:0,headerHeight:headerHeight,contentHeight:contentHeight,footerHeight:footerHeight,setContentHeight:setContentHeight,setFooterHeight:setFooterHeight,setHeaderHeight:setHeaderHeight,scrollRef:function scrollRef(){},bind:{},defaultInitialFocusRef:defaultInitialFocusRef,isHeaderFloating:isHeaderFloating,setHasBodyPadding:setHasBodyPadding,setIsHeaderEmpty:setIsHeaderEmpty};},[_isOpen,contentHeight,footerHeight,handleOnClose,headerHeight,isHeaderFloating]);var dropdownProps=useDropdown();React__default.useEffect(function(){if(_isOpen){addBottomSheetToStack(id);}else {removeBottomSheetFromStack(id);}},[addBottomSheetToStack,_isOpen,id,removeBottomSheetFromStack]);React__default.useEffect(function(){var showSubscription=Keyboard.addListener('keyboardDidShow',function(){if(id&&id===getTopOfTheStack()){var _sheetRef$current3;(_sheetRef$current3=sheetRef.current)==null?void 0:_sheetRef$current3.expand();}});return function(){showSubscription.remove();};},[getTopOfTheStack,id]);return jsx(Portal,{hostName:"BladeBottomSheetPortal",children:jsx(DropdownContext.Provider,{value:dropdownProps,children:jsx(BottomSheetContext.Provider,{value:contextValue,children:jsx(GorhomBottomSheet,{style:isOpen?{shadowColor:'hsla(217,56%,17%,0.64)',shadowOffset:{width:0,height:-18},shadowOpacity:0.2,shadowRadius:12}:{},enablePanDownToClose:true,enableOverDrag:true,enableContentPanningGesture:true,ref:sheetRef,index:_isOpen?initialSnapPoint.current:-1,containerStyle:{zIndex:bottomSheetZIndex},animateOnMount:true,handleComponent:renderHandle,backgroundComponent:BottomSheetSurface,footerComponent:renderFooter,backdropComponent:renderBackdrop,onClose:close,snapPoints:_snapPoints,children:body})})})});};var BottomSheet=assignWithoutSideEffects(_BottomSheet,{componentId:ComponentIds.BottomSheet});

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