[EN-6218] feat(textarea): add textarea line limit

ReseauEntourage · Jul 27, 2023 · d72e734 · d72e734
1 parent 880839e
commit d72e734
Show file tree

Hide file tree

Showing 14 changed files with 259 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }