#953

Build # #953

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/83347c581bb46ea71155a456d7ce48c2d3369606">83347c581<a href="https://github.com/mac-s-g/react-json-view/commit/83347c581bb46ea71155a456d7ce48c2d3369606">">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/d386ade7e67d6b1569c6f27cb49455f614e959fc">d386ade7e</a>">d386ade7e</a><a href="https://github.com/mac-s-g/react-json-view/commit/83347c581bb46ea71155a456d7ce48c2d3369606"> into e2ca30898">e2ca30898</a>

Run Details

275 of 340 branches covered (80.88%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

504 of 597 relevant lines covered (84.42%)

44.32 hits per line

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

68.29

/src/js/components/VariableEditor.js

import React from 'react';
import AutosizeTextarea from 'react-textarea-autosize';

import { toType } from './../helpers/util';
import dispatcher from './../helpers/dispatcher';
import parseInput from './../helpers/parseInput';
import stringifyVariable from './../helpers/stringifyVariable';
import CopyToClipboard from './CopyToClipboard';

//data type components
import {
    JsonBoolean,
    JsonDate,
    JsonFloat,
    JsonFunction,
    JsonInteger,
    JsonNan,
    JsonNull,
    JsonRegexp,
    JsonString,
    JsonUndefined
} from './DataTypes/DataTypes';

//clibboard icon
import { Edit, CheckCircle, RemoveCircle as Remove } from './icons';

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

class VariableEditor extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
            editValue: '',
            hovered: false,
            renameKey: false,
            parsedInput: {
                type: false,
                value: null
            }
        };
    }

    render() {
        const {
            variable,
            singleIndent,
            type,
            theme,
            namespace,
            indentWidth,
            enableClipboard,
            onEdit,
            onDelete,
            onSelect
        } = this.props;
        const { editMode } = this.state;

        return (
            <div
                {...Theme(theme, 'objectKeyVal', {
                    paddingLeft: indentWidth * singleIndent
                })}
                onMouseEnter={() =>
                    this.setState({ ...this.state, hovered: true })
                }
                onMouseLeave={() =>
                    this.setState({ ...this.state, hovered: false })
                }
                class="variable-row"
                key={variable.name}
            >
                {type == 'array' ? (
                    <span
                        {...Theme(theme, 'array-key')}
                        key={variable.name + '_' + namespace}
                    >
                        {variable.name}
                        <div {...Theme(theme, 'colon')}>:</div>
                    </span>
                ) : (
                    <span>
                        <span
                            {...Theme(theme, 'object-name')}
                            class="object-key"
                            key={variable.name + '_' + namespace}
                        >
                            <span style={{ verticalAlign: 'top' }}>"</span>
                            <span style={{ display: 'inline-block' }}>
                                {variable.name}
                            </span>
                            <span style={{ verticalAlign: 'top' }}>"</span>
                        </span>
                        <span {...Theme(theme, 'colon')}>:</span>
                    </span>
                )}
                <div
                    class="variable-value"
                    onClick={
                        onSelect === false && onEdit === false
                            ? null
                            : e => {
                                  let location = [...namespace];
                                  if (
                                      (e.ctrlKey || e.metaKey) &&
                                      onEdit !== false
                                  ) {
                                      this.prepopInput(variable);
                                  } else if (onSelect !== false) {
                                      location.shift();
                                      onSelect({
                                          ...variable,
                                          namespace: location
                                      });
                                  }
                              }
                    }
                    {...Theme(theme, 'variableValue', {
                        cursor: onSelect === false ? 'default' : 'pointer'
                    })}
                >
                    {this.getValue(variable, editMode)}
                </div>
                {enableClipboard ? (
                    <CopyToClipboard
                        rowHovered={this.state.hovered}
                        hidden={editMode}
                        src={variable.value}
                        clickCallback={enableClipboard}
                        {...{ theme, namespace: [...namespace, variable.name] }}
                    />
                ) : null}
                {onEdit !== false && editMode == false
                    ? this.getEditIcon()
                    : null}
                {onDelete !== false && editMode == false
                    ? this.getRemoveIcon()
                    : null}
            </div>
        );
    }

    getEditIcon = () => {
        const { variable, theme } = this.props;

        return (
            <div
                class="click-to-edit"
                style={{
                    verticalAlign: 'top',
                    display: this.state.hovered ? 'inline-block' : 'none'
                }}
            >
                <Edit
                    class="click-to-edit-icon"
                    {...Theme(theme, 'editVarIcon')}
                    onClick={() => {
                        this.prepopInput(variable);
                    }}
                />
            </div>
        );
    };

    prepopInput = variable => {
        if (this.props.onEdit !== false) {
            const stringifiedValue = stringifyVariable(variable.value);
            const detected = parseInput(stringifiedValue);
            this.setState({
                editMode: true,
                editValue: stringifiedValue,
                parsedInput: {
                    type: detected.type,
                    value: detected.value
                }
            });
        }
    };

    getRemoveIcon = () => {
        const { variable, namespace, theme, rjvId } = this.props;

        return (
            <div
                class="click-to-remove"
                style={{
                    verticalAlign: 'top',
                    display: this.state.hovered ? 'inline-block' : 'none'
                }}
            >
                <Remove
                    class="click-to-remove-icon"
                    {...Theme(theme, 'removeVarIcon')}
                    onClick={() => {
                        dispatcher.dispatch({
                            name: 'VARIABLE_REMOVED',
                            rjvId: rjvId,
                            data: {
                                name: variable.name,
                                namespace: namespace,
                                existing_value: variable.value,
                                variable_removed: true
                            }
                        });
                    }}
                />
            </div>
        );
    };

    getValue = (variable, editMode) => {
        const type = editMode ? false : variable.type;
        const { props } = this;
        switch (type) {
            case false:
                return this.getEditInput();
            case 'string':
                return <JsonString value={variable.value} {...props} />;
            case 'integer':
                return <JsonInteger value={variable.value} {...props} />;
            case 'float':
                return <JsonFloat value={variable.value} {...props} />;
            case 'boolean':
                return <JsonBoolean value={variable.value} {...props} />;
            case 'function':
                return <JsonFunction value={variable.value} {...props} />;
            case 'null':
                return <JsonNull {...props} />;
            case 'nan':
                return <JsonNan {...props} />;
            case 'undefined':
                return <JsonUndefined {...props} />;
            case 'date':
                return <JsonDate value={variable.value} {...props} />;
            case 'regexp':
                return <JsonRegexp value={variable.value} {...props} />;
            default:
                // catch-all for types that weren't anticipated
                return (
                    <div class="object-value">
                        {JSON.stringify(variable.value)}
                    </div>
                );
        }
    };

    getEditInput = () => {
        const { theme } = this.props;
        const { editValue } = this.state;

        return (
            <div>
                <AutosizeTextarea
                    type="text"
                    inputRef={input => input && input.focus()}
                    value={editValue}
                    class="variable-editor"
                    onChange={event => {
                        const value = event.target.value;
                        const detected = parseInput(value);
                        this.setState({
                            editValue: value,
                            parsedInput: {
                                type: detected.type,
                                value: detected.value
                            }
                        });
                    }}
                    onKeyDown={e => {
                        switch (e.key) {
                            case 'Escape': {
                                this.setState({
                                    editMode: false,
                                    editValue: ''
                                });
                                break;
                            }
                            case 'Enter': {
                                if (e.ctrlKey || e.metaKey) {
                                    this.submitEdit(true);
                                }
                                break;
                            }
                        }
                        e.stopPropagation();
                    }}
                    placeholder="update this value"
                    {...Theme(theme, 'edit-input')}
                />
                <div {...Theme(theme, 'edit-icon-container')}>
                    <Remove
                        class="edit-cancel"
                        {...Theme(theme, 'cancel-icon')}
                        onClick={() => {
                            this.setState({ editMode: false, editValue: '' });
                        }}
                    />
                    <CheckCircle
                        class="edit-check string-value"
                        {...Theme(theme, 'check-icon')}
                        onClick={() => {
                            this.submitEdit();
                        }}
                    />
                    <div>{this.showDetected()}</div>
                </div>
            </div>
        );
    };

    submitEdit = submit_detected => {
        const { variable, namespace, rjvId } = this.props;
        const { editValue, parsedInput } = this.state;
        let new_value = editValue;
        if (submit_detected && parsedInput.type) {
            new_value = parsedInput.value;
        }
        this.setState({
            editMode: false
        });
        dispatcher.dispatch({
            name: 'VARIABLE_UPDATED',
            rjvId: rjvId,
            data: {
                name: variable.name,
                namespace: namespace,
                existing_value: variable.value,
                new_value: new_value,
                variable_removed: false
            }
        });
    };

    showDetected = () => {
        const { theme, variable, namespace, rjvId } = this.props;
        const { type, value } = this.state.parsedInput;
        const detected = this.getDetectedInput();
        if (detected) {
            return (
                <div>
                    <div {...Theme(theme, 'detected-row')}>
                        {detected}
                        <CheckCircle
                            class="edit-check detected"
                            style={{
                                verticalAlign: 'top',
                                paddingLeft: '3px',
                                ...Theme(theme, 'check-icon').style
                            }}
                            onClick={() => {
                                this.submitEdit(true);
                            }}
                        />
                    </div>
                </div>
            );
        }
    };

    getDetectedInput = () => {
        const { parsedInput } = this.state;
        const { type, value } = parsedInput;
        const { props } = this;
        const { theme } = props;

        if (type !== false) {
            switch (type.toLowerCase()) {
                case 'object':
                    return (
                        <span>
                            <span
                                style={{
                                    ...Theme(theme, 'brace').style,
                                    cursor: 'default'
                                }}
                            >
                                {'{'}
                            </span>
                            <span
                                style={{
                                    ...Theme(theme, 'ellipsis').style,
                                    cursor: 'default'
                                }}
                            >
                                ...
                            </span>
                            <span
                                style={{
                                    ...Theme(theme, 'brace').style,
                                    cursor: 'default'
                                }}
                            >
                                {'}'}
                            </span>
                        </span>
                    );
                case 'array':
                    return (
                        <span>
                            <span
                                style={{
                                    ...Theme(theme, 'brace').style,
                                    cursor: 'default'
                                }}
                            >
                                {'['}
                            </span>
                            <span
                                style={{
                                    ...Theme(theme, 'ellipsis').style,
                                    cursor: 'default'
                                }}
                            >
                                ...
                            </span>
                            <span
                                style={{
                                    ...Theme(theme, 'brace').style,
                                    cursor: 'default'
                                }}
                            >
                                {']'}
                            </span>
                        </span>
                    );
                case 'string':
                    return <JsonString value={value} {...props} />;
                case 'integer':
                    return <JsonInteger value={value} {...props} />;
                case 'float':
                    return <JsonFloat value={value} {...props} />;
                case 'boolean':
                    return <JsonBoolean value={value} {...props} />;
                case 'function':
                    return <JsonFunction value={value} {...props} />;
                case 'null':
                    return <JsonNull {...props} />;
                case 'nan':
                    return <JsonNan {...props} />;
                case 'undefined':
                    return <JsonUndefined {...props} />;
                case 'date':
                    return <JsonDate value={new Date(value)} {...props} />;
            }
        }
    };
}

