feat(@leav): minor fixes on form and wrapped components

leav-solutions · Dec 13, 2024 · d35e30a · d35e30a
1 parent 5608434
commit d35e30a
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 86 deletions.
diff --git a/apps/data-studio/package.json b/apps/data-studio/package.json
@@ -13,7 +13,7 @@
         "antd": "5.15.3",
         "apollo-cache-inmemory": "1.6.6",
         "apollo-upload-client": "14.1.3",
-        "aristid-ds": "11.0.0-54bd35b",
+        "aristid-ds": "11.0.0-1547659",
         "dayjs": "1.11.10",
         "graphql": "15.0.0",
         "graphql-tag": "2.12.6",

diff --git a/apps/login/package.json b/apps/login/package.json
@@ -7,7 +7,7 @@
     "@ant-design/icons": "5.2.6",
     "@leav/ui": "workspace:libs/ui",
     "antd": "5.15.3",
-    "aristid-ds": "11.0.0-54bd35b",
+    "aristid-ds": "11.0.0-1547659",
     "i18next": "22.5.0",
     "i18next-browser-languagedetector": "7.0.2",
     "i18next-http-backend": "2.1.1",

diff --git a/apps/portal/package.json b/apps/portal/package.json
@@ -8,7 +8,7 @@
     "@leav/ui": "workspace:libs/ui",
     "@leav/utils": "workspace:libs/utils",
     "antd": "5.15.3",
-    "aristid-ds": "11.0.0-54bd35b",
+    "aristid-ds": "11.0.0-1547659",
     "cross-fetch": "3.1.5",
     "graphql-ws": "5.12.0",
     "i18next": "22.5.0",

diff --git a/libs/ui/package.json b/libs/ui/package.json
@@ -51,7 +51,7 @@
     "@ant-design/icons": ">=5.2",
     "@apollo/client": ">=3.8.1",
     "antd": "5.15.3",
-    "aristid-ds": "11.0.0-54bd35b",
+    "aristid-ds": "11.0.0-1547659",
     "dayjs": "^1.11.10",
     "i18next": "22.5",
     "react": "18.2.0",

