Revize 5cee436e

re #10871: PlanViewPage: fullScreenMode

src/components/plan/CastlePlanView.tsx

@@ -10 +10 @@
 import { PlanImage, Room } from '../../types/plan';
 import Svg, { SvgXml } from 'react-native-svg';
 
-const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room }) => {
+const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean }) => {
 
     const DEFAULT_SCALE = 1
     const MIN_SCALE = 0.95
 
     const MAP_VIEW_SIZE = {
-        height : 400,
-        width : "100%"
+        height: 500,
+        width: "100%"
     }
 
-    const { mapImage, roomList, selectedRoom } = props;
+    const { mapImage, roomList, selectedRoom, fullScreenMode } = props;
 
     const panRef = useRef<React.ReactElement>();
     const pinchRef = useRef<React.ReactElement>();
@@ -68 +68 @@
         };
     });
 
+    console.log(fullScreenMode)
+
+    console.log(Dimensions.get('window').height)
+    console.log(Dimensions.get('window').width)
+
     return (
         // container
-        <Box width={MAP_VIEW_SIZE.width} height={MAP_VIEW_SIZE.height} style={{ borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }}>
+        <Box
+            width={!fullScreenMode ? MAP_VIEW_SIZE.width : Dimensions.get('window').width - 5}
+            height={!fullScreenMode ? MAP_VIEW_SIZE.height : Dimensions.get('window').height - 62.5}
+            // @ts-ignore
+            style={
+                fullScreenMode ? {
+                    marginTop: 2.5,
+                    marginLeft: 2.5,
+                    marginRight: 2.5,
+                }
+                    :
+                    { borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }
+            }>
             <PinchGestureHandler
                 ref={pinchRef}
                 // @ts-ignore

src/pages/PlanViewPage.tsx

@@ -52 +52 @@
   const floorMapImage = useSelector((state: RootState) => state.planViewState.mapImage)
   const floorMapImageLoading = useSelector((state: RootState) => state.planViewState.mapImageLoading)
 
+  // todo
+  const castlePlanFullScreenMode = false
+
   const toast = useToast();
 
   useEffect(() => {
@@ -178 +181 @@
   }
 
   return (
-    <Center m={2} mr={0} mb={6} flex={1}>
-
-      <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
-        <VStack space={1} mr={4}>
-
-          {/* Selection */}
-
-          {
-            floorListLoading ?
-              <LoadingBox text="Floor list loading"></LoadingBox>
-              :
-              <>
-                {/* Floor */}
-                <Select
-                  mt={2.5}
-                  ml={2.5}
-                  mr={2.5}
-
-                  placeholder={"Floor"}
-                  selectedValue={selectedFloor?.id}
-                  onValueChange={selectFloor}
-                  variant="rounded"
-                >
-                  {floorList.map((floor, index) => {
-                    return (
-                      <Select.Item value={floor.id} label={floor.label} />
-                    );
-                  })}
-                </Select>
-
-                {/* Room */}
-                {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
-                  < Select
-                    mt={2.5}
-                    ml={2.5}
-                    mr={2.5}
-
-                    placeholder={"Room"}
-                    selectedValue={selectedRoom?.id.toString()}
-                    onValueChange={(value: string) => selectRoom(parseInt(value))}
-                    variant="rounded"
-                  >
-                    {selectedFloor?.roomList?.map((room, index) => {
-                      if (room.room_list) {
-                        return (
-                          <Select.Item value={room.id.toString()} label={room.label} />
-                        );
-                      }
-                    })}
-                  </Select>
-                }
-
-                {/* Place */}
-                {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
+    <Box flex={1}>
+      {!castlePlanFullScreenMode ? (
+        <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
+          <VStack space={1} mr={4}>
+
+            {/* Selection */}
+
+            {
+              floorListLoading ?
+                <LoadingBox text="Floor list loading"></LoadingBox>
+                :
+                <>
+                  {/* Floor */}
                   <Select
                     mt={2.5}
                     ml={2.5}
                     mr={2.5}
 
-                    placeholder={"Place"}
-                    selectedValue={selectedPlace?.id.toString()}
-                    onValueChange={(value: string) => selectPlace(parseInt(value))}
+                    placeholder={"Floor"}
+                    selectedValue={selectedFloor?.id}
+                    onValueChange={selectFloor}
                     variant="rounded"
                   >
-                    {selectedRoom?.places?.map((place, index) => {
+                    {floorList.map((floor, index) => {
                       return (
-                        <Select.Item value={place.id.toString()} label={place.label} />
+                        <Select.Item value={floor.id} label={floor.label} />
                       );
                     })}
                   </Select>
-                }
-
-                {/* Filter */}
-                <Flex direction="row" alignItems="center" justify="flex-end"
-                  mt={2.5}
-                  ml={2.5}
-                  mr={3}
-                >
-                  <Button
-                    endIcon={
-                      <CloseIcon size="xs" />
-                    }
-                    onPress={clearForm}
-                    variant="outline"
-                    color="primary.500"
-                    borderColor="primary.100"
-                    mr={2}
-                    borderRadius={15}
-                    size={"md"}
-                  >
-                    Reset
-                  </Button>
-                  <Button
-                    onPress={() => {
-                      if (selectedRoom && !selectedPlace) {
-                        searchSubmit(selectedRoom.id)
-                      }
-                      else if (selectedRoom && selectedPlace) {
-                        searchSubmit(selectedRoom.id, selectedPlace.id)
-                      }
 
-                    }}
-                    colorScheme="primary"
-                    background={"primary.100"}
-                    variant="solid"
-                    borderRadius={15}
-                    size={"md"}
-                  >
-                    Search
-                  </Button>
-                </Flex>
-              </>
-          }
-
-          {/* Plan */}
-          {/* temporary prototype */}
-
-          {selectedFloor && !floorListLoading && (
-            floorMapImageLoading ?
-              <LoadingBox text="Loading castle plan" />
-              :
-              floorMapImage &&
-              <Box mt={2.5} ml={2.5}
-                onTouchStart={() => setIsInteractingWithCastlePlan(true)}
-                onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
-                <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
-              </Box>
-          )
-          }
-
-          {/* Item List */}
-          <>
-            {inventoriesLoading ?
-              <LoadingBox text="Loading available inventories..." />
-              :
-              <Box mt={2.5} ml={2.5}>
-                <ListView
-
-                  navigation={navigation}
-                  hideHeaderText
-
-                  inventories={inventories}
-                  numOfResults={numberOfResults}
-
-                  data={data}
-                  loadedPages={pagination ?? {}}
-                  inventoriesDataLoading={dataLoading ?? {}}
-                  handleLoadMoreItems={(inventoryName: string, cursor: number) => {
-                    dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
+                  {/* Room */}
+                  {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
+                    < Select
+                      mt={2.5}
+                      ml={2.5}
+                      mr={2.5}
+
+                      placeholder={"Room"}
+                      selectedValue={selectedRoom?.id.toString()}
+                      onValueChange={(value: string) => selectRoom(parseInt(value))}
+                      variant="rounded"
+                    >
+                      {selectedFloor?.roomList?.map((room, index) => {
+                        if (room.room_list) {
+                          return (
+                            <Select.Item value={room.id.toString()} label={room.label} />
+                          );
+                        }
+                      })}
+                    </Select>
                   }
+
+                  {/* Place */}
+                  {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
+                    <Select
+                      mt={2.5}
+                      ml={2.5}
+                      mr={2.5}
+
+                      placeholder={"Place"}
+                      selectedValue={selectedPlace?.id.toString()}
+                      onValueChange={(value: string) => selectPlace(parseInt(value))}
+                      variant="rounded"
+                    >
+                      {selectedRoom?.places?.map((place, index) => {
+                        return (
+                          <Select.Item value={place.id.toString()} label={place.label} />
+                        );
+                      })}
+                    </Select>
                   }
-                />
-              </Box>
-            }
-          </>
 
-        </VStack>
-      </ScrollView>
-    </Center>
+                  {/* Filter */}
+                  <Flex direction="row" alignItems="center" justify="flex-end"
+                    mt={2.5}
+                    ml={2.5}
+                    mr={3}
+                  >
+                    <Button
+                      endIcon={
+                        <CloseIcon size="xs" />
+                      }
+                      onPress={clearForm}
+                      variant="outline"
+                      color="primary.500"
+                      borderColor="primary.100"
+                      mr={2}
+                      borderRadius={15}
+                      size={"md"}
+                    >
+                      Reset
+                    </Button>
+                    <Button
+                      onPress={() => {
+                        if (selectedRoom && !selectedPlace) {
+                          searchSubmit(selectedRoom.id)
+                        }
+                        else if (selectedRoom && selectedPlace) {
+                          searchSubmit(selectedRoom.id, selectedPlace.id)
+                        }
+
+                      }}
+                      colorScheme="primary"
+                      background={"primary.100"}
+                      variant="solid"
+                      borderRadius={15}
+                      size={"md"}
+                    >
+                      Search
+                    </Button>
+                  </Flex>
+                </>
+            }
 
+            {/* Plan */}
+            {/* temporary prototype */}
+
+            {selectedFloor && !floorListLoading && (
+              floorMapImageLoading ?
+                <LoadingBox text="Loading castle plan" />
+                :
+                floorMapImage &&
+                <Box mt={2.5} ml={2.5}
+                  onTouchStart={() => setIsInteractingWithCastlePlan(true)}
+                  onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
+                  <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
+                </Box>
+            )
+            }
 
+            {/* Item List */}
+            <>
+              {inventoriesLoading ?
+                <LoadingBox text="Loading available inventories..." />
+                :
+                <Box mt={2.5} ml={2.5}>
+                  <ListView
+
+                    navigation={navigation}
+                    hideHeaderText
+
+                    inventories={inventories}
+                    numOfResults={numberOfResults}
+
+                    data={data}
+                    loadedPages={pagination ?? {}}
+                    inventoriesDataLoading={dataLoading ?? {}}
+                    handleLoadMoreItems={(inventoryName: string, cursor: number) => {
+                      dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
+                    }
+                    }
+                  />
+                </Box>
+              }
+            </>
+
+          </VStack>
+        </ScrollView>)
+        :
+        floorMapImageLoading ?
+          <LoadingBox text="Loading castle plan" />
+          :
+          floorMapImage && selectedFloor && 
+          <Box>
+            <CastlePlanView fullScreenMode mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
+          </Box>
+      }
+    </Box>
   );
 }