#3045

Committed 05 Feb 2021 11:19PM UTC coverage: 2.313% (-80.9%) from 83.209%

Build # #3045

Build Type

push

Committed by

Commit Message

Merge pull request #328 from mac-s-g/bump-minor

quotesOnKeys bugfix

Coverage Stats

0 of 412 branches covered (0.0%)

Branch coverage included in aggregate %.

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

593 existing lines in 29 files now uncovered.

25 of 669 relevant lines covered (3.74%)

0.04 hits per line

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

2.38

/src/js/components/ArrayGroup.js

import React from 'react';
import Theme from './../themes/getStyle';

import VariableMeta from './VariableMeta';
import ObjectName from './ObjectName';
import ObjectComponent from './DataTypes/Object';

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

//single indent is 5px
const SINGLE_INDENT = 5;

export default class extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            expanded: []
        };
    }

    toggleCollapsed = i => {
        const newExpanded = [];
        for (const j in this.state.expanded) {
            newExpanded.push(this.state.expanded[j]);
        }
        newExpanded[i] = !newExpanded[i];
        this.setState({
            expanded: newExpanded
        });
    };

    getExpandedIcon(i) {
        const { theme, iconStyle } = this.props;

        if (this.state.expanded[i]) {
            return <ExpandedIcon {...{ theme, iconStyle }} />;
        }

        return <CollapsedIcon {...{ theme, iconStyle }} />;
    }

    render() {
        const {
            src,
            groupArraysAfterLength,
            depth,
            name,
            theme,
            jsvRoot,
            namespace,
            parent_type,
            ...rest
        } = this.props;

        let object_padding_left = 0;

        const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT;

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

        const size = groupArraysAfterLength;
        const groups = Math.ceil(src.length / size);

        return (
            <div
                class="object-key-val"
                {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
                    paddingLeft: object_padding_left
                })}
            >
                <ObjectName {...this.props} />

                <span>
                    <VariableMeta size={src.length} {...this.props} />
                </span>
                {[...Array(groups)].map((_, i) => (
                    <div
                        key={i}
                        class="object-key-val array-group"
                        {...Theme(theme, 'objectKeyVal', {
                            marginLeft: 6,
                            paddingLeft: array_group_padding_left
                        })}
                    >
                        <span {...Theme(theme, 'brace-row')}>
                            <div
                                class="icon-container"
                                {...Theme(theme, 'icon-container')}
                                onClick={e => {
                                    this.toggleCollapsed(i);
                                }}
                            >
                                {this.getExpandedIcon(i)}
                            </div>
                            {this.state.expanded[i] ? (
                                <ObjectComponent
                                    key={name + i}
                                    depth={0}
                                    name={false}
                                    collapsed={false}
                                    groupArraysAfterLength={size}
                                    index_offset={i * size}
                                    src={src.slice(i * size, i * size + size)}
                                    namespace={namespace}
                                    type="array"
                                    parent_type="array_group"
                                    theme={theme}
                                    {...rest}
                                />
                            ) : (
                                <span
                                    {...Theme(theme, 'brace')}
                                    onClick={e => {
                                        this.toggleCollapsed(i);
                                    }}
                                    class="array-group-brace"
                                >
                                    [
                                    <div
                                        {...Theme(
                                            theme,
                                            'array-group-meta-data'
                                        )}
                                        class="array-group-meta-data"
                                    >
                                        <span
                                            class="object-size"
                                            {...Theme(theme, 'object-size')}
                                        >
                                            {i * size}
                                            {' - '}
                                            {i * size + size > src.length
                                                ? src.length
                                                : i * size + size}
                                        </span>
                                    </div>
                                    ]
                                </span>
                            )}
                        </span>
                    </div>
                ))}
            </div>
        );
    }
}

