2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React from 'react';
28 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
31 static createIcon(iconName, iconProps, key, nodeProps) {
33 case NodeVisualElementConstants.ICON_ELLIPSES:
34 let iconEllipsesChildren = [];
36 if (iconProps.svgAttributes) {
38 ...iconProps.svgAttributes,
39 key: key + '_ellipsesCircle'
42 let ellipsesBackgroundClassName = (iconProps.isSelected === true)
43 ? 'background-selected'
44 : 'background-unselected';
48 className: ellipsesBackgroundClassName
51 iconEllipsesChildren.push(
52 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
56 let ellipseOneProps = {
57 className: 'ellipses-ellipse',
62 key: key + '_ellipseOne'
64 iconEllipsesChildren.push(
65 React.createElement(NodeVisualElementConstants.ELLIPSE,
68 let ellipseTwoProps = {
69 className: 'ellipses-ellipse',
74 key: key + '_ellipseTwo'
76 iconEllipsesChildren.push(
77 React.createElement(NodeVisualElementConstants.ELLIPSE,
80 let ellipseThreeProps = {
81 className: 'ellipses-ellipse',
86 key: key + '_ellipseThree'
88 iconEllipsesChildren.push(
89 React.createElement(NodeVisualElementConstants.ELLIPSE,
92 let finalEllipsesProps = {
93 className: iconProps.class,
97 if (iconProps.shapeAttributes) {
98 if (iconProps.shapeAttributes.offset) {
99 finalEllipsesProps = {
100 ...finalEllipsesProps,
101 transform: `translate(
102 ${iconProps.shapeAttributes.offset.x},
103 ${iconProps.shapeAttributes.offset.y})`
108 return React.createElement(NodeVisualElementConstants.G,
109 finalEllipsesProps, iconEllipsesChildren);
111 case NodeVisualElementConstants.ICON_TRIANGLE_WARNING:
112 let iconTriangleWarningChildren = [];
114 if (iconProps.svgAttributes) {
116 ...iconProps.svgAttributes,
117 key: key + '_triangleWarningCircle'
120 let triangleWarningBackgrounClassName = (iconProps.isSelected ===
121 true) ? 'background-selected' : 'background-unselected';
125 className: triangleWarningBackgrounClassName
127 iconTriangleWarningChildren.push(
128 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
132 let trianglePathProps = {
133 className: 'triangle-warning',
134 d: 'M-4.5 4 L 0 -6.5 L 4.5 4 Z M-0.5 3.75 L -0.5 3 L 0.5 3 L 0.5 3.75 Z M-0.35 2.75 L -0.75 -3.5 L 0.75 -3.5 L 0.35 2.75 Z',
135 key: key + '_triangleWarningPath'
137 iconTriangleWarningChildren.push(
138 React.createElement(NodeVisualElementConstants.PATH,
141 let finalTriangleWarningProps = {
142 className: iconProps.class,
146 if (iconProps.shapeAttributes) {
147 if (iconProps.shapeAttributes.offset) {
148 finalTriangleWarningProps = {
149 ...finalTriangleWarningProps,
150 transform: `translate(
151 ${iconProps.shapeAttributes.offset.x},
152 ${iconProps.shapeAttributes.offset.y})`
157 return React.createElement(NodeVisualElementConstants.G,
158 finalTriangleWarningProps, iconTriangleWarningChildren);
160 case NodeVisualElementConstants.ICON_TICK:
161 let tickOverlayMainKey = nodeProps.meta.id + '_overlayTick';
162 let iconTickRadius = 5;
163 let tickNodeClassName = nodeProps.meta.nodeMeta.className;
164 if (tickNodeClassName ===
165 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
166 tickNodeClassName ===
167 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
170 let tickIconcircleProps = {
171 className: 'icon_tick_circle',
173 key: key + '_tickCircle'
175 let iconTickChildren = [];
177 iconTickChildren.push(
178 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
179 tickIconcircleProps));
180 let tickIconTransformProperty = 'translate(-15, -10)';
181 if (tickNodeClassName ===
182 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
183 tickNodeClassName ===
184 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
185 tickIconTransformProperty = 'translate(-30, -18)';
188 let tickPathProps = {
189 className: 'icon_tick_path',
190 d: 'M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8',
191 key: key + '_tickPath'
193 iconTickChildren.push(
194 React.createElement(NodeVisualElementConstants.PATH, tickPathProps));
196 let finalTickIconProps = {
197 className: 'icon_tick',
198 key: tickOverlayMainKey + '_final',
199 transform: tickIconTransformProperty
201 return React.createElement(NodeVisualElementConstants.G,
202 finalTickIconProps, iconTickChildren);
204 case NodeVisualElementConstants.ICON_WARNING:
205 let warningOverlayMainKey = nodeProps.meta.id + '_overlayTick';
206 let iconWarningRadius = 5;
207 let warningNodeClassName = nodeProps.meta.nodeMeta.className;
208 if (warningNodeClassName ===
209 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
210 warningNodeClassName ===
211 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
212 iconWarningRadius = 8;
214 let warningIconcircleProps = {
215 className: 'icon_warning_circle',
216 r: iconWarningRadius,
217 key: key + '_warningCircle'
219 let iconWarningChildren = [];
221 iconWarningChildren.push(
222 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
223 warningIconcircleProps));
224 let warningIconTransformProperty = 'translate(-15, -10)';
225 if (warningNodeClassName ===
226 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
227 warningNodeClassName ===
228 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
229 warningIconTransformProperty = 'translate(-30, -18)';
231 let warningPathProps = {
232 className: 'icon_warning_path',
233 d: 'M-0.35 3.8 L -0.35 3.7 L 0.35 3.7 L 0.35 3.8 Z M-0.1 1.8 L -0.6 -3.5 L 0.6 -3.5 L 0.1 1.8 Z',
234 key: key + '_tickPath'
236 iconWarningChildren.push(
237 React.createElement(NodeVisualElementConstants.PATH,
240 let finalWarningIconProps = {
241 className: 'icon_warning',
242 key: warningOverlayMainKey + '_final',
243 transform: warningIconTransformProperty
245 return React.createElement(NodeVisualElementConstants.G,
246 finalWarningIconProps, iconWarningChildren);
251 export default IconFactory;