#1059

Build # #1059

Build Type

push

Committed by GitHub

Commit Message

<a href="https://github.com/mac-s-g/react-json-view/commit/<a class=hub.com/mac-s-g/react-json-view/commit/000f00d959398d066fa31677ea5513895e9702b0">000f00d95<a href="https://github.com/mac-s-g/react-json-view/commit/000f00d959398d066fa31677ea5513895e9702b0">">Merge </a><a class="double-link" href="https://github.com/mac-s-g/react-json-view/commit/<a class="double-link" href="https://github.com/mac-s-g/react-json-view/commit/cf85beb34187529b51d2f660943ee0d950bf3c3a">cf85beb34</a>">cf85beb34</a><a href="https://github.com/mac-s-g/react-json-view/commit/000f00d959398d066fa31677ea5513895e9702b0"> into b55364022">b55364022</a>

Run Details

363 of 689 branches covered (52.69%)

Branch coverage included in aggregate %.

349 of 349 new or added lines in 33 files covered. (100.0%)

656 of 1159 relevant lines covered (56.6%)

26.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.25

/src/js/components/DataTypes/Object.js

import React from 'react';
import { polyfill } from 'react-lifecycles-compat';
import { toType } from './../../helpers/util';
import dispatcher from './../../helpers/dispatcher';

//data type components
import { JsonObject } from './DataTypes';

import VariableEditor from './../VariableEditor';
import VariableMeta from './../VariableMeta';
import ArrayGroup from './../ArrayGroup';
import ObjectName from './../ObjectName';
import DragWrapper from '../DragWrapper';

import searchStringIndex from './../../helpers/searchStringIndex';
//attribute store
import AttributeStore from './../../stores/ObjectAttributes';

//icons
import { CollapsedIcon, ExpandedIcon } from './../ToggleIcons';
import { Edit } from '../icons';

//theme
import Theme from './../../themes/getStyle';
import ObjectAttributes from '../../stores/ObjectAttributes';

//increment 1 with each nested object & array
const DEPTH_INCREMENT = 1;
//single indent is 5px
const SINGLE_INDENT = 5;

class RjvObject extends React.PureComponent {
    constructor(props) {
        super(props);
        const state = RjvObject.getState(props);
        this.state = {
            ...state,
            prevProps: {},
            dropTarget: {},
            dragEnabled: true,
            hoveredOver: false
        };
    }

    componentDidMount() {
        // console.log(ObjectAttributes.get(this.props.rjvId, this.props.namespace, 'expanded', undefined));
        ObjectAttributes.on(
            'expanded-' + this.props.namespace.join(','),
            this.handleExpand
        );
    }

    componentWillUnmount() {
        ObjectAttributes.removeListener(
            'expanded-' + this.props.namespace.join(','),
            this.handleExpand
        );
    }

    handleExpand = () => {
        const isExpanded = AttributeStore.get(
            this.props.rjvId,
            this.props.namespace,
            'expanded',
            false
        );
        this.setState({
            expanded: isExpanded
        });
    };

    static getState = props => {
        const size = Object.keys(props.src).length;
        //if root then have it's default expanded value true, others false
        const expanded =
            (props.collapsed === false ||
                (props.collapsed !== true && props.collapsed > props.depth)) &&
            (!props.shouldCollapse ||
                props.shouldCollapse({
                    name: props.name,
                    src: props.src,
                    type: toType(props.src),
                    namespace: props.namespace
                }) === false) &&
            //initialize closed if object has no items
            size !== 0;
        const searchExpanded = searchStringIndex(
            JSON.stringify(props.src),
            props.search
        );
        const state = {
            expanded:
                searchExpanded > 0 ||
                AttributeStore.get(
                    props.rjvId,
                    props.namespace,
                    'expanded',
                    expanded
                ),
            object_type: props.type === 'array' ? 'array' : 'object',
            parent_type: props.type === 'array' ? 'array' : 'object',
            size,
            hovered: false
        };
        return state;
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        const { prevProps } = prevState;
        if (
            nextProps.src !== prevProps.src ||
            nextProps.collapsed !== prevProps.collapsed ||
            nextProps.name !== prevProps.name ||
            nextProps.namespace !== prevProps.namespace ||
            nextProps.rjvId !== prevProps.rjvId
        ) {
            const newState = RjvObject.getState(nextProps);
            return {
                ...newState,
                prevProps: nextProps
            };
        }
        return null;
    }

