Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Fixed the react issue that caused table size reset

Browse source
This commit is contained in:
navaneeth 2021-05-26 21:14:22 +05:30
parent 0d0ae69b25
commit 68bf100b75
3 changed files with 26 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Editor/Editor.jsx
View file

@ -777,9 +777,9 @@ class Editor extends React.Component {
dataQueries={dataQueries}
componentChanged={this.componentChanged}
removeComponent={this.removeComponent}
selectedComponent={selectedComponent}
selectedComponentId={selectedComponent.id}
currentState={currentState}
components={appDefinition.components}
allComponents={appDefinition.components}
key={selectedComponent.id}
></Inspector>
) : (

24
frontend/src/Editor/Inspector/Components/Table.jsx
View file

@ -54,13 +54,13 @@ class Table extends React.Component {
}
onActionButtonPropertyChanged = (index, property, value) => {
const actions = this.state.component.component.definition.properties.actions;
const actions = this.props.component.component.definition.properties.actions;
actions.value[index][property] = value;
this.props.paramUpdated({ name: 'actions' }, 'value', actions.value, 'properties');
};
actionButtonEventUpdated = (event, value, extraData) => {
const actions = this.state.component.component.definition.properties.actions;
const actions = this.props.component.component.definition.properties.actions;
const index = extraData.index;
let newValues = actions.value;
@ -72,7 +72,7 @@ class Table extends React.Component {
};
actionButtonEventOptionUpdated = (event, option, value, extraData) => {
const actions = this.state.component.component.definition.properties.actions;
const actions = this.props.component.component.definition.properties.actions;
const index = extraData.index;
let newValues = actions.value;
@ -251,7 +251,7 @@ class Table extends React.Component {
}
onSortEnd = (oldIndex, newIndex) => {
const columns = this.state.component.component.definition.properties.columns;
const columns = this.props.component.component.definition.properties.columns;
const newColumns = arrayMove(columns.value, oldIndex, newIndex);
this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties');
};
@ -273,31 +273,31 @@ class Table extends React.Component {
}
addNewColumn = () => {
const columns = this.state.component.component.definition.properties.columns;
const columns = this.props.component.component.definition.properties.columns;
const newValue = columns.value;
newValue.push({ name: this.generateNewColumnName(columns.value) });
this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties');
};
addNewAction = () => {
const actions = this.state.component.component.definition.properties.actions;
const actions = this.props.component.component.definition.properties.actions;
const newValue = actions ? actions.value : [];
newValue.push({ name: computeActionName(actions), buttonText: 'Button' });
this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties');
};
removeAction = (index) => {
const newValue = this.state.component.component.definition.properties.actions.value;
const newValue = this.props.component.component.definition.properties.actions.value;
newValue.splice(index, 1);
this.props.paramUpdated({ name: 'actions' }, 'value', newValue, 'properties');
};
onColumnItemChange = (index, item, value) => {
const columns = this.state.component.component.definition.properties.columns;
const columns = this.props.component.component.definition.properties.columns;
const column = columns.value[index];
if (item === 'name') {
const columnSizes = this.state.component.component.definition.properties.columnSizes;
const columnSizes = this.props.component.component.definition.properties.columnSizes;
if (columnSizes) {
const newColumnSizes = JSON.parse(JSON.stringify(columnSizes));
@ -316,7 +316,7 @@ class Table extends React.Component {
};
removeColumn = (index) => {
const columns = this.state.component.component.definition.properties.columns;
const columns = this.props.component.component.definition.properties.columns;
const newValue = columns.value;
newValue.splice(index, 1);
this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties');
@ -332,13 +332,13 @@ class Table extends React.Component {
eventOptionUpdated,
components,
currentState
} = this.state;
} = this.props;
const columns = component.component.definition.properties.columns;
const actions = component.component.definition.properties.actions || { value: [] };
return (
<div className="properties-container p-2">
<div className="properties-container p-2" key={this.props.component.id}>
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'data', 'properties', currentState, components)}
<div className="field mb-2 mt-3">

15
frontend/src/Editor/Inspector/Inspector.jsx
View file

@ -10,20 +10,29 @@ import { toast } from 'react-toastify';
import { validateQueryName } from '@/_helpers/utils';
export const Inspector = ({
selectedComponent,
selectedComponentId,
componentDefinitionChanged,
dataQueries,
removeComponent,
components,
allComponents,
componentChanged,
currentState
}) => {
const selectedComponent = { id: selectedComponentId, component: allComponents[selectedComponentId].component }
const [component, setComponent] = useState(selectedComponent);
const [components, setComponents] = useState(allComponents);
const componentMeta = componentTypes.find((comp) => component.component.component === comp.component);
useEffect(() => {
setComponent(selectedComponent);
}, [selectedComponent]);
}, [selectedComponent.component.definition]);
useEffect(() => {
setComponents(allComponents);
}, [allComponents]);
function handleComponentNameChange(newName) {
if (validateQueryName(newName)) {