feat: StudyListTable, ExpandedRow, API definitions (#1579)

* feat: StudyListTable Refactor

* feat: StudyListTable + Props Refactor

* fix expanded rows handler

* update and fix study list doc page

* fix date format

* use moment to format date

* expose new components

* fix study list expanded row

* Export and Create doc page for Pagination

* API Definition, Export and Doc page for StudyListTable

* StudyListTableRow

* use real example to mount study list

* move files

* temporary change study list (viewer) structure

* fix studyList

* remove unused files

* remove file

* remove unused package

* PR fixes

* Remove console.dir

Co-authored-by: Gustavo Lelis <galelis@gmail.com>

platform/ui/src/components/StudyListTable/StudyListTable.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import StudyListTableRow from './StudyListTableRow';
+
+const StudyListTable = ({ tableDataSource }) => {
+  return (
+    <>
+      <div className="bg-black">
+        <div className="container m-auto relative">
+          <table className="w-full text-white">
+            <tbody>
+              {tableDataSource.map((tableData, i) => {
+                return <StudyListTableRow tableData={tableData} key={i} />;
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+StudyListTable.propTypes = {
+  tableDataSource: PropTypes.arrayOf(
+    PropTypes.shape({
+      row: PropTypes.array.isRequired,
+      expandedContent: PropTypes.node.isRequired,
+      onClickRow: PropTypes.func.isRequired,
+      isExpanded: PropTypes.bool.isRequired,
+    })
+  ),
+};
+
+export default StudyListTable;

platform/ui/src/components/StudyListTable/StudyListTable.mdx

@@ -0,0 +1,62 @@
+---
+name: Study List Table
+menu: Components
+route: components/studyListTable
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyListTable } from '@ohif/ui';
+
+# StudyListTable
+
+This component is used to display a studies list.
+
+## Import
+
+```javascript
+import { StudyListTable } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const studies = new Array(10).fill('');
+    const [expandedRows, setExpandedRows] = useState([]);
+    const tableDataSource = studies.map((study, key) => {
+      const rowKey = key + 1;
+      const isExpanded = expandedRows.some((k) => k === rowKey);
+      return {
+        row: [
+          { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
+          { key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
+          { key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
+          { key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
+        ],
+        expandedContent: (
+          <td className="w-full p-8">
+            Custom expanded content for row {rowKey}
+          </td>
+        ),
+        onClickRow: () =>
+          setExpandedRows((rows) =>
+            isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
+          ),
+        isExpanded,
+      };
+    });
+    return (
+      <div className="py-4">
+        <StudyListTable
+          tableDataSource={tableDataSource}
+          numOfStudies={studies.length}
+        />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyListTable} />

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const StudyListTableRow = (props) => {
+  const { tableData } = props;
+  const { row, expandedContent, onClickRow, isExpanded } = tableData;
+  return (
+    <>
+      <tr>
+        <td
+          className={classnames('border-0 p-0', {
+            'border-b border-custom-violetPale bg-custom-navyDark': isExpanded,
+          })}
+        >
+          <div
+            className={classnames('w-full transition duration-300', {
+              'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isExpanded,
+            })}
+          >
+            <table className={classnames('w-full p-4')}>
+              <tbody>
+                <tr
+                  className={classnames(
+                    'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
+                    {
+                      'bg-custom-navyDark': !isExpanded,
+                    },
+                    { 'bg-custom-navy': isExpanded }
+                  )}
+                  onClick={onClickRow}
+                >
+                  {row.map((cell) => {
+                    const { content, gridCol, name } = cell;
+
+                    return (
+                      <td
+                        key={name}
+                        className={classnames(
+                          'px-4 py-2 text-base',
+                          { 'border-b border-custom-violetPale': !isExpanded },
+                          `w-${gridCol}/24` || ''
+                        )}
+                      >
+                        <div className="flex flex-row items-center pl-1">
+                          {content}
+                        </div>
+                      </td>
+                    );
+                  })}
+                </tr>
+                {isExpanded && (
+                  <tr
+                    className={classnames(
+                      'w-full bg-black max-h-0 overflow-hidden'
+                    )}
+                  >
+                    <td colSpan={row.length}>{expandedContent}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+};
+
+StudyListTableRow.propTypes = {
+  tableData: PropTypes.shape({
+    row: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        content: PropTypes.node.isRequired,
+        gridCol: PropTypes.number.isRequired,
+      })
+    ).isRequired,
+    expandedContent: PropTypes.node.isRequired,
+    onClickRow: PropTypes.func.isRequired,
+    isExpanded: PropTypes.bool.isRequired,
+  }),
+};
+
+export default StudyListTableRow;

platform/ui/src/components/StudyListTable/index.js

@@ -0,0 +1,3 @@
+import StudyListTable from './StudyListTable';
+
+export default StudyListTable;