From d72e734b018587f028f6643d1f02c32d50711228 Mon Sep 17 00:00:00 2001
From: Emile Bex <emile.bex@gmail.com>
Date: Thu, 20 Jul 2023 11:51:36 +0200
Subject: [PATCH] [EN-6218] feat(textarea): add textarea line limit

---
 src/components/forms/GenericField.js          |   1 +
 .../schema/formAddExternalOpportunity.ts      |   2 +-
 src/components/modals/Modal/Modal.js          |   1 +
 .../ModalConfirm/__tests__/index.test.js      |   9 ++
 .../Modal/ModalGeneric/ModalGeneric.tsx       |   5 +-
 .../PostOpportunityModal.tsx                  |   1 -
 .../CarouselItem/__tests__/index.test.js      |   9 ++
 .../BackgroundImage.styles.tsx                |   1 -
 .../utils/BackgroundImage/BackgroundImage.tsx |  12 +-
 .../utils/Inputs/CheckBox/CheckBox.styles.ts  |   2 +-
 .../utils/Inputs/TextArea/TextArea.styles.tsx |  72 +++++++---
 .../utils/Inputs/TextArea/TextArea.tsx        |  61 +++++++--
 .../utils/Inputs/TextArea/useLineLimit.ts     | 124 ++++++++++++++++++
 src/hooks/useWindowSize.ts                    |  23 ----
 14 files changed, 259 insertions(+), 64 deletions(-)
 create mode 100644 src/components/utils/Inputs/TextArea/useLineLimit.ts
 delete mode 100644 src/hooks/useWindowSize.ts

