#3010

Committed 07 May 2022 12:17AM UTC coverage: 83.281% (+1.2%) from 82.117%

Build # #3010

Build Type

push

Committed by

Commit Message

CustomLink

Coverage Stats

284 of 349 branches covered (81.38%)

Branch coverage included in aggregate %.

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

24 existing lines in 2 files now uncovered.

508 of 602 relevant lines covered (84.39%)

44.71 hits per line

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

96.0

/src/js/components/DataTypes/String.js

import React from 'react';
import { Anchorme } from 'react-anchorme';
import DataTypeLabel from './DataTypeLabel';
import { toType } from './../../helpers/util';

//theme
import Theme from './../../themes/getStyle';

//attribute store for storing collapsed state
import AttributeStore from './../../stores/ObjectAttributes';

const CustomLink = props => {
    return <a {...{ style: { color: '#2C84FF' }, ...props }} />;
};

export default class extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: AttributeStore.get(
                props.rjvId,
                props.namespace,
                'collapsed',
                true
            )
        };
    }

    toggleCollapsed = () => {
        this.setState(
            {
                collapsed: !this.state.collapsed
            },
            () => {
                AttributeStore.set(
                    this.props.rjvId,
                    this.props.namespace,
                    'collapsed',
                    this.state.collapsed
                );
            }
        );
    };

    render() {
        const type_name = 'string';
        const { collapsed } = this.state;
        const { props } = this;
        const { collapseStringsAfterLength, theme } = props;
        let { value } = props;
        let collapsible = toType(collapseStringsAfterLength) === 'integer';
        let style = { style: { cursor: 'default' } };

        if (collapsible && value.length > collapseStringsAfterLength) {
            style.style.cursor = 'pointer';
            if (this.state.collapsed) {
                value = (
                    <span>
                        {value.substring(0, collapseStringsAfterLength)}
                        <span {...Theme(theme, 'ellipsis')}> ...</span>
                    </span>
                );
            }
        }

        return (
            <div {...Theme(theme, 'string')}>
                <DataTypeLabel type_name={type_name} {...props} />
                <span
                    class="string-value"
                    {...style}
                    onClick={this.toggleCollapsed}
                >
                    "
                    {
                        <Anchorme
                            target="_blank"
                            rel="noreferrer noopener"
                            linkComponent={CustomLink}
                        >
                            {value}
                        </Anchorme>
                    }
                    "
                </span>
            </div>
        );
    }
}

1	import React from 'react';
2	import { Anchorme } from 'react-anchorme';
3	import DataTypeLabel from './DataTypeLabel';
4	import { toType } from './../../helpers/util';
5
6	//theme
7	import Theme from './../../themes/getStyle';
8
9	//attribute store for storing collapsed state
10	import AttributeStore from './../../stores/ObjectAttributes';
11
12	const CustomLink = props => {	1✔
NEW 13	return <a {...{ style: { color: '#2C84FF' }, ...props }} />;	×
14	};
15
16	export default class extends React.PureComponent {
17	constructor(props) {
18	super(props);	35✔
19	this.state = {	35✔
20	collapsed: AttributeStore.get(
21	props.rjvId,
22	props.namespace,
23	'collapsed',
24	true
25	)
26	};
27	}
28
29	toggleCollapsed = () => {	35✔
30	this.setState(	1✔
31	{
32	collapsed: !this.state.collapsed
33	},
34	() => {
35	AttributeStore.set(	1✔
36	this.props.rjvId,
37	this.props.namespace,
38	'collapsed',
39	this.state.collapsed
40	);
41	}
42	);
43	};
44
45	render() {
46	const type_name = 'string';	41✔
47	const { collapsed } = this.state;	41✔
48	const { props } = this;	41✔
49	const { collapseStringsAfterLength, theme } = props;	41✔
50	let { value } = props;	41✔
51	let collapsible = toType(collapseStringsAfterLength) === 'integer';	41✔
52	let style = { style: { cursor: 'default' } };	41✔
53
54	if (collapsible && value.length > collapseStringsAfterLength) {	41✔
55	style.style.cursor = 'pointer';	2✔
56	if (this.state.collapsed) {	2✔
57	value = (	1✔
58	<span>
59	{value.substring(0, collapseStringsAfterLength)}
60	<span {...Theme(theme, 'ellipsis')}> ...</span>
61	</span>
62	);
63	}
64	}
65
66	return (	41✔
67	<div {...Theme(theme, 'string')}>
68	<DataTypeLabel type_name={type_name} {...props} />
69	<span
70	class="string-value"
71	{...style}
72	onClick={this.toggleCollapsed}
73	>
74	"
75	{
76	<Anchorme
77	target="_blank"
78	rel="noreferrer noopener"
79	linkComponent={CustomLink}
80	>
81	{value}
82	</Anchorme>
83	}
84	"
85	</span>
86	</div>
87	);
88	}
89	}

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

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