0 ? 'border last-nested' : 'border last-nested with-right-margin'} />
172 | );
173 | }
174 | return (
175 |
0 ? 'border horizontal' : 'border horizontal with-right-margin'}
177 | />
178 | );
179 | }
180 | },
181 |
182 | Copy: props => (
183 |
this.copyToClipboard(props.node)}
186 | >
187 | {props.node.isCopied ? 'Copied' : 'Copy'}
188 |
189 | ),
190 |
191 | Container: props => {
192 | // The container decorator will be applied to each node of the json (root and nested)
193 | const { NestedBorder, Icon, Key, Value, Copy } = this.decorators;
194 | return (
195 |
196 |
197 |
198 |
199 |
204 |
205 |
206 | );
207 | }
208 | }
209 |
210 |
211 | /* ----- STYLE APPLIED TO THE TREEBEARD COMPONENT ----- */
212 | style = {
213 | tree: {
214 | base: {
215 | listStyle: 'none',
216 | backgroundColor: '#F5F6F9',
217 | margin: 0,
218 | padding: '15px 25px 15px 25px'
219 | },
220 | node: {
221 | base: {
222 | position: 'relative',
223 | left: '15px',
224 | maxWidth: 'calc(100% - 15px)'
225 | },
226 | subtree: {
227 | listStyle: 'none',
228 | marginLeft: '5px',
229 | paddingLeft: '0px'
230 | }
231 | }
232 | }
233 | }
234 |
235 |
236 | /* ----- TRANSFORM RAW JSON TO JSON FOR TREEBEARD COMPONENT ----- */
237 | turnJsonToTreeBeardJson = (/* Object */json, /* List[String] */path) => /* Object */ {
238 | if (!json) { return; }
239 | const copyOfJson = Object.assign({}, json);
240 | const keys = Object.keys(json);
241 | const { length } = keys;
242 |
243 | const res = keys.map((key, index) => {
244 | if (typeof copyOfJson[key] === 'object' && copyOfJson[key] != null) { // is an object
245 | const newPath = Array.isArray(json) ? path.concat('[' + key + ']') : path.concat(key);
246 | return {
247 | name: key,
248 | toggled: false,
249 | isCopied: false,
250 | children: this.turnJsonToTreeBeardJson(copyOfJson[key], newPath),
251 | path: newPath,
252 | isLastChild: this.isLastChild(index, length)
253 | };
254 | } // is a key : string
255 | return {
256 | name: key,
257 | value: copyOfJson[key] || 'null',
258 | path: path.concat(key),
259 | isCopied: false,
260 | isLastChild: this.isLastChild(index, length)
261 | };
262 | });
263 | return res;
264 | }
265 |
266 |
267 | /* ----- CHECK IF THE NODE IS THE LAST CHILD FOR THE VERTICAL BORDER ----- */
268 | isLastChild = (/* Int */index, /* Int */length) => /* Boolean */ {
269 | if (index === length - 1) {
270 | return true;
271 | }
272 | return false;
273 | }
274 |
275 |
276 | /* ----- RETURN THE DATA & METADATA FOR THE TREEBEARD----- */
277 | getMetadata = /* Object */json => /* Object */ {
278 | const copyOfJson = Object.assign({}, json);
279 | delete copyOfJson.data;
280 | const metadata = this.turnJsonToTreeBeardJson(copyOfJson, []);
281 | return metadata;
282 | }
283 |
284 | getData = (/* Object */json, /* Boolean */isGraphql, graphqlUid) => /* Object */ {
285 | const copyOfData = (() => {
286 | if (isGraphql) {
287 | return Object.assign({}, { [graphqlUid]: json });
288 | }
289 | return Object.assign({}, json.data);
290 | })();
291 | const rawData = { data: copyOfData };
292 | const data = this.turnJsonToTreeBeardJson(rawData, []);
293 | data[0].toggled = true; // to initially open data
294 | return data;
295 | }
296 |
297 | constructBannerUid = /* Object */json => /* String */ {
298 | const { type } = json;
299 | const uid = json.uid ? ' · ' + stringCheck(json.uid, this.maxStringSize) : '';
300 | return type + uid;
301 | }
302 |
303 |
304 | /* ----- RENDER FUNCTION ----- */
305 | render() {
306 | const { data, metadata } = this.state;
307 |
308 | if (metadata && Object.keys(metadata).length >= 1) {
309 | return (
310 |
311 |
{this.bannerUid}
312 |
313 |
319 |
320 |
321 |
Metadata
322 |
323 |
329 |
330 | );
331 | }
332 |
333 | return (
334 |
335 |
{this.bannerUid}
336 |
337 |
343 |
344 | );
345 | }
346 | }
347 |
--------------------------------------------------------------------------------