react-native-unit-components/src/slices/BottomSheetSlice.ts

Unit React Native components

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from '../store';
import { BottomSheetNativePlaceType, ScrollState } from '../types/internal/bottomSheet.types';

export interface BottomSheetState {
  isBottomSheetActive: boolean;
  isComponentLoading?: boolean;
  shouldShowBottomSheet?: boolean;
  nativePlace?: BottomSheetNativePlaceType;
  componentHeight?: number;
  shouldEnableBottomSheetScroll: boolean;
  scrollState?: ScrollState;
}

const initialState: BottomSheetState = {
  isBottomSheetActive: false,
  isComponentLoading: false,
  shouldShowBottomSheet: false,
  shouldEnableBottomSheetScroll: true,
  nativePlace: BottomSheetNativePlaceType.overFullScreen,
  componentHeight: 0,
};

const BottomSheetSlice = createSlice({
  name: 'BottomSheet',
  initialState: initialState,
  reducers: {
    setIsBottomSheetActive(state, action: PayloadAction<boolean>) {
      state.isBottomSheetActive = action.payload;
    },
    setIsComponentLoading(state, action: PayloadAction<boolean>) {
      state.isComponentLoading = action.payload;
    },
    setShouldShowBottomSheet(state, action: PayloadAction<boolean>) {
      state.shouldShowBottomSheet = action.payload;
    },

    setNativePlace(state, action: PayloadAction<BottomSheetNativePlaceType>) {
      state.nativePlace = action.payload;
    },
    setComponentHeight(state, action: PayloadAction<number>) {
      state.componentHeight = action.payload;
    },
    setShouldEnableBottomSheetScroll(state, action: PayloadAction<boolean>) {
      state.shouldEnableBottomSheetScroll = action.payload;
    },

    setScrollState(state, action: PayloadAction<ScrollState>) {
      state.scrollState = action.payload;
    },

    resetBottomSheetSlice(state) {
      //resets all besides is active to avoid loops in useEffects invoked by closing the flow
      state.isComponentLoading = initialState.isComponentLoading;
      state.shouldShowBottomSheet = initialState.shouldShowBottomSheet;
      state.nativePlace = initialState.nativePlace;
      state.componentHeight = initialState.componentHeight;
      state.shouldEnableBottomSheetScroll = initialState.shouldEnableBottomSheetScroll;
      state.scrollState = initialState.scrollState;
    },
  },

});

export const {
  setIsBottomSheetActive, setIsComponentLoading,
  setShouldShowBottomSheet, setNativePlace,
  setComponentHeight,
  setShouldEnableBottomSheetScroll, setScrollState, resetBottomSheetSlice,
} = BottomSheetSlice.actions;
export const selectConfiguration = (state: RootState) => state.bottomSheet;
export default BottomSheetSlice.reducer;