feat: backport

Talend · Oct 24, 2023 · 4886736 · 4886736
1 parent 2085bc0
commit 4886736
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/packages/forms/src/UIForm/fieldsets/Array/Array.component.js b/packages/forms/src/UIForm/fieldsets/Array/Array.component.js
@@ -124,6 +124,7 @@ export default class ArrayWidget extends Component {
 			<Widget
 				{...this.props}
 				{...extraProps}
+				index={index}
 				disabled={this.props.schema.disabled}
 				id={this.props.id && `${this.props.id}-${index}`}
 				schema={getArrayElementSchema(this.props.schema, index)}

diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { InlineMessageInformation } from '@talend/design-system';
-import CollapsiblePanel from '@talend/react-components/lib/CollapsiblePanel';
+import { InlineMessageInformation, CollapsiblePanel } from '@talend/design-system';
 import get from 'lodash/get';
 import Widget from '../../Widget';
 import { generateDescriptionId } from '../../Message/generateId';
@@ -75,34 +74,38 @@ export function defaultTitle(formData, schema, options) {
 export default function createCollapsibleFieldset(title = defaultTitle) {
 	function CollapsibleFieldset(props) {
 		function toggle(event) {
-			event.stopPropagation();
-			event.preventDefault();
+			// event.stopPropagation();
+			// event.preventDefault();
 			const payload = {
 				schema: props.schema,
 				value: {
 					...props.value,
 					isClosed: !props.value.isClosed,
 				},
 			};
-			props.onChange(event, payload);
+			props.onChange(undefined, payload);
 		}
 
-		const { id, schema, value, actions, ...restProps } = props;
+		const { id, schema, value, actions, index, ...restProps } = props;
 		const { items } = schema;
-		const displayAction = actions.map(action => ({
-			...action,
-			displayMode: CollapsiblePanel.displayModes.TYPE_ACTION,
-		}));
 
 		return (
 			<fieldset
 				className={classNames('form-group', theme['collapsible-panel'], 'collapsible-panel')}
 			>
 				<CollapsiblePanel
-					id={`${id}`}
-					header={[{ label: title(value, schema) }, displayAction]}
+					title={title(value, schema)}
+					onToggleExpanded={toggle}
 					onToggle={toggle}
+					index={index}
+					managed
 					expanded={!value.isClosed}
+					action={
+						actions?.[0] && {
+							...actions[0],
+							callback: actions[0].onClick,
+						}
+					}
 				>
 					{schema.description ? (
 						<InlineMessageInformation
@@ -115,8 +118,8 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 					) : (
 						''
 					)}
-					{items.map((itemSchema, index) => (
-						<Widget {...restProps} id={id} key={index} schema={itemSchema} value={value} />
+					{items.map((itemSchema, idx) => (
+						<Widget {...restProps} id={id} key={idx} schema={itemSchema} value={value} />
 					))}
 				</CollapsiblePanel>
 			</fieldset>
@@ -132,6 +135,7 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 	if (process.env.NODE_ENV !== 'production') {
 		CollapsibleFieldset.propTypes = {
 			id: PropTypes.string,
+			index: PropTypes.number,
 			onChange: PropTypes.func.isRequired,
 			schema: PropTypes.shape({
 				items: PropTypes.array.isRequired,