#166

Build # #166

Build Type

push

Committed by

Commit Message

<a href="https://github.com/mac-s-g/react-json-view/commit/<a class=hub.com/mac-s-g/react-json-view/commit/aa2865a5539f06ebf171eb1e4b521f133531d4bb">aa2865a55<a href="https://github.com/mac-s-g/react-json-view/commit/aa2865a5539f06ebf171eb1e4b521f133531d4bb">">Merge </a><a class="double-link" href="https://github.com/mac-s-g/react-json-view/commit/<a class="double-link" href="https://github.com/mac-s-g/react-json-view/commit/1fb9129285868dd689b33abf1cbce6ca380e458d">1fb912928</a>">1fb912928</a><a href="https://github.com/mac-s-g/react-json-view/commit/aa2865a5539f06ebf171eb1e4b521f133531d4bb"> into 66e0d2390">66e0d2390</a>

Run Details

126 of 215 branches covered (58.6%)

Branch coverage included in aggregate %.

189 of 189 new or added lines in 8 files covered. (100.0%)

326 of 471 relevant lines covered (69.21%)

38.26 hits per line

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

68.35

/src/js/components/VariableMeta.js

import React from 'react';
import dispatcher from './../helpers/dispatcher';

import {toType} from './../helpers/util';

//icons
import Clippy from 'react-icons/lib/go/clippy';
import Remove from 'react-icons/lib/fa/times-circle';
import Add from 'react-icons/lib/fa/plus-circle';

//clipboard library
//https://www.npmjs.com/package/clipboard
import Clipboard from 'clipboard';
import ReactTooltip from 'react-tooltip';

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


export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state.id = Date.now().toString();
    }

    state = {
        id: null,
        clipboard: null,
        copy_state: null
    }

    componentDidMount = () => {
        const {id} = this.state;
        const {src} = this.props;
        let clipboard_container = document.getElementById(
            'clipboard-container-' + id
        );

        //cant figure out why document.getElementById
        //is not working for tests
        if (clipboard_container) {
            this.state.clipboard = new Clipboard(
                clipboard_container
            );

            this.state.clipboard.on('success', (e) => {
                this.setState({copy_state: 'success'});
            });

            this.state.clipboard.on('error', (e) => {
                this.setState({copy_state: 'error'});
            });
        }

        this.state.copy_state = null;
    }

    componentWillUnmount = () => {
        this.state.clipboard && this.state.clipboard.destroy();
    }

    getCopyComponent = () => {
        const {id, copy_state} = this.state;
        const {src, size, hover, theme, enableClipboard} = this.props;
        const tooltip_id = 'tooltip-' + id;
        //had to jump through some hoops to get the
        //react-tooltip to act like a react component should.
        //it does not support dynamic content updates
        let style = Theme(theme, 'copy-to-clipboard').style;
        return (
            <span
            class="copy-to-clipboard-container"
            style={{
                display: enableClipboard && hover? 'inline-block' : 'none'
            }}>
                <span
                style={{
                    ...style,
                    display:copy_state=='success' ? 'none' : 'inline-block'
                }}
                data-clipboard-text={JSON.stringify(src)}
                id={"clipboard-container-" + id}
                data-tip='copy to clipboard'
                data-for={tooltip_id} >
                    <Clippy {...Theme(theme, 'copy-icon')} />
                    <ReactTooltip
                    effect="solid"
                    class="rjv-tooltip"
                    id={tooltip_id}
                    place="right"
                    delayShow={1000} />
                </span>
                <span
                style={{
                    ...style,
                    display:copy_state == 'success' && hover
                    ? 'inline-block' : 'none'
                }}
                data-tip='copied'
                data-for={tooltip_id + '-success'} >
                    <Clippy {...Theme(theme, 'copy-icon')} />
                    <ReactTooltip
                    effect="solid"
                    class="rjv-tooltip"
                    id={tooltip_id + '-success'}
                    place="right"
                    afterHide={()=>{
                        this.setState({copy_state: null});
                    }}
                    delayShow={0} />
                </span>
            </span>
        );
    }

    getObjectSize = () => {
        const {size, theme, displayObjectSize} = this.props;
        if (displayObjectSize) {
            return (
                <span class="object-size"
                {...Theme(theme, 'object-size')}>
                    {size} item{size == 1 ? '' : 's'}
                </span>
            );
        }
    }

    getAddAttribute = () => {
        const {
            theme, hover, namespace, name, src, rjvId, depth
        } = this.props;

        return (
        <span
        class="click-to-add"
        style={{verticalAlign: 'top'}}>
            <Add
            class="click-to-add-icon"
            {...Theme(theme, 'addVarIcon', hover)}
            onClick={() => {
                const request = {
                    name: depth > 0 ? name : null,
                    namespace: namespace.splice(
                        0, (namespace.length-1)
                    ),
                    existing_value: src,
                    variable_removed: false,
                    key_name: null
                };
                if (toType(src) == 'object') {
                    dispatcher.dispatch({
                        name: 'ADD_VARIABLE_KEY_REQUEST',
                        rjvId: rjvId,
                        data: request,
                    });
                } else {
                    dispatcher.dispatch({
                        name: 'VARIABLE_ADDED',
                        rjvId: rjvId,
                        data: {
                            ...request,
                            new_value: [...src, null]
                        }
                    });
                }
            }}
            />
        </span>
        );
    }

    getRemoveObject = () => {
        const {
            theme, hover, namespace, name, src, rjvId
        } = this.props;

        //don't allow deleting of root node
        if (namespace.length == 1) {return}

        return (
        <span
        class="click-to-remove"
        style={{verticalAlign: 'top'}}>
            <Remove
            class="click-to-remove-icon"
            {...Theme(theme, 'removeVarIcon', hover)}
            onClick={() => {
                dispatcher.dispatch({
                    name: 'VARIABLE_REMOVED',
                    rjvId: rjvId,
                    data: {
                        name: name,
                        namespace: namespace.splice(0, (namespace.length-1)),
                        existing_value: src,
                        variable_removed: true
                    },
                });
            }}
            />
        </span>
        );
    }

    render = () => {
        const {theme, onEdit, onDelete, onAdd} = this.props;
        return (
        <div {...Theme(theme, 'object-meta-data')}
        class='object-meta-data'
        onClick={(e)=>{
            e.stopPropagation();
        }}>
            {/* size badge display */}
            {this.getObjectSize()}
            {/* copy to clipboard icon */}
            {this.getCopyComponent()}
            {/* copy add/remove icons */}
            {onAdd !== false ? this.getAddAttribute() : null}
            {onDelete !== false ? this.getRemoveObject() : null}
        </div>
        );
    }

}

