#1095

Build # #1095

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/f204241fb7ba18f9b480f17f1e93705b882c4ec0">f204241fb<a href="https://github.com/mac-s-g/react-json-view/commit/f204241fb7ba18f9b480f17f1e93705b882c4ec0">">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/8cbc86522a9962b8028f8a2089ff1fb6f1787e07">8cbc86522</a>">8cbc86522</a><a href="https://github.com/mac-s-g/react-json-view/commit/f204241fb7ba18f9b480f17f1e93705b882c4ec0"> into f5fdcbea2">f5fdcbea2</a>

Run Details

386 of 722 branches covered (53.46%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

696 of 1249 relevant lines covered (55.72%)

29.32 hits per line

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

74.35

/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() {
        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 = (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>
        );
    };

    getStringifiedValue = value => {
        if (value === null || value === undefined) {
            return value;
        }

        const { collapseStringsAfterLength } = this.props;
        if (value.length > collapseStringsAfterLength) {
            return value.substring(0, collapseStringsAfterLength) + '...';
        }

        return value.toString();
    };

    getEllipsis = () => {
        const { theme, sortKeys, src } = this.props;
        const { size, object_type } = this.state;

        if (size === 0) {
            //don't render an ellipsis when an object has no items
            return null;
        } else {
            let keys = Object.keys(src || {});
            if (sortKeys && object_type !== 'array') {
                keys = keys.sort();
            }

            const variable = new JsonVariable(keys[0], src[keys[0]]);
            const numberOfOtherVariables = keys.length - 1;
            const variableValueText =
                variable.type === 'object'
                    ? '{...}'
                    : this.getStringifiedValue(variable.value);
            const variableExtraInfoText =
                numberOfOtherVariables > 0
                    ? numberOfOtherVariables === 1
                        ? ' ( +' + (keys.length - 1) + ' item )'
                        : ' ( +' + (keys.length - 1) + ' items )'
                    : '';
            return (
                <div
                    {...Theme(theme, 'informativeEllipis')}
                    class="node-ellipsis"
                    onClick={this.toggleCollapsed}
                >
                    {variable.name}: {variableValueText + variableExtraInfoText}
                </div>
            );
        }
    };

    getObjectMetaData = () => {
        const { size, hovered } = this.state;
        return (
            hovered && (
                <VariableMeta size={size} rowHovered={true} {...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 { 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() : null}
                </span>
            );
        }

        const IconComponent = expanded ? ExpandedIcon : CollapsedIcon;

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

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

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