Skip to content

Commit 3ea6f1d

Browse files
SharglutDevSharglutDev
committed
front: remove react-css-transition
This library didn't have a new release since 2022. It uses a react tool that will be deprecated in react v19 (findDOMNode). It was used to display tooltips when hovering some buttons in the app. Since the design system doesn't have a custom tooltip for buttons, it has been requested to just use the regular title html attribute. Instead of finding a substitute lib, just remove the old one and use the title attribute. Signed-off-by: SharglutDev <[email protected]>
1 parent 2e46b4b commit 3ea6f1d

File tree

17 files changed

+126
-298
lines changed

17 files changed

+126
-298
lines changed

‎front/package-lock.json

-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,6 @@
8888
"react-router-dom": "^7.1.3",
8989
"react-select": "^5.10.0",
9090
"react-tether": "^3.0.3",
91-
"react-transition-group": "^4.4.5",
9291
"redux": "^5.0.1",
9392
"redux-persist": "^6.0.0",
9493
"redux-persist-transform-compress": "^4.2.0",
@@ -115,7 +114,6 @@
115114
"@types/react-beautiful-dnd": "^13.1.8",
116115
"@types/react-dom": "^18.2.18",
117116
"@types/react-modal": "^3.16.3",
118-
"@types/react-transition-group": "^4.4.12",
119117
"@types/tether": "^1.4.9",
120118
"@types/uuid": "^10.0.0",
121119
"@typescript-eslint/eslint-plugin": "^8.21.0",

‎front/src/applications/editor/Editor.tsx

+37-41
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import { LoaderState } from 'common/Loaders';
2525
import MapButtons from 'common/Map/Buttons/MapButtons';
2626
import MapSearch from 'common/Map/Search/MapSearch';
2727
import { useInfraActions, useInfraID, useOsrdActions } from 'common/osrdContext';
28-
import Tipped from 'common/Tipped';
2928
import useInfra from 'modules/infra/useInfra';
3029
import type { EditorSliceActions } from 'reducers/editor';
3130
import { getEditorState, getInfraLockStatus } from 'reducers/editor/selectors';
@@ -339,27 +338,26 @@ const Editor = () => {
339338

340339
if (tool.isHidden && tool.isHidden(extendedContext)) return null;
341340
return (
342-
<Tipped key={id} mode="right">
343-
<button
344-
type="button"
345-
className={cx(
346-
'btn-rounded',
347-
id === toolAndState.tool.id && 'active',
348-
'editor-btn'
349-
)}
350-
onClick={() => {
351-
if (tool.onClick) {
352-
tool.onClick(extendedContext);
353-
} else {
354-
switchTool({ toolType, toolState: {} });
355-
}
356-
}}
357-
>
358-
<span className="sr-only">{label}</span>
359-
<IconComponent />
360-
</button>
361-
<span>{label}</span>
362-
</Tipped>
341+
<button
342+
key={id}
343+
type="button"
344+
title={label}
345+
className={cx(
346+
'btn-rounded',
347+
id === toolAndState.tool.id && 'active',
348+
'editor-btn'
349+
)}
350+
onClick={() => {
351+
if (tool.onClick) {
352+
tool.onClick(extendedContext);
353+
} else {
354+
switchTool({ toolType, toolState: {} });
355+
}
356+
}}
357+
>
358+
<span className="sr-only">{label}</span>
359+
<IconComponent />
360+
</button>
363361
);
364362
})}
365363
</div>
@@ -377,25 +375,23 @@ const Editor = () => {
377375
const label = t(labelTranslationKey);
378376

379377
return (
380-
<Tipped key={id} mode="right">
381-
<button
382-
key={id}
383-
type="button"
384-
className={cx('editor-btn', 'btn-rounded', {
385-
active: isActive && isActive(extendedContext),
386-
})}
387-
onClick={() => {
388-
if (onClick) {
389-
onClick(extendedContext);
390-
}
391-
}}
392-
disabled={isDisabled && isDisabled(extendedContext)}
393-
>
394-
<span className="sr-only">{label}</span>
395-
<IconComponent />
396-
</button>
397-
<span>{label}</span>
398-
</Tipped>
378+
<button
379+
key={id}
380+
type="button"
381+
title={label}
382+
className={cx('editor-btn', 'btn-rounded', {
383+
active: isActive && isActive(extendedContext),
384+
})}
385+
onClick={() => {
386+
if (onClick) {
387+
onClick(extendedContext);
388+
}
389+
}}
390+
disabled={isDisabled && isDisabled(extendedContext)}
391+
>
392+
<span className="sr-only">{label}</span>
393+
<IconComponent />
394+
</button>
399395
);
400396
});
401397
return i < a.length - 1

‎front/src/applications/editor/tools/rangeEdition/speedSection/SwitchList.tsx