1	import React from 'react';	2✔
2	import dispatcher from './../helpers/dispatcher';	2✔
3
4	import {toType} from './../helpers/util';	2✔
5
6	//icons
7	import Clippy from 'react-icons/lib/go/clippy';	2✔
8	import Remove from 'react-icons/lib/fa/times-circle';	2✔
9	import Add from 'react-icons/lib/fa/plus-circle';	2✔
10
11	//clipboard library
12	//https://www.npmjs.com/package/clipboard
13	import Clipboard from 'clipboard';	2✔
14	import ReactTooltip from 'react-tooltip';	2✔
15
16	//theme
17	import Theme from './../themes/getStyle';	2✔
18
19
20	export default class extends React.Component {
21	constructor(props) {	352!
22	super(props);
23	this.state.id = Date.now().toString();	32✔
24	}
25
26	state = {
27	id: null,
28	clipboard: null,
29	copy_state: null
30	}
31
32	componentDidMount = () => {
33	const {id} = this.state;	8✔
34	const {src} = this.props;	8✔
35	let clipboard_container = document.getElementById(	8✔
36	'clipboard-container-' + id
37	);
38
39	//cant figure out why document.getElementById
40	//is not working for tests
41	if (clipboard_container) {	8!
42	this.state.clipboard = new Clipboard(	×
43	clipboard_container
44	);
45
46	this.state.clipboard.on('success', (e) => {	×
47	this.setState({copy_state: 'success'});	×
48	});
49
50	this.state.clipboard.on('error', (e) => {	×
51	this.setState({copy_state: 'error'});	×
52	});
53	}
54
55	this.state.copy_state = null;	8✔
56	}
57
58	componentWillUnmount = () => {
59	this.state.clipboard && this.state.clipboard.destroy();	×
60	}
61
62	getCopyComponent = () => {	280✔
63	const {id, copy_state} = this.state;	40✔
64	const {src, size, hover, theme, enableClipboard} = this.props;	40✔
65	const tooltip_id = 'tooltip-' + id;	40✔
66	//had to jump through some hoops to get the
67	//react-tooltip to act like a react component should.
68	//it does not support dynamic content updates
69	let style = Theme(theme, 'copy-to-clipboard').style;	40✔
70	return (	40✔
71	<span
72	class="copy-to-clipboard-container"
73	style={{
74	display: enableClipboard && hover? 'inline-block' : 'none'	94!
75	}}>
76	<span
77	style={{
78	...style,
79	display:copy_state=='success' ? 'none' : 'inline-block'	40!
80	}}
81	data-clipboard-text={JSON.stringify(src)}
82	id={"clipboard-container-" + id}
83	data-tip='copy to clipboard'
84	data-for={tooltip_id} >
85	<Clippy {...Theme(theme, 'copy-icon')} />
86	<ReactTooltip
87	effect="solid"
88	class="rjv-tooltip"
89	id={tooltip_id}
90	place="right"
91	delayShow={1000} />
92	</span>
93	<span
94	style={{
95	...style,
96	display:copy_state == 'success' && hover	40!
97	? 'inline-block' : 'none'	40!
98	}}
99	data-tip='copied'
100	data-for={tooltip_id + '-success'} >
101	<Clippy {...Theme(theme, 'copy-icon')} />
102	<ReactTooltip
103	effect="solid"
104	class="rjv-tooltip"
105	id={tooltip_id + '-success'}
106	place="right"
107	afterHide={()=>{
108	this.setState({copy_state: null});	×
109	}}
110	delayShow={0} />
111	</span>
112	</span>
113	);
114	}
115
116	getObjectSize = () => {	120✔
117	const {size, theme, displayObjectSize} = this.props;	40✔
118	if (displayObjectSize) {	40✔
119	return (	21✔
120	<span class="object-size"
121	{...Theme(theme, 'object-size')}>
122	{size} item{size == 1 ? '' : 's'}	21✔
123	</span>
124	);
125	}
126	}
127
128	getAddAttribute = () => {	91✔
129	const {
130	theme, hover, namespace, name, src, rjvId, depth
131	} = this.props;	13✔
132
133	return (	13✔
134	<span
135	class="click-to-add"
136	style={{verticalAlign: 'top'}}>
137	<Add
138	class="click-to-add-icon"
139	{...Theme(theme, 'addVarIcon', hover)}
140	onClick={() => {
141	const request = {	×
142	name: depth > 0 ? name : null,	×
143	namespace: namespace.splice(
144	0, (namespace.length-1)
145	),
146	existing_value: src,
147	variable_removed: false,
148	key_name: null
149	};
150	if (toType(src) == 'object') {	×
151	dispatcher.dispatch({	×
152	name: 'ADD_VARIABLE_KEY_REQUEST',
153	rjvId: rjvId,
154	data: request,
155	});
156	} else {
157	dispatcher.dispatch({	×
158	name: 'VARIABLE_ADDED',
159	rjvId: rjvId,
160	data: {
161	...request,
162	new_value: [...src, null]
163	}
164	});
165	}
166	}}
167	/>
168	</span>
169	);
170	}
171
172	getRemoveObject = () => {	78✔
173	const {
174	theme, hover, namespace, name, src, rjvId
175	} = this.props;	13✔
176
177	//don't allow deleting of root node
178	if (namespace.length == 1) {return}	13✔
179
180	return (	5✔
181	<span
182	class="click-to-remove"
183	style={{verticalAlign: 'top'}}>
184	<Remove
185	class="click-to-remove-icon"
186	{...Theme(theme, 'removeVarIcon', hover)}
187	onClick={() => {
188	dispatcher.dispatch({	×
189	name: 'VARIABLE_REMOVED',
190	rjvId: rjvId,
191	data: {
192	name: name,
193	namespace: namespace.splice(0, (namespace.length-1)),
194	existing_value: src,
195	variable_removed: true
196	},
197	});
198	}}
199	/>
200	</span>
201	);
202	}
203
204	render = () => {	160✔
205	const {theme, onEdit, onDelete, onAdd} = this.props;	40✔
206	return (	40✔
207	<div {...Theme(theme, 'object-meta-data')}
208	class='object-meta-data'
209	onClick={(e)=>{
210	e.stopPropagation();	×
211	}}>
212	{/* size badge display */}
213	{this.getObjectSize()}
214	{/* copy to clipboard icon */}
215	{this.getCopyComponent()}
216	{/* copy add/remove icons */}
217	{onAdd !== false ? this.getAddAttribute() : null}	40✔
218	{onDelete !== false ? this.getRemoveObject() : null}	40✔
219	</div>
220	);
221	}
222
223	}

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

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