Skip to content

Commit

Permalink
Fixes EditRowDialog
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@NinoZX
NinoZX authored Oct 29, 2020
1 parent 6c8e63d commit 5b03d39
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 19 deletions.
11 changes: 11 additions & 0 deletions src/components/GeoPointEditor/GeoPointEditor.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,17 @@ export default class GeoPointEditor extends React.Component {
this.refs.longitude.addEventListener('keypress', this.handleKeyLongitude);
}

componentWillReceiveProps(props) {
if (props.value) {
if (props.value.latitude !== this.state.latitude) {
this.setState({ latitude: props.value.latitude });
}
if (props.value.longitude !== this.state.longitude) {
this.setState({ longitude: props.value.longitude });
}
}
}

componentWillUnmount() {
this.refs.latitude.removeEventListener('keypress', this.handleKeyLatitude);
this.refs.longitude.removeEventListener('keypress', this.handleKeyLongitude);
Expand Down
3 changes: 2 additions & 1 deletion src/components/TextInput/TextInput.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export default class TextInput extends React.Component {
id={this.props.id}
disabled={!!this.props.disabled}
className={classes.join(' ')}
style={{height: this.props.height || 80}}
rows={this.props.rows && this.props.rows > 3 ? this.props.rows : null}
style={this.props.rows && this.props.rows > 3 ? null : {height: this.props.height || 80}}
placeholder={this.props.placeholder}
value={this.props.value}
onChange={this.changeValue.bind(this)}
Expand Down
111 changes: 93 additions & 18 deletions src/dashboard/Data/Browser/EditRowDialog.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ export default class EditRowDialog extends React.Component {
super(props);

const { selectedObject } = this.props;
const { currentObject, openObjectPickers } = this.initializeState(
const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
selectedObject
);
this.state = { currentObject, openObjectPickers };
this.state = { currentObject, openObjectPickers, expandedTextAreas };

this.updateCurrentObject = this.updateCurrentObject.bind(this);
this.handleChange = this.handleChange.bind(this);
Expand All @@ -37,42 +37,46 @@ export default class EditRowDialog extends React.Component {
const newSelectedObject = props.selectedObject;
const previousSelectedObject = this.props.selectedObject;
if (newSelectedObject.id !== previousSelectedObject.id) {
const { currentObject, openObjectPickers } = this.initializeState(
const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
newSelectedObject
);
this.setState({ currentObject, openObjectPickers });
this.setState({ currentObject, openObjectPickers, expandedTextAreas });
} else if (newSelectedObject.updatedAt !== previousSelectedObject.updatedAt) {
this.updateCurrentObjectFromProps(newSelectedObject);
}
}

initializeState(newObject) {
const { columns } = this.props;
const currentObject = { ...newObject };
const openObjectPickers = {};
const expandedTextAreas = {};
columns.forEach(column => {
const { name, type } = column;
if (['Array', 'Object'].indexOf(type) >= 0) {
currentObject[name] = JSON.stringify(currentObject[name], null, 2);
const stringifyValue = JSON.stringify(currentObject[name], null, 4);
currentObject[name] = stringifyValue;
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
expandedTextAreas[name] = { rows: rows, expanded: false };
}
if (type === 'Polygon') {
currentObject[name] = JSON.stringify(
const stringifyValue = JSON.stringify(
(currentObject[name] && currentObject[name].coordinates) || [
['lat', 'lon']
],
null,
2
4
);
currentObject[name] = stringifyValue;
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
expandedTextAreas[name] = { rows: rows, expanded: false };
}
if (type === 'Pointer') {
currentObject[name] =
(currentObject[name] && currentObject[name].id) || '';
openObjectPickers[name] = false;
}
if (type === 'Relation') {
if (['Pointer', 'Relation'].indexOf(type) >= 0) {
openObjectPickers[name] = false;
}
});

return { currentObject, openObjectPickers };
return { currentObject, openObjectPickers, expandedTextAreas };
}

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

updateCurrentObjectFromProps(newObject) {
const { columns } = this.props;
const { currentObject, expandedTextAreas } = this.state;
columns.forEach(column => {
const { name, type } = column;
if (['String', 'Number'].indexOf(type) >= 0) {
currentObject[name] = newObject[name];
}
if (['Array', 'Object'].indexOf(type) >= 0) {
const stringifyValue = JSON.stringify(newObject[name], null, 4);
currentObject[name] = stringifyValue;
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
expandedTextAreas[name].rows = rows;
}
if (type === 'Polygon') {
const stringifyValue = JSON.stringify(
(newObject[name] && newObject[name].coordinates) || [
['lat', 'lon']
],
null,
4
);
currentObject[name] = stringifyValue;
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
expandedTextAreas[name].rows = rows;
}
});
this.setState({ currentObject, expandedTextAreas });
}

handleChange(newValue, name, type, targetClass, toDelete) {
if (name == 'password') {
if (newValue === '') {
Expand Down Expand Up @@ -113,8 +147,22 @@ export default class EditRowDialog extends React.Component {
this.toggleObjectPicker(name, false);
} else {
if (['Array', 'Object', 'Polygon'].indexOf(type) >= 0) {
const { currentObject } = this.state;
currentObject[name] = JSON.stringify(newValue, null, 2);
const { selectedObject } = this.props;
const { currentObject, expandedTextAreas } = this.state;
const oldStringifyValue = JSON.stringify(
type === 'Polygon'
? selectedObject[name].coordinates
: selectedObject[name],
null,
4
);
const stringifyValue = JSON.stringify(newValue, null, 4);
if (oldStringifyValue === stringifyValue) {
return;
}
currentObject[name] = stringifyValue;
const rows = stringifyValue ? stringifyValue.split('\n').length : 1;
expandedTextAreas[name].rows = rows;
if (type === 'Polygon') {
newValue = {
__type: type,
Expand Down Expand Up @@ -162,9 +210,15 @@ export default class EditRowDialog extends React.Component {
this.setState({ openObjectPickers });
}

toggleExpandTextArea(name) {
const { expandedTextAreas } = this.state;
expandedTextAreas[name].expanded = !expandedTextAreas[name].expanded;
this.setState({ expandedTextAreas });
}

render() {
const { selectedObject, className, columns, onClose, schema } = this.props;
const { currentObject, openObjectPickers } = this.state;
const { currentObject, openObjectPickers, expandedTextAreas } = this.state;

const fields = columns.map(column => {
const { name, type, targetClass } = column;
Expand Down Expand Up @@ -226,6 +280,11 @@ export default class EditRowDialog extends React.Component {
inputComponent = (
<TextInput
multiline={true}
rows={
expandedTextAreas[name] &&
expandedTextAreas[name].expanded &&
expandedTextAreas[name].rows
}
disabled={isDisabled}
value={currentObject[name]}
onChange={newValue => this.updateCurrentObject(newValue, name)}
Expand Down Expand Up @@ -354,13 +413,29 @@ export default class EditRowDialog extends React.Component {
inputComponent = <div />;
}

const description = (
<span>
{targetClass ? `${type} <${targetClass}>` : type}
<div style={{ marginTop: '2px' }}>
{expandedTextAreas[name] && expandedTextAreas[name].rows > 3 && (
<a
style={{ color: '#169cee' }}
onClick={() => this.toggleExpandTextArea(name)}
>
{expandedTextAreas[name].expanded ? 'collapse' : 'expand'}
</a>
)}
</div>
</span>
);

return (
<Field
key={name}
label={
<Label
text={name}
description={targetClass ? `${type} <${targetClass}>` : type}
description={description}
/>
}
labelWidth={33}
Expand Down

0 comments on commit 5b03d39

Please sign in to comment.