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,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonGroup, Icon, IconButton, Typography } from '@ohif/ui';
+
+<<<<<<< HEAD:platform/ui/src/views/StudyList/components/StudyListPagination.js
+const StudyListPagination = (props) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+=======
+const StudyListPagination = ({
+  onChangePage,
+  currentPage,
+  perPage,
+  onChangePerPage,
+}) => {
+>>>>>>> d5a288db1... feat: StudyListTable, ExpandedRow, API definitions (#1579):platform/ui/src/components/StudyListPagination/StudyListPagination.js
+  const navigateToPage = (page) => {
+    const toPage = page < 1 ? 1 : page;
+    onChangePage(toPage);
+  };
+
+  return (
+    <div className="bg-black py-10">
+      <div className="container m-auto relative px-8">
+        <div className="flex justify-between">
+          <div className="flex items-center">
+            <div className="relative mr-3">
+              <select
+<<<<<<< HEAD:platform/ui/src/views/StudyList/components/StudyListPagination.js
+                defaultValue="25"
+                className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+=======
+                defaultValue={perPage}
+                className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+>>>>>>> d5a288db1... feat: StudyListTable, ExpandedRow, API definitions (#1579):platform/ui/src/components/StudyListPagination/StudyListPagination.js
+                style={{ height: 28 }}
+                onChange={(e) => onChangePerPage(e.target.value)}
+              >
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+                <Icon
+                  name="arrow-down"
+                  className="text-white"
+                  style={{ width: 6 }}
+                />
+              </div>
+            </div>
+            <Typography className="text-base opacity-60">
+              Results per page
+            </Typography>
+          </div>
+          <div className="">
+            <div className="flex items-center">
+              <Typography className="opacity-60 mr-4 text-base">
+                Page {currentPage}
+              </Typography>
+              <ButtonGroup color="primary">
+                <IconButton
+                  size="small"
+                  className="border-common-active px-4 py-2 text-base"
+                  style={{ padding: '3px 12px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(1)}
+                >
+                  <>{`<<`}</>
+                </IconButton>
+                <Button
+                  size="small"
+                  className="border-common-active py-2 text-base"
+                  style={{ padding: '3px 8px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(currentPage - 1)}
+                >{`< Previous`}</Button>
+                <Button
+                  size="small"
+                  className="border-common-active py-2 text-base"
+                  style={{ padding: '3px 20px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(currentPage + 1)}
+                >
+                  {`Next >`}
+                </Button>
+              </ButtonGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+StudyListPagination.propTypes = {
+  onChangePage: PropTypes.func.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  perPage: PropTypes.number.isRequired,
+  onChangePerPage: PropTypes.func.isRequired,
+};
+
+export default StudyListPagination;
@@ -0,0 +1,45 @@
+---
+name: Study List Pagination
+menu: Components
+route: components/studyListPagination
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyListPagination } from '@ohif/ui';
+
+# StudyListPagination
+
+## Import
+
+```javascript
+import { StudyListPagination } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [perPage, setPerPage] = useState(25);
+    const onChangePage = (page) => {
+      setCurrentPage(page);
+    };
+    const onChangePerPage = (perPage) => {
+      setPerPage(perPage);
+      setCurrentPage(1);
+    };
+    return (
+      <StudyListPagination
+        onChangePage={onChangePage}
+        onChangePerPage={onChangePerPage}
+        currentPage={currentPage}
+        perPage={perPage}
+      />
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyListPagination} />
@@ -0,0 +1,3 @@
+import StudyListPagination from './StudyListPagination';
+
+export default StudyListPagination;