#1847

Committed 21 Nov 2024 10:22AM UTC coverage: 82.54% (-0.8%) from 83.298%

Build # #1847

Build Type

push

Committed by

Commit Message

remove icon

Coverage Stats

282 of 349 branches covered (80.8%)

Branch coverage included in aggregate %.

498 of 596 relevant lines covered (83.56%)

43.71 hits per line

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

78.79

/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')}>
                            {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);	6✔
17	this.state = {	6✔
18	expanded: []
19	};
20	}
21
22	toggleCollapsed = i => {	6✔
23	const newExpanded = [];	1✔
24	for (const j in this.state.expanded) {	1✔
25	newExpanded.push(this.state.expanded[j]);	×
26	}
27	newExpanded[i] = !newExpanded[i];	1✔
28	this.setState({	1✔
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	...rest
54	} = this.props;	9✔
55
56	let object_padding_left = 0;	9✔
57
58	const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT;	9✔
59
60	if (!jsvRoot) {	9✔
61	object_padding_left = this.props.indentWidth * SINGLE_INDENT;	7✔
62	}
63
64	const size = groupArraysAfterLength;	9✔
65	const groups = Math.ceil(src.length / size);	9✔
66
67	return (	9✔
68	<div
69	class="object-key-val"
70	{...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {	9✔
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) => (
80	<div	29✔
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	{this.state.expanded[i] ? (	29✔
90	<ObjectComponent
91	key={name + i}
92	depth={0}
93	name={false}
94	collapsed={false}
95	groupArraysAfterLength={size}
96	index_offset={i * size}
97	src={src.slice(i * size, i * size + size)}
98	namespace={namespace}
99	type="array"
100	parent_type="array_group"
101	theme={theme}
102	{...rest}
103	/>
104	) : (
105	<span
106	{...Theme(theme, 'brace')}
107	onClick={e => {
108	this.toggleCollapsed(i);	1✔
109	}}
110	class="array-group-brace"
111	>
112	[
113	<div
114	{...Theme(
115	theme,
116	'array-group-meta-data'
117	)}
118	class="array-group-meta-data"
119	>
120	<span
121	class="object-size"
122	{...Theme(theme, 'object-size')}
123	>
124	{i * size}
125	{' - '}
126	{i * size + size > src.length	26✔
127	? src.length
128	: i * size + size}
129	</span>
130	</div>
131	]
132	</span>
133	)}
134	</span>
135	</div>
136	))}
137	</div>
138	);
139	}
140	}

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

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