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>
2020-05-15 13:46:20 +02:00
1 parent 056f56f5b4
commit f4b078912a
@@ -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;