#188

Build # #188

Build Type

push

Committed by

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/fb3b20f5ad9deee30e3943ebe0f9f9c2a28dfa07">fb3b20f5a<a href="https://github.com/mac-s-g/react-json-view/commit/fb3b20f5ad9deee30e3943ebe0f9f9c2a28dfa07">">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/6abc18d6427644c8926c0945ea0b34ee2df40eba">6abc18d64</a>">6abc18d64</a><a href="https://github.com/mac-s-g/react-json-view/commit/fb3b20f5ad9deee30e3943ebe0f9f9c2a28dfa07"> into f1c8d7d07">f1c8d7d07</a>

Run Details

170 of 218 branches covered (77.98%)

Branch coverage included in aggregate %.

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

401 of 473 relevant lines covered (84.78%)

38.31 hits per line

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

89.32

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

import React from "react";

import {toType} from './../../helpers/util';

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

import VariableEditor from './../VariableEditor';
import VariableMeta from './../VariableMeta';

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

//icons
import CirclePlus from 'react-icons/lib/md/add-circle-outline';
import CircleMinus from 'react-icons/lib/md/remove-circle-outline';

//theme
import Theme from './../../themes/getStyle';
import Radium from 'radium';

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


@Radium
class rjvObject extends React.Component {

    constructor(props) {
        super(props);
        this.init(props);
    }

    state = {}

    init = (props) => {
        const expanded = (
            props.collapsed === false
            || (props.collapsed !== true
            && props.collapsed > props.depth)
        );
        const state = {
            rjvId: props.rjvId,
            state_key: props.namespace.join('.'),
            namespace: props.namespace,
            indentWidth: props.indentWidth,
            expanded: props.jsvRoot
                ? expanded
                : AttributeStore.get(
                    props.rjvId,
                    props.namespace,
                    'expanded',
                    expanded
                ),
            object_type: (props.type == 'array' ? 'array' : 'object'),
            parent_type: (props.type == 'array' ? 'array' : 'object'),
            display_name: (props.name ? props.name : ''),
            hover: this.state.hover ? this.state.hover : false
        }

        this.state = {...this.state, ...state};
    }

    componentWillReceiveProps(nextProps) {
        this.init(nextProps);
        this.setState(this.state);
    }

    toggleCollapsed = () => {
        this.state.expanded = !this.state.expanded;
        AttributeStore.set(
            this.state.rjvId,
            this.state.namespace,
            'expanded',
            this.state.expanded
        );

        this.setState(this.state);
    }

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

    getEllipsis = () => {
        return (
            <div {...Theme(this.props.theme, 'ellipsis')}
            onClick={this.toggleCollapsed}>
                ...
            </div>
        );
    }

    getObjectMetaData = (src) => {
        const size = Object.keys(src).length;
        const {hover} = this.state;
        const {rjvId, theme} = this.props;
        return (
            <VariableMeta size={size} hover={hover} {...this.props}/>
        );
    }

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

        //expanded/collapsed icon
        let expanded_icon, object_padding_left = 0;

        if (expanded) {
            expanded_icon = <CircleMinus
                {...Theme(theme, 'expanded-icon')}
                class="expanded-icon"
            />
        } else {
            expanded_icon = <CirclePlus
                {...Theme(theme, 'collapsed-icon')}
                class="collapsed-icon"
            />
        }

        if (!jsvRoot) {
            object_padding_left = this.props.indentWidth * SINGLE_INDENT;
        }


