Hello!
EasyUI react didn't have the PropertyGrid component. Because I made it from DataGrid like a fragment code bellow.
My component gets a new data. State is change but render DataGrid with a new data does not happen. Render happened only one time when new data is taken.
"Data" is an array with always length 18. Each element is an object row like a:
{"nameField": "code", "valueField": null, "titleField": "Код", "groupField": "Основные",
"editorField": "text", "rules": ["required", "positive"] },
I don't understand why this is so
Please help me fix this trouble
Thanks
import React, { Component } from 'react'
import { ComboBox, DataGrid, GridColumn, SwitchButton, TextBox, Tooltip, ComboTree } from 'rc-easyui'
import ContextMenu from '../context-menu'
import ErrorBoundry from '../error-boundry'
import CodeEditor from "./item-code-editor";
export default class ItemDetail extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
processedTreeData: null,
parent: null,
rules: null,
errors: null,
editing: false,
selection: null,
comboData: null,
comboDlgClosed: true,
comboDlgEditRow: null
};
this.validateRules= {
//const n = value ? String(value).trim().length : 0;
//return value.length === parseInt(param[0], 10);
"required": {
...
},
"nullable": {
...
},
"digital": {
"validator": (value) => {
console.log("digital validation", value);
return /^\d+$/.test(value);
},
message: 'Код может состоять только из цифр'
},
"float": {
"validator": (value) => {
console.log("float validation", value);
return /^\d*\.?\d+$/.test(value);
},
message: 'Значение должно быть десятичным числом'
},
"positive": {
"validator": (value) => {
console.log("positive validation", value);
//if(Array.isArray(value)) return true; // Todo доделать!!!
return parseInt(value, 10) > 0;
},
message: 'Значение не может быть отрицательным',
},
//...
};
this.cellErrorMessage = "Ошибка данных";
}
/* ----------------- Lifecycle methods -------------------------------------------- */
componentDidMount() {
this.updateData();
}
componentDidUpdate(prevProps, prevState) {
if(prevProps.data !== this.props.data) {
console.log("componentDidUpdate ItemDetail", this.state.data); // works well
this.updateData();}
}
/* ----------------- Data operations ---------------------------------------------- */
updateData = () => {
const { data, processedTreeData } = this.props;
if(data){
this.setState({
data, // set a new data
processedTreeData, // for a tree
})
}
};
//...
/* ----------------- Render методы отображения компонента ------------------------- */
renderEditor = ({ row, error }) =>{
//...
}
};
renderView = ({ value, row }) => {
console.log("render view=>", row.nameField, value); // this works only first render
if (row.editorField === "text")
return(<div>{ row.valueField }</div>);
else if(row.editorField === "number")
return(<div>{ row.valueField }</div>);
else if(row.editorField === "switch")
return(<SwitchButton value={row.valueField}/>);
else if(row.editorField === "tree"){
const { processedTreeData } = this.state;
const node = getNodeByUuid(processedTreeData, row.valueField);
//console.log("Render View getNode=>", node, 'row.valuefield=>',row.valueField);
if(node) return(<div>{ node.text }</div>);}
else if(row.editorField === "combo"){
const dataField = Array.isArray(row.dataField) ? row.dataField : this.props[row.dataField] || null;
if(row.valueField===null && Array.isArray(dataField))
return(<div>{ dataField[0].text }</div>);
if(row.valueField !== null && Array.isArray(dataField)){
const value = dataField.find(item => (item.value === row.valueField));
if (value !== undefined) return(<div>{ value.text }</div>);
}
}
// Ошибка
return(<div className="error">{ this.cellErrorMessage }</div>);
};
renderGroup = ({ value, rows }) =>{
return (
<span style={{ fontWeight:'bold'}}>{value} - <span style={{ color:'red' }}>{ rows.length }</span> свойств(а)
</span>
)
};
renderContextMenu = () => {
return(
<ContextMenu
menu = { this.props.contextMenu }
menuRef = { (ref)=>this.menu=ref }
handleItemClick = { this.handleContextMenuClick }
/>
)
};
render() {
const { data, rules, comboData, comboDlgClosed } = this.state;
//console.log("render ItemDetail", data);
return(
<ErrorBoundry>
<DataGrid
ref = { detail=>this.detail=detail }
data = { data }
//idField = "nameField"
columnResizing
dblclickToEdit
expanderWidth = { 20 }
selectionMode = "row"
editMode = "row"
groupField = "groupField"
renderGroup={ this.renderGroup }
onCellContextMenu={ this.handleItemContextMenu }
onRowClick = { this.handleItemDetailRowClick }
onRowDblClick = { this.handleItemDetailRowDblClick }
onEditEnd = { this.handleEndEdit }
//onEditValidate = { this.handleEditValidate }
>
<GridColumn width={ 25 }/>
<GridColumn field="titleField" title="Имя поля" width="40%"/>
<GridColumn field="valueField" title="Параметр" width="60%"
editable
editRules={ rules }
editor={ this.renderEditor }
render={ this.renderView }
/>
</DataGrid>
<CodeEditor
comboData = { comboData }
rules = { rules }
comboDlgClosed = { comboDlgClosed }
comboDlgManager = { this.comboDlgManager }
setKeyboardEventsListener = { this.setKeyboardEventsListener }
/>
{ this.renderContextMenu() }
</ErrorBoundry>
)
}
}
