Skip to content

Commit 2eee2a6

Browse files
mac-s-gmac-s-g
authored
Merge pull request mac-s-g#114 from mac-s-g/autosize-edit
Autosize edit
2 parents 283f198 + 344077a commit 2eee2a6

File tree

8 files changed

+108
-55
lines changed

8 files changed

+108
-55
lines changed

‎demo/dist/main.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
{
22
"name": "react-json-view",
33
"description": "Interactive react component for displaying javascript arrays and JSON objects.",
4-
"version": "1.12.3",
4+
"version": "1.12.4",
55
"main": "dist/main.js",
66
"files": [
77
"dist/"
88
],
99
"dependencies": {
1010
"clipboard": "^1.7.1",
1111
"flux": "^3.1.3",
12-
"react-base16-styling": "^0.5.3"
12+
"react-base16-styling": "^0.5.3",
13+
"react-textarea-autosize": "^5.1.0"
1314
},
1415
"devDependencies": {
1516
"babel-core": "^6.25.0",

‎src/js/components/VariableEditor.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import AutosizeTextarea from 'react-textarea-autosize';
23

34
import {toType} from './../helpers/util';
45
import dispatcher from './../helpers/dispatcher';
@@ -90,7 +91,7 @@ class VariableEditor extends React.Component {
9091
}
9192

9293
return (
93-
<div class="click-to-edit" >
94+
<div class="click-to-edit" style={{verticalAlign: 'top'}}>
9495
<Edit
9596
class="click-to-edit-icon"
9697
{...Theme(theme, 'editVarIcon')}
@@ -126,7 +127,7 @@ class VariableEditor extends React.Component {
126127
}
127128

128129
return (
129-
<div class="click-to-remove" >
130+
<div class="click-to-remove" style={{verticalAlign: 'top'}}>
130131
<Remove
131132
class="click-to-remove-icon"
132133
{...Theme(theme, 'removeVarIcon')}
@@ -183,8 +184,8 @@ class VariableEditor extends React.Component {
183184
const {editValue} = this.state;
184185

185186
return (<div>
186-
<textarea type='text'
187-
ref={input => input && input.focus()}
187+
<AutosizeTextarea type='text'
188+
inputRef={input => input && input.focus()}
188189
value={editValue}
189190
class="variable-editor"
190191
onChange={(event)=>{

‎src/js/themes/styleConstants.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default {
7171

7272
tooltipPadding: '4px',
7373

74-
editInputHeight: '50px',
74+
editInputHeight: '25px',
7575
editInputMinWidth: '130px',
7676
editInputBorderRadius: '2px',
7777
editInputPadding: '5px',

‎test/tests/js/Index-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ describe('<Index />', function () {
8787
});
8888

8989

90-
it('src replaced with error message', function () {
90+
it('src replaced with error message (ERROR OUTPUT EXPECTED)', function () {
9191
const wrapper = render(
9292
<Index src={'{jsonEncodedString:true, createError:true}'} />
9393
);

‎test/tests/js/components/DataTypes/Object-test.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ describe('<JsonObject />', function () {
252252
const wrapper = shallow(
253253
<JsonObject
254254
src={src}
255+
theme="rjv-default"
255256
namespace={['root']}
256257
collapsed={false} />
257258
);
@@ -266,6 +267,7 @@ describe('<JsonObject />', function () {
266267
const wrapper = shallow(
267268
<JsonObject
268269
src={src}
270+
theme="rjv-default"
269271
namespace={['root']}
270272
rjvId={rjvId}
271273
collapsed={false} />
@@ -281,6 +283,7 @@ describe('<JsonObject />', function () {
281283
const wrapper = shallow(
282284
<JsonObject
283285
src={src}
286+
theme="rjv-default"
284287
namespace={['root']}
285288
rjvId={rjvId}
286289
collapsed={false} />
@@ -296,6 +299,7 @@ describe('<JsonObject />', function () {
296299
const wrapper = shallow(
297300
<JsonObject
298301
src={src}
302+
theme="rjv-default"
299303
namespace={['root']}
300304
collapsed={false} />
301305
);
@@ -310,6 +314,7 @@ describe('<JsonObject />', function () {
310314
const wrapper = render(
311315
<JsonObject
312316
src={src}
317+
theme="rjv-default"
313318
namespace={['root']}
314319
rjvId={rjvId}
315320
collapsed={true} />
@@ -326,6 +331,7 @@ describe('<JsonObject />', function () {
326331
const wrapper = render(
327332
<JsonObject
328333
src={src}
334+
theme="rjv-default"
329335
namespace={['root']}
330336
rjvId={rjvId}
331337
collapsed={true} />

‎test/tests/js/components/VariableEditor-test.js‎

Lines changed: 87 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {expect} from 'chai';
44

55
import Index from '/react/src/js/index';
66
import VariableEditor from '/react/src/js/components/VariableEditor';
7-
import ObjectAttributes from '/react/src/js/stores/ObjectAttributes';
87

98

109
describe('<VariableEditor />', function () {
@@ -100,55 +99,101 @@ describe('<VariableEditor />', function () {
10099
});
101100

102101
it('VariableEditor test textarea and submit icon', function () {
103-
const wrapper = mount(
104-
<Index
105-
src={{test:true}}
102+
const existing_value = 'existing_value';
103+
const new_value = 'new_value';
104+
const wrapper = shallow(
105+
<VariableEditor
106+
src={{test:existing_value}}
106107
theme='rjv-default'
107-
onEdit={(edit)=>{}}
108+
onEdit={(edit)=>{
109+
expect(edit.updated_src.test).to.equal(new_value);
110+
}}
111+
namespace={['test']}
108112
rjvId={rjvId}
113+
variable={{
114+
name: 'test',
115+
value: existing_value,
116+
type: 'string'
117+
}}
109118
/>
110119
);
120+
121+
//editMode defaluts to off
122+
expect(
123+
wrapper.state('editMode')
124+
).to.equal(false)
125+
//click to open textarea
111126
wrapper.find('.click-to-edit-icon').simulate('click');
127+
//verify editMode is on
112128
expect(
113-
wrapper.state('onEdit')
114-
).to.not.equal(false);
129+
wrapper.state('editMode')
130+
).to.equal(true)
131+
//make sure default textarea value is correct
115132
expect(
116-
wrapper.find('.variable-editor').length
117-
).to.equal(1);
118-
wrapper.find('.edit-check.string-value').simulate('click');
133+
wrapper.find('.variable-editor').props().value
134+
).to.equal(existing_value)
135+
//update edit value
136+
wrapper.setState({editValue: new_value})
137+
//submit new value
138+
wrapper.find('.edit-check').simulate('click');
139+
//make sure editMode is off after submit
119140
expect(
120-
wrapper.find('.variable-editor').length
121-
).to.equal(0);
141+
wrapper.state('editMode')
142+
).to.equal(false)
122143
});
123144

124145
it('VariableEditor edit after src change should respect current src', function () {
125-
const oldSrc = {edited: true, other: 'old'};
126-
const currentSrc = {edited: true, other: 'current'};
127-
128-
const wrapper = mount(
129-
<Index
130-
src={oldSrc}
131-
theme='rjv-default'
132-
onEdit={(edit) => {
133-
expect(edit.updated_src.other).to.equal(currentSrc.other);
134-
return true;
135-
}}
136-
rjvId={rjvId}
146+
const existing_value = 'existing_value';
147+
const new_value = 'new_value';
148+
const wrapper = shallow(
149+
<VariableEditor
150+
src={{test:existing_value}}
151+
theme='rjv-default'
152+
onEdit={(edit)=>{
153+
expect(edit.updated_src.test).to.equal(new_value);
154+
}}
155+
namespace={['test']}
156+
rjvId={rjvId}
157+
variable={{
158+
name: 'test',
159+
value: existing_value,
160+
type: 'string'
161+
}}
137162
/>
138163
);
139-
wrapper.setProps({src: currentSrc});
140164

141-
wrapper.find('.click-to-edit-icon').first().simulate('click');
165+
//editMode defaluts to off
142166
expect(
143-
wrapper.state('onEdit')
144-
).to.not.equal(false);
167+
wrapper.state('editMode')
168+
).to.equal(false)
169+
//click to open textarea
170+
wrapper.find('.click-to-edit-icon').simulate('click');
171+
//verify editMode is on
145172
expect(
146-
wrapper.find('.variable-editor').length
147-
).to.equal(1);
148-
wrapper.find('.edit-check.string-value').simulate('click');
173+
wrapper.state('editMode')
174+
).to.equal(true)
175+
//make sure default textarea value is correct
176+
expect(
177+
wrapper.find('.variable-editor').props().value
178+
).to.equal(existing_value)
179+
//update edit value
180+
wrapper.setState({editValue: new_value})
181+
//cancel update
182+
wrapper.find('.edit-cancel').simulate('click');
183+
//make sure editMode is off after cancel
149184
expect(
150-
wrapper.find('.variable-editor').length
151-
).to.equal(0);
185+
wrapper.state('editMode')
186+
).to.equal(false)
187+
//pop open textarea again
188+
wrapper.find('.click-to-edit-icon').simulate('click');
189+
//make sure editMode is on
190+
expect(
191+
wrapper.state('editMode')
192+
).to.equal(true)
193+
//make sure that textarea still contains original value
194+
expect(
195+
wrapper.find('.variable-editor').props().value
196+
).to.equal(existing_value)
152197
});
153198

154199
it('VariableEditor detected null', function () {
@@ -173,7 +218,7 @@ describe('<VariableEditor />', function () {
173218
wrapper.state('editMode')
174219
).to.equal(true);
175220
expect(
176-
wrapper.find('.variable-editor textarea').props().value
221+
wrapper.find('.variable-editor').props().value
177222
).to.equal('null');
178223
});
179224

@@ -199,7 +244,7 @@ describe('<VariableEditor />', function () {
199244
wrapper.state('editMode')
200245
).to.equal(true);
201246
expect(
202-
wrapper.find('.variable-editor textarea').props().value
247+
wrapper.find('.variable-editor').props().value
203248
).to.equal('undefined');
204249
});
205250

@@ -225,7 +270,7 @@ describe('<VariableEditor />', function () {
225270
wrapper.state('editMode')
226271
).to.equal(true);
227272
expect(
228-
wrapper.find('.variable-editor textarea').props().value
273+
wrapper.find('.variable-editor').props().value
229274
).to.equal('NaN');
230275
});
231276

@@ -251,7 +296,7 @@ describe('<VariableEditor />', function () {
251296
wrapper.state('editMode')
252297
).to.equal(true);
253298
expect(
254-
wrapper.find('.variable-editor textarea').props().value
299+
wrapper.find('.variable-editor').props().value
255300
).to.equal('test');
256301
});
257302

@@ -277,7 +322,7 @@ describe('<VariableEditor />', function () {
277322
wrapper.state('editMode')
278323
).to.equal(true);
279324
expect(
280-
wrapper.find('.variable-editor textarea').props().value
325+
wrapper.find('.variable-editor').props().value
281326
).to.equal('function test() {}');
282327
});
283328

@@ -303,7 +348,7 @@ describe('<VariableEditor />', function () {
303348
wrapper.state('editMode')
304349
).to.equal(true);
305350
expect(
306-
wrapper.find('.variable-editor textarea').props().value
351+
wrapper.find('.variable-editor').props().value
307352
).to.equal('{}');
308353
});
309354

@@ -329,7 +374,7 @@ describe('<VariableEditor />', function () {
329374
wrapper.state('editMode')
330375
).to.equal(true);
331376
expect(
332-
wrapper.find('.variable-editor textarea').props().value
377+
wrapper.find('.variable-editor').props().value
333378
).to.equal('[1,2,3]');
334379
});
335380

@@ -355,7 +400,7 @@ describe('<VariableEditor />', function () {
355400
wrapper.state('editMode')
356401
).to.equal(true);
357402
expect(
358-
wrapper.find('.variable-editor textarea').props().value
403+
wrapper.find('.variable-editor').props().value
359404
).to.equal('-5.2');
360405
});
361406

@@ -381,7 +426,7 @@ describe('<VariableEditor />', function () {
381426
wrapper.state('editMode')
382427
).to.equal(true);
383428
expect(
384-
wrapper.find('.variable-editor textarea').props().value
429+
wrapper.find('.variable-editor').props().value
385430
).to.equal('5');
386431
});
387432

‎test/tests/js/themes/getStyle-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('getStyle', function () {
2323
expect(style.style).to.exist;
2424
});
2525

26-
it('test theme not set', function () {
26+
it('test theme not set (NOTICE OUTPUT EXPECTED)', function () {
2727
let style = getStyle(false, 'app-container');
2828
expect(style.style).to.exist;
2929
});

0 commit comments

Comments
 (0)