        return (<div class='object-key-val'
            {...Theme(
                theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', object_padding_left
            )}
            onMouseEnter={()=>{this.setHover(true)}}
            onMouseLeave={()=>{this.setHover(false)}}
            >
            <span>
                <span onClick={this.toggleCollapsed} {...Theme(theme, 'brace-row')}>
                    <div class="icon-container" {...Theme(theme, 'icon-container')}>
                        {expanded_icon}
                    </div>
                    {
                    parent_type == 'array'
                    ? <span {...Theme(theme, 'array-key')} key={namespace}>
                        {display_name}
                    </span>
                    : <span {...Theme(theme, 'object-name')} key={namespace}>
                        <span style={{verticalAlign:'top'}}>"</span>
                        <div style={{display:'inline-block'}} >
                            {display_name}
                        </div>
                        <span style={{verticalAlign:'top'}}>"</span>
                    </span>
                    }
                    <span {...Theme(theme, 'colon')}>:</span>
                    <span {...Theme(theme, 'brace')}>
                        {object_type == 'array' ? '[' : '{'}
                    </span>
                </span>
                {expanded ? this.getObjectMetaData(src) : null}
            </span>
            {expanded
                ? this.getObjectContent(depth, src, {theme, ...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>);
    }

    renderObjectContents = (variables, props) => {
        const {depth, parent_type} = this.props;
        const {namespace, object_type} = this.state;
        let theme = props.theme;
        let elements = [], variable;

        for (let name in variables) {
            variable = new JsonVariable(name, variables[name]);
            if (!variables.hasOwnProperty(name)) {
                continue;
            } else if (variable.type == 'object') {
                elements.push(
                    <JsonObject key={variable.name}
                        depth={depth + DEPTH_INCREMENT}
                        name={variable.name}
                        src={variable.value}
                        namespace={namespace.concat(variable.name)}
                        parent_type={object_type}
                        {...props}
                    />);
            } else if (variable.type == 'array') {
                elements.push(
                    <JsonObject 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}
                    />);
            } else {
                elements.push(
                    <VariableEditor
                    key={variable.name + '_' + namespace}
                    variable={variable}
                    singleIndent={SINGLE_INDENT}
                    namespace={namespace}
                    type={this.props.type}
                    {...props}/>
                );
            }
        }
        return elements;

    }

    setHover = (hover) => {
        this.state.hover = hover;
        this.setState(this.state);
    }
}

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

//export component
export default rjvObject;

1	import React from "react";	2✔
2
3	import {toType} from './../../helpers/util';	2✔
4
5	//data type components
6	import {JsonObject} from './DataTypes';	2✔
7
8	import VariableEditor from './../VariableEditor';	2✔
9	import VariableMeta from './../VariableMeta';	2✔
10
11	//attribute store
12	import AttributeStore from './../../stores/ObjectAttributes';	2✔
13
14	//icons
15	import CirclePlus from 'react-icons/lib/md/add-circle-outline';	2✔
16	import CircleMinus from 'react-icons/lib/md/remove-circle-outline';	2✔
17
18	//theme
19	import Theme from './../../themes/getStyle';	2✔
20	import Radium from 'radium';	2✔
21
22	//increment 1 with each nested object & array
23	const DEPTH_INCREMENT = 1	2✔
24	//single indent is 5px
25	const SINGLE_INDENT = 5;	2✔
26
27
28	@Radium
29	class rjvObject extends React.Component {
30
31	constructor(props) {	112!
32	super(props);
33	this.init(props);	28✔
34	}
35
36	state = {}
37
38	init = (props) => {
39	const expanded = (
40	props.collapsed === false	37✔
41	\|\| (props.collapsed !== true
42	&& props.collapsed > props.depth)
43	);
44	const state = {	37✔
45	rjvId: props.rjvId,
46	state_key: props.namespace.join('.'),
47	namespace: props.namespace,
48	indentWidth: props.indentWidth,
49	expanded: props.jsvRoot
50	? expanded	37✔
51	: AttributeStore.get(
52	props.rjvId,
53	props.namespace,
54	'expanded',
55	expanded
56	),
57	object_type: (props.type == 'array' ? 'array' : 'object'),	37✔
58	parent_type: (props.type == 'array' ? 'array' : 'object'),	37✔
59	display_name: (props.name ? props.name : ''),	37✔
60	hover: this.state.hover ? this.state.hover : false	37!
61	}
62
63	this.state = {...this.state, ...state};	37✔
64	}
65
66	componentWillReceiveProps(nextProps) {
67	this.init(nextProps);	9✔
68	this.setState(this.state);	9✔
69	}
70
71	toggleCollapsed = () => {
72	this.state.expanded = !this.state.expanded;	×
73	AttributeStore.set(	×
74	this.state.rjvId,
75	this.state.namespace,
76	'expanded',
77	this.state.expanded
78	);
79
80	this.setState(this.state);	×
81	}
82
83	getObjectContent = (depth, src, props) => {
84	return (<div class="pushed-content object-container">	34✔
85	<div class="object-content"
86	{...Theme(this.props.theme, 'pushed-content')} >
87	{this.renderObjectContents(src, props)}
88	</div>
89	</div>);
90	}
91
92	getEllipsis = () => {
93	return (	3✔
94	<div {...Theme(this.props.theme, 'ellipsis')}
95	onClick={this.toggleCollapsed}>
96	...
97	</div>
98	);
99	}
100
101	getObjectMetaData = (src) => {	74✔
102	const size = Object.keys(src).length;	37✔
103	const {hover} = this.state;	37✔
104	const {rjvId, theme} = this.props;	37✔
105	return (	37✔
106	<VariableMeta size={size} hover={hover} {...this.props}/>
107	);
108	}
109
110	render() {	407✔
111	// `indentWidth` and `collapsed` props will
112	// perpetuate to children via `...rest`
113	const {
114	depth, src, namespace, name, type,
115	parent_type, theme, jsvRoot,
116	...rest
117	} = this.props;	37✔
118	const {
119	object_type, display_name, expanded
120	} = this.state;	37✔
121
122	//expanded/collapsed icon
123	let expanded_icon, object_padding_left = 0;	37✔
124
125	if (expanded) {	37✔
126	expanded_icon = <CircleMinus	34✔
127	{...Theme(theme, 'expanded-icon')}
128	class="expanded-icon"
129	/>
130	} else {
131	expanded_icon = <CirclePlus	3✔
132	{...Theme(theme, 'collapsed-icon')}
133	class="collapsed-icon"
134	/>
135	}
136
137	if (!jsvRoot) {	37✔
138	object_padding_left = this.props.indentWidth * SINGLE_INDENT;	28✔
139	}
140
141
142	return (<div class='object-key-val'	37✔
143	{...Theme(
144	theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', object_padding_left	37✔
145	)}
146	onMouseEnter={()=>{this.setHover(true)}}	×
147	onMouseLeave={()=>{this.setHover(false)}}	×
148	>
149	<span>
150	<span onClick={this.toggleCollapsed} {...Theme(theme, 'brace-row')}>
151	<div class="icon-container" {...Theme(theme, 'icon-container')}>
152	{expanded_icon}
153	</div>
154	{
155	parent_type == 'array'
156	? <span {...Theme(theme, 'array-key')} key={namespace}>	37✔
157	{display_name}
158	</span>
159	: <span {...Theme(theme, 'object-name')} key={namespace}>
160	<span style={{verticalAlign:'top'}}>"</span>
161	<div style={{display:'inline-block'}} >
162	{display_name}
163	</div>
164	<span style={{verticalAlign:'top'}}>"</span>
165	</span>
166	}
167	<span {...Theme(theme, 'colon')}>:</span>
168	<span {...Theme(theme, 'brace')}>
169	{object_type == 'array' ? '[' : '{'}	37✔
170	</span>
171	</span>
172	{expanded ? this.getObjectMetaData(src) : null}	37✔
173	</span>
174	{expanded
175	? this.getObjectContent(depth, src, {theme, ...rest})	37✔
176	: this.getEllipsis()
177	}
178	<span class="brace-row">
179	<span style={{
180	...Theme(theme, 'brace').style,
181	paddingLeft:(expanded ? '3px' : '0px')	37✔
182	}} >
183	{object_type == 'array' ? ']' : '}'}	37✔
184	</span>
185	{expanded ? null : this.getObjectMetaData(src)}	37✔
186	</span>
187	</div>);
188	}
189
190	renderObjectContents = (variables, props) => {	136✔
191	const {depth, parent_type} = this.props;	34✔
192	const {namespace, object_type} = this.state;	34✔
193	let theme = props.theme;	34✔
194	let elements = [], variable;	34✔
195
196	for (let name in variables) {	34✔
197	variable = new JsonVariable(name, variables[name]);	88✔
198	if (!variables.hasOwnProperty(name)) {	88!
199	continue;	×
200	} else if (variable.type == 'object') {	88✔
201	elements.push(	11✔
202	<JsonObject key={variable.name}
203	depth={depth + DEPTH_INCREMENT}
204	name={variable.name}
205	src={variable.value}
206	namespace={namespace.concat(variable.name)}
207	parent_type={object_type}
208	{...props}
209	/>);
210	} else if (variable.type == 'array') {	77✔
211	elements.push(	12✔
212	<JsonObject key={variable.name}
213	depth={depth + DEPTH_INCREMENT}
214	name={variable.name}
215	src={variable.value}
216	namespace={namespace.concat(variable.name)}
217	type="array"
218	parent_type={object_type}
219	{...props}
220	/>);
221	} else {
222	elements.push(	65✔
223	<VariableEditor
224	key={variable.name + '_' + namespace}
225	variable={variable}
226	singleIndent={SINGLE_INDENT}
227	namespace={namespace}
228	type={this.props.type}
229	{...props}/>
230	);
231	}
232	}
233	return elements;	34✔
234
235	}
236
237	setHover = (hover) => {
238	this.state.hover = hover;	×
239	this.setState(this.state);	×
240	}
241	}
242
243	//just store name, value and type with a variable
244	class JsonVariable {
245	constructor(name, value) {	88✔
246	this.name = name;	88✔
247	this.value = value;	88✔
248	this.type = toType(value);	88✔
249	}
250	}
251
252	//export component
253	export default rjvObject;

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

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