diff --git a/src/components/forms/GenericField.js b/src/components/forms/GenericField.js
index 8edd6d85b..a532f3306 100644
--- a/src/components/forms/GenericField.js
+++ b/src/components/forms/GenericField.js
@@ -240,6 +240,7 @@ export const GenericField = ({
         <TextAreaNew
           id={`${formId}-${data.id}`}
           name={data.name}
+          maxLines={data.maxLines}
           onChange={onChangeCustom}
           value={value}
           valid={getValid(data.name)}
diff --git a/src/components/forms/schema/formAddExternalOpportunity.ts b/src/components/forms/schema/formAddExternalOpportunity.ts
index 8578e88dd..1d1485d5f 100644
--- a/src/components/forms/schema/formAddExternalOpportunity.ts
+++ b/src/components/forms/schema/formAddExternalOpportunity.ts
@@ -47,7 +47,7 @@ export const formAddExternalOpportunityCandidate = {
       component: 'heading',
     },
     {
-      component: 'fieldgroup',
+      component: 'fieldgroup-new',
       fields: [
         {
           id: 'recruiterFirstName',
diff --git a/src/components/modals/Modal/Modal.js b/src/components/modals/Modal/Modal.js
index 5d362ca7d..813733274 100644
--- a/src/components/modals/Modal/Modal.js
+++ b/src/components/modals/Modal/Modal.js
@@ -16,6 +16,7 @@ const CustomModal = ({ children, closeOnNextRender, className, fullWidth }) => {
 
   return (
     <Modal
+      id="modal-screen"
       closeTimeoutMS={200}
       style={{
         overlay: {
diff --git a/src/components/modals/Modal/ModalGeneric/ModalConfirm/__tests__/index.test.js b/src/components/modals/Modal/ModalGeneric/ModalConfirm/__tests__/index.test.js
index b9f1a02ec..b3b587bcd 100644
--- a/src/components/modals/Modal/ModalGeneric/ModalConfirm/__tests__/index.test.js
+++ b/src/components/modals/Modal/ModalGeneric/ModalConfirm/__tests__/index.test.js
@@ -7,6 +7,15 @@ import '@testing-library/jest-dom/extend-expect';
 
 import { ModalConfirm } from '../ModalConfirm';
 import { ModalsListener, openModal } from 'src/components/modals/Modal';
+import { BREAKPOINTS } from 'src/constants/styles';
+
+jest.mock('@react-hook/window-size', () => {
+  return jest.fn(() => {
+    return {
+      useWindowWidth: BREAKPOINTS.desktop,
+    };
+  });
+});
 
 jest.mock('react-modal');
 
diff --git a/src/components/modals/Modal/ModalGeneric/ModalGeneric.tsx b/src/components/modals/Modal/ModalGeneric/ModalGeneric.tsx
index b628d9d78..452d6125a 100644
--- a/src/components/modals/Modal/ModalGeneric/ModalGeneric.tsx
+++ b/src/components/modals/Modal/ModalGeneric/ModalGeneric.tsx
@@ -15,6 +15,8 @@ interface ModalGenericProps {
   withCloseButton?: boolean;
 }
 
+const id = 'modal-generic';
+
 export const ModalGeneric = ({
   title,
   description,
@@ -30,10 +32,11 @@ export const ModalGeneric = ({
   return (
     <Modal className={className} fullWidth={fullWidth}>
       <div
+        id={id}
         className={`uk-margin-auto-vertical ${
           fullWidth ? 'uk-width-expand' : 'uk-width-2xlarge@m'
         }`}
-        data-testid="modal-generic"
+        data-testid={id}
       >
         <div
           className={`uk-modal-body ${
diff --git a/src/components/modals/Modal/ModalGeneric/PostOpportunityModal/PostOpportunityModal.tsx b/src/components/modals/Modal/ModalGeneric/PostOpportunityModal/PostOpportunityModal.tsx
index c69d1eca6..205d1c8a9 100644
--- a/src/components/modals/Modal/ModalGeneric/PostOpportunityModal/PostOpportunityModal.tsx
+++ b/src/components/modals/Modal/ModalGeneric/PostOpportunityModal/PostOpportunityModal.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import moment from 'moment';
 import React, {
   /* memo, */ useCallback,
diff --git a/src/components/partials/CarouselItem/__tests__/index.test.js b/src/components/partials/CarouselItem/__tests__/index.test.js
index 50c7a1832..2a56ae857 100644
--- a/src/components/partials/CarouselItem/__tests__/index.test.js
+++ b/src/components/partials/CarouselItem/__tests__/index.test.js
@@ -2,6 +2,15 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { CarouselItem } from '..';
 import '@testing-library/jest-dom';
+import { BREAKPOINTS } from 'src/constants/styles';
+
+jest.mock('@react-hook/window-size', () => {
+  return jest.fn(() => {
+    return {
+      useWindowWidth: BREAKPOINTS.desktop,
+    };
+  });
+});
 
 describe('Carousel Item', () => {
   it('renders the Carousel item', () => {
diff --git a/src/components/utils/BackgroundImage/BackgroundImage.styles.tsx b/src/components/utils/BackgroundImage/BackgroundImage.styles.tsx
index a379de680..955892231 100644
--- a/src/components/utils/BackgroundImage/BackgroundImage.styles.tsx
+++ b/src/components/utils/BackgroundImage/BackgroundImage.styles.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { BREAKPOINTS } from 'src/constants/styles';
 
 export const StyledBackground = styled.section`
   &.top-banner {
diff --git a/src/components/utils/BackgroundImage/BackgroundImage.tsx b/src/components/utils/BackgroundImage/BackgroundImage.tsx
index 9135b24fd..e83058325 100644
--- a/src/components/utils/BackgroundImage/BackgroundImage.tsx
+++ b/src/components/utils/BackgroundImage/BackgroundImage.tsx
@@ -1,8 +1,7 @@
 import Image, { StaticImageData } from 'next/image';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { StyledBackground } from 'src/components/utils/BackgroundImage/BackgroundImage.styles';
-import { BREAKPOINTS } from 'src/constants/styles';
-import { useWindowSize } from 'src/hooks/useWindowSize';
+import { useIsDesktop } from 'src/hooks/utils';
 
 interface BackgroundImageProps {
   img: string | StaticImageData;
@@ -23,12 +22,7 @@ export const BackgroundImage = ({
   isHero,
   hasCta,
 }: BackgroundImageProps) => {
-  const { width } = useWindowSize();
-  const [isDesktop, setIsDesktop] = useState(true);
-
-  useEffect(() => {
-    setIsDesktop(width >= BREAKPOINTS.desktop);
-  }, [imgMobile, width]);
+  const isDesktop = useIsDesktop();
 
   return (
     <StyledBackground
diff --git a/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts b/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts
index df47a7fcc..b20293820 100644
--- a/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts
+++ b/src/components/utils/Inputs/CheckBox/CheckBox.styles.ts
@@ -14,7 +14,7 @@ export const StyledCheckbox = styled.div`
 
     display: flex;
     align-items: center;
-    justify-content: left;
+    justify-content: flex-start;
     height: 16px;
     position: relative;
     cursor: pointer;
diff --git a/src/components/utils/Inputs/TextArea/TextArea.styles.tsx b/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
index 787aa6338..d0d6e74c7 100644
--- a/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
+++ b/src/components/utils/Inputs/TextArea/TextArea.styles.tsx
@@ -1,9 +1,10 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { COLORS } from 'src/constants/styles';
 
 export const StyledTextAreaContainer = styled.div`
   max-width: 100%;
   background-color: ${COLORS.white};
+
   border-radius: 5px;
   /* div.label {
     border-bottom: solid 2px ${COLORS.gray};
@@ -15,22 +16,59 @@ export const StyledTextAreaContainer = styled.div`
     color: ${COLORS.darkGray};
     margin-bottom: 8px;
   } */
-  textarea {
-    width: 100%;
-    padding-bottom: 12px;
-    box-sizing: border-box;
-    border: none;
-    resize: vertical;
-    border-bottom: solid 2px ${COLORS.gray};
-    margin-bottom: 30px;
+`;
+
+export const StyledTextArea = styled.textarea`
+  width: ${({ hasLineLimit, width }) => {
+    // Hard code the width in case the width of the modal changes
+    return hasLineLimit ? `${width}px` : '100%';
+  }};
+  padding-bottom: 12px;
+  box-sizing: border-box;
+  border: none;
+  resize: none;
+  border-bottom: solid 2px ${COLORS.gray};
+  font-family: Poppins, sans-serif;
+  // need to fix line height to calculate number of lines
+  line-height: 17px;
+  &::placeholder {
+    font-style: italic;
+    color: ${COLORS.darkGray};
     font-family: Poppins, sans-serif;
-    &::placeholder {
-      font-style: italic;
-      color: ${COLORS.darkGray};
-      font-family: Poppins, sans-serif;
-    }
-    :focus-visible {
-      outline: none;
-    }
   }
+  :focus-visible {
+    outline: none;
+  }
+`;
+
+export const StyledTextAreaScrollContainer = styled.div`
+  overflow-x: auto;
+  ${({ hasLineLimit, textAreaWidth, width }) => {
+    return hasLineLimit
+      ? css`
+          width: ${textAreaWidth || width}px;
+          max-width: ${width}px;
+        `
+      : css`
+          width: 100%;
+          max-width: 100%;
+        `;
+  }};
+  margin-bottom: 30px;
+  min-width: 300px;
+`;
+
+export const StyledAnnotations = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const StyledLineLimit = styled.div`
+  color: ${({ warning }) => {
+    return warning ? COLORS.noRed : COLORS.darkGray;
+  }};
+  font-size: 12px;
+  text-align: right;
+  align-self: flex-end;
+  transform: translate(0, -30px);
 `;
diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx
index 4ba1bf524..0e71a1fba 100644
--- a/src/components/utils/Inputs/TextArea/TextArea.tsx
+++ b/src/components/utils/Inputs/TextArea/TextArea.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { FormValidatorErrorMessage } from 'src/components/forms/FormValidatorErrorMessage';
-import { StyledTextAreaContainer } from './TextArea.styles';
+import { useIsMobile } from 'src/hooks/utils';
+import {
+  StyledAnnotations,
+  StyledLineLimit,
+  StyledTextArea,
+  StyledTextAreaContainer,
+  StyledTextAreaScrollContainer,
+} from './TextArea.styles';
+import { useLineLimit } from './useLineLimit';
 
 interface TextAreaProps {
   title: string;
@@ -13,6 +21,7 @@ interface TextAreaProps {
     isInvalid: boolean;
     message: string;
   };
+  maxLines?: { lines: number; width: number };
 }
 
 export function TextArea({
@@ -23,22 +32,54 @@ export function TextArea({
   value,
   hidden,
   valid,
+  maxLines,
 }: TextAreaProps) {
+  const isMobile = useIsMobile();
+
+  const { textAreaRef, remainingLines, textAreaWidth } = useLineLimit(
+    value,
+    name,
+    onChange,
+    maxLines?.lines
+  );
+
   if (hidden) {
     return null;
   }
 
+  const maxLinesWidth = maxLines?.width || 655;
+
   return (
     <StyledTextAreaContainer>
-      <textarea
-        name={name}
-        id={id}
-        rows={5}
-        placeholder={title}
-        onChange={onChange}
-        value={value}
-      />
-      <FormValidatorErrorMessage validObj={valid} newInput />
+      <StyledTextAreaScrollContainer
+        textAreaWidth={textAreaWidth}
+        isMobile={isMobile}
+        hasLineLimit={!!maxLines}
+        width={maxLinesWidth}
+      >
+        <StyledTextArea
+          isMobile={isMobile}
+          hasLineLimit={!!maxLines}
+          width={maxLinesWidth}
+          ref={textAreaRef}
+          name={name}
+          id={id}
+          rows={5}
+          placeholder={title}
+          onChange={onChange}
+          value={value}
+        />
+      </StyledTextAreaScrollContainer>
+      <StyledAnnotations>
+        <div>
+          <FormValidatorErrorMessage validObj={valid} newInput />
+        </div>
+        {maxLines && (
+          <StyledLineLimit warning={remainingLines === 0}>
+            {remainingLines} ligne(s) restante(s)
+          </StyledLineLimit>
+        )}
+      </StyledAnnotations>
     </StyledTextAreaContainer>
   );
 }
diff --git a/src/components/utils/Inputs/TextArea/useLineLimit.ts b/src/components/utils/Inputs/TextArea/useLineLimit.ts
new file mode 100644
index 000000000..9416c4378
--- /dev/null
+++ b/src/components/utils/Inputs/TextArea/useLineLimit.ts
@@ -0,0 +1,124 @@
+import { useWindowWidth } from '@react-hook/window-size';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import UIkit from 'uikit';
+import { usePrevious } from 'src/hooks/utils';
+
+export function useLineLimit(
+  value: string,
+  name: string,
+  onChange: (arg: { target: { value: string; name: string } }) => void,
+  maxLines?: number
+) {
+  const windowWidth = useWindowWidth();
+  const ref = useRef<HTMLTextAreaElement>();
+
+  const [numberOfLines, setNumberOfLines] = useState(0);
+  const [textAreaWidth, setTextAreaWidth] = useState(0);
+
+  const prevValue: string = usePrevious(value);
+
+  const calculateContentHeight = useCallback((ta, scanAmount) => {
+    const origHeight = ta.style.height;
+    let height = ta.offsetHeight;
+    const { scrollHeight } = ta;
+    const { overflow } = ta.style;
+    /// only bother if the ta is bigger than content
+    if (height >= scrollHeight) {
+      /// check that our browser supports changing dimension
+      /// calculations mid-way through a function call...
+      ta.style.height = `${height + scanAmount}px`;
+      /// because the scrollbar can cause calculation problems
+      ta.style.overflow = 'hidden';
+      /// by checking that scrollHeight has updated
+      if (scrollHeight < ta.scrollHeight) {
+        /// now try and scan the ta's height downwards
+        /// until scrollHeight becomes larger than height
+        while (ta.offsetHeight >= ta.scrollHeight) {
+          ta.style.height = `${(height -= scanAmount)}px`;
+        }
+        /// be more specific to get the exact height
+        while (ta.offsetHeight < ta.scrollHeight) {
+          ta.style.height = `${(height += 1)}px`;
+        }
+        /// reset the ta back to it's original height
+        ta.style.height = origHeight;
+        /// put the overflow back
+        ta.style.overflow = overflow;
+        return height;
+      }
+    } else {
+      return scrollHeight;
+    }
+  }, []);
+
+  const remainingLines =
+    maxLines - numberOfLines < 0 ? 0 : maxLines - numberOfLines;
+
+  useEffect(() => {
+    if (maxLines && ref && ref.current && value !== prevValue) {
+      const ta = ref.current;
+
+      const style = window.getComputedStyle
+        ? window.getComputedStyle(ta)
+        : ta.style;
+
+      const taLineHeight = parseInt(style.lineHeight, 10);
+      const taPaddingBottom = parseInt(style.paddingBottom, 10);
+      const taPaddingTop = parseInt(style.paddingTop, 10);
+      const taHeight = calculateContentHeight(ta, taLineHeight);
+
+      const nbOfLines = Math.ceil(
+        (taHeight - taPaddingBottom - taPaddingTop) / taLineHeight
+      );
+
+      if (nbOfLines > maxLines) {
+        if (!prevValue || value.length - prevValue.length > 1) {
+          UIkit.notification(
+            `Le texte que vous avez essayé de coller dépasse la limite des ${maxLines} lignes.`,
+            'danger'
+          );
+        }
+
+        onChange({
+          target: {
+            value: prevValue || '',
+            name,
+          },
+        });
+      } else {
+        setNumberOfLines(!value ? 0 : nbOfLines);
+      }
+    }
+  }, [calculateContentHeight, maxLines, name, onChange, prevValue, value]);
+
+  useEffect(() => {
+    const modal = document.getElementById('modal-screen')
+      ?.firstElementChild as HTMLElement;
+
+    if (modal) {
+      const modalStyle = window.getComputedStyle
+        ? window.getComputedStyle(modal)
+        : modal.style;
+
+      const modalBody = document.getElementById('modal-generic')
+        ?.firstElementChild as HTMLElement;
+
+      if (modalBody) {
+        const modalBodyStyle = window.getComputedStyle
+          ? window.getComputedStyle(modalBody)
+          : modalBody.style;
+
+        const width =
+          windowWidth -
+          parseInt(modalStyle.marginLeft, 10) -
+          parseInt(modalStyle.marginRight, 10) -
+          parseInt(modalBodyStyle.paddingLeft, 10) -
+          parseInt(modalBodyStyle.paddingRight, 10);
+
+        setTextAreaWidth(width);
+      }
+    }
+  }, [windowWidth]);
+
+  return { remainingLines, textAreaRef: ref, textAreaWidth };
+}
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
deleted file mode 100644
index a309319e8..000000000
--- a/src/hooks/useWindowSize.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { isSSR } from 'src/utils/isSSR';
-
-export function useWindowSize() {
-  const [windowSize, setWindowSize] = React.useState({
-    width: isSSR ? 1200 : window.innerWidth,
-    height: isSSR ? 800 : window.innerHeight,
-  });
-
-  function changeWindowSize() {
-    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-  }
-
-  React.useEffect(() => {
-    window.addEventListener('resize', changeWindowSize);
-
-    return () => {
-      window.removeEventListener('resize', changeWindowSize);
-    };
-  }, []);
-
-  return windowSize;
-}