2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React from 'react';
25 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
28 static createIcon(iconName, iconProps, key, nodeProps) {
30 case NodeVisualElementConstants.ICON_ELLIPSES:
31 let iconEllipsesChildren = [];
33 if (iconProps.svgAttributes) {
35 ...iconProps.svgAttributes,
36 key: key + '_ellipsesCircle'
39 let ellipsesBackgroundClassName = (iconProps.isSelected === true)
40 ? 'background-selected'
41 : 'background-unselected';
45 className: ellipsesBackgroundClassName
48 iconEllipsesChildren.push(
49 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
53 let ellipseOneProps = {
54 className: 'ellipses-ellipse',
59 key: key + '_ellipseOne'
61 iconEllipsesChildren.push(
62 React.createElement(NodeVisualElementConstants.ELLIPSE,
65 let ellipseTwoProps = {
66 className: 'ellipses-ellipse',
71 key: key + '_ellipseTwo'
73 iconEllipsesChildren.push(
74 React.createElement(NodeVisualElementConstants.ELLIPSE,
77 let ellipseThreeProps = {
78 className: 'ellipses-ellipse',
83 key: key + '_ellipseThree'
85 iconEllipsesChildren.push(
86 React.createElement(NodeVisualElementConstants.ELLIPSE,
89 let finalEllipsesProps = {
90 className: iconProps.class,
94 if (iconProps.shapeAttributes) {
95 if (iconProps.shapeAttributes.offset) {
96 finalEllipsesProps = {
97 ...finalEllipsesProps,
98 transform: `translate(
99 ${iconProps.shapeAttributes.offset.x},
100 ${iconProps.shapeAttributes.offset.y})`
105 return React.createElement(NodeVisualElementConstants.G,
106 finalEllipsesProps, iconEllipsesChildren);
108 case NodeVisualElementConstants.ICON_TRIANGLE_WARNING:
109 let iconTriangleWarningChildren = [];
111 if (iconProps.svgAttributes) {
113 ...iconProps.svgAttributes,
114 key: key + '_triangleWarningCircle'
117 let triangleWarningBackgrounClassName = (iconProps.isSelected ===
118 true) ? 'background-selected' : 'background-unselected';
122 className: triangleWarningBackgrounClassName
124 iconTriangleWarningChildren.push(
125 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
129 let trianglePathProps = {
130 className: 'triangle-warning',
131 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',
132 key: key + '_triangleWarningPath'
134 iconTriangleWarningChildren.push(
135 React.createElement(NodeVisualElementConstants.PATH,
138 let finalTriangleWarningProps = {
139 className: iconProps.class,
143 if (iconProps.shapeAttributes) {
144 if (iconProps.shapeAttributes.offset) {
145 finalTriangleWarningProps = {
146 ...finalTriangleWarningProps,
147 transform: `translate(
148 ${iconProps.shapeAttributes.offset.x},
149 ${iconProps.shapeAttributes.offset.y})`
154 return React.createElement(NodeVisualElementConstants.G,
155 finalTriangleWarningProps, iconTriangleWarningChildren);
157 case NodeVisualElementConstants.ICON_TICK:
158 let tickOverlayMainKey = nodeProps.meta.id + '_overlayTick';
159 let iconTickRadius = 5;
160 let tickNodeClassName = nodeProps.meta.nodeMeta.className;
161 if (tickNodeClassName ===
162 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
163 tickNodeClassName ===
164 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
167 let tickIconcircleProps = {
168 className: 'icon_tick_circle',
170 key: key + '_tickCircle'
172 let iconTickChildren = [];
174 iconTickChildren.push(
175 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
176 tickIconcircleProps));
177 let tickIconTransformProperty = 'translate(-15, -10)';
178 if (tickNodeClassName ===
179 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
180 tickNodeClassName ===
181 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
182 tickIconTransformProperty = 'translate(-30, -18)';
185 let tickPathProps = {
186 className: 'icon_tick_path',
187 d: 'M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8',
188 key: key + '_tickPath'
190 iconTickChildren.push(
191 React.createElement(NodeVisualElementConstants.PATH, tickPathProps));
193 let finalTickIconProps = {
194 className: 'icon_tick',
195 key: tickOverlayMainKey + '_final',
196 transform: tickIconTransformProperty
198 return React.createElement(NodeVisualElementConstants.G,
199 finalTickIconProps, iconTickChildren);
201 case NodeVisualElementConstants.ICON_WARNING:
202 let warningOverlayMainKey = nodeProps.meta.id + '_overlayTick';
203 let iconWarningRadius = 5;
204 let warningNodeClassName = nodeProps.meta.nodeMeta.className;
205 if (warningNodeClassName ===
206 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
207 warningNodeClassName ===
208 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
209 iconWarningRadius = 8;
211 let warningIconcircleProps = {
212 className: 'icon_warning_circle',
213 r: iconWarningRadius,
214 key: key + '_warningCircle'
216 let iconWarningChildren = [];
218 iconWarningChildren.push(
219 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
220 warningIconcircleProps));
221 let warningIconTransformProperty = 'translate(-15, -10)';
222 if (warningNodeClassName ===
223 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
224 warningNodeClassName ===
225 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
226 warningIconTransformProperty = 'translate(-30, -18)';
228 let warningPathProps = {
229 className: 'icon_warning_path',
230 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',
231 key: key + '_tickPath'
233 iconWarningChildren.push(
234 React.createElement(NodeVisualElementConstants.PATH,
237 let finalWarningIconProps = {
238 className: 'icon_warning',
239 key: warningOverlayMainKey + '_final',
240 transform: warningIconTransformProperty
242 return React.createElement(NodeVisualElementConstants.G,
243 finalWarningIconProps, iconWarningChildren);
248 export default IconFactory;