+26-27
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { FaTimes } from 'react-icons/fa';
55
import type { PartialOrReducer } from 'applications/editor/types';
66
import CheckboxRadioSNCF from 'common/BootstrapSNCF/CheckboxRadioSNCF';
77
import { useInfraID } from 'common/osrdContext';
8-
import Tipped from 'common/Tipped';
98

109
import useSwitchTypes from '../../switchEdition/useSwitchTypes';
1110
import type {
@@ -82,33 +81,33 @@ const SwitchList = ({
8281
<label className="small" htmlFor={`${swId}-${optPosition}`}>
8382
{optPosition}
8483
</label>
85-
<Tipped disableTooltip={!isButtonIncompatible}>
86-
<CheckboxRadioSNCF
87-
containerClassName={cx({
88-
'incompatible-configuration-switch': isButtonIncompatible,
89-
})}
90-
type="radio"
91-
label=""
92-
id={`${swId}-${optPosition}`}
93-
name={swId}
94-
onChange={() => {
95-
setSwitchSelection((prev) => ({
96-
...prev,
97-
selectedSwitches: {
98-
...selectedSwitches,
99-
[swId]: {
100-
...prev.selectedSwitches[swId],
101-
position: isPositionNull ? null : optPosition,
102-
},
84+
<CheckboxRadioSNCF
85+
containerClassName={cx({
86+
'incompatible-configuration-switch': isButtonIncompatible,
87+
})}
88+
type="radio"
89+
label=""
90+
id={`${swId}-${optPosition}`}
91+
name={swId}
92+
title={
93+
isButtonIncompatible
94+
? t('Editor.tools.speed-edition.incompatible-switch')
95+
: undefined
96+
}
97+
onChange={() => {
98+
setSwitchSelection((prev) => ({
99+
...prev,
100+
selectedSwitches: {
101+
...selectedSwitches,
102+
[swId]: {
103+
...prev.selectedSwitches[swId],
104+
position: isPositionNull ? null : optPosition,
103105
},
104-
}));
105-
}}
106-
checked={isButtonChecked}
107-
/>
108-
<div className="incompatible-tooltip">
109-
{t('Editor.tools.speed-edition.incompatible-switch')}
110-
</div>
111-
</Tipped>
106+
},
107+
}));
108+
}}
109+
checked={isButtonChecked}
110+
/>
112111
</div>
113112
);
114113
})}

‎front/src/applications/editor/tools/routeEdition/components/WayPointInput.tsx

+13-18
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import type {
1717
} from 'applications/editor/tools/routeEdition/types';
1818
import type { ExtendedEditorContextType } from 'applications/editor/types';
1919
import { useInfraID } from 'common/osrdContext';
20-
import Tipped from 'common/Tipped';
2120
import { useAppDispatch } from 'store';
2221
import useKeyboardShortcuts from 'utils/hooks/useKeyboardShortcuts';
2322

@@ -127,23 +126,19 @@ const WayPointInput = ({ endPoint, wayPoint, onChange }: WayPointInputProps) =>
127126
</span>
128127
)}
129128
</div>
130-
<Tipped mode="left">
131-
<button
132-
type="button"
133-
className="btn btn-primary px-3"
134-
onClick={onBtnClick}
135-
disabled={isDisabled}
136-
>
137-
{getButtonIcon()}
138-
</button>
139-
<span>
140-
{t(
141-
`Editor.tools.routes-edition.actions.pick-${EndPointKeys[endPoint].toLowerCase()}${
142-
isPicking ? '-cancel' : ''
143-
}${isWayPointSelected ? '-delete' : ''}`
144-
)}
145-
</span>
146-
</Tipped>
129+
<button
130+
type="button"
131+
title={t(
132+
`Editor.tools.routes-edition.actions.pick-${EndPointKeys[endPoint].toLowerCase()}${
133+
isPicking ? '-cancel' : ''
134+
}${isWayPointSelected ? '-delete' : ''}`
135+
)}
136+
className="btn btn-primary px-3"
137+
onClick={onBtnClick}
138+
disabled={isDisabled}
139+
>
140+
{getButtonIcon()}
141+
</button>
147142
</div>
148143
</div>
149144
);

‎front/src/applications/editor/tools/switchEdition/components/TrackSectionEndpointSelector.tsx

+11-18
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
import { FLAT_SWITCH_PORTS_PREFIX } from 'applications/editor/tools/switchEdition/utils';
1717
import type { ExtendedEditorContextType } from 'applications/editor/types';
1818
import { useInfraID } from 'common/osrdContext';
19-
import Tipped from 'common/Tipped';
2019
import { useAppDispatch } from 'store';
2120

