#2828

Committed 18 Mar 2024 12:10PM UTC coverage: 15.895% (-67.8%) from 83.718%

Build # #2828

Build Type

push

Committed by

Commit Message

1.21.6

Coverage Stats

57 of 368 branches covered (15.49%)

Branch coverage included in aggregate %.

101 of 626 relevant lines covered (16.13%)

0.85 hits per line

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

2.94

/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,
            customButtons,
            ...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 customButtons={customButtons} 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) {
16	super(props);	×
17	this.state = {	×
18	expanded: []
19	};
20	}
21
22	toggleCollapsed = i => {	×
23	const newExpanded = [];	×
24	for (const j in this.state.expanded) {	×
25	newExpanded.push(this.state.expanded[j]);	×
26	}
27	newExpanded[i] = !newExpanded[i];	×
28	this.setState({	×
29	expanded: newExpanded
30	});
31	};
32
33	getExpandedIcon(i) {
34	const { theme, iconStyle } = this.props;	×
35
36	if (this.state.expanded[i]) {	×
37	return <ExpandedIcon {...{ theme, iconStyle }} />;	×
38	}
39
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	customButtons,
54	...rest
55	} = this.props;	×
56
57	let object_padding_left = 0;	×
58
59	const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT;	×
60
61	if (!jsvRoot) {	×
62	object_padding_left = this.props.indentWidth * SINGLE_INDENT;	×
63	}
64
65	const size = groupArraysAfterLength;	×
66	const groups = Math.ceil(src.length / size);	×
67
68	return (	×
69	<div
70	class="object-key-val"
71	{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {	×
72	paddingLeft: object_padding_left
73	})}
74	>
75	<ObjectName {...this.props} />
76
77	<span>
78	<VariableMeta customButtons={customButtons} size={src.length} {...this.props} />
79	</span>
80	{[...Array(groups)].map((_, i) => (
81	<div	×
82	key={i}
83	class="object-key-val array-group"
84	{...Theme(theme, 'objectKeyVal', {
85	marginLeft: 6,
86	paddingLeft: array_group_padding_left
87	})}
88	>
89	<span {...Theme(theme, 'brace-row')}>
90	<div
91	class="icon-container"
92	{...Theme(theme, 'icon-container')}
93	onClick={e => {
94	this.toggleCollapsed(i);	×
95	}}
96	>
97	{this.getExpandedIcon(i)}
98	</div>
99	{this.state.expanded[i] ? (	×
100	<ObjectComponent
101	key={name + i}
102	depth={0}
103	name={false}
104	collapsed={false}
105	groupArraysAfterLength={size}
106	index_offset={i * size}
107	src={src.slice(i * size, i * size + size)}
108	namespace={namespace}
109	type="array"
110	parent_type="array_group"
111	theme={theme}
112	{...rest}
113	/>
114	) : (
115	<span
116	{...Theme(theme, 'brace')}
117	onClick={e => {
118	this.toggleCollapsed(i);	×
119	}}
120	class="array-group-brace"
121	>
122	[
123	<div
124	{...Theme(
125	theme,
126	'array-group-meta-data'
127	)}
128	class="array-group-meta-data"
129	>
130	<span
131	class="object-size"
132	{...Theme(theme, 'object-size')}
133	>
134	{i * size}
135	{' - '}
136	{i * size + size > src.length	×
137	? src.length
138	: i * size + size}
139	</span>
140	</div>
141	]
142	</span>
143	)}
144	</span>
145	</div>
146	))}
147	</div>
148	);
149	}
150	}

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

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