Skip to content

Commit 5b03d39

Browse files
NinoZXNinoZX
authored
Fixes EditRowDialog
- update fields automatically when they are updated on server - don't update array, object and polygon when no changes are in the field - GeoPointEditor added componentWillReceiveProps on values change - TextInput textarea added rows props to be used
1 parent 6c8e63d commit 5b03d39

File tree

3 files changed

+106
-19
lines changed

3 files changed

+106
-19
lines changed

‎src/components/GeoPointEditor/GeoPointEditor.react.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,17 @@ export default class GeoPointEditor extends React.Component {
3333
this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
3434
}
3535

36+
componentWillReceiveProps(props) {
37+
if (props.value) {
38+
if (props.value.latitude !== this.state.latitude) {
39+
this.setState({ latitude: props.value.latitude });
40+
}
41+
if (props.value.longitude !== this.state.longitude) {
42+
this.setState({ longitude: props.value.longitude });
43+
}
44+
}
45+
}
46+
3647
componentWillUnmount() {
3748
this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
3849
this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);

‎src/components/TextInput/TextInput.react.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ export default class TextInput extends React.Component {
4848
id={this.props.id}
4949
disabled={!!this.props.disabled}
5050
className={classes.join(' ')}
51-
style={{height: this.props.height || 80}}
51+
rows={this.props.rows && this.props.rows > 3 ? this.props.rows : null}
52+
style={this.props.rows && this.props.rows > 3 ? null : {height: this.props.height || 80}}
5253
placeholder={this.props.placeholder}
5354
value={this.props.value}
5455
onChange={this.changeValue.bind(this)}

‎src/dashboard/Data/Browser/EditRowDialog.react.js‎

Lines changed: 93 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ export default class EditRowDialog extends React.Component {
2020
super(props);
2121

2222
const { selectedObject } = this.props;
23-
const { currentObject, openObjectPickers } = this.initializeState(
23+
const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
2424
selectedObject
2525
);
26-
this.state = { currentObject, openObjectPickers };
26+
this.state = { currentObject, openObjectPickers, expandedTextAreas };
2727

2828
this.updateCurrentObject = this.updateCurrentObject.bind(this);
2929
this.handleChange = this.handleChange.bind(this);
@@ -37,42 +37,46 @@ export default class EditRowDialog extends React.Component {
3737
const newSelectedObject = props.selectedObject;
3838
const previousSelectedObject = this.props.selectedObject;
3939
if (newSelectedObject.id !== previousSelectedObject.id) {
40-
const { currentObject, openObjectPickers } = this.initializeState(
40+
const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
4141
newSelectedObject
4242
);
43-
this.setState({ currentObject, openObjectPickers });
43+
this.setState({ currentObject, openObjectPickers, expandedTextAreas });
44+
} else if (newSelectedObject.updatedAt !== previousSelectedObject.updatedAt) {
45+
this.updateCurrentObjectFromProps(newSelectedObject);
4446
}
4547
}
4648

4749
initializeState(newObject) {
4850
const { columns } = this.props;
4951
const currentObject = { ...newObject };
5052
const openObjectPickers = {};
53+
const expandedTextAreas = {};
5154
columns.forEach(column => {
5255
const { name, type } = column;
5356
if (['Array', 'Object'].indexOf(type) >= 0) {
54-
currentObject[name] = JSON.stringify(currentObject[name], null, 2);
57+
const stringifyValue = JSON.stringify(currentObject[name], null, 4);
58+
currentObject[name] = stringifyValue;
59+
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
60+
expandedTextAreas[name] = { rows: rows, expanded: false };
5561
}
5662
if (type === 'Polygon') {
57-
currentObject[name] = JSON.stringify(
63+
const stringifyValue = JSON.stringify(
5864
(currentObject[name] && currentObject[name].coordinates) || [
5965
['lat', 'lon']
6066
],
6167
null,
62-
2
68+
4
6369
);
70+
currentObject[name] = stringifyValue;
71+
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
72+
expandedTextAreas[name] = { rows: rows, expanded: false };
6473
}
65-
if (type === 'Pointer') {
66-
currentObject[name] =
67-
(currentObject[name] && currentObject[name].id) || '';
68-
openObjectPickers[name] = false;
69-
}
70-
if (type === 'Relation') {
74+
if (['Pointer', 'Relation'].indexOf(type) >= 0) {
7175
openObjectPickers[name] = false;
7276
}
7377
});
7478

75-
return { currentObject, openObjectPickers };
79+
return { currentObject, openObjectPickers, expandedTextAreas };
7680
}
7781

7882
updateCurrentObject(newValue, name) {
@@ -81,6 +85,36 @@ export default class EditRowDialog extends React.Component {
8185
this.setState({ currentObject });
8286
}
8387

88+
updateCurrentObjectFromProps(newObject) {
89+
const { columns } = this.props;
90+
const { currentObject, expandedTextAreas } = this.state;
91+
columns.forEach(column => {
92+
const { name, type } = column;
93+
if (['String', 'Number'].indexOf(type) >= 0) {
94+
currentObject[name] = newObject[name];
95+
}
96+
if (['Array', 'Object'].indexOf(type) >= 0) {
97+
const stringifyValue = JSON.stringify(newObject[name], null, 4);
98+
currentObject[name] = stringifyValue;
99+
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
100+
expandedTextAreas[name].rows = rows;
101+
}
102+
if (type === 'Polygon') {
103+
const stringifyValue = JSON.stringify(
104+
(newObject[name] && newObject[name].coordinates) || [
105+
['lat', 'lon']
106+
],
107+
null,
108+
4
109+
);
110+
currentObject[name] = stringifyValue;
111+
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
112+
expandedTextAreas[name].rows = rows;
113+
}
114+
});
115+
this.setState({ currentObject, expandedTextAreas });
116+
}
117+
84118
handleChange(newValue, name, type, targetClass, toDelete) {
85119
if (name == 'password') {
86120
if (newValue === '') {
@@ -113,8 +147,22 @@ export default class EditRowDialog extends React.Component {
113147
this.toggleObjectPicker(name, false);
114148
} else {
115149
if (['Array', 'Object', 'Polygon'].indexOf(type) >= 0) {
116-
const { currentObject } = this.state;
117-
currentObject[name] = JSON.stringify(newValue, null, 2);
150+
const { selectedObject } = this.props;
151+
const { currentObject, expandedTextAreas } = this.state;
152+
const oldStringifyValue = JSON.stringify(
153+
type === 'Polygon'
154+
? selectedObject[name].coordinates
155+
: selectedObject[name],
156+
null,
157+
4
158+
);
159+
const stringifyValue = JSON.stringify(newValue, null, 4);
160+
if (oldStringifyValue === stringifyValue) {
161+
return;
162+
}
163+
currentObject[name] = stringifyValue;
164+
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
165+
expandedTextAreas[name].rows = rows;
118166
if (type === 'Polygon') {
119167
newValue = {
120168
__type: type,
@@ -162,9 +210,15 @@ export default class EditRowDialog extends React.Component {
162210
this.setState({ openObjectPickers });
163211
}
164212

213+
toggleExpandTextArea(name) {
214+
const { expandedTextAreas } = this.state;
215+
expandedTextAreas[name].expanded = !expandedTextAreas[name].expanded;
216+
this.setState({ expandedTextAreas });
217+
}
218+
165219
render() {
166220
const { selectedObject, className, columns, onClose, schema } = this.props;
167-
const { currentObject, openObjectPickers } = this.state;
221+
const { currentObject, openObjectPickers, expandedTextAreas } = this.state;
168222

169223
const fields = columns.map(column => {
170224
const { name, type, targetClass } = column;
@@ -226,6 +280,11 @@ export default class EditRowDialog extends React.Component {
226280
inputComponent = (
227281
<TextInput
228282
multiline={true}
283+
rows={
284+
expandedTextAreas[name] &&
285+
expandedTextAreas[name].expanded &&
286+
expandedTextAreas[name].rows
287+
}
229288
disabled={isDisabled}
230289
value={currentObject[name]}
231290
onChange={newValue => this.updateCurrentObject(newValue, name)}
@@ -354,13 +413,29 @@ export default class EditRowDialog extends React.Component {
354413
inputComponent = <div />;
355414
}
356415

416+
const description = (
417+
<span>
418+
{targetClass ? `${type} <${targetClass}>` : type}
419+
<div style={{ marginTop: '2px' }}>
420+
{expandedTextAreas[name] && expandedTextAreas[name].rows > 3 && (
421+
<a
422+
style={{ color: '#169cee' }}
423+
onClick={() => this.toggleExpandTextArea(name)}
424+
>
425+
{expandedTextAreas[name].expanded ? 'collapse' : 'expand'}
426+
</a>
427+
)}
428+
</div>
429+
</span>
430+
);
431+
357432
return (
358433
<Field
359434
key={name}
360435
label={
361436
<Label
362437
text={name}
363-
description={targetClass ? `${type} <${targetClass}>` : type}
438+
description={description}
364439
/>
365440
}
366441
labelWidth={33}

0 commit comments

Comments
 (0)