2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React from 'react';
23 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
26 static createIcon(iconName, iconProps, key, nodeProps) {
28 case NodeVisualElementConstants.ICON_ELLIPSES:
29 let iconEllipsesChildren = [];
31 if (iconProps.svgAttributes) {
33 ...iconProps.svgAttributes,
34 key: key + '_ellipsesCircle'
37 let ellipsesBackgroundClassName = (iconProps.isSelected === true)
38 ? 'background-selected'
39 : 'background-unselected';
43 className: ellipsesBackgroundClassName
46 iconEllipsesChildren.push(
47 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
51 let ellipseOneProps = {
52 className: 'ellipses-ellipse',
57 key: key + '_ellipseOne'
59 iconEllipsesChildren.push(
60 React.createElement(NodeVisualElementConstants.ELLIPSE,
63 let ellipseTwoProps = {
64 className: 'ellipses-ellipse',
69 key: key + '_ellipseTwo'
71 iconEllipsesChildren.push(
72 React.createElement(NodeVisualElementConstants.ELLIPSE,
75 let ellipseThreeProps = {
76 className: 'ellipses-ellipse',
81 key: key + '_ellipseThree'
83 iconEllipsesChildren.push(
84 React.createElement(NodeVisualElementConstants.ELLIPSE,
87 let finalEllipsesProps = {
88 className: iconProps.class,
92 if (iconProps.shapeAttributes) {
93 if (iconProps.shapeAttributes.offset) {
94 finalEllipsesProps = {
95 ...finalEllipsesProps,
96 transform: `translate(
97 ${iconProps.shapeAttributes.offset.x},
98 ${iconProps.shapeAttributes.offset.y})`
103 return React.createElement(NodeVisualElementConstants.G,
104 finalEllipsesProps, iconEllipsesChildren);
106 case NodeVisualElementConstants.ICON_TRIANGLE_WARNING:
107 let iconTriangleWarningChildren = [];
109 if (iconProps.svgAttributes) {
111 ...iconProps.svgAttributes,
112 key: key + '_triangleWarningCircle'
115 let triangleWarningBackgrounClassName = (iconProps.isSelected ===
116 true) ? 'background-selected' : 'background-unselected';
120 className: triangleWarningBackgrounClassName
122 iconTriangleWarningChildren.push(
123 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
127 let trianglePathProps = {
128 className: 'triangle-warning',
129 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',
130 key: key + '_triangleWarningPath'
132 iconTriangleWarningChildren.push(
133 React.createElement(NodeVisualElementConstants.PATH,
136 let finalTriangleWarningProps = {
137 className: iconProps.class,
141 if (iconProps.shapeAttributes) {
142 if (iconProps.shapeAttributes.offset) {
143 finalTriangleWarningProps = {
144 ...finalTriangleWarningProps,
145 transform: `translate(
146 ${iconProps.shapeAttributes.offset.x},
147 ${iconProps.shapeAttributes.offset.y})`
152 return React.createElement(NodeVisualElementConstants.G,
153 finalTriangleWarningProps, iconTriangleWarningChildren);
155 case NodeVisualElementConstants.ICON_TICK:
156 let tickOverlayMainKey = nodeProps.meta.id + '_overlayTick';
157 let iconTickRadius = 5;
158 let tickNodeClassName = nodeProps.meta.nodeMeta.className;
159 if (tickNodeClassName ===
160 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
161 tickNodeClassName ===
162 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
165 let tickIconcircleProps = {
166 className: 'icon_tick_circle',
168 key: key + '_tickCircle'
170 let iconTickChildren = [];
172 iconTickChildren.push(
173 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
174 tickIconcircleProps));
175 let tickIconTransformProperty = 'translate(-15, -10)';
176 if (tickNodeClassName ===
177 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
178 tickNodeClassName ===
179 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
180 tickIconTransformProperty = 'translate(-30, -18)';
183 let tickPathProps = {
184 className: 'icon_tick_path',
185 d: 'M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8',
186 key: key + '_tickPath'
188 iconTickChildren.push(
189 React.createElement(NodeVisualElementConstants.PATH, tickPathProps));
191 let finalTickIconProps = {
192 className: 'icon_tick',
193 key: tickOverlayMainKey + '_final',
194 transform: tickIconTransformProperty
196 return React.createElement(NodeVisualElementConstants.G,
197 finalTickIconProps, iconTickChildren);
199 case NodeVisualElementConstants.ICON_WARNING:
200 let warningOverlayMainKey = nodeProps.meta.id + '_overlayTick';
201 let iconWarningRadius = 5;
202 let warningNodeClassName = nodeProps.meta.nodeMeta.className;
203 if (warningNodeClassName ===
204 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
205 warningNodeClassName ===
206 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
207 iconWarningRadius = 8;
209 let warningIconcircleProps = {
210 className: 'icon_warning_circle',
211 r: iconWarningRadius,
212 key: key + '_warningCircle'
214 let iconWarningChildren = [];
216 iconWarningChildren.push(
217 React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
218 warningIconcircleProps));
219 let warningIconTransformProperty = 'translate(-15, -10)';
220 if (warningNodeClassName ===
221 NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
222 warningNodeClassName ===
223 NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
224 warningIconTransformProperty = 'translate(-30, -18)';
226 let warningPathProps = {
227 className: 'icon_warning_path',
228 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',
229 key: key + '_tickPath'
231 iconWarningChildren.push(
232 React.createElement(NodeVisualElementConstants.PATH,
235 let finalWarningIconProps = {
236 className: 'icon_warning',
237 key: warningOverlayMainKey + '_final',
238 transform: warningIconTransformProperty
240 return React.createElement(NodeVisualElementConstants.G,
241 finalWarningIconProps, iconWarningChildren);
246 export default IconFactory;