2221
import type { TrackSectionEntity } from '../../trackEdition/types';
@@ -141,23 +140,17 @@ const TrackSectionEndpointSelector = ({ schema, formData, onChange, name }: Fiel
141140
</div>
142141
)}
143142
</div>
144-
<Tipped mode="left">
145-
<button
146-
type="button"
147-
className="btn btn-primary px-3"
148-
onClick={startPickingPort}
149-
disabled={isDisabled}
150-
>
151-
{isPicking ? <FaTimesCircle /> : <FaMapMarkedAlt />}
152-
</button>
153-
<span>
154-
{t(
155-
`Editor.tools.switch-edition.actions.${
156-
isPicking ? 'pick-track-cancel' : 'pick-track'
157-
}`
158-
)}
159-
</span>
160-
</Tipped>
143+
<button
144+
type="button"
145+
title={t(
146+
`Editor.tools.switch-edition.actions.${isPicking ? 'pick-track-cancel' : 'pick-track'}`
147+
)}
148+
className="btn btn-primary px-3"
149+
onClick={startPickingPort}
150+
disabled={isDisabled}
151+
>
152+
{isPicking ? <FaTimesCircle /> : <FaMapMarkedAlt />}
153+
</button>
161154
</div>
162155
</div>
163156
);

‎front/src/common/BootstrapSNCF/CheckboxRadioSNCF.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ type CheckboxRadioProps = InputHTMLAttributes<HTMLInputElement> & {
1313
};
1414

1515
const CheckboxInput = (props: CheckboxRadioProps) => {
16-
const { id, label, className, containerClassName, ...inputProps } = props;
16+
const { id, label, className, containerClassName, title, ...inputProps } = props;
1717
return (
18-
<div className={`custom-control custom-checkbox ${containerClassName}`}>
18+
<div className={`custom-control custom-checkbox ${containerClassName}`} title={title}>
1919
<input
2020
{...inputProps}
2121
id={id}
@@ -30,9 +30,9 @@ const CheckboxInput = (props: CheckboxRadioProps) => {
3030
};
3131

3232
const RadioInput = (props: CheckboxRadioProps) => {
33-
const { id, label, className, containerClassName, ...inputProps } = props;
33+
const { id, label, className, containerClassName, title, ...inputProps } = props;
3434
return (
35-
<div className={`custom-control custom-radio ${containerClassName}`}>
35+
<div className={`custom-control custom-radio ${containerClassName}`} title={title}>
3636
<input
3737
{...inputProps}
3838
id={id}

‎front/src/common/Map/Buttons/ButtonMapInfras.tsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,22 @@ import { GiRailway } from 'react-icons/gi';
44

55
import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
66
import { useInfraID } from 'common/osrdContext';
7-
import Tipped from 'common/Tipped';
87
import InfraSelector from 'modules/infra/components/InfraSelector';
98

109
const ButtonMapInfras = ({ isInEditor }: { isInEditor?: boolean }) => {
1110
const { openModal } = useModal();
1211
const infraID = useInfraID();
1312
const { t } = useTranslation('translation');
1413
return (
15-
<Tipped mode="left">
16-
<button
17-
type="button"
18-
className={cx('btn-rounded', 'btn-rounded-white', { 'btn-map-infras-blinking': !infraID })}
19-
onClick={() => openModal(<InfraSelector isInEditor={isInEditor} />, 'lg')}
20-
>
21-
<span className="sr-only">Infrastructures</span>
22-
<GiRailway />
23-
</button>
24-
<span>{t('Editor.nav.choose-infra')} </span>
25-
</Tipped>
14+
<button
15+
type="button"
16+
title={t('Editor.nav.choose-infra')}
17+
className={cx('btn-rounded', 'btn-rounded-white', { 'btn-map-infras-blinking': !infraID })}
18+
onClick={() => openModal(<InfraSelector isInEditor={isInEditor} />, 'lg')}
19+
>
20+
<span className="sr-only">Infrastructures</span>
21+
<GiRailway />
22+
</button>
2623
);
2724
};
2825

‎front/src/common/Map/Buttons/MapButton.tsx

+10-14
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { type ReactNode } from 'react';
22

33
import { useTranslation } from 'react-i18next';
44

5-
import Tipped from 'common/Tipped';
6-
75
type MapButtonProps = {
86
onClick: () => void;
97
isNewButton: boolean;
@@ -24,18 +22,16 @@ const MapButton = ({
2422
const { t } = useTranslation('translation');
2523

2624
return (
27-
<Tipped mode="left">
28-
<button
29-
type="button"
30-
className={`${isNewButton ? 'new-btn-map' : 'btn-rounded btn-rounded-white'} ${extraClasses}`}
31-
onClick={onClick}
32-
data-testid={dataTestId}
33-
>
34-
<span className="sr-only">{t(tooltipKey)}</span>
35-
{icon}
36-
</button>
37-
<span>{t(tooltipKey)}</span>
38-
</Tipped>
25+
<button
26+
type="button"
27+
className={`${isNewButton ? 'new-btn-map' : 'btn-rounded btn-rounded-white'} ${extraClasses}`}
28+
onClick={onClick}
29+
title={t(tooltipKey)}
30+
data-testid={dataTestId}
31+
>
32+
<span className="sr-only">{t(tooltipKey)}</span>
33+
{icon}
34+
</button>
3935
);
4036
};
4137

0 commit comments

Comments
 (0)