#1128

Build # #1128

Build Type

push

Committed by GitHub

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/36036343b35f4aeca8073499adf982c289b266d1">36036343b<a href="https://github.com/mac-s-g/react-json-view/commit/36036343b35f4aeca8073499adf982c289b266d1">">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/7054e3c6f34652c33f11f8329d9e6b38d94a5678">7054e3c6f</a>">7054e3c6f</a><a href="https://github.com/mac-s-g/react-json-view/commit/36036343b35f4aeca8073499adf982c289b266d1"> into 47fafb115">47fafb115</a>

Run Details

379 of 724 branches covered (52.35%)

Branch coverage included in aggregate %.

688 of 1263 relevant lines covered (54.47%)

29.19 hits per line

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

55.26

/src/js/index.js

import React from 'react';
import { polyfill } from 'react-lifecycles-compat';
import JsonViewer from './components/JsonViewer';
import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest';
import PasteAddKeyRequest from './components/ObjectKeyModal/PasteAddKeyRequest';
import EditKeyRequest from './components/ObjectKeyModal/EditKeyRequest';
import { toType, isTheme } from './helpers/util';
import ObjectAttributes from './stores/ObjectAttributes';

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

//some style behavior requires css
import './../style/scss/global.scss';
import ValidationFailure from './components/ValidationFailure';