    toggleCollapsed = () => {
        const { rjvId, namespace, type, src } = this.props;
        const { expanded, hoveredOver } = this.state;
        const noSelection =
            window.getSelection && !window.getSelection().toString();
        if (noSelection) {
            //remove meta icons if collapsed and moved away from cursor
            if (hoveredOver && expanded) {
                this.setState({
                    hoveredOver: !hoveredOver
                });
            }
            this.setState(
                {
                    expanded: !expanded
                },
                () => {
                    AttributeStore.set(
                        rjvId,
                        namespace,
                        'expanded',
                        this.state.expanded
                    );
                }
            );

            if (type === 'array') {
                Object.keys(src).forEach(key => {
                    namespace.splice(namespace.length, 0, key);
                    AttributeStore.set(rjvId, namespace, 'expanded', !expanded);
                    namespace.splice(namespace.length - 1, 1);
                });
            }
        }
    };

    getObjectContent = (depth, src, props) => {
        const { theme } = this.props;
        return (
            <div class="pushed-content object-container">
                <div class="object-content" {...Theme(theme, 'pushed-content')}>
                    {this.renderObjectContents(src, props)}
                </div>
            </div>
        );
    };

    getEllipsis = () => {
        const { theme } = this.props;
        const { size } = this.state;

        if (size === 0) {
            //don't render an ellipsis when an object has no items
            return null;
        } else {
            return (
                <div
                    {...Theme(theme, 'ellipsis')}
                    class="node-ellipsis"
                    onClick={this.toggleCollapsed}
                >
                    ...
                </div>
            );
        }
    };

    getObjectMetaData = src => {
        const { size, hovered } = this.state;
        return hovered && <VariableMeta size={size} {...this.props} />;
    };

    updateKeyRequest = e => {
        const { name, namespace, parent_type, rjvId, depth } = this.props;
        e.stopPropagation();
        let existingValue = AttributeStore.getSrcByNamespace({
            rjvId,
            name: 'global',
            namespace: [...namespace].splice(0, namespace.length - 1),
            parent_type
        });
        dispatcher.dispatch({
            name: 'UPDATE_VARIABLE_KEY_REQUEST',
            rjvId: rjvId,
            data: {
                name: namespace[depth - 1],
                namespace: namespace.splice(0, namespace.length - 2),
                existing_value: existingValue,
                variable_removed: false,
                key_name: name
            }
        });
    };

    renderRenameKeyButton = () => {
        const { theme } = this.props;
        const { hovered } = this.state;
        return (
            hovered && (
                <span class="click-to-edit-key" title="Edit Key">
                    <Edit
                        class="click-to-edit-key-icon"
                        {...Theme(theme, 'editVarIcon')}
                        onClick={e => this.updateKeyRequest(e)}
                    />
                </span>
            )
        );
    };

    getBraceStart(object_type, expanded) {
        const { src, theme, iconStyle, parent_type, jsvRoot } = this.props;

        if (parent_type === 'array_group') {
            return (
                <span>
                    <span {...Theme(theme, 'brace')}>
                        {object_type === 'array' ? '[' : '{'}
                    </span>
                    {expanded ? this.getObjectMetaData(src) : null}
                </span>
            );
        }

        const IconComponent = expanded ? ExpandedIcon : CollapsedIcon;

        return (
            <span>
                <span
                    onClick={e => {
                        this.toggleCollapsed();
                    }}
                    {...Theme(theme, 'brace-row')}
                >
                    {parent_type !== 'array' &&
                        !jsvRoot &&
                        this.renderRenameKeyButton()}
                    <div
                        class="icon-container"
                        {...Theme(theme, 'icon-container')}
                    >
                        {!jsvRoot && (
                            <IconComponent {...{ theme, iconStyle }} />
                        )}
                    </div>
                    <ObjectName {...this.props} />
                    <span {...Theme(theme, 'brace')}>
                        {object_type === 'array' ? '[' : '{'}
                    </span>
                </span>
                {expanded ? this.getObjectMetaData(src) : null}
            </span>
        );
    }