//export component
export default VariableEditor;

1	import React from 'react';
2	import AutosizeTextarea from 'react-textarea-autosize';
3
4	import { toType } from './../helpers/util';
5	import dispatcher from './../helpers/dispatcher';
6	import parseInput from './../helpers/parseInput';
7	import stringifyVariable from './../helpers/stringifyVariable';
8	import CopyToClipboard from './CopyToClipboard';
9
10	//data type components
11	import {
12	JsonBoolean,
13	JsonDate,
14	JsonFloat,
15	JsonFunction,
16	JsonInteger,
17	JsonNan,
18	JsonNull,
19	JsonRegexp,
20	JsonString,
21	JsonUndefined
22	} from './DataTypes/DataTypes';
23
24	//clibboard icon
25	import { Edit, CheckCircle, RemoveCircle as Remove } from './icons';
26
27	//theme
28	import Theme from './../themes/getStyle';
29
30	class VariableEditor extends React.PureComponent {
31	constructor(props) {
32	super(props);	82✔
33	this.state = {	82✔
34	editMode: false,
35	editValue: '',
36	hovered: false,
37	renameKey: false,
38	parsedInput: {
39	type: false,
40	value: null
41	}
42	};
43	}
44
45	render() {
46	const {
47	variable,
48	singleIndent,
49	type,
50	theme,
51	namespace,
52	indentWidth,
53	enableClipboard,
54	onEdit,
55	onDelete,
56	onSelect
57	} = this.props;	117✔
58	const { editMode } = this.state;	117✔
59
60	return (	117✔
61	<div
62	{...Theme(theme, 'objectKeyVal', {
63	paddingLeft: indentWidth * singleIndent
64	})}
65	onMouseEnter={() =>
66	this.setState({ ...this.state, hovered: true })	×
67	}
68	onMouseLeave={() =>
69	this.setState({ ...this.state, hovered: false })	×
70	}
71	class="variable-row"
72	key={variable.name}
73	>
74	{type == 'array' ? (	117✔
75	<span
76	{...Theme(theme, 'array-key')}
77	key={variable.name + '_' + namespace}
78	>
79	{variable.name}
80	<div {...Theme(theme, 'colon')}>:</div>
81	</span>
82	) : (
83	<span>
84	<span
85	{...Theme(theme, 'object-name')}
86	class="object-key"
87	key={variable.name + '_' + namespace}
88	>
89	<span style={{ verticalAlign: 'top' }}>"</span>
90	<span style={{ display: 'inline-block' }}>
91	{variable.name}
92	</span>
93	<span style={{ verticalAlign: 'top' }}>"</span>
94	</span>
95	<span {...Theme(theme, 'colon')}>:</span>
96	</span>
97	)}
98	<div
99	class="variable-value"
100	onClick={
101	onSelect === false && onEdit === false	290✔
102	? null
103	: e => {
104	let location = [...namespace];	×
105	if (	×
106	(e.ctrlKey \|\| e.metaKey) &&	×
107	onEdit !== false
108	) {
109	this.prepopInput(variable);	×
110	} else if (onSelect !== false) {	×
111	location.shift();	×
112	onSelect({	×
113	...variable,
114	namespace: location
115	});
116	}
117	}
118	}
119	{...Theme(theme, 'variableValue', {
120	cursor: onSelect === false ? 'default' : 'pointer'	117✔
121	})}
122	>
123	{this.getValue(variable, editMode)}
124	</div>
125	{enableClipboard ? (	117✔
126	<CopyToClipboard
127	rowHovered={this.state.hovered}
128	hidden={editMode}
129	src={variable.value}
130	clickCallback={enableClipboard}
131	{...{ theme, namespace: [...namespace, variable.name] }}
132	/>
133	) : null}
134	{onEdit !== false && editMode == false	294✔
135	? this.getEditIcon()
136	: null}
137	{onDelete !== false && editMode == false	295✔
138	? this.getRemoveIcon()
139	: null}
140	</div>
141	);
142	}
143
144	getEditIcon = () => {	82✔
145	const { variable, theme } = this.props;	44✔
146
147	return (	44✔
148	<div
149	class="click-to-edit"
150	style={{
151	verticalAlign: 'top',
152	display: this.state.hovered ? 'inline-block' : 'none'	44!
153	}}
154	>
155	<Edit
156	class="click-to-edit-icon"
157	{...Theme(theme, 'editVarIcon')}
158	onClick={() => {
159	this.prepopInput(variable);	13✔
160	}}
161	/>
162	</div>
163	);
164	};
165
166	prepopInput = variable => {	82✔
167	if (this.props.onEdit !== false) {	13!
168	const stringifiedValue = stringifyVariable(variable.value);	13✔
169	const detected = parseInput(stringifiedValue);	13✔
170	this.setState({	13✔
171	editMode: true,
172	editValue: stringifiedValue,
173	parsedInput: {
174	type: detected.type,
175	value: detected.value
176	}
177	});
178	}
179	};
180
181	getRemoveIcon = () => {	82✔
182	const { variable, namespace, theme, rjvId } = this.props;	45✔
183
184	return (	45✔
185	<div
186	class="click-to-remove"
187	style={{
188	verticalAlign: 'top',
189	display: this.state.hovered ? 'inline-block' : 'none'	45!
190	}}
191	>
192	<Remove
193	class="click-to-remove-icon"
194	{...Theme(theme, 'removeVarIcon')}
195	onClick={() => {
196	dispatcher.dispatch({	×
197	name: 'VARIABLE_REMOVED',
198	rjvId: rjvId,
199	data: {
200	name: variable.name,
201	namespace: namespace,
202	existing_value: variable.value,
203	variable_removed: true
204	}
205	});
206	}}
207	/>
208	</div>
209	);
210	};
211
212	getValue = (variable, editMode) => {	82✔
213	const type = editMode ? false : variable.type;	117✔
214	const { props } = this;	117✔
215	switch (type) {	117!
216	case false:
217	return this.getEditInput();	16✔
218	case 'string':
219	return <JsonString value={variable.value} {...props} />;	39✔
220	case 'integer':
221	return <JsonInteger value={variable.value} {...props} />;	23✔
222	case 'float':
223	return <JsonFloat value={variable.value} {...props} />;	2✔
224	case 'boolean':
225	return <JsonBoolean value={variable.value} {...props} />;	9✔
226	case 'function':
227	return <JsonFunction value={variable.value} {...props} />;	5✔
228	case 'null':
229	return <JsonNull {...props} />;	5✔
230	case 'nan':
231	return <JsonNan {...props} />;	5✔
232	case 'undefined':
233	return <JsonUndefined {...props} />;	2✔
234	case 'date':
235	return <JsonDate value={variable.value} {...props} />;	×
236	case 'regexp':
237	return <JsonRegexp value={variable.value} {...props} />;	4✔
238	default:
239	// catch-all for types that weren't anticipated
240	return (	7✔
241	<div class="object-value">
242	{JSON.stringify(variable.value)}
243	</div>
244	);
245	}
246	};
247
248	getEditInput = () => {	82✔
249	const { theme } = this.props;	16✔
250	const { editValue } = this.state;	16✔
251
252	return (	16✔
253	<div>
254	<AutosizeTextarea
255	type="text"
256	inputRef={input => input && input.focus()}	×
257	value={editValue}
258	class="variable-editor"
259	onChange={event => {
260	const value = event.target.value;	×
261	const detected = parseInput(value);	×
262	this.setState({	×
263	editValue: value,
264	parsedInput: {
265	type: detected.type,
266	value: detected.value
267	}
268	});
269	}}
270	onKeyDown={e => {
271	switch (e.key) {	×
272	case 'Escape': {
273	this.setState({	×
274	editMode: false,
275	editValue: ''
276	});
277	break;	×
278	}
279	case 'Enter': {
280	if (e.ctrlKey \|\| e.metaKey) {	×
281	this.submitEdit(true);	×
282	}
283	break;	×
284	}
285	}
286	e.stopPropagation();	×
287	}}
288	placeholder="update this value"
289	{...Theme(theme, 'edit-input')}
290	/>
291	<div {...Theme(theme, 'edit-icon-container')}>
292	<Remove
293	class="edit-cancel"
294	{...Theme(theme, 'cancel-icon')}
295	onClick={() => {
296	this.setState({ editMode: false, editValue: '' });	2✔
297	}}
298	/>
299	<CheckCircle
300	class="edit-check string-value"
301	{...Theme(theme, 'check-icon')}
302	onClick={() => {
303	this.submitEdit();	1✔
304	}}
305	/>
306	<div>{this.showDetected()}</div>
307	</div>
308	</div>
309	);
310	};
311
312	submitEdit = submit_detected => {	82✔
313	const { variable, namespace, rjvId } = this.props;	1✔
314	const { editValue, parsedInput } = this.state;	1✔
315	let new_value = editValue;	1✔
316	if (submit_detected && parsedInput.type) {	1!
317	new_value = parsedInput.value;	×
318	}
319	this.setState({	1✔
320	editMode: false
321	});
322	dispatcher.dispatch({	1✔
323	name: 'VARIABLE_UPDATED',
324	rjvId: rjvId,
325	data: {
326	name: variable.name,
327	namespace: namespace,
328	existing_value: variable.value,
329	new_value: new_value,
330	variable_removed: false
331	}
332	});
333	};
334
335	showDetected = () => {	82✔
336	const { theme, variable, namespace, rjvId } = this.props;	16✔
337	const { type, value } = this.state.parsedInput;	16✔
338	const detected = this.getDetectedInput();	16✔
339	if (detected) {	16✔
340	return (	8✔
341	<div>
342	<div {...Theme(theme, 'detected-row')}>
343	{detected}
344	<CheckCircle
345	class="edit-check detected"
346	style={{
347	verticalAlign: 'top',
348	paddingLeft: '3px',
349	...Theme(theme, 'check-icon').style
350	}}
351	onClick={() => {
352	this.submitEdit(true);	×
353	}}
354	/>
355	</div>
356	</div>
357	);
358	}
359	};
360
361	getDetectedInput = () => {	82✔
362	const { parsedInput } = this.state;	16✔
363	const { type, value } = parsedInput;	16✔
364	const { props } = this;	16✔
365	const { theme } = props;	16✔
366
367	if (type !== false) {	16✔
368	switch (type.toLowerCase()) {	8!
369	case 'object':
370	return (	1✔
371	<span>
372	<span
373	style={{
374	...Theme(theme, 'brace').style,
375	cursor: 'default'
376	}}
377	>
378	{'{'}
379	</span>
380	<span
381	style={{
382	...Theme(theme, 'ellipsis').style,
383	cursor: 'default'
384	}}
385	>
386	...
387	</span>
388	<span
389	style={{
390	...Theme(theme, 'brace').style,
391	cursor: 'default'
392	}}
393	>
394	{'}'}
395	</span>
396	</span>
397	);
398	case 'array':
399	return (	1✔
400	<span>
401	<span
402	style={{
403	...Theme(theme, 'brace').style,
404	cursor: 'default'
405	}}
406	>
407	{'['}
408	</span>
409	<span
410	style={{
411	...Theme(theme, 'ellipsis').style,
412	cursor: 'default'
413	}}
414	>
415	...
416	</span>
417	<span
418	style={{
419	...Theme(theme, 'brace').style,
420	cursor: 'default'
421	}}
422	>
423	{']'}
424	</span>
425	</span>
426	);
427	case 'string':
428	return <JsonString value={value} {...props} />;	×
429	case 'integer':
430	return <JsonInteger value={value} {...props} />;	2✔
431	case 'float':
432	return <JsonFloat value={value} {...props} />;	1✔
433	case 'boolean':
434	return <JsonBoolean value={value} {...props} />;	×
435	case 'function':
436	return <JsonFunction value={value} {...props} />;	×
437	case 'null':
438	return <JsonNull {...props} />;	1✔
439	case 'nan':
440	return <JsonNan {...props} />;	1✔
441	case 'undefined':
442	return <JsonUndefined {...props} />;	1✔
443	case 'date':
444	return <JsonDate value={new Date(value)} {...props} />;	×
445	}
446	}
447	};
448	}
449
450	//export component
451	export default VariableEditor;

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

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