//forward src through to JsonObject component
class ReactJsonView extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            //listen to request to add/edit a key to an object
            addKeyRequest: false,
            editKeyRequest: false,
            pasteAddKeyRequest: false,
            validationFailure: false,
            src: ReactJsonView.defaultProps.src,
            name: ReactJsonView.defaultProps.name,
            theme: ReactJsonView.defaultProps.theme,
            validationMessage: ReactJsonView.defaultProps.validationMessage,
            // the state object also needs to remember the prev prop values, because we need to compare
            // old and new props in getDerivedStateFromProps().
            prevSrc: ReactJsonView.defaultProps.src,
            prevName: ReactJsonView.defaultProps.name,
            prevTheme: ReactJsonView.defaultProps.theme,
            searchKey: '',
            copied: false
        };
    }
    timeout = null;

    //reference id for this instance
    rjvId = Date.now().toString();

    //all acceptable props and default values
    static defaultProps = {
        src: {},
        name: 'root',
        theme: 'rjv-default',
        collapsed: false,
        collapseStringsAfterLength: false,
        shouldCollapse: false,
        sortKeys: false,
        quotesOnKeys: true,
        groupArraysAfterLength: false,
        indentWidth: 4,
        enableClipboard: true,
        displayObjectSize: true,
        displayDataTypes: true,
        onEdit: false,
        onDelete: false,
        onAdd: false,
        onSelect: false,
        iconStyle: 'triangle',
        style: {},
        validationMessage: 'Conversion is not feasible',
        defaultValue: null,
        displaySearch: true,
        displayArrayKey: true
    };

    // will trigger whenever setState() is called, or parent passes in new props.
    static getDerivedStateFromProps(nextProps, prevState) {
        if (
            nextProps.src !== prevState.prevSrc ||
            nextProps.name !== prevState.prevName ||
            nextProps.theme !== prevState.prevTheme
        ) {
            // if we pass in new props, we re-validate
            const newPartialState = {
                src: nextProps.src,
                name: nextProps.name,
                theme: nextProps.theme,
                validationMessage: nextProps.validationMessage,
                prevSrc: nextProps.src,
                prevName: nextProps.name,
                prevTheme: nextProps.theme
            };
            return ReactJsonView.validateState(newPartialState);
        }
        return null;
    }

    componentDidMount() {
        // initialize
        ObjectAttributes.set(this.rjvId, 'global', 'src', this.state.src);
        ObjectAttributes.set(this.rjvId, 'global', 'copied', '!noValueCopied!');
        // bind to events
        const listeners = this.getListeners();
        for (const i in listeners) {
            ObjectAttributes.on(i + '-' + this.rjvId, listeners[i]);
        }
        //reset key request to false once it's observed
        this.setState({
            addKeyRequest: false,
            editKeyRequest: false
        });
    }

    componentDidUpdate(prevProps, prevState) {
        //reset key request to false once it's observed
        if (prevState.addKeyRequest !== false) {
            this.setState({
                addKeyRequest: false
            });
        }
        if (prevState.editKeyRequest !== false) {
            this.setState({
                editKeyRequest: false
            });
        }
        if (prevProps.src !== this.state.src) {
            ObjectAttributes.set(this.rjvId, 'global', 'src', this.state.src);
        }
        if (prevProps.collapsed !== this.props.collapsed) {
            ObjectAttributes.toggleCollapseForAllObjectsAndArrays({
                rjvId: this.rjvId,
                collapsedState: this.props.collapsed,
                value: this.props.src
            });
        }
    }

    componentWillUnmount() {
        const listeners = this.getListeners();
        for (const i in listeners) {
            ObjectAttributes.removeListener(i + '-' + this.rjvId, listeners[i]);
        }
    }

    getListeners = () => {
        return {
            reset: this.resetState,
            copied: this.changeCopyState,
            'validation-failure': this.validationFailure,
            'variable-update': this.updateSrc,
            'add-key-request': this.addKeyRequest,
            'edit-key-request': this.editKeyRequest,
            'paste-add-key-request': this.pasteAddKeyRequest
        };
    };
    //make sure props are passed in as expected
    static validateState = state => {
        const validatedState = {};
        //make sure theme is valid
        if (toType(state.theme) === 'object' && !isTheme(state.theme)) {
            console.error(
                'react-json-view error:',
                'theme prop must be a theme name or valid base-16 theme object.',
                'defaulting to "rjv-default" theme'
            );
            validatedState.theme = 'rjv-default';
        }
        //make sure `src` prop is valid
        if (toType(state.src) !== 'object' && toType(state.src) !== 'array') {
            console.error(
                'react-json-view error:',
                'src property must be a valid json object'
            );
            validatedState.name = 'ERROR';
            validatedState.src = {
                message: 'src property must be a valid json object'
            };
        }
        return {
            // get the original state
            ...state,
            // override the original state
            ...validatedState
        };
    };

    handleSearch = e => {
        const { value } = e.target;
        if (this.timeout) clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            this.setState({ searchKey: value });
        }, 500);
    };

    render() {
        const {
            addKeyRequest,
            theme,
            src,
            searchKey,
            copied,
            editKeyRequest,
            pasteAddKeyRequest,
            validationMessage,
            validationFailure
        } = this.state;

        const { style, defaultValue, displaySearch } = this.props;

        const customClassname = this.props.className || this.props.class || '';
        return (
            <div class={`react-json-editor ${customClassname}`}>
                <div class="react-json-view-search-box">
                    {displaySearch ? (
                        <input
                            class="search-box"
                            type="text"
                            placeholder="Search..."
                            onChange={e => this.handleSearch(e)}
                        ></input>
                    ) : null}
                </div>
                <div
                    class="react-json-view"
                    style={{ ...Theme(theme, 'app-container').style, ...style }}
                >
                    <ValidationFailure
                        message={validationMessage}
                        active={validationFailure}
                        theme={theme}
                        rjvId={this.rjvId}
                    />
                    <JsonViewer
                        {...this.props}
                        copied={copied}
                        src={src}
                        name={false}
                        theme={theme}
                        type={toType(src)}
                        rjvId={this.rjvId}
                        search={searchKey}
                    />
                    <AddKeyRequest
                        active={addKeyRequest}
                        theme={theme}
                        rjvId={this.rjvId}
                        defaultValue={defaultValue}
                    />
                    <EditKeyRequest
                        active={editKeyRequest}
                        theme={theme}
                        rjvId={this.rjvId}
                        defaultValue={defaultValue}
                    />
                    <PasteAddKeyRequest
                        active={pasteAddKeyRequest}
                        theme={theme}
                        rjvId={this.rjvId}
                        defaultValue={defaultValue}
                    />
                </div>
            </div>
        );
    }

    updateSrc = () => {
        const {
            name,
            namespace,
            new_value,
            existing_value,
            updated_src,
            type
        } = ObjectAttributes.get(this.rjvId, 'action', 'variable-update');
        const { onEdit, onDelete, onAdd } = this.props;

        const { src } = this.state;

        let result;

        const on_edit_payload = {
            existing_src: src,
            new_value: new_value,
            updated_src: updated_src,
            name: name,
            namespace: namespace,
            existing_value: existing_value
        };
        switch (type) {
            case 'variable-added':
                result = onAdd(on_edit_payload);
                break;
            case 'variable-edited':
                result = onEdit(on_edit_payload);
                break;
            case 'variable-removed':
                result = onDelete(on_edit_payload);
                break;
            case 'variable-key-added':
                result = onEdit(on_edit_payload);
                break;
        }
        if (result !== false) {
            ObjectAttributes.set(this.rjvId, 'global', 'src', updated_src);
            this.setState({
                src: updated_src
            });
        }
    };

    addKeyRequest = () => {
        this.setState({
            addKeyRequest: true
        });
    };

    editKeyRequest = () => {
        this.setState({
            editKeyRequest: true
        });
    };

    pasteAddKeyRequest = () => {
        this.setState({
            pasteAddKeyRequest: true
        });
    };

    resetState = () => {
        this.setState({
            validationFailure: false,
            addKeyRequest: false,
            editKeyRequest: false,
            pasteAddKeyRequest: false
        });
    };

    validationFailure = () => {
        this.setState({
            validationFailure: true
        });
        setTimeout(() => {
            this.setState({
                validationFailure: false
            });
        }, 5000);
    };

    changeCopyState = () => {
        this.setState({
            copied: !this.state.copied
        });
    };
}