diff --git a/...ecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx b/...ecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx
@@ -132,7 +132,6 @@ export const MultiValueSelect: FunctionComponent<IMultiValueSelectProps> = ({
             onSelect={_handleSelect}
             onClear={_clearValues}
             onBlur={_handleBlur}
-            // @ts-expect-error
             onDeselect={_handleDeselect}
             onChange={onChange}
             onInfoClick={shouldShowValueDetailsButton ? onValueDetailsButtonClick : null}

diff --git a/...src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardField.tsx b/...src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardField.tsx
@@ -256,13 +256,15 @@ const StandardField: FunctionComponent<
         isFieldInError = antdForm.getFieldError(attribute.id).length > 0 || hasErrorsInFormList;
     }
 
+    const isReadOnly = attribute.readonly || readonly;
+
     return (
         <Wrapper $metadataEdit={metadataEdit}>
             <KitInputWrapperStyled
                 label={label}
                 helper={_getHelper()}
                 required={element.settings.required}
-                disabled={readonly}
+                disabled={isReadOnly}
                 bordered={attribute.multiple_values}
                 status={isFieldInError ? 'error' : undefined}
                 actions={
@@ -276,7 +278,7 @@ const StandardField: FunctionComponent<
                         handleSubmit={_handleSubmit(backendWithoutCalculatedOrInheritedValues[0]?.id_value)}
                         attribute={attribute}
                         required={element.settings.required}
-                        readonly={readonly}
+                        readonly={isReadOnly}
                         label={label}
                         calculatedFlags={calculatedFlags}
                         inheritedFlags={inheritedFlags}
@@ -306,7 +308,7 @@ const StandardField: FunctionComponent<
                                                         attribute={attribute}
                                                         label={label}
                                                         required={element.settings.required}
-                                                        readonly={readonly}
+                                                        readonly={isReadOnly}
                                                         calculatedFlags={calculatedFlags}
                                                         inheritedFlags={inheritedFlags}
                                                     />

diff --git a/...itRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx b/...itRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx
@@ -97,7 +97,7 @@ describe('DSRangePickerWrapper', () => {
             </Form>
         );
 
-        expect(screen.getByRole('textbox')).toHaveValue(presentationDate);
+        expect(screen.getAllByRole('textbox')[0]).toHaveValue(presentationDate);
     });
 
     test('Should display the value if focused', async () => {
@@ -119,7 +119,7 @@ describe('DSRangePickerWrapper', () => {
             </Form>
         );
 
-        const textInput = screen.getByRole('textbox');
+        const textInput = screen.getAllByRole('textbox')[0];
         await user.click(textInput);
         const rangePickerInputs = screen.getAllByRole('textbox');
         expect(rangePickerInputs[0]).toHaveValue(todayDateFormated.formated);
@@ -145,7 +145,7 @@ describe('DSRangePickerWrapper', () => {
             </Form>
         );
 
-        expect(screen.getByRole('textbox')).toBeDisabled();
+        expect(screen.getAllByRole('textbox')[0]).toBeDisabled();
     });
 
     test('Should call onChange / handleSubmit with value at noon', async () => {
@@ -165,7 +165,7 @@ describe('DSRangePickerWrapper', () => {
             </Form>
         );
 
-        const textInput = screen.getByRole('textbox');
+        const textInput = screen.getAllByRole('textbox')[0];
         await user.click(textInput);
 
         await user.click(screen.getAllByTitle(todayDateFormated.formated)[0]);
@@ -202,7 +202,7 @@ describe('DSRangePickerWrapper', () => {
             </Form>
         );
 
-        const textInput = screen.getByRole('textbox');
+        const textInput = screen.getAllByRole('textbox')[0];
         await user.click(textInput);
 
         const rangePickerInputs = screen.getAllByRole('textbox');

diff --git a/...on/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx b/...on/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx
@@ -1,24 +1,34 @@
 // Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {KitDatePicker, KitInput} from 'aristid-ds';
-import {ChangeEvent, FunctionComponent, useState} from 'react';
+import {KitDatePicker} from 'aristid-ds';
+import {FunctionComponent, useEffect, useState} from 'react';
 import {Form} from 'antd';
 import dayjs from 'dayjs';
 import styled from 'styled-components';
 import {StandardValueTypes} from '../../../_types';
 import {setDateToUTCNoon} from '_ui/_utils';
-import {FaCalendar} from 'react-icons/fa';
 import {IStandFieldValueContentProps} from './_types';
 import {IKitRangePicker} from 'aristid-ds/dist/Kit/DataEntry/DatePicker/types';
 import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
 
-const KitDatePickerRangePickerStyled = styled(KitDatePicker.RangePicker)<{$shouldHighlightColor: boolean}>`
+const KitDatePickerRangePickerStyled = styled(KitDatePicker.RangePicker)<{
+    $shouldHighlightColor: boolean;
+    $shouldUsePresentationLayout: boolean;
+}>`
     color: ${({$shouldHighlightColor}) => ($shouldHighlightColor ? 'var(--general-colors-primary-400)' : 'initial')};
-`;
 
-const KitInputStyled = styled(KitInput)<{$shouldHighlightColor: boolean}>`
-    color: ${({$shouldHighlightColor}) => ($shouldHighlightColor ? 'var(--general-colors-primary-400)' : 'initial')};
+    ${({$shouldUsePresentationLayout}) =>
+        $shouldUsePresentationLayout &&
+        `   &.ant-picker.ant-picker-range {
+                grid-template-columns: 28px 1fr 0px 0px 12px;
+
+                .ant-picker-range-separator,
+                .ant-picker-input:nth-of-type(0) {
+                    display: none;
+                }
+            }
+        `}
 `;
 
 export const DSRangePickerWrapper: FunctionComponent<IStandFieldValueContentProps<IKitRangePicker>> = ({
@@ -41,6 +51,10 @@ export const DSRangePickerWrapper: FunctionComponent<IStandFieldValueContentProp
 
     const isErrors = errors.length > 0;
 
+    // we slow down the css so that presentationValue does not flash before being hidden
+    const [usePresentationLayout, setUsePresentationLayout] = useState(false);
+    useEffect(() => setUsePresentationLayout(!isFocused && !isErrors), [isFocused, isErrors]);
+
     const _resetToInheritedOrCalculatedValue = async () => {
         if (inheritedFlags.isInheritedValue) {
             onChange(
@@ -62,8 +76,6 @@ export const DSRangePickerWrapper: FunctionComponent<IStandFieldValueContentProp
         await handleSubmit(null, attribute.id);
     };
 
-    const _handleFocus = () => setIsFocused(true);
-
     const _handleDateChange: (
         rangePickerDates: [from: dayjs.Dayjs, to: dayjs.Dayjs] | null,
         antOnChangeParams: [from: string, to: string] | null
@@ -97,64 +109,28 @@ export const DSRangePickerWrapper: FunctionComponent<IStandFieldValueContentProp
         }
     };
 
-    // TOTO remove this function to use onClear Prop when ant is updated to 5.20+
-    const _handleClear = async (event: ChangeEvent<HTMLInputElement>) => {
-        const inputValue = event.target.value;
-
-        if (
-            (inheritedFlags.isInheritedValue || calculatedFlags.isCalculatedValue) &&
-            inputValue === '' &&
-            event.type === 'click'
-        ) {
-            _resetToInheritedOrCalculatedValue();
-            return;
-        }
-        onChange(null, null);
-        if (inputValue === '' && event.type === 'click') {
-            await handleSubmit(null, attribute.id);
-        }
-    };
+    const placeholderToDisplay: IKitRangePicker['placeholder'] = isFocused
+        ? [t('record_edition.placeholder.start_date'), t('record_edition.placeholder.end_date')]
+        : [t('record_edition.placeholder.enter_a_period'), ''];
 
     return (
-        <>
-            {
-                !isFocused && !isErrors && (
-                    <KitInputStyled
-                        id={attribute.id}
-                        prefix={<FaCalendar />}
-                        disabled={readonly}
-                        helper={isErrors ? String(errors[0]) : undefined}
-                        status={isErrors ? 'error' : undefined}
-                        value={presentationValue}
-                        onFocus={_handleFocus}
-                        onChange={_handleClear}
-                        $shouldHighlightColor={
-                            inheritedFlags.isInheritedNotOverrideValue || calculatedFlags.isCalculatedNotOverrideValue
-                        }
-                        placeholder={t('record_edition.placeholder.enter_a_period')}
-                    />
-                )
-                //TODO: Léger décalage car l'icon n'est pas exactement le même que celui du DS (MAJ React-icons ?)
+        <KitDatePickerRangePickerStyled
+            id={attribute.id}
+            value={value}
+            format={!isFocused && !isErrors && !!presentationValue ? () => presentationValue : undefined}
+            disabled={readonly}
+            allowClear={!inheritedFlags.isInheritedNotOverrideValue && !calculatedFlags.isCalculatedNotOverrideValue}
+            helper={isErrors ? String(errors[0]) : undefined}
+            status={isErrors ? 'error' : undefined}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChange={_handleDateChange}
+            onOpenChange={_handleOpenChange}
+            placeholder={placeholderToDisplay}
+            $shouldHighlightColor={
+                inheritedFlags.isInheritedNotOverrideValue || calculatedFlags.isCalculatedNotOverrideValue
             }
-            {(isFocused || isErrors) && (
-                <KitDatePickerRangePickerStyled
-                    open
-                    autoFocus
-                    value={value}
-                    disabled={readonly}
-                    allowClear={
-                        !inheritedFlags.isInheritedNotOverrideValue && !calculatedFlags.isCalculatedNotOverrideValue
-                    }
-                    helper={isErrors ? String(errors[0]) : undefined}
-                    status={isErrors ? 'error' : undefined}
-                    onChange={_handleDateChange}
-                    onOpenChange={_handleOpenChange}
-                    $shouldHighlightColor={
-                        inheritedFlags.isInheritedNotOverrideValue || calculatedFlags.isCalculatedNotOverrideValue
-                    }
-                    placeholder={[t('record_edition.placeholder.start_date'), t('record_edition.placeholder.end_date')]}
-                />
-            )}
-        </>
+            $shouldUsePresentationLayout={usePresentationLayout}
+        />
     );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -9154,7 +9154,7 @@ __metadata:
     "@ant-design/icons": ">=5.2"
     "@apollo/client": ">=3.8.1"
     antd: 5.15.3
-    aristid-ds: 11.0.0-54bd35b
+    aristid-ds: 11.0.0-1547659
     dayjs: ^1.11.10
     i18next: 22.5
     react: 18.2.0
@@ -11379,6 +11379,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.13":
+  version: 4.17.13
+  resolution: "@types/lodash@npm:4.17.13"
+  checksum: ddb34e20810c71be2d9445bcc4b64ec25b83976738454de709854b79c7f655b03704b76235445699956d65012987720e0e429a35489de65495cdb5420202d905
+  languageName: node
+  linkType: hard
+
 "@types/long@npm:^4.0.0":
   version: 4.0.1
   resolution: "@types/long@npm:4.0.1"
@@ -13512,9 +13519,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aristid-ds@npm:11.0.0-54bd35b":
-  version: 11.0.0-54bd35b
-  resolution: "aristid-ds@npm:11.0.0-54bd35b"
+"aristid-ds@npm:11.0.0-1547659":
+  version: 11.0.0-1547659
+  resolution: "aristid-ds@npm:11.0.0-1547659"
   dependencies:
     "@dnd-kit/core": "npm:^6.1.0"
     "@dnd-kit/modifiers": "npm:^7.0.0"
@@ -13536,6 +13543,7 @@ __metadata:
     "@tiptap/pm": "npm:^2.8.0"
     "@tiptap/react": "npm:^2.8.0"
     "@tiptap/starter-kit": "npm:^2.8.0"
+    "@types/lodash": "npm:^4.17.13"
     antd: "npm:5.15.3"
     antd-img-crop: "npm:^4.21.0"
     axe-core: "npm:^4.8.1"
@@ -13570,7 +13578,7 @@ __metadata:
     react-uuid: ^2.0.0
     remark-gfm: ^3.0.1
     styled-components: ^6.0.7
-  checksum: ec13cf11934495783bb3311d9e2876eae6d07e9d468b6b6298016f9381b171dd6ebe4ae988f833e5deddce6f1bec0fb1761d2d02a249126f4fd10484afa5a625
+  checksum: b2bb3e249660bc747caf4af663acc2c1a131b1f713dd61ceacc78da4080cc23212e9919ef1b94932c475beca798766f918ee416ec6b83fb0a3d5f204f25cbb6e
   languageName: node
   linkType: hard
 
@@ -16814,7 +16822,7 @@ __metadata:
     apollo: "npm:2.34.0"
     apollo-cache-inmemory: "npm:1.6.6"
     apollo-upload-client: "npm:14.1.3"
-    aristid-ds: "npm:11.0.0-54bd35b"
+    aristid-ds: "npm:11.0.0-1547659"
     commander: "npm:5.1.0"
     dayjs: "npm:1.11.10"
     graphql: "npm:15.0.0"
@@ -25330,7 +25338,7 @@ __metadata:
     "@types/react-dom": "npm:18.2.6"
     "@vitejs/plugin-react": "npm:3.1.0"
     antd: "npm:5.15.3"
-    aristid-ds: "npm:11.0.0-54bd35b"
+    aristid-ds: "npm:11.0.0-1547659"
     i18next: "npm:22.5.0"
     i18next-browser-languagedetector: "npm:7.0.2"
     i18next-http-backend: "npm:2.1.1"
@@ -28103,7 +28111,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:3.1.0"
     antd: "npm:5.15.3"
     apollo: "npm:2.34.0"
-    aristid-ds: "npm:11.0.0-54bd35b"
+    aristid-ds: "npm:11.0.0-1547659"
     commander: "npm:10.0.0"
     cross-fetch: "npm:3.1.5"
     graphql-ws: "npm:5.12.0"