Thiết kế website giá rẻ

Question

i use button witch open data modal from bottom sheet. Everything run okey when picked data from data default widow but when i wont to change to input date my bottom sheet closes. An when i choose data i need to reopen bottom sheet. I would like to find way to avoid closing bottom sheet

BottomSheetCode

import { View, Text, Platform, Keyboard, StyleSheet } from 'react-native';
import React, {
  Dispatch,
  forwardRef,
  SetStateAction,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from 'react';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetTextInput,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import useStore from '@/providers/StoreProvider';
import DropDownPicker from 'react-native-dropdown-picker';
import { TextInput, Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { ScrollView } from 'react-native-gesture-handler';

export type Ref = BottomSheetModal;

interface Props {
  selectedSkupstina: string;
  setSelectedSkupstina: Dispatch<SetStateAction<string>>;
  selectedStatus: string;
  setSelectedStatus: Dispatch<SetStateAction<string>>;
  search: string;
  setSearch: Dispatch<SetStateAction<string>>;
  date: { startDate?: Date; endDate?: Date };
  setOpenDate: Dispatch<SetStateAction<boolean>>;
  loadData: () => void;
}

const NaloziCustomBottomSheet = forwardRef<Ref, Props>((props, ref) => {
  const {
    selectedSkupstina,
    setSelectedSkupstina,
    selectedStatus,
    setSelectedStatus,
    search,
    setSearch,
    date,
    setOpenDate,
    loadData,
  } = props;

  const [count, setCount] = useState(5);
  const [sift, setSift] = useState<number[]>();

  const handleIncreaseContentPress = useCallback((length: number) => {
    setCount((state) => state + length);
  }, []);
  const handleDecreaseContentPress = useCallback((length: number) => {
    setCount((state) => Math.max(state - length, 0));
  }, []);

  const contentContainerStyle = useMemo(
    () => ({
      ...styles.contentContainerStyle,
      paddingBottom: 10,
    }),
    []
  );

  const emojiContainerStyle = useMemo(
    () => ({
      ...styles.emojiContainer,
      height: 55 * count,
    }),
    [count]
  );

  useEffect(() => {
    setSift([
      skupstinaItems.length - (count - 1) <= 0 ? 0 : skupstinaItems.length - (count - 1),
      statusItems.length - (count - 2) <= 0 ? 0 : statusItems.length - (count - 2),
    ]);
  }, []);

  const { nalozi, prostori, setNalozi } = useStore();

  const [openSkupstina, setOpenSkupstina] = useState(false);
  const [skupstinaItems, setSkupstinaItems] = useState<{ value: string; label: string }[]>(
    prostori
      .filter((obj, index) => {
        return (
          index === prostori.findIndex((o) => obj.skupstine_stanara_id === o.skupstine_stanara_id)
        );
      })
      .map((prostor) => {
        return { value: prostor.skupstine_stanara_id, label: prostor.adresa };
      })
  );

  const [openStatus, setOpenStatus] = useState(false);
  const [statusItems, setStatusItems] = useState([
    { value: '13', label: 'NOVI NALOG' },
    { value: '22', label: 'PROSLEĐEN' },
    { value: '23', label: 'ZAVRŠEN' },
    { value: '90', label: 'ZATVOREN' },
  ]);

  const renderBackdrop = useCallback(
    (props: any) => <BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props} />,
    []
  );

  // useEffect(() => {
  //   // only needed for Android because
  //   // keyboardBehavior="extend" is not working properly
  //   // on Android, it leaves a gap between the keyboard and the bottom sheet
  //   // when the keyboard is visible
  //   const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
  //     console.log(Keyboard);

  //     if (Platform.OS === 'android') {
  //       console.log(ref);
  //       // ref!.current?.snapToIndex(1);
  //     }
  //   });
  //   return () => {
  //     showSubscription.remove();
  //   };
  // }, []);

  return (
    <BottomSheetView style={contentContainerStyle}>
      <View style={emojiContainerStyle}>
        <View style={{ zIndex: 20000, marginTop: 5 }}>
          <DropDownPicker
            key={'skupstina'}
            placeholder="IZABERI SKUPŠINU"
            open={openSkupstina}
            value={selectedSkupstina}
            items={skupstinaItems}
            setOpen={setOpenSkupstina}
            setValue={setSelectedSkupstina}
            setItems={setSkupstinaItems}
            theme="DARK"
            multiple={false}
            style={{ height: 50 }}
            listItemContainerStyle={{ height: 55 }}
            maxHeight={skupstinaItems.length * 55}
            onSelectItem={() => {
              handleDecreaseContentPress(sift![0]);
            }}
            onPress={() => {
              if (!openSkupstina) {
                handleIncreaseContentPress(sift![0]);
              } else handleDecreaseContentPress(sift![0]);
            }}
          />
        </View>
        <View style={{ marginTop: 5 }}>
          <DropDownPicker
            key={'status'}
            placeholder="IZABERI STATUS"
            open={openStatus}
            value={selectedStatus}
            items={statusItems}
            setOpen={setOpenStatus}
            setValue={setSelectedStatus}
            setItems={setStatusItems}
            theme="DARK"
            multiple={false}
            dropDownDirection="BOTTOM"
            style={{ height: 50 }}
            listItemContainerStyle={{ height: 55 }}
            maxHeight={statusItems.length * 55}
            onSelectItem={() => {
              handleDecreaseContentPress(sift![1]);
            }}
            onPress={() => {
              if (!openStatus) {
                handleIncreaseContentPress(sift![1]);
              } else handleDecreaseContentPress(sift![1]);
            }}
          />
        </View>
        <BottomSheetTextInput
          className="font-pregular w-full rounded-xl bg-[#292d3e] p-2 pl-3 text-[#bfc7d5]"
          placeholder="KO JE RADIO"
          placeholderTextColor={'#bfc7d5'}
          keyboardType="default"
          value={search}
          style={{ marginTop: 5, height: 50 }}
          onChangeText={(text) => setSearch(text)}
        />
        <Button
          style={{
            marginTop: 5,
            backgroundColor: '#292d3e',
            borderRadius: 10,
            height: 50,
            justifyContent: 'center',
          }}
          textColor="#bfc7d5"
          onPress={() => setOpenDate(true)}
          uppercase={false}
          mode="contained">
          DATUM: {date.startDate == undefined ? 'OD' : date.startDate?.toLocaleDateString('fr-CH')}{' '}
          - {date.endDate == undefined ? 'DO' : date.endDate?.toLocaleDateString('fr-CH')}
        </Button>
        <Button
          style={{
            marginTop: 5,
            backgroundColor: '#292d3e',
            borderRadius: 10,
            height: 50,
            justifyContent: 'center',
          }}
          textColor="#bfc7d5"
          onPress={() => {
            ref!.current.forceClose();

            loadData();
          }}
          uppercase={false}
          mode="contained">
          Pretraga
        </Button>
      </View>
    </BottomSheetView>
    // </BottomSheet>
  );
});

const styles = StyleSheet.create({
  textInput: {
    fontFamily: 'Poppins-Regular',
    alignSelf: 'stretch',
    marginHorizontal: 12,
    marginBottom: 20,
    padding: 4,
    borderRadius: 5,
    minHeight: 60,
    borderWidth: 1,
  },
  container: {
    flex: 1,
    padding: 24,
  },
  contentContainerStyle: {
    paddingTop: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emojiContainer: {
    width: '80%',
  },
});

export default NaloziCustomBottomSheet;

bottom sheet call

import DialogRacunSkeleton from '@/components/skeletons/DialogRacunSkeleton';
import { Ionicons } from '@expo/vector-icons';
import { FlashList } from '@shopify/flash-list';
import React, { useCallback, useRef, useState } from 'react';
import {
  Dimensions,
  Text,
  View,
  TextInput,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { Button } from 'react-native-paper';
import { DatePickerModal, tr } from 'react-native-paper-dates';
import useStore from 'providers/StoreProvider';
import { getNalozi } from '@/services/api';
import CustomCardNalog from '@/components/Cards/CustomCardNalog';
import { NalogResult } from '@/interfaces/api-result';
import { Modal } from 'components/Modal';
import NalogModal from '@/components/modals/NalogModal';
import NalogDialog from '@/components/dialogs/NalogDialog';
import NaloziCustomBottomSheet from '@/components/BottomSheets/NaloziCustomBottomSheet';
import BottomSheet, { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet';
import RBSheet from 'react-native-raw-bottom-sheet';
import NoResultsCard from '@/components/Cards/NoResultsCard';
import { router, useNavigation } from 'expo-router';

function Nalozi() {
  const navigation = useNavigation();
  const { index } = navigation.getState();

  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const renderBackdrop = useCallback(
    (props: any) => <BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props} />,
    []
  );

  const { nalozi, prostori, setNalozi } = useStore();

  const [loading, setLoading] = useState(false);

  const [selectedSkupstina, setSelectedSkupstina] = useState('');

  const [selectedStatus, setSelectedStatus] = useState('');

  const [search, setSearch] = useState('');

  // const [openDate, setOpenDate] = useState(false);
  const [date, setDate] = React.useState<{
    startDate: Date | undefined;
    endDate: Date | undefined;
  }>({
    endDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
    startDate: new Date(new Date().getFullYear(), new Date().getMonth() - 3, new Date().getDate()),
  });

  const [openDate, setOpenDate] = useState(false);

  const onDismiss = React.useCallback(() => {
    setOpenDate(false);
    bottomSheetRef.current?.present();
  }, [setOpenDate]);

  const onConfirm = React.useCallback(
    ({ startDate, endDate }: any) => {
      setOpenDate(false);
      bottomSheetRef.current?.present();

      setDate({ startDate, endDate });
    },
    [setOpenDate, setDate]
  );

  const [isModalOpen, setIsModalOpen] = useState(false);

  const [dialogVisible, setDialogVisible] = useState(false);

  const { nalog, setNalog } = useStore();

  const onSearchPress = async () => {
    const nalog = await getNalozi(
      selectedSkupstina,
      date.startDate?.toLocaleDateString('en-CA'),
      date.endDate?.toLocaleDateString('en-CA'),
      selectedStatus,
      search
    );

    setNalozi(nalog!);
  };

  const ref = useRef();
  return (
    <>
      <View className="flex items-center justify-center">
        <View className="mb-4 mt-3 h-[90%] w-full">
          {loading! ? (
            <>
              <DialogRacunSkeleton />
              <DialogRacunSkeleton />
              <DialogRacunSkeleton />
            </>
          ) : (
            <>
              {nalozi.length == 0 ? (
                <View className="h-full items-center justify-center">
                  <NoResultsCard />
                </View>
              ) : (
                <FlashList
                  data={nalozi}
                  estimatedItemSize={200}
                  renderItem={({ item }: { item: NalogResult }) => (
                    <CustomCardNalog
                      prostor={
                        prostori.find(
                          (prostor) => prostor.skupstine_stanara_id == selectedSkupstina
                        )!
                      }
                      nalog={item}
                      setIsModalOpen={setIsModalOpen}
                      setNalog={setNalog}
                      setDialogVisible={setDialogVisible}
                    />
                  )}
                />
              )}
            </>
          )}
        </View>
        <View className="h-[7%] w-full flex-row items-center justify-between bg-white px-4">
          <View className="flex h-12 w-12 items-center justify-center rounded-lg bg-buttonColor">
            <Ionicons name="home" size={30} onPress={() => router.push('(home)')} />
          </View>
          <View className="flex h-12 w-12 items-center justify-center rounded-lg bg-buttonColor">
            <Ionicons name="add" size={30} onPress={() => setIsModalOpen(true)} />
          </View>
          <View className="flex h-12 w-12 items-center justify-center rounded-lg bg-buttonColor">
            <Ionicons
              name="search"
              size={30}
              onPress={() => {
                bottomSheetRef.current?.present();
              }}
            />
          </View>
        </View>
      </View>
      <Modal isOpen={isModalOpen} id="UrlModal" withInput={true}>
        <NalogModal
          isModalOpen={isModalOpen}
          setIsModalOpen={setIsModalOpen}
          nalog={nalog}
          setNalog={setNalog}
        />
      </Modal>
      <NalogDialog visible={dialogVisible} setVisible={setDialogVisible} />
      <BottomSheetModal
        android_keyboardInputMode="adjustResize"
        keyboardBehavior="interactive"
        ref={bottomSheetRef}
        enableDynamicSizing={true}
        enablePanDownToClose={true}
        backdropComponent={renderBackdrop}>
        <NaloziCustomBottomSheet
          key={index}
          ref={bottomSheetRef}
          selectedSkupstina={selectedSkupstina}
          setSelectedSkupstina={setSelectedSkupstina}
          selectedStatus={selectedStatus}
          setSelectedStatus={setSelectedStatus}
          search={search}
          setSearch={setSearch}
          date={date}
          setOpenDate={setOpenDate}
          loadData={onSearchPress}
        />
      </BottomSheetModal>
      <DatePickerModal
        locale="en-GB"
        mode="range"
        visible={openDate}
        onDismiss={onDismiss}
        startDate={date.startDate}
        endDate={date.endDate}
        onConfirm={onConfirm}
      />
    </>
  );
}

const styles = StyleSheet.create({
  listContainer: {
    height: 'auto',
    padding: 25,
    backgroundColor: 'red',
  },
  listButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'yellow',
  },
});

export default Nalozi;

Thiết kế website giá rẻ

Danh mục

React native expo bottom sheet modal with data picker