polyfill(ReactJsonView);

export default ReactJsonView;

1	import React from 'react';
2	import { polyfill } from 'react-lifecycles-compat';
3	import JsonViewer from './components/JsonViewer';
4	import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest';
5	import PasteAddKeyRequest from './components/ObjectKeyModal/PasteAddKeyRequest';
6	import EditKeyRequest from './components/ObjectKeyModal/EditKeyRequest';
7	import { toType, isTheme } from './helpers/util';
8	import ObjectAttributes from './stores/ObjectAttributes';
9
10	//global theme
11	import Theme from './themes/getStyle';
12
13	//some style behavior requires css
14	import './../style/scss/global.scss';
15	import ValidationFailure from './components/ValidationFailure';
16
17	//forward src through to JsonObject component
18	class ReactJsonView extends React.PureComponent {
19	constructor(props) {
20	super(props);	7✔
21	this.state = {	7✔
22	//listen to request to add/edit a key to an object
23	addKeyRequest: false,
24	editKeyRequest: false,
25	pasteAddKeyRequest: false,
26	validationFailure: false,
27	src: ReactJsonView.defaultProps.src,
28	name: ReactJsonView.defaultProps.name,
29	theme: ReactJsonView.defaultProps.theme,
30	validationMessage: ReactJsonView.defaultProps.validationMessage,
31	// the state object also needs to remember the prev prop values, because we need to compare
32	// old and new props in getDerivedStateFromProps().
33	prevSrc: ReactJsonView.defaultProps.src,
34	prevName: ReactJsonView.defaultProps.name,
35	prevTheme: ReactJsonView.defaultProps.theme,
36	searchKey: '',
37	copied: false
38	};
39	}
40	timeout = null;	7✔
41
42	//reference id for this instance
43	rjvId = Date.now().toString();	7✔
44
45	//all acceptable props and default values
46	static defaultProps = {	1✔
47	src: {},
48	name: 'root',
49	theme: 'rjv-default',
50	collapsed: false,
51	collapseStringsAfterLength: false,
52	shouldCollapse: false,
53	sortKeys: false,
54	quotesOnKeys: true,
55	groupArraysAfterLength: false,
56	indentWidth: 4,
57	enableClipboard: true,
58	displayObjectSize: true,
59	displayDataTypes: true,
60	onEdit: false,
61	onDelete: false,
62	onAdd: false,
63	onSelect: false,
64	iconStyle: 'triangle',
65	style: {},
66	validationMessage: 'Conversion is not feasible',
67	defaultValue: null,
68	displaySearch: true,
69	displayArrayKey: true
70	};
71
72	// will trigger whenever setState() is called, or parent passes in new props.
73	static getDerivedStateFromProps(nextProps, prevState) {
74	if (	12✔
75	nextProps.src !== prevState.prevSrc \|\|	22✔
76	nextProps.name !== prevState.prevName \|\|
77	nextProps.theme !== prevState.prevTheme
78	) {
79	// if we pass in new props, we re-validate
80	const newPartialState = {	7✔
81	src: nextProps.src,
82	name: nextProps.name,
83	theme: nextProps.theme,
84	validationMessage: nextProps.validationMessage,
85	prevSrc: nextProps.src,
86	prevName: nextProps.name,
87	prevTheme: nextProps.theme
88	};
89	return ReactJsonView.validateState(newPartialState);	7✔
90	}
91	return null;	5✔
92	}
93
94	componentDidMount() {
95	// initialize
96	ObjectAttributes.set(this.rjvId, 'global', 'src', this.state.src);	3✔
97	ObjectAttributes.set(this.rjvId, 'global', 'copied', '!noValueCopied!');	3✔
98	// bind to events
99	const listeners = this.getListeners();	3✔
100	for (const i in listeners) {	3✔
101	ObjectAttributes.on(i + '-' + this.rjvId, listeners[i]);	21✔
102	}
103	//reset key request to false once it's observed
104	this.setState({	3✔
105	addKeyRequest: false,
106	editKeyRequest: false
107	});
108	}
109
110	componentDidUpdate(prevProps, prevState) {
111	//reset key request to false once it's observed
112	if (prevState.addKeyRequest !== false) {	2!
113	this.setState({	×
114	addKeyRequest: false
115	});
116	}
117	if (prevState.editKeyRequest !== false) {	2!
118	this.setState({	×
119	editKeyRequest: false
120	});
121	}
122	if (prevProps.src !== this.state.src) {	2✔
123	ObjectAttributes.set(this.rjvId, 'global', 'src', this.state.src);	1✔
124	}
125	if (prevProps.collapsed !== this.props.collapsed) {	2!
126	ObjectAttributes.toggleCollapseForAllObjectsAndArrays({	×
127	rjvId: this.rjvId,
128	collapsedState: this.props.collapsed,
129	value: this.props.src
130	});
131	}
132	}
133
134	componentWillUnmount() {
135	const listeners = this.getListeners();	×
136	for (const i in listeners) {	×
137	ObjectAttributes.removeListener(i + '-' + this.rjvId, listeners[i]);	×
138	}
139	}
140
141	getListeners = () => {	7✔
142	return {	3✔
143	reset: this.resetState,
144	copied: this.changeCopyState,
145	'validation-failure': this.validationFailure,
146	'variable-update': this.updateSrc,
147	'add-key-request': this.addKeyRequest,
148	'edit-key-request': this.editKeyRequest,
149	'paste-add-key-request': this.pasteAddKeyRequest
150	};
151	};
152	//make sure props are passed in as expected
153	static validateState = state => {	1✔
154	const validatedState = {};	7✔
155	//make sure theme is valid
156	if (toType(state.theme) === 'object' && !isTheme(state.theme)) {	7!
157	console.error(	×
158	'react-json-view error:',
159	'theme prop must be a theme name or valid base-16 theme object.',
160	'defaulting to "rjv-default" theme'
161	);
162	validatedState.theme = 'rjv-default';	×
163	}
164	//make sure `src` prop is valid
165	if (toType(state.src) !== 'object' && toType(state.src) !== 'array') {	7✔
166	console.error(	1✔
167	'react-json-view error:',
168	'src property must be a valid json object'
169	);
170	validatedState.name = 'ERROR';	1✔
171	validatedState.src = {	1✔
172	message: 'src property must be a valid json object'
173	};
174	}
175	return {	7✔
176	// get the original state
177	...state,
178	// override the original state
179	...validatedState
180	};
181	};
182
183	handleSearch = e => {	7✔
184	const { value } = e.target;	×
185	if (this.timeout) clearTimeout(this.timeout);	×
186	this.timeout = setTimeout(() => {	×
187	this.setState({ searchKey: value });	×
188	}, 500);
189	};
190
191	render() {
192	const {
193	addKeyRequest,
194	theme,
195	src,
196	searchKey,
197	copied,
198	editKeyRequest,
199	pasteAddKeyRequest,
200	validationMessage,
201	validationFailure
202	} = this.state;	9✔
203
204	const { style, defaultValue, displaySearch } = this.props;	9✔
205
206	const customClassname = this.props.className \|\| this.props.class \|\| '';	9✔
207	return (	9✔
208	<div class={`react-json-editor ${customClassname}`}>
209	<div class="react-json-view-search-box">
210	{displaySearch ? (	9!
211	<input
212	class="search-box"
213	type="text"
214	placeholder="Search..."
215	onChange={e => this.handleSearch(e)}	×
216	></input>
217	) : null}
218	</div>
219	<div
220	class="react-json-view"
221	style={{ ...Theme(theme, 'app-container').style, ...style }}
222	>
223	<ValidationFailure
224	message={validationMessage}
225	active={validationFailure}
226	theme={theme}
227	rjvId={this.rjvId}
228	/>
229	<JsonViewer
230	{...this.props}
231	copied={copied}
232	src={src}
233	name={false}
234	theme={theme}
235	type={toType(src)}
236	rjvId={this.rjvId}
237	search={searchKey}
238	/>
239	<AddKeyRequest
240	active={addKeyRequest}
241	theme={theme}
242	rjvId={this.rjvId}
243	defaultValue={defaultValue}
244	/>
245	<EditKeyRequest
246	active={editKeyRequest}
247	theme={theme}
248	rjvId={this.rjvId}
249	defaultValue={defaultValue}
250	/>
251	<PasteAddKeyRequest
252	active={pasteAddKeyRequest}
253	theme={theme}
254	rjvId={this.rjvId}
255	defaultValue={defaultValue}
256	/>
257	</div>
258	</div>
259	);
260	}
261
262	updateSrc = () => {	7✔
263	const {
264	name,
265	namespace,
266	new_value,
267	existing_value,
268	updated_src,
269	type
270	} = ObjectAttributes.get(this.rjvId, 'action', 'variable-update');	×
271	const { onEdit, onDelete, onAdd } = this.props;	×
272
273	const { src } = this.state;	×
274
275	let result;
276
277	const on_edit_payload = {	×
278	existing_src: src,
279	new_value: new_value,
280	updated_src: updated_src,
281	name: name,
282	namespace: namespace,
283	existing_value: existing_value
284	};
285	switch (type) {	×
286	case 'variable-added':
287	result = onAdd(on_edit_payload);	×
288	break;	×
289	case 'variable-edited':
290	result = onEdit(on_edit_payload);	×
291	break;	×
292	case 'variable-removed':
293	result = onDelete(on_edit_payload);	×
294	break;	×
295	case 'variable-key-added':
296	result = onEdit(on_edit_payload);	×
297	break;	×
298	}
299	if (result !== false) {	×
300	ObjectAttributes.set(this.rjvId, 'global', 'src', updated_src);	×
301	this.setState({	×
302	src: updated_src
303	});
304	}
305	};
306
307	addKeyRequest = () => {	7✔
308	this.setState({	×
309	addKeyRequest: true
310	});
311	};
312
313	editKeyRequest = () => {	7✔
314	this.setState({	×
315	editKeyRequest: true
316	});
317	};
318
319	pasteAddKeyRequest = () => {	7✔
320	this.setState({	×
321	pasteAddKeyRequest: true
322	});
323	};
324
325	resetState = () => {	7✔
326	this.setState({	×
327	validationFailure: false,
328	addKeyRequest: false,
329	editKeyRequest: false,
330	pasteAddKeyRequest: false
331	});
332	};
333
334	validationFailure = () => {	7✔
335	this.setState({	×
336	validationFailure: true
337	});
338	setTimeout(() => {	×
339	this.setState({	×
340	validationFailure: false
341	});
342	}, 5000);
343	};
344
345	changeCopyState = () => {	7✔
346	this.setState({	×
347	copied: !this.state.copied
348	});
349	};
350	}
351
352	polyfill(ReactJsonView);	1✔
353
354	export default ReactJsonView;

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

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