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

Build # #8

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/b992d3137b6a48b32d97cda51563c37894c24427">b992d3137<a href="https://github.com/mac-s-g/react-json-view/commit/b992d3137b6a48b32d97cda51563c37894c24427">">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/64ca61d76eb3e81b8f7dae2e60276234d8c6a752">64ca61d76</a>">64ca61d76</a><a href="https://github.com/mac-s-g/react-json-view/commit/b992d3137b6a48b32d97cda51563c37894c24427"> into 4e56edf33">4e56edf33</a>

Run Details

0 of 93 branches covered (0.0%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 2 files covered. (100.0%)

56 of 203 relevant lines covered (27.59%)

0.55 hits per line

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

10.89

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

import React from "react";

import {toType} from './../../helpers/util';
import {
    JsonBoolean, JsonFloat, JsonFunction, JsonInteger,
    JsonNan, JsonNull, JsonObject, JsonString
} from './DataTypes';
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.state.expanded = AttributeStore.get(
            this.state.rjvId,
            this.state.state_key,
            'expanded',
            !this.props.collapsed
        );
    }

    state = {
        rjvId: this.props.rjvId,
        state_key: this.props.namespace.join('.'),
        namespace: this.props.namespace,
        indentWidth: this.props.indentWidth,
        expanded: null, //set in constructor
        object_type: (this.props.type == 'array' ? 'array' : 'object'),
        parent_type: (this.props.type == 'array' ? 'array' : 'object'),
        display_name: (this.props.name ? this.props.name : '')
    }

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

    getObjectContent = (depth, src, props) => {
        return (<div class="pushed-content object-container">
            <div class="object-content"
            style={{marginLeft: '6px'}}>
                {this.renderObjectContents(src, props)}
            </div>
        </div>);
    }

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

    getObjectMetaData = (src) => {
        const size = Object.keys(src).length;
        const {rjvId, theme} = this.props;
        const props = {size, rjvId, theme, src};
        return (
            <VariableMeta {...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')} />
        } else {
            expanded_icon = <CirclePlus {...Theme(theme, 'collapsed-icon')} />
        }

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


        return (<div {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', object_padding_left)}>
            <span>
                <span onClick={this.toggleCollapsed} {...Theme(theme, 'brace-row')}>
                    <span class="icon-container">{expanded_icon}</span>
                    {
                    parent_type == 'array'
                    ? <span {...Theme(theme, 'array-key')} key={namespace}>
                        {display_name}
                    </span>
                    : <span {...Theme(theme, 'object-name')} key={namespace}>
                        "{display_name}"
                    </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.getElipsis()
            }
            <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 (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(
                <div {...Theme(theme, 'objectKeyVal', this.props.indentWidth * SINGLE_INDENT)}
                key={variable.name}>
                    {
                        this.props.type == 'array'
                        ? (
                        <div {...Theme(theme, 'array-key')}
                        key={variable.name + '_' + namespace}>
                            {variable.name}
                            <div {...Theme(props.theme, 'colon')}>:</div>
                        </div>
                        )
                        : (
                        <div {...Theme(props.theme, 'object-name')}
                        key={variable.name + '_' + namespace}>
                            "{variable.name}"
                            <div {...Theme(props.theme, 'colon')}>:</div>
                        </div>
                        )

                    }
                    {getValue(variable, props)}
                </div>
                );
            }
        }
        return elements;

        function getValue(variable, props) {
            switch (variable.type) {
                case 'string':
                    return <JsonString value={variable.value} {...props} />;
                case 'integer':
                    return <JsonInteger value={variable.value} {...props} />;
                case 'float':
                    return <JsonFloat value={variable.value} {...props} />;
                case 'boolean':
                    return <JsonBoolean value={variable.value} {...props} />;
                case 'function':
                    return <JsonFunction value={variable.value} {...props} />;
                case 'null':
                    return <JsonNull {...props} />;
                case 'nan':
                    return <JsonNan {...props} />;
                default:
                    //catch-all for types that weren't anticipated
                    return <div class="object-value" {...props} >
                        {variable.value}
                    </div>;
            }
        }
    }
}

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

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

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