Merge pull request #572 from PolymathNetwork/fix/dividends-list-overflow

Fix/dividends list overflow

Author: RafaelVidaurre

packages/new-polymath-issuer/src/components/CheckpointList/Container.tsx

@@ -125,6 +125,7 @@ export class CheckpointListContainerBase extends Component<Props> {
 
                 return (
                   <CheckpointListPresenter
+                    hasDividends={!!Object.keys(dividendsData).length}
                     allDividendsCompleted={allDividendsCompleted}
                     checkpoints={sortedCheckpoints}
                     securityTokenSymbol={securityTokenSymbol}

packages/new-polymath-issuer/src/components/CheckpointList/Presenter.tsx

@@ -20,6 +20,7 @@ export interface Props {
   securityTokenSymbol: string;
   downloadOwnershipList: (checkpoint: types.CheckpointEntity) => void;
   allDividendsCompleted: boolean;
+  hasDividends: boolean;
   loading?: boolean;
 }
 
@@ -28,6 +29,7 @@ export const CheckpointListPresenter = ({
   securityTokenSymbol,
   downloadOwnershipList,
   allDividendsCompleted,
+  hasDividends,
   loading,
 }: Props) => {
   const checkpointsByYear = groupBy(checkpoints, checkpoint =>
@@ -95,6 +97,7 @@ export const CheckpointListPresenter = ({
                               />
                             </sc.ProgressIndicator>
                             <DividendList
+                              hasDividends={hasDividends}
                               allDividendsCompleted={allDividendsCompleted}
                               checkpointIndex={checkpoint.index}
                               securityTokenSymbol={securityTokenSymbol}

packages/new-polymath-issuer/src/components/DividendList/Container.tsx

@@ -11,6 +11,7 @@ export interface Props {
   securityTokenSymbol: string;
   checkpointIndex: number;
   allDividendsCompleted: boolean;
+  hasDividends: boolean;
 }
 
 export class DividendListContainerBase extends Component<Props> {
@@ -19,6 +20,7 @@ export class DividendListContainerBase extends Component<Props> {
       securityTokenSymbol,
       checkpointIndex,
       allDividendsCompleted,
+      hasDividends,
     } = this.props;
     return (
       <DataFetcher
@@ -37,6 +39,7 @@ export class DividendListContainerBase extends Component<Props> {
           return (
             <DividendListPresenter
               securityTokenSymbol={securityTokenSymbol}
+              hasDividends={hasDividends}
               dividends={sortedDividends}
               checkpointIndex={checkpointIndex}
               allDividendsCompleted={allDividendsCompleted}

packages/new-polymath-issuer/src/components/DividendList/Presenter.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, FC } from 'react';
 import {
   List,
+  Flex,
   ButtonLink,
   Button,
   icons,
@@ -12,6 +13,7 @@ import { DividendCard } from '~/components/DividendCard';
 import * as sc from './styles';
 
 export interface Props {
+  hasDividends: boolean;
   dividends: types.DividendEntity[];
   securityTokenSymbol: string;
   checkpointIndex: number;
@@ -23,55 +25,26 @@ export const DividendListPresenter: FC<Props> = ({
   dividends,
   checkpointIndex,
   allDividendsCompleted,
+  hasDividends,
 }) => {
-  const newDividendUrl = !allDividendsCompleted
-    ? '#'
-    : `/securityTokens/${securityTokenSymbol}/checkpoints/${checkpointIndex}/dividends/new`;
+  const NewDividendButton = hasDividends
+    ? sc.NewDividendButton
+    : sc.PlaceholderButton;
+
   return (
-    <List>
-      {dividends.length ? (
-        <Fragment>
-          {dividends.map(dividend => (
-            <li key={dividend.uid}>
-              <DividendCard
-                dividend={dividend}
-                checkpointIndex={checkpointIndex}
-                securityTokenSymbol={securityTokenSymbol}
-              />
-            </li>
-          ))}
-          <span>
-            <sc.NewDividendButton
-              as={allDividendsCompleted ? ButtonLink : Button}
-              disabled={!allDividendsCompleted}
-              href={newDividendUrl}
-              variant="ghost"
-              iconPosition="top"
-            >
-              <IconOutlined
-                Asset={icons.SvgPlus}
-                width={25}
-                height={25}
-                scale={0.8}
-              />
-              Add new <br /> dividend <br /> distribution
-            </sc.NewDividendButton>
-            {!allDividendsCompleted && (
-              <TooltipPrimary placement="top-start">
-                You can add a new dividend distribution if the previous
-                distribution has been completed/expired.
-              </TooltipPrimary>
-            )}
-          </span>
-        </Fragment>
-      ) : (
+    <Fragment>
+      <Flex height={370} alignSelf="flex-start">
         <span>
-          <sc.PlaceholderButton
+          <NewDividendButton
             as={allDividendsCompleted ? ButtonLink : Button}
-            href={newDividendUrl}
+            disabled={!allDividendsCompleted}
+            href={
+              allDividendsCompleted
+                ? `/securityTokens/${securityTokenSymbol}/checkpoints/${checkpointIndex}/dividends/new`
+                : undefined
+            }
             variant="ghost"
             iconPosition="top"
-            disabled={!allDividendsCompleted}
           >
             <IconOutlined
               Asset={icons.SvgPlus}
@@ -80,15 +53,30 @@ export const DividendListPresenter: FC<Props> = ({
               scale={0.8}
             />
             Add new <br /> dividend <br /> distribution
-          </sc.PlaceholderButton>
+          </NewDividendButton>
           {!allDividendsCompleted && (
             <TooltipPrimary placement="top-start">
               You can add a new dividend distribution if the previous
               distribution has been completed/expired.
             </TooltipPrimary>
           )}
         </span>
-      )}
-    </List>
+      </Flex>
+      <List
+        vertical
+        width="100%"
+        gridTemplateColumns="repeat(auto-fill, 300px)"
+      >
+        {dividends.map(dividend => (
+          <li key={dividend.uid}>
+            <DividendCard
+              dividend={dividend}
+              checkpointIndex={checkpointIndex}
+              securityTokenSymbol={securityTokenSymbol}
+            />
+          </li>
+        ))}
+      </List>
+    </Fragment>
   );
 };

packages/new-polymath-issuer/src/components/DividendList/styles.ts

@@ -13,6 +13,12 @@ export const NewDividendButtonBase: NewDividendButtonType = styled(ButtonLink)`
   align-items: center;
   color: ${({ theme }) => theme.colors.primary};
 
+  &:not([disabled]):hover {
+    opacity: 0.5;
+    background-color: transparent;
+    color: ${({ theme }) => theme.colors.primary};
+  }
+
   &[disabled]:hover {
     color: ${({ theme }) => theme.colors.primary};
   }
@@ -39,13 +45,10 @@ export const PlaceholderButtonBase: PlaceholderButtonType = styled(
   height: 370px;
   border: 1px dashed ${({ theme }) => theme.colors.primary};
   border-radius: 5px;
-
-  &:hover {
-    color: ${({ theme }) => theme.colors.primary};
-  }
+  color: ${({ theme }) => theme.colors.primary};
 
   &:not([disabled]):hover {
-    background-color: transparent;
+    opacity: 1;
     border: 2px solid ${({ theme }) => theme.colors.primary};
   }
 `;

packages/new-polymath-ui/src/components/List/List.tsx

@@ -12,12 +12,14 @@ interface Props extends FlexProps {
 export const List = styled(Grid)<Props>`
   ${ulReset}
   grid-auto-flow: ${({ vertical }) => (vertical ? 'row' : 'column')};
+  grid-auto-rows: ${({ vertical }) =>
+    vertical && 'minmax(min-content, max-content)'};
+  grid-auto-columns: ${({ vertical }) =>
+    !vertical && 'minmax(min-content, max-content)'};
 `;
 
 List.defaultProps = {
   ...Grid.defaultProps,
   as: 'ul',
   alignItems: 'center',
-  gridAutoRows: 'minmax(min-content, max-content)',
-  gridAutoColumns: 'minmax(min-content, max-content)',
 };