1	import React from 'react';
2	import Theme from './../themes/getStyle';
3
4	import VariableMeta from './VariableMeta';
5	import ObjectName from './ObjectName';
6	import ObjectComponent from './DataTypes/Object';
7
8	//icons
9	import { CollapsedIcon, ExpandedIcon } from './ToggleIcons';
10
11	//single indent is 5px
12	const SINGLE_INDENT = 5;	1✔
13
14	export default class extends React.PureComponent {
15	constructor(props) {
UNCOV 16	super(props);	×
UNCOV 17	this.state = {	×
18	expanded: []
19	};
20	}
21
UNCOV 22	toggleCollapsed = i => {	×
UNCOV 23	const newExpanded = [];	×
UNCOV 24	for (const j in this.state.expanded) {	×
UNCOV 25	newExpanded.push(this.state.expanded[j]);	×
26	}
UNCOV 27	newExpanded[i] = !newExpanded[i];	×
UNCOV 28	this.setState({	×
29	expanded: newExpanded
30	});
31	};
32
33	getExpandedIcon(i) {
UNCOV 34	const { theme, iconStyle } = this.props;	×
35
UNCOV 36	if (this.state.expanded[i]) {	×
UNCOV 37	return <ExpandedIcon {...{ theme, iconStyle }} />;	×
38	}
39
UNCOV 40	return <CollapsedIcon {...{ theme, iconStyle }} />;	×
41	}
42
43	render() {
44	const {
45	src,
46	groupArraysAfterLength,
47	depth,
48	name,
49	theme,
50	jsvRoot,
51	namespace,
52	parent_type,
53	...rest
UNCOV 54	} = this.props;	×
55
UNCOV 56	let object_padding_left = 0;	×
57
UNCOV 58	const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT;	×
59
UNCOV 60	if (!jsvRoot) {	×
UNCOV 61	object_padding_left = this.props.indentWidth * SINGLE_INDENT;	×
62	}
63
UNCOV 64	const size = groupArraysAfterLength;	×
UNCOV 65	const groups = Math.ceil(src.length / size);	×
66
UNCOV 67	return (	×
68	<div
69	class="object-key-val"
70	{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {	×
71	paddingLeft: object_padding_left
72	})}
73	>
74	<ObjectName {...this.props} />
75
76	<span>
77	<VariableMeta size={src.length} {...this.props} />
78	</span>
79	{[...Array(groups)].map((_, i) => (
UNCOV 80	<div	×
81	key={i}
82	class="object-key-val array-group"
83	{...Theme(theme, 'objectKeyVal', {
84	marginLeft: 6,
85	paddingLeft: array_group_padding_left
86	})}
87	>
88	<span {...Theme(theme, 'brace-row')}>
89	<div
90	class="icon-container"
91	{...Theme(theme, 'icon-container')}
92	onClick={e => {
93	this.toggleCollapsed(i);
94	}}
UNCOV 95	>	×
96	{this.getExpandedIcon(i)}	×
97	</div>
98	{this.state.expanded[i] ? (
99	<ObjectComponent
UNCOV 100	key={name + i}	×
UNCOV 101	depth={0}	×
102	name={false}
103	collapsed={false}
104	groupArraysAfterLength={size}
105	index_offset={i * size}
106	src={src.slice(i * size, i * size + size)}
107	namespace={namespace}
108	type="array"
UNCOV 109	parent_type="array_group"	×
110	theme={theme}
111	{...rest}
112	/>
113	) : (
114	<span	×
115	{...Theme(theme, 'brace')}
116	onClick={e => {
117	this.toggleCollapsed(i);
118	}}
119	class="array-group-brace"
120	>
121	[
122	<div
123	{...Theme(
124	theme,
125	'array-group-meta-data'
126	)}
127	class="array-group-meta-data"
128	>
129	<span
130	class="object-size"
131	{...Theme(theme, 'object-size')}
132	>
UNCOV 133	{i * size}	×
134	{' - '}
135	{i * size + size > src.length
136	? src.length
137	: i * size + size}
138	</span>
139	</div>
140	]
141	</span>
142	)}
143	</span>
144	</div>
145	))}
146	</div>
147	);
148	}
149	}

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

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