fix(client): opening list bulk actions

Jozwiaczek · Apr 12, 2021 · fc41317 · fc41317
1 parent 2bfae0a
commit fc41317
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 63 deletions.
diff --git a/packages/client/src/elements/lists/DetailedList/DetailedList.styled.ts b/packages/client/src/elements/lists/DetailedList/DetailedList.styled.ts
@@ -10,8 +10,7 @@ export const StyledCard = styled(Card)<{ isBulkActionsOpen: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  position: relative;
-  transition: border-radius 200ms ease-in-out;
+  transition: border-radius 150ms;
   border-radius: ${({
     isBulkActionsOpen,
     theme: {
@@ -88,6 +87,12 @@ export const TableBody = styled.tbody`
   }
 `;
 
+export const ListWrapper = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+
 export const BulkActionsWrapper = styled.div<{ isOpen: boolean }>`
   position: absolute;
   display: flex;
@@ -99,7 +104,7 @@ export const BulkActionsWrapper = styled.div<{ isOpen: boolean }>`
   top: -50px;
   left: 0;
   right: 0;
-  transition: transform 200ms ease-in-out;
+  transition: transform 150ms;
 
   transform-origin: bottom;
   border-radius: ${({

diff --git a/packages/client/src/elements/lists/DetailedList/index.tsx b/packages/client/src/elements/lists/DetailedList/index.tsx
@@ -18,6 +18,7 @@ import {
   BulkCancelButton,
   BulkCancelWrapper,
   DeleteButton,
+  ListWrapper,
   StyledCard,
   Table,
   TableBody,
@@ -115,67 +116,69 @@ const DetailedList = ({ onRowClick, children, resource }: DetailedListProps) =>
   }, [deleteMutation, selectedRows]);
 
   return (
-    <StyledCard isBulkActionsOpen={isBulkActionsOpen}>
-      <BulkActionsWrapper isOpen={isBulkActionsOpen}>
-        <BulkCancelWrapper>
-          <BulkCancelButton onClick={unselectAllRows}>
-            <CancelIcon />
-          </BulkCancelButton>
-          {selectedRows.length}&nbsp;
-          {selectedRows.length > 1 ? t('lists.detailedList.items') : t('lists.detailedList.item')}
-        </BulkCancelWrapper>
-        <DeleteButton color="red" onClick={removeSelectedItems}>
-          <TrashIcon />
-          {t('actions.delete')}
-        </DeleteButton>
-      </BulkActionsWrapper>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeaderCheckbox>
-              <Checkbox onChange={onMarkAllRows} checked={areAllRowsSelected} />
-            </TableHeaderCheckbox>
-            {headers.map(({ label, source }) => (
-              <TableHeader key={label || source}>
-                {label || t(`baseApiFields.${source}` as never)}
-              </TableHeader>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {slicedRecords.map((record) => (
-            <TableRow key={record.id}>
-              <TableCellCheckbox>
-                <Checkbox
-                  onChange={() => onMarkRow(record.id)}
-                  checked={checkIsRowSelected(record.id)}
-                />
-              </TableCellCheckbox>
-              {Children.map(children, (child) => {
-                if (!isValidElement(child)) {
-                  return null;
-                }
-
-                const { source } = child.props;
-
-                return (
-                  <TableCell onClick={onRowClick} key={`${record.id}-${source}`}>
-                    {cloneElement(child, { record })}
-                  </TableCell>
-                );
-              })}
+    <ListWrapper>
+      <StyledCard isBulkActionsOpen={isBulkActionsOpen}>
+        <BulkActionsWrapper isOpen={isBulkActionsOpen}>
+          <BulkCancelWrapper>
+            <BulkCancelButton onClick={unselectAllRows}>
+              <CancelIcon />
+            </BulkCancelButton>
+            {selectedRows.length}&nbsp;
+            {selectedRows.length > 1 ? t('lists.detailedList.items') : t('lists.detailedList.item')}
+          </BulkCancelWrapper>
+          <DeleteButton color="red" onClick={removeSelectedItems}>
+            <TrashIcon />
+            {t('actions.delete')}
+          </DeleteButton>
+        </BulkActionsWrapper>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCheckbox>
+                <Checkbox onChange={onMarkAllRows} checked={areAllRowsSelected} />
+              </TableHeaderCheckbox>
+              {headers.map(({ label, source }) => (
+                <TableHeader key={label || source}>
+                  {label || t(`baseApiFields.${source}` as never)}
+                </TableHeader>
+              ))}
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <Pagination
-        perPage={perPage}
-        setPerPage={setPerPage}
-        currentPage={currentPage}
-        setCurrentPage={setCurrentPage}
-        totalRecords={totalRecords}
-      />
-    </StyledCard>
+          </TableHead>
+          <TableBody>
+            {slicedRecords.map((record) => (
+              <TableRow key={record.id}>
+                <TableCellCheckbox>
+                  <Checkbox
+                    onChange={() => onMarkRow(record.id)}
+                    checked={checkIsRowSelected(record.id)}
+                  />
+                </TableCellCheckbox>
+                {Children.map(children, (child) => {
+                  if (!isValidElement(child)) {
+                    return null;
+                  }
+
+                  const { source } = child.props;
+
+                  return (
+                    <TableCell onClick={onRowClick} key={`${record.id}-${source}`}>
+                      {cloneElement(child, { record })}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Pagination
+          perPage={perPage}
+          setPerPage={setPerPage}
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
+          totalRecords={totalRecords}
+        />
+      </StyledCard>
+    </ListWrapper>
   );
 };