#171

Build # #171

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/c622f3870245d9206f0a531cb9024abb5eae6988">c622f3870<a href="https://github.com/mac-s-g/react-json-view/commit/c622f3870245d9206f0a531cb9024abb5eae6988">">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/7c86716562a68a9dd5bb454c2244f0b9932328e0">7c8671656</a>">7c8671656</a><a href="https://github.com/mac-s-g/react-json-view/commit/c622f3870245d9206f0a531cb9024abb5eae6988"> into 66e0d2390">66e0d2390</a>

Run Details

135 of 215 branches covered (62.79%)

Branch coverage included in aggregate %.

190 of 190 new or added lines in 9 files covered. (100.0%)

354 of 472 relevant lines covered (75.0%)

39.54 hits per line

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

71.76

/src/js/components/VariableEditor.js

import React from 'react';

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

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

//clibboard icon
import EditIcon from 'react-icons/lib/fa/edit';
import CheckCircle from 'react-icons/lib/fa/check-circle';
import Cancel from 'react-icons/lib/fa/times-circle';
import Remove from 'react-icons/lib/fa/times-circle';

//tooltip component
import ReactTooltip from 'react-tooltip';

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

@Radium
class VariableEditor extends React.Component {

    state = {
        hover: false,
        editMode: false,
        editValue: "",
        parsedInput: {
            type: false,
            value: null
        }
    }

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        ReactTooltip.rebuild();
    }

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

        return (
        <div {...Theme(
            theme, 'objectKeyVal', indentWidth * singleIndent
        )}
        onMouseEnter={()=>{this.setHover(true)}}
        onMouseLeave={()=>{this.setHover(false)}}
        key={variable.name}>
            {
                type == 'array'
                ? (
                <div {...Theme(theme, 'array-key')}
                key={variable.name + '_' + namespace}>
                    {variable.name}
                    <div {...Theme(theme, 'colon')}>:</div>
                </div>
                )
                : (
                <div {...Theme(theme, 'object-name')}
                key={variable.name + '_' + namespace}>
                    <span style={{verticalAlign:'top'}}>"</span>
                    <div style={{display:'inline-block'}} >
                        {variable.name}
                    </div>
                    <span style={{verticalAlign:'top'}}>"</span>
                    <div {...Theme(theme, 'colon')}>:</div>
                </div>
                )

            }
            <div {...Theme(theme, 'variable-value')}>
                {this.getValue(variable, this.props, editMode)}
            </div>
            {onEdit !== false ? this.getEditIcon(hover) : null}
            {onDelete !== false ? this.getRemoveIcon(hover) : null}
        </div>
        );

    }

    getEditIcon = (hover) => {
        const {variable, namespace, theme} = this.props;
        const {editMode} = this.state;
        const tooltip_id = variable.name + '_'
            + namespace + '-edit-tooltip';
        let display = 'inline-block';

        if (editMode) {
            display = 'none';
        }

        return (
        <div
        class="click-to-edit"
        style={{verticalAlign: 'top', display:display}}
        data-tip='edit this value'
        data-for={tooltip_id} >
            <ReactTooltip
            effect="solid"
            id={tooltip_id}
            place="right"
            delayShow={1000} />
            <EditIcon
            class="click-to-edit-icon"
            {...Theme(theme, 'editVarIcon', hover)}
            onClick={() => {
                this.state.editMode = true;
                this.setState(this.state);
            }}
            />
        </div>
        );
    }

    getRemoveIcon = (hover) => {
        const {
            variable, namespace, theme, rjvId
        } = this.props;
        const {editMode} = this.state;
        let display = 'inline-block';

        if (editMode) {
            display = 'none';
        }

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

    setHover = (hover) => {
        this.state.hover = hover;
        this.setState(this.state);
    }

    getValue = (variable, props, editMode) => {
        const type = editMode ? false : variable.type;
        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} />;
            default:
                // catch-all for types that weren't anticipated
                return <div class="object-value" {...props} >
                    {variable.value}
                </div>;
        }
    }

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

        return (<div>
            <textarea type='text'
            ref={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
                    }
                });
            }}
            placeholder="update this value"
            {...Theme(theme, 'edit-input')}
            />
            <div {...Theme(theme, 'edit-icon-container')}>
            <Cancel class="edit-cancel" {...Theme(theme, 'cancel-icon')}
            onClick={()=>{
                this.setState({editMode: false, editValue: ""});
            }}
            />
            <CheckCircle class="edit-check" {...Theme(theme, 'check-icon')}
            onClick={() => {
                const new_value = (editValue);
                this.state.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
                    },
                });
            }}
            />
            <div>
                {this.showDetected()}
            </div>
            </div>

        </div>);

    }

    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"
                style={{
                    verticalAlign: 'top',
                    paddingLeft: '3px',
                    ...Theme(theme, 'check-icon').style
                }}
                onClick={() => {
                    this.state.editMode = false;
                    dispatcher.dispatch({
                        name: 'VARIABLE_UPDATED',
                        rjvId: rjvId,
                        data: {
                            name: variable.name,
                            namespace: namespace,
                            existing_value: variable.value,
                            new_value: value,
                            variable_removed: false
                        },
                    });
                }}
                />
            </div>
            </div>;
        }
    }

    getDetectedInput = () => {
        const {parsedInput} = this.state;
        const {type, value} = parsedInput;
        const {props} = this;
        const {theme} = this.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✔
2
3	import {toType} from './../helpers/util';	2✔
4	import dispatcher from './../helpers/dispatcher';	2✔
5	import parseInput from './../helpers/parseInput';	2✔
6
7	//data type components
8	import {	2✔
9	JsonBoolean, JsonDate, JsonFloat, JsonFunction, JsonInteger,
10	JsonNan, JsonNull, JsonString, JsonUndefined
11	} from './DataTypes/DataTypes';
12
13	//clibboard icon
14	import EditIcon from 'react-icons/lib/fa/edit';	2✔
15	import CheckCircle from 'react-icons/lib/fa/check-circle';	2✔
16	import Cancel from 'react-icons/lib/fa/times-circle';	2✔
17	import Remove from 'react-icons/lib/fa/times-circle';
18
19	//tooltip component
20	import ReactTooltip from 'react-tooltip';	2✔
21
22	//theme
23	import Theme from './../themes/getStyle';	2✔
24	import Radium from 'radium';	2✔
25
26	@Radium
27	class VariableEditor extends React.Component {
28
29	state = {
30	hover: false,
31	editMode: false,
32	editValue: "",
33	parsedInput: {
34	type: false,
35	value: null
36	}
37	}
38
39	constructor(props) {	252!
40	super(props);
41	}
42
43	componentDidMount() {
44	ReactTooltip.rebuild();	19✔
45	}
46
47	render() {	860✔
48	const {
49	variable, singleIndent, type, theme,
50	namespace, indentWidth, onEdit, onDelete
51	} = this.props;	86✔
52	const {hover, editMode} = this.state;	86✔
53
54	return (	86✔
55	<div {...Theme(
56	theme, 'objectKeyVal', indentWidth * singleIndent
57	)}
58	onMouseEnter={()=>{this.setHover(true)}}	×
59	onMouseLeave={()=>{this.setHover(false)}}	×
60	key={variable.name}>
61	{
62	type == 'array'
63	? (
64	<div {...Theme(theme, 'array-key')}	86✔
65	key={variable.name + '_' + namespace}>
66	{variable.name}
67	<div {...Theme(theme, 'colon')}>:</div>
68	</div>
69	)
70	: (
71	<div {...Theme(theme, 'object-name')}
72	key={variable.name + '_' + namespace}>
73	<span style={{verticalAlign:'top'}}>"</span>
74	<div style={{display:'inline-block'}} >
75	{variable.name}
76	</div>
77	<span style={{verticalAlign:'top'}}>"</span>
78	<div {...Theme(theme, 'colon')}>:</div>
79	</div>
80	)
81
82	}
83	<div {...Theme(theme, 'variable-value')}>
84	{this.getValue(variable, this.props, editMode)}
85	</div>
86	{onEdit !== false ? this.getEditIcon(hover) : null}	86✔
87	{onDelete !== false ? this.getRemoveIcon(hover) : null}	86✔
88	</div>
89	);
90
91	}
92
93	getEditIcon = (hover) => {	105✔
94	const {variable, namespace, theme} = this.props;	35✔
95	const {editMode} = this.state;	35✔
96	const tooltip_id = variable.name + '_'	35✔
97	+ namespace + '-edit-tooltip';
98	let display = 'inline-block';	35✔
99
100	if (editMode) {	35✔
101	display = 'none';	3✔
102	}
103
104	return (	35✔
105	<div
106	class="click-to-edit"
107	style={{verticalAlign: 'top', display:display}}
108	data-tip='edit this value'
109	data-for={tooltip_id} >
110	<ReactTooltip
111	effect="solid"
112	id={tooltip_id}
113	place="right"
114	delayShow={1000} />
115	<EditIcon
116	class="click-to-edit-icon"
117	{...Theme(theme, 'editVarIcon', hover)}
118	onClick={() => {
119	this.state.editMode = true;	2✔
120	this.setState(this.state);	2✔
121	}}
122	/>
123	</div>
124	);
125	}
126
127	getRemoveIcon = (hover) => {	128✔
128	const {
129	variable, namespace, theme, rjvId
130	} = this.props;	32✔
131	const {editMode} = this.state;	32✔
132	let display = 'inline-block';	32✔
133
134	if (editMode) {	32✔
135	display = 'none';	2✔
136	}
137
138	return (	32✔
139	<div
140	class="click-to-remove"
141	style={{verticalAlign: 'top', display:display}}>
142	<Remove
143	class="click-to-remove-icon"
144	{...Theme(theme, 'removeVarIcon', hover)}
145	onClick={() => {
146	dispatcher.dispatch({	×
147	name: 'VARIABLE_REMOVED',
148	rjvId: rjvId,
149	data: {
150	name: variable.name,
151	namespace: namespace,
152	existing_value: variable.value,
153	variable_removed: true
154	},
155	});
156	}}
157	/>
158	</div>
159	);
160	}
161
162	setHover = (hover) => {
163	this.state.hover = hover;	3✔
164	this.setState(this.state);	3✔
165	}
166
167	getValue = (variable, props, editMode) => {
168	const type = editMode ? false : variable.type;	86✔
169	switch (type) {	86✔
170	case false:	86!
171	return this.getEditInput();	3✔
172	case 'string':
173	return <JsonString value={variable.value} {...props} />;	21✔
174	case 'integer':
175	return <JsonInteger value={variable.value} {...props} />;	24✔
176	case 'float':
177	return <JsonFloat value={variable.value} {...props} />;	2✔
178	case 'boolean':
179	return <JsonBoolean value={variable.value} {...props} />;	12✔
180	case 'function':
181	return <JsonFunction value={variable.value} {...props} />;	5✔
182	case 'null':
183	return <JsonNull {...props} />;	5✔
184	case 'nan':
185	return <JsonNan {...props} />;	5✔
186	case 'undefined':
187	return <JsonUndefined {...props} />;	2✔
188	case 'date':
189	return <JsonDate value={variable.value} {...props} />;	×
190	default:
191	// catch-all for types that weren't anticipated
192	return <div class="object-value" {...props} >	7✔
193	{variable.value}
194	</div>;
195	}
196	}
197
198	getEditInput = () => {	12✔
199	const {variable, namespace, theme, rjvId} = this.props;	3✔
200	const {editValue} = this.state;	3✔
201
202	return (<div>	3✔
203	<textarea type='text'
204	ref={input => input && input.focus()}	2✔
205	value={editValue}
206	class="variable-editor"
207	onChange={(event)=>{
208	const value = event.target.value;	×
209	const detected = parseInput(value);	×
210	this.setState({	×
211	editValue: value,
212	parsedInput: {
213	type: detected.type,
214	value: detected.value
215	}
216	});
217	}}
218	placeholder="update this value"
219	{...Theme(theme, 'edit-input')}
220	/>
221	<div {...Theme(theme, 'edit-icon-container')}>
222	<Cancel class="edit-cancel" {...Theme(theme, 'cancel-icon')}
223	onClick={()=>{
224	this.setState({editMode: false, editValue: ""});	1✔
225	}}
226	/>
227	<CheckCircle class="edit-check" {...Theme(theme, 'check-icon')}
228	onClick={() => {
229	const new_value = (editValue);	1✔
230	this.state.editMode = false;	1✔
231	dispatcher.dispatch({	1✔
232	name: 'VARIABLE_UPDATED',
233	rjvId: rjvId,
234	data: {
235	name: variable.name,
236	namespace: namespace,
237	existing_value: variable.value,
238	new_value: new_value,
239	variable_removed: false
240	},
241	});
242	}}
243	/>
244	<div>
245	{this.showDetected()}
246	</div>
247	</div>
248
249	</div>);
250
251	}
252
253	showDetected = () => {	18✔
254	const {theme, variable, namespace, rjvId} = this.props;	3✔
255	const {type, value} = this.state.parsedInput;	3✔
256	const detected = this.getDetectedInput();	3✔
257	if (detected) {	3!
258	return <div>	×
259	<div {...Theme(theme, 'detected-row')}>
260	{detected}
261	<CheckCircle class="edit-check"
262	style={{
263	verticalAlign: 'top',
264	paddingLeft: '3px',
265	...Theme(theme, 'check-icon').style
266	}}
267	onClick={() => {
268	this.state.editMode = false;	×
269	dispatcher.dispatch({	×
270	name: 'VARIABLE_UPDATED',
271	rjvId: rjvId,
272	data: {
273	name: variable.name,
274	namespace: namespace,
275	existing_value: variable.value,
276	new_value: value,
277	variable_removed: false
278	},
279	});
280	}}
281	/>
282	</div>
283	</div>;
284	}
285	}
286
287	getDetectedInput = () => {	3✔
288	const {parsedInput} = this.state;	3✔
289	const {type, value} = parsedInput;	6✔
290	const {props} = this;
291	const {theme} = this.props;	3✔
292
293	if (type !== false) {	3!
294	switch (type.toLowerCase()) {	×
295	case 'object':	×
296	return <span>	×
297	<span style={{...Theme(theme, 'brace').style, cursor:'default'}}>{'{'}</span>
298	<span style={{...Theme(theme, 'ellipsis').style, cursor:'default'}}>...</span>
299	<span style={{...Theme(theme, 'brace').style, cursor:'default'}}>{'}'}</span>
300	</span>;
301	case 'array':
302	return <span>	×
303	<span style={{...Theme(theme, 'brace').style, cursor:'default'}}>{'['}</span>
304	<span style={{...Theme(theme, 'ellipsis').style, cursor:'default'}}>...</span>
305	<span style={{...Theme(theme, 'brace').style, cursor:'default'}}>{']'}</span>
306	</span>;
307	case 'string':
308	return <JsonString value={value} {...props} />;	×
309	case 'integer':
310	return <JsonInteger value={value} {...props} />;	×
311	case 'float':
312	return <JsonFloat value={value} {...props} />;	×
313	case 'boolean':
314	return <JsonBoolean value={value} {...props} />;	×
315	case 'function':
316	return <JsonFunction value={value} {...props} />;	×
317	case 'null':
318	return <JsonNull {...props} />;	×
319	case 'nan':
320	return <JsonNan {...props} />;	×
321	case 'undefined':
322	return <JsonUndefined {...props} />;	×
323	case 'date':
324	return <JsonDate value={new Date(value)} {...props} />;	×
325	}
326	}
327	}
328
329	}
330
331	//export component
332	export default VariableEditor;

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

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