    handleOnHover = isHovering => {
        this.setState({ hoveredOver: isHovering });
    };

    render() {
        // `indentWidth` and `collapsed` props will
        // perpetuate to children via `...rest`
        const {
            depth,
            src,
            namespace,
            name,
            type,
            parent_type,
            theme,
            jsvRoot,
            iconStyle,
            ...rest
        } = this.props;

        const { object_type, expanded } = this.state;

        let styles = {};
        if (!jsvRoot && parent_type !== 'array_group') {
            styles.paddingLeft = this.props.indentWidth * SINGLE_INDENT;
        } else if (parent_type === 'array_group') {
            styles.borderLeft = 0;
            styles.display = 'inline';
        }

        return (
            <div
                class="object-key-val"
                class="object-key-val"
                onMouseEnter={() =>
                    this.setState({ ...this.state, hovered: true })
                }
                onMouseLeave={() =>
                    this.setState({ ...this.state, hovered: false })
                }
                {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', styles)}
            >
                {this.getBraceStart(object_type, expanded)}
                {expanded
                    ? this.getObjectContent(depth, src, {
                          theme,
                          iconStyle,
                          ...rest
                      })
                    : this.getEllipsis()}
                <span class="brace-row">
                    <span
                        style={{
                            ...Theme(theme, 'brace').style,
                            paddingLeft: expanded ? '3px' : '0px'
                        }}
                    >
                        {object_type === 'array' ? ']' : '}'}
                    </span>
                    {expanded ? null : this.getObjectMetaData(src)}
                </span>
            </div>
        );
    }

    handleDragAllow = allowToDrag => {
        this.setState({
            dragEnabled: allowToDrag
        });
    };

    renderObjectContents = (variables, props) => {
        const {
            depth,
            parent_type,
            index_offset,
            groupArraysAfterLength,
            namespace,
            src,
            type,
            sortKeys,
            rjvId
        } = this.props;
        const { object_type, dropTarget, dragEnabled } = this.state;
        let elements = [],
            variable;
        let keys = Object.keys(variables || {});
        if (sortKeys && object_type !== 'array') {
            keys = keys.sort();
        }

        keys.forEach((name, index) => {
            variable = new JsonVariable(name, variables[name]);

            if (parent_type === 'array_group' && index_offset) {
                variable.name = parseInt(variable.name) + index_offset;
            }
            if (!variables.hasOwnProperty(name)) {
                return;
            } else if (variable.type === 'object') {
                elements.push(
                    <DragWrapper
                        key={variable.name}
                        name={variable.name}
                        value={variable.value}
                        dropMarker={
                            index === keys.length - 1
                                ? 'drop-after'
                                : 'drop-before'
                        }
                        dropTarget={dropTarget}
                        depth={depth}
                        namespace={namespace}
                        rjvId={rjvId}
                        src={src}
                        dragAllowed={dragEnabled}
                        canDrop={true}
                    >
                        <JsonObject
                            key={variable.name}
                            depth={depth + DEPTH_INCREMENT}
                            name={variable.name}
                            src={variable.value}
                            type={variable.type}
                            namespace={namespace.concat(variable.name)}
                            parent_type={object_type}
                            {...props}
                        />
                    </DragWrapper>
                );
            } else if (variable.type === 'array') {
                let ObjectComponent = JsonObject;

                if (
                    groupArraysAfterLength &&
                    variable.value.length > groupArraysAfterLength
                ) {
                    ObjectComponent = ArrayGroup;
                }

                elements.push(
                    <DragWrapper
                        key={variable.name}
                        name={variable.name}
                        value={variable.value}
                        dropMarker={
                            index === keys.length - 1
                                ? 'drop-after'
                                : 'drop-before'
                        }
                        dropTarget={dropTarget}
                        depth={depth}
                        namespace={namespace}
                        rjvId={rjvId}
                        src={src}
                        dragAllowed={dragEnabled}
                        isArray={true}
                        canDrop={true}
                    >
                        <ObjectComponent
                            key={variable.name}
                            depth={depth + DEPTH_INCREMENT}
                            name={variable.name}
                            src={variable.value}
                            namespace={namespace.concat(variable.name)}
                            type="array"
                            parent_type={object_type}
                            {...props}
                        />
                    </DragWrapper>
                );
            } else {
                elements.push(
                    <DragWrapper
                        key={variable.name}
                        name={variable.name}
                        value={variable.value}
                        dropMarker={
                            index === keys.length - 1
                                ? 'drop-after'
                                : 'drop-before'
                        }
                        dropTarget={dropTarget}
                        depth={depth}
                        namespace={namespace}
                        rjvId={rjvId}
                        src={src}
                        dragAllowed={dragEnabled}
                        canDrop={true}
                    >
                        <VariableEditor
                            key={variable.name + '_' + namespace}
                            src={src}
                            variable={variable}
                            depth={depth}
                            singleIndent={SINGLE_INDENT}
                            namespace={namespace}
                            type={type}
                            parent_type={object_type}
                            isDragAllowed={this.handleDragAllow}
                            {...props}
                        />
                    </DragWrapper>
                );
            }
        });

        return elements;
    };
}

//just store name, value and type with a variable
class JsonVariable {
    constructor(name, value) {
        this.name = name;
        this.value = value;
        this.type = toType(value);
    }
}

polyfill(RjvObject);

//export component
export default RjvObject;

1	import React from 'react';
2	import { polyfill } from 'react-lifecycles-compat';
3	import { toType } from './../../helpers/util';
4	import dispatcher from './../../helpers/dispatcher';
5
6	//data type components
7	import { JsonObject } from './DataTypes';
8
9	import VariableEditor from './../VariableEditor';
10	import VariableMeta from './../VariableMeta';
11	import ArrayGroup from './../ArrayGroup';
12	import ObjectName from './../ObjectName';
13	import DragWrapper from '../DragWrapper';
14
15	import searchStringIndex from './../../helpers/searchStringIndex';
16	//attribute store
17	import AttributeStore from './../../stores/ObjectAttributes';
18
19	//icons
20	import { CollapsedIcon, ExpandedIcon } from './../ToggleIcons';
21	import { Edit } from '../icons';
22
23	//theme
24	import Theme from './../../themes/getStyle';
25	import ObjectAttributes from '../../stores/ObjectAttributes';
26
27	//increment 1 with each nested object & array
28	const DEPTH_INCREMENT = 1;	1✔
29	//single indent is 5px
30	const SINGLE_INDENT = 5;	1✔
31
32	class RjvObject extends React.PureComponent {
33	constructor(props) {
34	super(props);	45✔
35	const state = RjvObject.getState(props);	45✔
36	this.state = {	45✔
37	...state,
38	prevProps: {},
39	dropTarget: {},
40	dragEnabled: true,
41	hoveredOver: false
42	};
43	}
44
45	componentDidMount() {
46	// console.log(ObjectAttributes.get(this.props.rjvId, this.props.namespace, 'expanded', undefined));
47	ObjectAttributes.on(	18✔
48	'expanded-' + this.props.namespace.join(','),
49	this.handleExpand
50	);
51	}
52
53	componentWillUnmount() {
54	ObjectAttributes.removeListener(	×
55	'expanded-' + this.props.namespace.join(','),
56	this.handleExpand
57	);
58	}
59
60	handleExpand = () => {	45✔
61	const isExpanded = AttributeStore.get(	×
62	this.props.rjvId,
63	this.props.namespace,
64	'expanded',
65	false
66	);
67	this.setState({	×
68	expanded: isExpanded
69	});
70	};
71
72	static getState = props => {	1✔
73	const size = Object.keys(props.src).length;	98✔
74	//if root then have it's default expanded value true, others false
75	const expanded =
76	(props.collapsed === false \|\|	98✔
77	(props.collapsed !== true && props.collapsed > props.depth)) &&
78	(!props.shouldCollapse \|\|
79	props.shouldCollapse({
80	name: props.name,
81	src: props.src,
82	type: toType(props.src),
83	namespace: props.namespace
84	}) === false) &&
85	//initialize closed if object has no items
86	size !== 0;
87	const searchExpanded = searchStringIndex(	98✔
88	JSON.stringify(props.src),
89	props.search
90	);
91	const state = {	98✔
92	expanded:
93	searchExpanded > 0 \|\|	196✔
94	AttributeStore.get(
95	props.rjvId,
96	props.namespace,
97	'expanded',
98	expanded
99	),
100	object_type: props.type === 'array' ? 'array' : 'object',	98✔
101	parent_type: props.type === 'array' ? 'array' : 'object',	98✔
102	size,
103	hovered: false
104	};
105	return state;	98✔
106	};
107
108	static getDerivedStateFromProps(nextProps, prevState) {
109	const { prevProps } = prevState;	53✔
110	if (	53!
111	nextProps.src !== prevProps.src \|\|	74!
112	nextProps.collapsed !== prevProps.collapsed \|\|
113	nextProps.name !== prevProps.name \|\|
114	nextProps.namespace !== prevProps.namespace \|\|
115	nextProps.rjvId !== prevProps.rjvId
116	) {
117	const newState = RjvObject.getState(nextProps);	53✔
118	return {	53✔
119	...newState,
120	prevProps: nextProps
121	};
122	}
123	return null;	×
124	}
125
126	toggleCollapsed = () => {	45✔
127	const { rjvId, namespace, type, src } = this.props;	×
128	const { expanded, hoveredOver } = this.state;	×
129	const noSelection =
130	window.getSelection && !window.getSelection().toString();	×
131	if (noSelection) {	×
132	//remove meta icons if collapsed and moved away from cursor
133	if (hoveredOver && expanded) {	×
134	this.setState({	×
135	hoveredOver: !hoveredOver
136	});
137	}
138	this.setState(	×
139	{
140	expanded: !expanded
141	},
142	() => {
143	AttributeStore.set(	×
144	rjvId,
145	namespace,
146	'expanded',
147	this.state.expanded
148	);
149	}
150	);
151
152	if (type === 'array') {	×
153	Object.keys(src).forEach(key => {	×
154	namespace.splice(namespace.length, 0, key);	×
155	AttributeStore.set(rjvId, namespace, 'expanded', !expanded);	×
156	namespace.splice(namespace.length - 1, 1);	×
157	});
158	}
159	}
160	};
161
162	getObjectContent = (depth, src, props) => {	45✔
163	const { theme } = this.props;	38✔
164	return (	38✔
165	<div class="pushed-content object-container">
166	<div class="object-content" {...Theme(theme, 'pushed-content')}>
167	{this.renderObjectContents(src, props)}
168	</div>
169	</div>
170	);
171	};
172
173	getEllipsis = () => {	45✔
174	const { theme } = this.props;	15✔
175	const { size } = this.state;	15✔
176
177	if (size === 0) {	15✔
178	//don't render an ellipsis when an object has no items
179	return null;	7✔
180	} else {
181	return (	8✔
182	<div
183	{...Theme(theme, 'ellipsis')}
184	class="node-ellipsis"
185	onClick={this.toggleCollapsed}
186	>
187	...
188	</div>
189	);
190	}
191	};
192
193	getObjectMetaData = src => {	45✔
194	const { size, hovered } = this.state;	53✔
195	return hovered && <VariableMeta size={size} {...this.props} />;	53!
196	};
197
198	updateKeyRequest = e => {	45✔
199	const { name, namespace, parent_type, rjvId, depth } = this.props;	×
200	e.stopPropagation();	×
201	let existingValue = AttributeStore.getSrcByNamespace({	×
202	rjvId,
203	name: 'global',
204	namespace: [...namespace].splice(0, namespace.length - 1),
205	parent_type
206	});
207	dispatcher.dispatch({	×
208	name: 'UPDATE_VARIABLE_KEY_REQUEST',
209	rjvId: rjvId,
210	data: {
211	name: namespace[depth - 1],
212	namespace: namespace.splice(0, namespace.length - 2),
213	existing_value: existingValue,
214	variable_removed: false,
215	key_name: name
216	}
217	});
218	};
219
220	renderRenameKeyButton = () => {	45✔
221	const { theme } = this.props;	36✔
222	const { hovered } = this.state;	36✔
223	return (	36✔
224	hovered && (	36!
225	<span class="click-to-edit-key" title="Edit Key">
226	<Edit
227	class="click-to-edit-key-icon"
228	{...Theme(theme, 'editVarIcon')}
229	onClick={e => this.updateKeyRequest(e)}	×
230	/>
231	</span>
232	)
233	);
234	};
235
236	getBraceStart(object_type, expanded) {
237	const { src, theme, iconStyle, parent_type, jsvRoot } = this.props;	53✔
238
239	if (parent_type === 'array_group') {	53✔
240	return (	2✔
241	<span>
242	<span {...Theme(theme, 'brace')}>
243	{object_type === 'array' ? '[' : '{'}	2!
244	</span>
245	{expanded ? this.getObjectMetaData(src) : null}	2!
246	</span>
247	);
248	}
249
250	const IconComponent = expanded ? ExpandedIcon : CollapsedIcon;	51✔
251
252	return (	51✔
253	<span>
254	<span
255	onClick={e => {
256	this.toggleCollapsed();	×
257	}}
258	{...Theme(theme, 'brace-row')}
259	>
260	{parent_type !== 'array' &&	131✔
261	!jsvRoot &&
262	this.renderRenameKeyButton()}
263	<div
264	class="icon-container"
265	{...Theme(theme, 'icon-container')}
266	>
267	{!jsvRoot && (	94✔
268	<IconComponent {...{ theme, iconStyle }} />
269	)}
270	</div>
271	<ObjectName {...this.props} />
272	<span {...Theme(theme, 'brace')}>
273	{object_type === 'array' ? '[' : '{'}	51✔
274	</span>
275	</span>
276	{expanded ? this.getObjectMetaData(src) : null}	51✔
277	</span>
278	);
279	}
280
281	handleOnHover = isHovering => {	45✔
282	this.setState({ hoveredOver: isHovering });	×
283	};
284
285	render() {
286	// `indentWidth` and `collapsed` props will
287	// perpetuate to children via `...rest`
288	const {
289	depth,
290	src,
291	namespace,
292	name,
293	type,
294	parent_type,
295	theme,
296	jsvRoot,
297	iconStyle,
298	...rest
299	} = this.props;	53✔
300
301	const { object_type, expanded } = this.state;	53✔
302
303	let styles = {};	53✔
304	if (!jsvRoot && parent_type !== 'array_group') {	53✔
305	styles.paddingLeft = this.props.indentWidth * SINGLE_INDENT;	43✔
306	} else if (parent_type === 'array_group') {	10✔
307	styles.borderLeft = 0;	2✔
308	styles.display = 'inline';	2✔
309	}
310
311	return (	53✔
312	<div
313	class="object-key-val"
314	class="object-key-val"
315	onMouseEnter={() =>
316	this.setState({ ...this.state, hovered: true })	×
317	}
318	onMouseLeave={() =>
319	this.setState({ ...this.state, hovered: false })	×
320	}
321	{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', styles)}	53✔
322	>
323	{this.getBraceStart(object_type, expanded)}
324	{expanded	53✔
325	? this.getObjectContent(depth, src, {
326	theme,
327	iconStyle,
328	...rest
329	})
330	: this.getEllipsis()}
331	<span class="brace-row">
332	<span
333	style={{
334	...Theme(theme, 'brace').style,
335	paddingLeft: expanded ? '3px' : '0px'	53✔
336	}}
337	>
338	{object_type === 'array' ? ']' : '}'}	53✔
339	</span>
340	{expanded ? null : this.getObjectMetaData(src)}	53✔
341	</span>
342	</div>
343	);
344	}
345
346	handleDragAllow = allowToDrag => {	45✔
347	this.setState({	×
348	dragEnabled: allowToDrag
349	});
350	};
351
352	renderObjectContents = (variables, props) => {	45✔
353	const {
354	depth,
355	parent_type,
356	index_offset,
357	groupArraysAfterLength,
358	namespace,
359	src,
360	type,
361	sortKeys,
362	rjvId
363	} = this.props;	38✔
364	const { object_type, dropTarget, dragEnabled } = this.state;	38✔
365	let elements = [],	38✔
366	variable;
367	let keys = Object.keys(variables \|\| {});	38!
368	if (sortKeys && object_type !== 'array') {	38✔
369	keys = keys.sort();	1✔
370	}
371
372	keys.forEach((name, index) => {	38✔
373	variable = new JsonVariable(name, variables[name]);	115✔
374
375	if (parent_type === 'array_group' && index_offset) {	115✔
376	variable.name = parseInt(variable.name) + index_offset;	2✔
377	}
378	if (!variables.hasOwnProperty(name)) {	115!
379	return;	×
380	} else if (variable.type === 'object') {	115✔
381	elements.push(	12✔
382	<DragWrapper
383	key={variable.name}
384	name={variable.name}
385	value={variable.value}
386	dropMarker={
387	index === keys.length - 1	12✔
388	? 'drop-after'
389	: 'drop-before'
390	}
391	dropTarget={dropTarget}
392	depth={depth}
393	namespace={namespace}
394	rjvId={rjvId}
395	src={src}
396	dragAllowed={dragEnabled}
397	canDrop={true}
398	>
399	<JsonObject
400	key={variable.name}
401	depth={depth + DEPTH_INCREMENT}
402	name={variable.name}
403	src={variable.value}
404	type={variable.type}
405	namespace={namespace.concat(variable.name)}
406	parent_type={object_type}
407	{...props}
408	/>
409	</DragWrapper>
410	);
411	} else if (variable.type === 'array') {	103✔
412	let ObjectComponent = JsonObject;	13✔
413
414	if (	13!
415	groupArraysAfterLength &&	13!
416	variable.value.length > groupArraysAfterLength
417	) {
418	ObjectComponent = ArrayGroup;	×
419	}
420
421	elements.push(	13✔
422	<DragWrapper
423	key={variable.name}
424	name={variable.name}
425	value={variable.value}
426	dropMarker={
427	index === keys.length - 1	13✔
428	? 'drop-after'
429	: 'drop-before'
430	}
431	dropTarget={dropTarget}
432	depth={depth}
433	namespace={namespace}
434	rjvId={rjvId}
435	src={src}
436	dragAllowed={dragEnabled}
437	isArray={true}
438	canDrop={true}
439	>
440	<ObjectComponent
441	key={variable.name}
442	depth={depth + DEPTH_INCREMENT}
443	name={variable.name}
444	src={variable.value}
445	namespace={namespace.concat(variable.name)}
446	type="array"
447	parent_type={object_type}
448	{...props}
449	/>
450	</DragWrapper>
451	);
452	} else {
453	elements.push(	90✔
454	<DragWrapper
455	key={variable.name}
456	name={variable.name}
457	value={variable.value}
458	dropMarker={
459	index === keys.length - 1	90✔
460	? 'drop-after'
461	: 'drop-before'
462	}
463	dropTarget={dropTarget}
464	depth={depth}
465	namespace={namespace}
466	rjvId={rjvId}
467	src={src}
468	dragAllowed={dragEnabled}
469	canDrop={true}
470	>
471	<VariableEditor
472	key={variable.name + '_' + namespace}
473	src={src}
474	variable={variable}
475	depth={depth}
476	singleIndent={SINGLE_INDENT}
477	namespace={namespace}
478	type={type}
479	parent_type={object_type}
480	isDragAllowed={this.handleDragAllow}
481	{...props}
482	/>
483	</DragWrapper>
484	);
485	}
486	});
487
488	return elements;	38✔
489	};
490	}
491
492	//just store name, value and type with a variable
493	class JsonVariable {
494	constructor(name, value) {
495	this.name = name;	115✔
496	this.value = value;	115✔
497	this.type = toType(value);	115✔
498	}
499	}
500
501	polyfill(RjvObject);	1✔
502
503	//export component
504	export default RjvObject;

mac-s-g / react-json-view / #1059

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous