From d35e30ad6d7e3ed9f559c1673532cc262bca5696 Mon Sep 17 00:00:00 2001 From: Philippe Chevieux Date: Fri, 13 Dec 2024 16:30:52 +0100 Subject: [PATCH] feat(@leav): minor fixes on form and wrapped components --- apps/data-studio/package.json | 2 +- apps/login/package.json | 2 +- apps/portal/package.json | 2 +- libs/ui/package.json | 2 +- .../MultiValueSelect/MultiValueSelect.tsx | 1 - .../StandardField/StandardField.tsx | 8 +- .../DSRangePickerWrapper.test.tsx | 10 +- .../DSRangePickerWrapper.tsx | 106 +++++++----------- yarn.lock | 24 ++-- 9 files changed, 71 insertions(+), 86 deletions(-) diff --git a/apps/data-studio/package.json b/apps/data-studio/package.json index 8a98b82c2..8dcb6a488 100644 --- 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 index cd4203bfa..38d6618b5 100644 --- 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 index f3f8b5ddf..608fda11b 100644 --- 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 index 948721aee..869258675 100644 --- 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/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx index 5e3cfa334..838aa3442 100644 --- a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx +++ b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/LinkField/MultiValueSelect/MultiValueSelect.tsx @@ -132,7 +132,6 @@ export const MultiValueSelect: FunctionComponent = ({ onSelect={_handleSelect} onClear={_clearValues} onBlur={_handleBlur} - // @ts-expect-error onDeselect={_handleDeselect} onChange={onChange} onInfoClick={shouldShowValueDetailsButton ? onValueDetailsButtonClick : null} diff --git a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardField.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardField.tsx index c1a16ed5f..8e9681d47 100644 --- a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardField.tsx +++ b/libs/ui/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 ( diff --git a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx index 208455a09..4ef229c7a 100644 --- a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx +++ b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.test.tsx @@ -97,7 +97,7 @@ describe('DSRangePickerWrapper', () => { ); - 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', () => { ); - 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', () => { ); - 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', () => { ); - 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', () => { ); - const textInput = screen.getByRole('textbox'); + const textInput = screen.getAllByRole('textbox')[0]; await user.click(textInput); const rangePickerInputs = screen.getAllByRole('textbox'); diff --git a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx index 7f9908084..3e5381e99 100644 --- a/libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx +++ b/libs/ui/src/components/RecordEdition/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> = ({ @@ -41,6 +51,10 @@ export const DSRangePickerWrapper: FunctionComponent 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 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) => { - 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 && ( - } - 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 ?) + 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) && ( - - )} - + $shouldUsePresentationLayout={usePresentationLayout} + /> ); }; diff --git a/yarn.lock b/yarn.lock index 7534998ca..b34af41a1 100644 --- 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"