Skip to content

Commit 3588e3f

Browse files
mac-s-gmac-s-g
committed
edit-key code moved around, not functional yet
1 parent 2eee2a6 commit 3588e3f

File tree

8 files changed

+174
-74
lines changed

8 files changed

+174
-74
lines changed

‎src/js/components/DataTypes/Object.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -209,12 +209,13 @@ class rjvObject extends React.Component {
209209
} else {
210210
elements.push(
211211
<VariableEditor
212-
key={variable.name + '_' + namespace}
213-
variable={variable}
214-
singleIndent={SINGLE_INDENT}
215-
namespace={namespace}
216-
type={this.props.type}
217-
{...props}/>
212+
key={variable.name + '_' + namespace}
213+
variable={variable}
214+
singleIndent={SINGLE_INDENT}
215+
namespace={namespace}
216+
type={this.props.type}
217+
{...props}
218+
/>
218219
);
219220
}
220221
}
@@ -233,18 +234,18 @@ class rjvObject extends React.Component {
233234
} else if (parent_type == 'array') {
234235
return (
235236
<span {...Theme(theme, 'array-key')} key={namespace}>
236-
{display_name}
237+
<span class="array-key">{display_name}</span>
237238
<span {...Theme(theme, 'colon')}>:</span>
238239
</span>
239240
);
240241
} else {
241242
return (
242243
<span {...Theme(theme, 'object-name')} key={namespace}>
243-
<span style={{verticalAlign:'top'}}>"</span>
244-
<div style={{display:'inline-block'}} >
245-
{display_name}
246-
</div>
247-
<span style={{verticalAlign:'top'}}>"</span>
244+
<span class="object-key">
245+
<span style={{verticalAlign:'top'}}>"</span>
246+
<span>{display_name}</span>
247+
<span style={{verticalAlign:'top'}}>"</span>
248+
</span>
248249
<span {...Theme(theme, 'colon')}>:</span>
249250
</span>
250251
);

‎src/js/components/ObjectKeyModal/AddKeyRequest.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import dispatcher from './../../helpers/dispatcher';
3+
import ObjectAttributes from './../../stores/ObjectAttributes';
4+
import ObjectKeyModal from './ObjectKeyModal';
5+
6+
//global theme
7+
import Theme from './../../themes/getStyle';
8+
9+
10+
//this input appears when adding a new value to an object
11+
export default class extends React.Component {
12+
13+
state = {}
14+
15+
render() {
16+
const {active, theme, rjvId} = this.props;
17+
18+
return active ? (
19+
<ObjectKeyModal
20+
rjvId={rjvId}
21+
theme={theme}
22+
isValid={this.isValid}
23+
submit={this.submit}
24+
/>
25+
) : null;
26+
}
27+
28+
isValid = (input) => {
29+
const {rjvId} = this.props;
30+
const request = ObjectAttributes.get(
31+
rjvId, 'action', 'new-key-request'
32+
);
33+
return (
34+
input != ''
35+
&& Object.keys(request.existing_value).indexOf(input) === -1
36+
);
37+
}
38+
39+
submit = (input) => {
40+
const {rjvId} = this.props;
41+
let request = ObjectAttributes.get(
42+
rjvId, 'action', 'new-key-request'
43+
);
44+
request.new_value = {...request.existing_value};
45+
request.new_value[input] = null;
46+
dispatcher.dispatch({
47+
name: 'VARIABLE_ADDED',
48+
rjvId: rjvId,
49+
data: {...request, key_name: input}
50+
});
51+
this.state.input = '';
52+
}
53+
54+
}

‎src/js/components/ObjectKeyModal/EditKeyRequest.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import dispatcher from './../../helpers/dispatcher';
3+
import ObjectAttributes from './../../stores/ObjectAttributes';
4+
import ObjectKeyModal from './ObjectKeyModal';
5+
6+
//global theme
7+
import Theme from './../../themes/getStyle';
8+
9+
10+
//this input appears when adding a new value to an object
11+
export default class extends React.Component {
12+
13+
state = {}
14+
15+
render() {
16+
const {active, theme, rjvId} = this.props;
17+
18+
return active ? (
19+
<ObjectKeyModal
20+
rjvId={rjvId}
21+
theme={theme}
22+
isValid={this.isValid}
23+
submit={this.submit}
24+
/>
25+
) : null;
26+
}
27+
28+
isValid = (input) => {
29+
const {rjvId} = this.props;
30+
const request = ObjectAttributes.get(
31+
rjvId, 'action', 'edit-key-request'
32+
);
33+
return (
34+
input != ''
35+
&& Object.keys(request.existing_value).indexOf(input) === -1
36+
);
37+
}
38+
39+
submit = (input) => {
40+
const {rjvId} = this.props;
41+
let request = ObjectAttributes.get(
42+
rjvId, 'action', 'edit-key-request'
43+
);
44+
request.new_value = {...request.existing_value};
45+
request.new_value[input] = null;
46+
dispatcher.dispatch({
47+
name: 'VARIABLE_ADDED',
48+
rjvId: rjvId,
49+
data: {...request, key_name: input}
50+
});
51+
this.state.input = '';
52+
}
53+
54+
}

‎src/js/components/AddKeyRequest.js‎ renamed to ‎src/js/components/ObjectKeyModal/ObjectKeyModal.js‎

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
2-
import dispatcher from './../helpers/dispatcher';
3-
import ObjectAttributes from './../stores/ObjectAttributes';
2+
import dispatcher from './../../helpers/dispatcher';
43

5-
import {CheckCircle, Add as Cancel} from './icons';
4+
import {CheckCircle, Add as Cancel} from './../icons';
65

76
//global theme
8-
import Theme from './../themes/getStyle';
7+
import Theme from './../../themes/getStyle';
98

109

1110
//this input appears when adding a new value to an object
@@ -16,14 +15,15 @@ export default class extends React.Component {
1615
}
1716

1817
render() {
19-
const {active, theme, rjvId} = this.props;
18+
const {theme, rjvId, isValid} = this.props;
2019
const {input} = this.state;
21-
const valid = this.isValid(rjvId, input);
2220

23-
return active ? (
21+
const valid = isValid(input);
22+
23+
return (
2424
<div
25-
class="add-key-request"
26-
{...Theme(theme, 'add-key-request')}
25+
class="key-modal-request"
26+
{...Theme(theme, 'key-modal-request')}
2727
onClick={()=>{
2828
dispatcher.dispatch({
2929
rjvId: rjvId,
@@ -32,12 +32,14 @@ export default class extends React.Component {
3232
this.state.input = '';
3333
}}
3434
>
35-
<div {...Theme(theme, 'add-key-modal')}
35+
<div {...Theme(theme, 'key-modal')}
3636
onClick={(e)=>{e.stopPropagation();}}>
37-
<div {...Theme(theme, 'add-key-label')}>Key Name:</div>
37+
<div {...Theme(theme, 'key-modal-label')}>
38+
Key Name:
39+
</div>
3840
<div style={{position: 'relative'}}>
39-
<input {...Theme(theme, 'add-key-input')}
40-
class="add-key-input"
41+
<input {...Theme(theme, 'key-modal-input')}
42+
class="key-modal-input"
4143
ref={input => input && input.focus()}
4244
spellCheck={false}
4345
value={input}
@@ -54,15 +56,15 @@ export default class extends React.Component {
5456
}}
5557
/>
5658
{valid
57-
? <CheckCircle {...Theme(theme, 'add-key-submit')}
58-
class="add-key-submit"
59+
? <CheckCircle {...Theme(theme, 'key-modal-submit')}
60+
class="key-modal-submit"
5961
onClick={e => this.submit()}
6062
/>
6163
: null}
6264
</div>
63-
<span {...Theme(theme, 'add-key-cancel')}>
64-
<Cancel {...Theme(theme, 'add-key-cancel-icon')}
65-
class="add-key-cancel"
65+
<span {...Theme(theme, 'key-modal-cancel')}>
66+
<Cancel {...Theme(theme, 'key-modal-cancel-icon')}
67+
class="key-modal-cancel"
6668
onClick={()=>{
6769
dispatcher.dispatch({
6870
rjvId: rjvId,
@@ -73,33 +75,11 @@ export default class extends React.Component {
7375
</span>
7476
</div>
7577
</div>
76-
) : null;
77-
}
78-
79-
80-
isValid = (rjvId, input) => {
81-
const request = ObjectAttributes.get(
82-
rjvId, 'action', 'new-key-request'
83-
);
84-
return (
85-
input != ''
86-
&& Object.keys(request.existing_value).indexOf(input) === -1
8778
);
8879
}
8980

9081
submit = () => {
91-
const {input} = this.state;
92-
const {rjvId} = this.props;
93-
let request = ObjectAttributes.get(
94-
rjvId, 'action', 'new-key-request'
95-
);
96-
request.new_value = {...request.existing_value};
97-
request.new_value[input] = null;
98-
dispatcher.dispatch({
99-
name: 'VARIABLE_ADDED',
100-
rjvId: rjvId,
101-
data: {...request, key_name: input}
102-
});
82+
this.props.submit(this.state.input);
10383
this.state.input = '';
10484
}
10585

‎src/js/components/VariableEditor.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import AutosizeTextarea from 'react-textarea-autosize';
33

4+
import EditKeyRequest from './ObjectKeyModal/EditKeyRequest';
45
import {toType} from './../helpers/util';
56
import dispatcher from './../helpers/dispatcher';
67
import parseInput from './../helpers/parseInput';
@@ -24,6 +25,7 @@ class VariableEditor extends React.Component {
2425
state = {
2526
editMode: false,
2627
editValue: "",
28+
renameKey: false,
2729
parsedInput: {
2830
type: false,
2931
value: null
@@ -39,33 +41,38 @@ class VariableEditor extends React.Component {
3941
variable, singleIndent, type, theme,
4042
namespace, indentWidth, onEdit, onDelete
4143
} = this.props;
42-
const {editMode} = this.state;
44+
const {editMode, renameKey} = this.state;
4345

4446
return (
4547
<div {...Theme(
4648
theme, 'objectKeyVal', indentWidth * singleIndent
4749
)}
4850
class="variable-row"
4951
key={variable.name}>
52+
{renameKey ? <EditKeyRequest /> : null}
5053
{
5154
type == 'array'
5255
? (
53-
<div {...Theme(theme, 'array-key')}
56+
<span {...Theme(theme, 'array-key')}
5457
key={variable.name + '_' + namespace}>
5558
{variable.name}
5659
<div {...Theme(theme, 'colon')}>:</div>
57-
</div>
60+
</span>
5861
)
5962
: (
60-
<div {...Theme(theme, 'object-name')}
61-
key={variable.name + '_' + namespace}>
62-
<span style={{verticalAlign:'top'}}>"</span>
63-
<div style={{display:'inline-block'}} >
64-
{variable.name}
65-
</div>
66-
<span style={{verticalAlign:'top'}}>"</span>
67-
<div {...Theme(theme, 'colon')}>:</div>
68-
</div>
63+
<span>
64+
<span {...Theme(theme, 'object-name')}
65+
class="object-key"
66+
onDoubleClick={()=>{
67+
this.setState({renameKey: true})
68+
}}
69+
key={variable.name + '_' + namespace}>
70+
<span style={{verticalAlign:'top'}}>"</span>
71+
<span style={{display:'inline-block'}} >{variable.name}</span>
72+
<span style={{verticalAlign:'top'}}>"</span>
73+
</span>
74+
<span {...Theme(theme, 'colon')}>:</span>
75+
</span>
6976
)
7077

7178
}

‎src/js/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import JsonViewer from './components/JsonViewer';
3-
import AddKeyRequest from './components/AddKeyRequest';
3+
import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest';
44
import ValidationFailure from './components/ValidationFailure';
55
import {toType, isTheme} from './helpers/util';
66
import ObjectAttributes from './stores/ObjectAttributes';

‎src/js/stores/ObjectAttributes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ class ObjectAttributes extends EventEmitter {
6666
case 'ADD_VARIABLE_KEY_REQUEST':
6767
this.set(rjvId, 'action', 'new-key-request', data);
6868
this.emit('add-key-request-' + rjvId);
69+
break;
70+
case 'EDIT_VARIABLE_KEY_REQUEST':
71+
this.set(rjvId, 'action', 'edit-key-request', data);
72+
this.emit('edit-key-request-' + rjvId);
6973
}
7074
}
7175

0 commit comments

Comments
 (0)