Merge pull request #52 from andrewisen-tikab/feature

Add `DataGrid`

example/react/components/IssueList.tsx

@@ -1,46 +1,58 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Button from '@mui/material/Button';
+
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { styled } from '@mui/material/styles';
 
 import BCFViewer from '../../viewer/BCFViewer';
 import { RootState } from '../state/store';
 import { selectTopic } from '../state/bcfSlice';
 import * as BCF from '../../../src';
 
-type IssueItemProps = {
-    isSelected?: boolean;
-    topic: BCF.THREE.Topic_Three;
-    children: React.ReactNode;
-};
-function IssueItem({ children, topic, isSelected }: IssueItemProps) {
-    const dispatch = useDispatch();
-    const onClick = () => {
-        BCFViewer.setTopicCameraState(topic);
+const columns: GridColDef[] = [
+    { field: 'index', headerName: 'No.', type: 'number', width: 80 },
+    { field: 'title', headerName: 'Title', width: 200 },
+    { field: 'description', headerName: 'Description', flex: 1 },
+];
 
-        dispatch(selectTopic(topic.index));
-    };
-    return (
-        <Button variant={isSelected ? 'outlined' : 'text'} onClick={onClick}>
-            {children}
-        </Button>
-    );
-}
+const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
+    '.selected-row': { backgroundColor: theme.palette.action.selected },
+}));
 
 export default function IssueList() {
     const topics = useSelector((state: RootState) => state.bcf.topics);
     const selected = useSelector((state: RootState) => state.bcf.selectedTopic);
+    const dispatch = useDispatch();
 
-    const topicList = topics.map((input) => {
-        const topic = new BCF.THREE.Topic_Three();
-        topic.fromJSON(input);
-        const { uuid } = topic;
+    return (
+        <div style={{ height: '100%', width: '100%' }}>
+            <StyledDataGrid
+                rows={topics}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                getRowId={(row) => row.uuid}
+                onRowClick={(params) => {
+                    // Find the topic from the state
+                    const topic = topics.filter((topic) => topic.uuid === params.id)[0];
+                    if (!topic) return;
 
-        return (
-            <IssueItem key={uuid} topic={topic} isSelected={selected?.uuid === uuid}>
-                {topic.direction}
-            </IssueItem>
-        );
-    });
+                    // Convert the topic to the THREE.js version
+                    const topic3 = new BCF.THREE.Topic_Three();
+                    topic3.fromJSON(topic);
+                    BCFViewer.setTopicCameraState(topic3);
 
-    return <div>{topicList}</div>;
+                    // Finally, update the state
+                    dispatch(selectTopic(topic.index));
+                }}
+                getCellClassName={(params: any) => {
+                    return params.id === selected?.uuid ? 'selected-row' : '';
+                }}
+            />
+        </div>
+    );
 }

package.json

@@ -26,6 +26,7 @@
         "@fontsource/roboto": "^5.0.4",
         "@mui/icons-material": "^5.13.7",
         "@mui/material": "^5.13.7",
+        "@mui/x-data-grid": "^6.13.0",
         "@reduxjs/toolkit": "^1.9.5",
         "@types/file-saver": "^2.0.5",
         "@types/react-beautiful-dnd": "^13.1.4",

yarn.lock

@@ -240,7 +240,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.15.4":
+"@babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.22.10, @babel/runtime@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/runtime@npm:7.22.15"
   dependencies:
@@ -883,6 +883,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^5.14.7":
+  version: 5.14.8
+  resolution: "@mui/utils@npm:5.14.8"
+  dependencies:
+    "@babel/runtime": ^7.22.10
+    "@types/prop-types": ^15.7.5
+    "@types/react-is": ^18.2.1
+    prop-types: ^15.8.1
+    react-is: ^18.2.0
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+  checksum: 2fb29c9d7908a47276b4f4a31a7e76d5a7d437afe95d2c0d6cd9c07f04beea89857f763c4f5c546fe243539d9986181815bfded42e516077122ed373d11a7ebf
+  languageName: node
+  linkType: hard
+
+"@mui/x-data-grid@npm:^6.13.0":
+  version: 6.13.0
+  resolution: "@mui/x-data-grid@npm:6.13.0"
+  dependencies:
+    "@babel/runtime": ^7.22.15
+    "@mui/utils": ^5.14.7
+    clsx: ^2.0.0
+    prop-types: ^15.8.1
+    reselect: ^4.1.8
+  peerDependencies:
+    "@mui/material": ^5.4.1
+    "@mui/system": ^5.4.1
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: 756d1b6bdccff60e209b4970ed3e74825377dba91764abfc7aa5084c33abaa37b4874c05bbfdafe13f3f191a4194723b0bbfb9b02f00cf677ecd8ca782af57f0
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/semver-v6@npm:^6.3.3":
   version: 6.3.3
   resolution: "@nicolo-ribaudo/semver-v6@npm:6.3.3"
@@ -1571,6 +1604,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "clsx@npm:2.0.0"
+  checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -3527,6 +3567,7 @@ __metadata:
     "@fontsource/roboto": ^5.0.4
     "@mui/icons-material": ^5.13.7
     "@mui/material": ^5.13.7
+    "@mui/x-data-grid": ^6.13.0
     "@reduxjs/toolkit": ^1.9.5
     "@types/file-saver": ^2.0.5
     "@types/react-beautiful-dnd": ^13.1.4