Use new unit prop from monitor-ui in manual pno form extra fields

MTES-MCT · Sep 25, 2024 · 4fbad3d · 4fbad3d
1 parent 1cf10c8
commit 4fbad3d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 69 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "6.0.1",
-    "@mtes-mct/monitor-ui": "23.0.0",
+    "@mtes-mct/monitor-ui": "23.1.0",
     "@reduxjs/toolkit": "2.2.7",
     "@sentry/react": "7.117.0",
     "@tanstack/react-table": "8.20.5",

diff --git a/...s/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/FormikExtraField.tsx b/...s/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/FormikExtraField.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 import styled from 'styled-components'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { InputWithUnit, SubRow } from './styles'
+import { SubRow } from './styles'
 import { BLUEFIN_TUNA_EXTENDED_SPECY_CODES, BLUEFIN_TUNA_SPECY_CODE } from '../../../../constants'
 
 import type { PriorNotification } from '@features/PriorNotification/PriorNotification.types'
@@ -59,28 +59,24 @@ export function FormikExtraField({
           return (
             <StyledSubRow key={extendedSpecyCode}>
               <ExtendedSpecyCode>{extendedSpecyCode}</ExtendedSpecyCode>
-              <InputWithUnit>
-                <FormikNumberInput
-                  areArrowsHidden
-                  isErrorMessageHidden
-                  isLabelHidden
-                  label={`Quantité (${extendedSpecyCode})`}
-                  name={`fishingCatches[${index}].quantity`}
-                  readOnly={isReadOnly}
-                />
-                pc
-              </InputWithUnit>
-              <InputWithUnit>
-                <FormikNumberInput
-                  areArrowsHidden
-                  isErrorMessageHidden
-                  isLabelHidden
-                  label={`Poids (${extendedSpecyCode})`}
-                  name={`fishingCatches[${index}].weight`}
-                  readOnly={isReadOnly}
-                />
-                kg
-              </InputWithUnit>
+              <FormikNumberInput
+                areArrowsHidden
+                isErrorMessageHidden
+                isLabelHidden
+                label={`Quantité (${extendedSpecyCode})`}
+                name={`fishingCatches[${index}].quantity`}
+                readOnly={isReadOnly}
+                unit="pc"
+              />
+              <FormikNumberInput
+                areArrowsHidden
+                isErrorMessageHidden
+                isLabelHidden
+                label={`Poids (${extendedSpecyCode})`}
+                name={`fishingCatches[${index}].weight`}
+                readOnly={isReadOnly}
+                unit="kg"
+              />
             </StyledSubRow>
           )
         })}
@@ -92,16 +88,14 @@ export function FormikExtraField({
   if (specyCode === 'SWO') {
     return (
       <StyledSubRow key="SWO">
-        <InputWithUnit>
-          <FormikNumberInput
-            areArrowsHidden
-            isLabelHidden
-            label={`Quantité (${specyCode})`}
-            name={`fishingCatches[${fishingsCatchesIndex}].quantity`}
-            readOnly={isReadOnly}
-          />
-          pc
-        </InputWithUnit>
+        <FormikNumberInput
+          areArrowsHidden
+          isLabelHidden
+          label={`Quantité (${specyCode})`}
+          name={`fishingCatches[${fishingsCatchesIndex}].quantity`}
+          readOnly={isReadOnly}
+          unit="pc"
+        />
       </StyledSubRow>
     )
   }

diff --git a/...n/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx b/...n/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/index.tsx
@@ -11,7 +11,7 @@ import { Fragment } from 'react/jsx-runtime'
 import styled from 'styled-components'
 
 import { FormikExtraField } from './FormikExtraField'
-import { InputWithUnit, SubRow } from './styles'
+import { SubRow } from './styles'
 import { getFishingsCatchesValidationError } from './utils'
 import { getFishingsCatchesInitialValues } from '../../utils'
 
@@ -136,17 +136,16 @@ export function FormikFishingCatchesMultiSelect({ isReadOnly }: FormikFishingCat
                     />
                   )}
 
-                  <InputWithUnit>
-                    <FormikNumberInput
-                      areArrowsHidden
-                      isErrorMessageHidden
-                      isLabelHidden
-                      label={`Poids (${fishingCatch.specyCode})`}
-                      name={`fishingCatches[${index}].weight`}
-                      readOnly={isReadOnly || fishingCatch.specyCode === BLUEFIN_TUNA_SPECY_CODE}
-                    />
-                    kg
-                  </InputWithUnit>
+                  <FormikNumberInput
+                    areArrowsHidden
+                    isErrorMessageHidden
+                    isLabelHidden
+                    isLight
+                    label={`Poids (${fishingCatch.specyCode})`}
+                    name={`fishingCatches[${index}].weight`}
+                    readOnly={isReadOnly || fishingCatch.specyCode === BLUEFIN_TUNA_SPECY_CODE}
+                    unit="kg"
+                  />
                 </SubRow>
 
                 <FormikExtraField

diff --git a/...n/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/styles.ts b/...n/components/ManualPriorNotificationForm/fields/FormikFishingCatchesMultiSelect/styles.ts
@@ -10,22 +10,3 @@ export const SubRow = styled.div`
     flex-grow: 1;
   }
 `
-
-export const InputWithUnit = styled.div`
-  align-items: center;
-  background-color: ${p => p.theme.color.gainsboro};
-  color: ${p => p.theme.color.slateGray};
-  display: flex;
-  max-width: 96px;
-  min-width: 96px;
-  padding-right: 8px;
-
-  > .Field-NumberInput {
-    flex-grow: 1;
-
-    > input {
-      border: none !important;
-      padding: 6px 8px 5px;
-    }
-  }
-`