#1391

Committed 13 Jul 2021 07:26AM UTC coverage: 77.495% (-5.6%) from 83.138%

Build # #1391

Build Type

push

Committed by Rahul R

Commit Message

shouldComponentUpdate Logic change

Run Details

285 of 376 branches covered (75.8%)

Branch coverage included in aggregate %.

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

47 existing lines in 3 files now uncovered.

507 of 646 relevant lines covered (78.48%)

41.68 hits per line

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

0.0

/src/js/components/OptimizedArrayGroup/ArraySubGroup.js

import React from 'react';

import { CollapsedArray } from './CollapsedArray';
import { getArrayGroupState } from './utils';
import ObjectComponent from '../DataTypes/Object';
import Theme from '../../themes/getStyle';

export class ArraySubGroup extends React.Component {

    constructor(props) {
        super(props);
        const { height, src, start, expandFirstGroup } = props;

        this.size = Math.pow(10, height);
        const groups = Math.ceil(src.length/this.size);

        this.state = {
            expanded: [...getArrayGroupState(
                start,
                expandFirstGroup,
                groups,
                )]
        };
    }

    shouldComponentUpdate(nextProps, nextState) {
        if(nextProps.expanded || this.props.expanded)
            return true;

        if(
            nextProps.start !== this.props.start ||
            nextProps.src?.length !== this.props.src?.length
        )
            return true;
        
        return false;
    }

    render() {
        const {
            theme,
            expanded: parentExpanded,
            getExpandedIcon,
            toggleCollapsed: toggleParentCollapsed,
            src,
            height,
            namespace,
            name,
            start,
            expandFirstGroup,
            rest,
        } = this.props
    
        const toggleCollapsed = i => {
            this.setState(prevState => {
                const newExpanded = [...prevState.expanded]
                newExpanded[i] = !newExpanded[i]
    
                return {
                    expanded: newExpanded
                };
            })
        }
    
        return <React.Fragment>
            <div
                class="object-key-val array-group"
                {...Theme(theme, 'objectKeyVal', {
                    marginLeft: 6,
                    paddingLeft: 5
                })}
            >
                <span {...Theme(theme, 'brace-row')}>
                    <div
                        class="icon-container"
                        {...Theme(theme, 'icon-container')}
                        onClick={toggleParentCollapsed}
                    >
                        {getExpandedIcon(parentExpanded)}
                    </div>
                    { parentExpanded ? (
                        height < 1 ? (
                            <ObjectComponent
                                depth={0}
                                name={false}
                                collapsed={false}
                                groupArraysAfterLength={10}
                                index_offset={start}
                                src={src}
                                namespace={namespace}
                                type="array"
                                parent_type="array_group"
                                theme={theme}
                                {...rest}
                            />
                        ) : this.state.expanded.map((isExpanded, i) => {
                            const groupStart = i * this.size
    
                            return <ArraySubGroup
                                key={name+'_'+height+'_'+i}
                                name={name}
                                height={height - 1}
                                src={src.slice(groupStart, groupStart + this.size)}
                                start={start + groupStart}
                                expanded={isExpanded}
                                toggleCollapsed={() => toggleCollapsed(i)}
                                rest={rest}
                                theme={theme}
                                getExpandedIcon={getExpandedIcon}
                                namespace={namespace}
                                expandFirstGroup={expandFirstGroup}
                            />
                        })
                        ) : (
                            <CollapsedArray 
                                theme={theme}
                                start={start}
                                end={start + src.length - 1}
                                onClick={toggleParentCollapsed}
                            />
                        )}
                </span>
            </div>
            
        </React.Fragment>
    }
}

1	import React from 'react';
2
3	import { CollapsedArray } from './CollapsedArray';
4	import { getArrayGroupState } from './utils';
5	import ObjectComponent from '../DataTypes/Object';
6	import Theme from '../../themes/getStyle';
7
8	export class ArraySubGroup extends React.Component {
9
10	constructor(props) {
11	super(props);	×
12	const { height, src, start, expandFirstGroup } = props;	×
13
14	this.size = Math.pow(10, height);	×
15	const groups = Math.ceil(src.length/this.size);	×
16
17	this.state = {	×
18	expanded: [...getArrayGroupState(
19	start,
20	expandFirstGroup,
21	groups,
22	)]
23	};
24	}
25
26	shouldComponentUpdate(nextProps, nextState) {
NEW 27	if(nextProps.expanded \|\| this.props.expanded)	×
NEW 28	return true;	×
29
NEW 30	if(	×
31	nextProps.start !== this.props.start \|\|	×
32	nextProps.src?.length !== this.props.src?.length
33	)
34	return true;	×
35
NEW 36	return false;	×
37	}
38
39	render() {
40	const {
41	theme,
42	expanded: parentExpanded,
43	getExpandedIcon,
44	toggleCollapsed: toggleParentCollapsed,
45	src,
46	height,
47	namespace,
48	name,
49	start,
50	expandFirstGroup,
51	rest,
52	} = this.props	×
53
54	const toggleCollapsed = i => {	×
55	this.setState(prevState => {	×
56	const newExpanded = [...prevState.expanded]	×
57	newExpanded[i] = !newExpanded[i]	×
58
59	return {	×
60	expanded: newExpanded
61	};
62	})
63	}
64
65	return <React.Fragment>	×
66	<div
67	class="object-key-val array-group"
68	{...Theme(theme, 'objectKeyVal', {
69	marginLeft: 6,
70	paddingLeft: 5
71	})}
72	>
73	<span {...Theme(theme, 'brace-row')}>
74	<div
75	class="icon-container"
76	{...Theme(theme, 'icon-container')}
77	onClick={toggleParentCollapsed}
78	>
79	{getExpandedIcon(parentExpanded)}
80	</div>
81	{ parentExpanded ? (	×
82	height < 1 ? (	×
83	<ObjectComponent
84	depth={0}
85	name={false}
86	collapsed={false}
87	groupArraysAfterLength={10}
88	index_offset={start}
89	src={src}
90	namespace={namespace}
91	type="array"
92	parent_type="array_group"
93	theme={theme}
94	{...rest}
95	/>
96	) : this.state.expanded.map((isExpanded, i) => {
97	const groupStart = i * this.size	×
98
99	return <ArraySubGroup	×
100	key={name+'_'+height+'_'+i}
101	name={name}
102	height={height - 1}
103	src={src.slice(groupStart, groupStart + this.size)}
104	start={start + groupStart}
105	expanded={isExpanded}
106	toggleCollapsed={() => toggleCollapsed(i)}	×
107	rest={rest}
108	theme={theme}
109	getExpandedIcon={getExpandedIcon}
110	namespace={namespace}
111	expandFirstGroup={expandFirstGroup}
112	/>
113	})
114	) : (
115	<CollapsedArray
116	theme={theme}
117	start={start}
118	end={start + src.length - 1}
119	onClick={toggleParentCollapsed}
120	/>
121	)}
122	</span>
123	</div>
124
125	</React.Fragment>
126	}
127	}

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

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