Make columns itself scrollable, fix action creation when moving card, little refactoring

client/src/components/List/ActionsPopup.jsx

@@ -18,12 +18,12 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
 
-  const handleNameEditClick = useCallback(() => {
+  const handleEditNameClick = useCallback(() => {
     onNameEdit();
     onClose();
   }, [onNameEdit, onClose]);
 
-  const handleCardAddClick = useCallback(() => {
+  const handleAddCardClick = useCallback(() => {
     onCardAdd();
     onClose();
   }, [onCardAdd, onClose]);
@@ -55,12 +55,12 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
       </Popup.Header>
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
+          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
             {t('action.editTitle', {
               context: 'title',
             })}
           </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleCardAddClick}>
+          <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
             {t('action.addCard', {
               context: 'title',
             })}

client/src/components/List/AddCard.jsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
@@ -13,22 +14,13 @@ const DEFAULT_DATA = {
   name: '',
 };
 
-const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
+const AddCard = React.memo(({ isOpened, onCreate, onClose }) => {
   const [t] = useTranslation();
-  const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
   const [selectNameFieldState, selectNameField] = useToggle();
 
   const nameField = useRef(null);
 
-  const open = useCallback(() => {
-    setIsOpened(true);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpened(false);
-  }, []);
-
   const submit = useCallback(() => {
     const cleanData = {
       ...data,
@@ -46,19 +38,6 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
     selectNameField();
   }, [onCreate, data, setData, selectNameField]);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      open,
-      close,
-    }),
-    [open, close],
-  );
-
-  const handleChildrenClick = useCallback(() => {
-    open();
-  }, [open]);
-
   const handleFieldKeyDown = useCallback(
     (event) => {
       switch (event.key) {
@@ -69,19 +48,16 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
 
           break;
         case 'Escape':
-          close();
+          onClose();
 
           break;
         default:
       }
     },
-    [close, submit],
+    [onClose, submit],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
-    close,
-  );
+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(onClose);
 
   const handleSubmit = useCallback(() => {
     submit();
@@ -97,14 +73,11 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
     nameField.current.ref.current.select();
   }, [selectNameFieldState]);
 
-  if (!isOpened) {
-    return React.cloneElement(children, {
-      onClick: handleChildrenClick,
-    });
-  }
-
   return (
-    <Form className={styles.wrapper} onSubmit={handleSubmit}>
+    <Form
+      className={classNames(styles.wrapper, !isOpened && styles.wrapperClosed)}
+      onSubmit={handleSubmit}
+    >
       <div className={styles.fieldWrapper}>
         <TextArea
           ref={nameField}
@@ -135,8 +108,9 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
 });
 
 AddCard.propTypes = {
-  children: PropTypes.element.isRequired,
+  isOpened: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
-export default React.memo(AddCard);
+export default AddCard;

client/src/components/List/AddCard.module.css

@@ -24,3 +24,7 @@
 .wrapper {
   padding-bottom: 8px !important;
 }
+
+.wrapperClosed {
+  display: none;
+}

client/src/components/List/List.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -17,9 +17,10 @@ import styles from './List.module.css';
 const List = React.memo(
   ({ id, index, name, isPersisted, cardIds, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
+    const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
-    const addCard = useRef(null);
     const editName = useRef(null);
+    const listWrapper = useRef(null);
 
     const handleHeaderClick = useCallback(() => {
       if (isPersisted) {
@@ -36,14 +37,28 @@ const List = React.memo(
       [onUpdate],
     );
 
+    const handleAddCardClick = useCallback(() => {
+      setIsAddCardOpened(true);
+    }, []);
+
+    const handleAddCardClose = useCallback(() => {
+      setIsAddCardOpened(false);
+    }, []);
+
     const handleNameEdit = useCallback(() => {
       editName.current.open();
     }, []);
 
     const handleCardAdd = useCallback(() => {
-      addCard.current.open();
+      setIsAddCardOpened(true);
     }, []);
 
+    useEffect(() => {
+      if (isAddCardOpened) {
+        listWrapper.current.scrollTop = listWrapper.current.scrollHeight;
+      }
+    }, [cardIds, isAddCardOpened]);
+
     const cardsNode = (
       <Droppable
         droppableId={`list:${id}`}
@@ -58,15 +73,12 @@ const List = React.memo(
                 <CardContainer key={cardId} id={cardId} index={cardIndex} />
               ))}
               {placeholder}
+              <AddCard
+                isOpened={isAddCardOpened}
+                onCreate={onCardCreate}
+                onClose={handleAddCardClose}
+              />
             </div>
-            <AddCard ref={addCard} onCreate={onCardCreate}>
-              <button type="button" disabled={!isPersisted} className={styles.addCardButton}>
-                <PlusMathIcon className={styles.addCardButtonIcon} />
-                <span className={styles.addCardButtonText}>
-                  {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
-                </span>
-              </button>
-            </AddCard>
           </div>
         )}
       </Droppable>
@@ -99,7 +111,25 @@ const List = React.memo(
                 </ActionsPopup>
               )}
             </div>
-            <div className={styles.list}>{cardsNode}</div>
+            <div
+              ref={listWrapper}
+              className={classNames(styles.listWrapper, isAddCardOpened && styles.listWrapperFull)}
+            >
+              <div className={styles.list}>{cardsNode}</div>
+            </div>
+            {!isAddCardOpened && (
+              <button
+                type="button"
+                disabled={!isPersisted}
+                className={styles.addCardButton}
+                onClick={handleAddCardClick}
+              >
+                <PlusMathIcon className={styles.addCardButtonIcon} />
+                <span className={styles.addCardButtonText}>
+                  {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
+                </span>
+              </button>
+            )}
           </div>
         )}
       </Draggable>

client/src/components/List/List.module.css

@@ -1,6 +1,7 @@
 .addCardButton {
-  background: none !important;
+  background: #dfe3e6 !important;
   border: none !important;
+  border-radius: 0 0 3px 3px !important;
   color: #6b808c !important;
   cursor: pointer;
   display: block !important;
@@ -8,18 +9,14 @@
   flex: 0 0 auto;
   font-weight: normal !important;
   height: 36px !important;
-  margin: 0 -8px !important;
+  outline: none !important;
   padding: 8px !important;
   text-align: left !important;
-  width: calc(100% + 16px);
-}
-
-.addCardButton:active {
-  outline: none !important;
+  width: 100%;
 }
 
 .addCardButton:hover {
-  background-color: #092d4221 !important;
+  background-color: #c3cbd0 !important;
   color: #17394d !important;
   fill: #17394d !important;
 }
@@ -40,6 +37,7 @@
 
 .cards {
   flex: 1 1 auto;
+  min-height: 1px;
 }
 
 .header {
@@ -96,18 +94,48 @@
 
 .list {
   background: #dfe3e6 !important;
-  border-radius: 0 0 3px 3px !important;
   box-sizing: border-box !important;
   display: flex;
   flex-direction: column;
   padding: 0 8px !important;
   position: relative !important;
   white-space: normal !important;
+  width: 272px;
+}
+
+.listWrapper {
+  background: #dfe3e6;
+  max-height: calc(100vh - 300px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 290px;
+}
+
+.listWrapper:hover {
+  width: 272px;
+}
+
+.listWrapper::-webkit-scrollbar {
+  width: 5px;
+}
+
+.listWrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.listWrapper::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+}
+
+.listWrapperFull {
+  max-height: calc(100vh - 264px);
 }
 
 .wrapper {
+  border-radius: 3px;
   flex: 0 0 auto;
   margin: 0 4px !important;
+  overflow: hidden;
   vertical-align: top !important;
   width: 272px !important;
 }