Add Objects Sidebar

src/react-components/room/ObjectsSidebar.js

@@ -0,0 +1,75 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./ObjectsSidebar.scss";
+import { Sidebar, CloseButton } from "../sidebar/Sidebar";
+import { List, ButtonListItem } from "../layout/List";
+import { ReactComponent as ObjectIcon } from "../icons/Object.svg";
+import { ReactComponent as ImageIcon } from "../icons/Image.svg";
+import { ReactComponent as VideoIcon } from "../icons/Video.svg";
+import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
+import { ReactComponent as TextDocumentIcon } from "../icons/TextDocument.svg";
+
+function getObjectIcon(type) {
+  switch (type) {
+    case "video":
+      return VideoIcon;
+    case "audio":
+      return AudioIcon;
+    case "image":
+      return ImageIcon;
+    case "pdf":
+      return TextDocumentIcon;
+    case "model":
+    default:
+      return ObjectIcon;
+  }
+}
+
+const objectTypeNames = {
+  video: "Video",
+  audio: "Audio",
+  image: "Image",
+  pdf: "PDF",
+  model: "Model",
+  default: "Object"
+};
+
+function getLabel(object) {
+  return `${objectTypeNames[object.type] || objectTypeNames.default}: ${object.name}`;
+}
+
+export function ObjectsSidebar({ objects, onSelectObject, onClose }) {
+  return (
+    <Sidebar title={`Objects (${objects.length})`} beforeTitle={<CloseButton onClick={onClose} />}>
+      <List>
+        {objects.map(object => {
+          const ObjectTypeIcon = getObjectIcon(object.type);
+
+          return (
+            <ButtonListItem
+              className={styles.object}
+              key={object.id}
+              type="button"
+              aria-label={getLabel(object)}
+              onClick={e => onSelectObject(object, e)}
+            >
+              <ObjectTypeIcon />
+              <p>{object.name}</p>
+            </ButtonListItem>
+          );
+        })}
+      </List>
+    </Sidebar>
+  );
+}
+
+ObjectsSidebar.propTypes = {
+  objects: PropTypes.array,
+  onSelectObject: PropTypes.func,
+  onClose: PropTypes.func
+};
+
+ObjectsSidebar.defaultProps = {
+  objects: [],
+  onSelectObject: () => {}
+};

src/react-components/room/ObjectsSidebar.scss

@@ -0,0 +1,13 @@
+@use "../styles/theme.scss";
+
+:local(.object) {
+  font-size: theme.$font-size-sm;
+
+  & > * {
+    margin-right: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

src/react-components/room/ObjectsSidebar.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { RoomLayout } from "../layout/RoomLayout";
+import { ObjectsSidebar } from "./ObjectsSidebar";
+
+export default {
+  title: "ObjectsSidebar"
+};
+
+const objects = [
+  {
+    id: "1",
+    name: "Campfire",
+    type: "model"
+  },
+  {
+    id: "3",
+    name: "longcat.jpg",
+    type: "image"
+  },
+  {
+    id: "4",
+    name: "Quack.mp3",
+    type: "audio"
+  },
+  {
+    id: "5",
+    name: "Lofi Hip Hop - beats to test code to",
+    type: "video"
+  },
+  {
+    id: "6",
+    name: "VRML 1.0 Specification",
+    type: "pdf"
+  }
+];
+
+export const Base = () => <RoomLayout sidebar={<ObjectsSidebar objects={objects} />} />;
+
+Base.parameters = {
+  layout: "fullscreen"
+};