frontend/src/components/app/map/groups/RoomGroup.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import React from "react";
import { Group } from "react-konva";
import GrayContainer from "../../../../containers/app/map/GrayContainer";
import TileContainer from "../../../../containers/app/map/TileContainer";
import WallContainer from "../../../../containers/app/map/WallContainer";
import Shapes from "../../../../shapes/index";

const RoomGroup = ({
  room,
  interactionLevel,
  currentRoomInConstruction,
  onClick
}) => {
  if (currentRoomInConstruction === room.id) {
    return (
      <Group onClick={onClick}>
        {room.tileIds.map(tileId => (
          <TileContainer key={tileId} tileId={tileId} newTile={true} />
        ))}
      </Group>
    );
  }

  return (
    <Group onClick={onClick}>
      {(() => {
        if (
          (interactionLevel.mode === "RACK" ||
            interactionLevel.mode === "MACHINE") &&
          interactionLevel.roomId === room.id
        ) {
          return [
            room.tileIds
              .filter(tileId => tileId !== interactionLevel.tileId)
              .map(tileId => <TileContainer key={tileId} tileId={tileId} />),
            <GrayContainer key={-1} />,
            room.tileIds
              .filter(tileId => tileId === interactionLevel.tileId)
              .map(tileId => <TileContainer key={tileId} tileId={tileId} />)
          ];
        } else {
          return room.tileIds.map(tileId => (
            <TileContainer key={tileId} tileId={tileId} />
          ));
        }
      })()}
      <WallContainer roomId={room.id} />
    </Group>
  );
};

RoomGroup.propTypes = {
  room: Shapes.Room
};

export default RoomGroup;