META-INF.resources.js.components.ModelBuilder.Edges.ManyObjectRelationshipEdge.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web

Liferay Object Web

The newest version!

/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import {Text} from '@clayui/core';
import ClayDropDown from '@clayui/drop-down';
import classNames from 'classnames';
import React, {useRef} from 'react';
import {EdgeText} from 'react-flow-renderer';

import {useObjectFolderContext} from '../ModelBuilderContext/objectFolderContext';
import {TYPES} from '../ModelBuilderContext/typesEnum';
import {ObjectRelationshipEdgeData} from '../types';
import {BaseObjectRepationShipEdgeProps} from './ObjectRelationshipEdge';

import './Edge.scss';

interface ManyObjectRelationshipEdgeProps
	extends BaseObjectRepationShipEdgeProps {
	activePopover: boolean;
	data: ObjectRelationshipEdgeData[];
	labelBgStyle: React.CSSProperties;
	labelStyle: React.CSSProperties;
	objectRelationshipEdgeStyle: React.CSSProperties;
	setActivePopover: (value: boolean) => void;
}

export function ManyObjectRelationshipEdge({
	activePopover,
	data,
	edgeCenterX,
	edgeCenterY,
	edgeId,
	edgePath,
	labelBgStyle,
	labelStyle,
	objectRelationshipEdgeStyle,
	setActivePopover,
}: ManyObjectRelationshipEdgeProps) {
	const [_, dispatch] = useObjectFolderContext();
	const menuElementRef = useRef(null);
	const triggerElementRef = useRef(null);
	const someObjectRelationshipInheritance = data.some(({edge}) => edge);

	return (
		
			

			 {
					triggerElementRef.current = event.target as HTMLElement;

					setActivePopover(!activePopover);
				}}
				x={edgeCenterX}
				y={edgeCenterY}
			/>

			 {
					setActivePopover(!activePopover);
				}}
				ref={menuElementRef}
			>
				
					{data.map((objectRelationshipEdgeData, index) => (
						 {
								dispatch({
									payload: {
										selectedObjectRelationshipId:
											objectRelationshipEdgeData.id,
									},
									type: TYPES.SET_SELECTED_OBJECT_RELATIONSHIP_EDGE,
								});
							}}
							symbolRight="angle-right"
							{...(objectRelationshipEdgeData.edge
								? {symbolLeft: 'organizations'}
								: {})}
						>
							
								
									
										{objectRelationshipEdgeData.label}
									
								

								
									{objectRelationshipEdgeData.type}
								
							
						
					))}
				
			
		
	);
}