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

Feature: Remove components from builder

Browse source
This commit is contained in:
navaneeth 2021-04-07 12:54:21 +05:30
parent 336e76a45b
commit 93f16f0ed6
3 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -104,6 +104,12 @@ class Editor extends React.Component {
console.log('app definition', this.state.appDefinition);
}
removeComponent = (component) => {
let newDefinition = this.state.appDefinition;
delete newDefinition.components[component.id];
this.appDefinitionChanged(newDefinition);
}
componentDefinitionChanged = (newDefinition) => {
console.log('new component definition', newDefinition);
console.log('app definition', this.state.appDefinition);
@ -245,6 +251,7 @@ class Editor extends React.Component {
<Inspector
componentDefinitionChanged={this.componentDefinitionChanged}
dataQueries={dataQueries}
removeComponent={this.removeComponent}
selectedComponent={selectedComponent}>
</Inspector>

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

@ -7,6 +7,8 @@ import { componentTypes } from '../Components/components';
import { Table } from './Components/Table';
import { renderElement, renderEvent } from './Utils';
import { toast } from 'react-toastify';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
const AllElements = {
Color,
@ -14,7 +16,7 @@ const AllElements = {
Text
}
export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQueries }) => {
export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQueries, removeComponent }) => {
const [component, setComponent] = useState(selectedComponent);
const componentMeta = componentTypes.find(comp => component.component.component === comp.component);
@ -84,7 +86,32 @@ export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQ
</CopyToClipboard>
</span>
<img role="button" className="component-action-button" src="https://www.svgrepo.com/show/46582/menu.svg" width="15" height="15"/>
<OverlayTrigger
trigger="click"
placement="left"
overlay={
<Popover id="popover-basic">
{/* <Popover.Title as="h3">brrr</Popover.Title> */}
<Popover.Content>
<div className="field mb-2">
<button className="btn btn-light btn-sm mb-2">Duplicate</button>
<br></br>
<button
className="btn btn-danger btn-sm"
onClick={() => removeComponent(component)}
>
Remove
</button>
</div>
</Popover.Content>
</Popover>
}>
<img role="button" className="component-action-button" src="https://www.svgrepo.com/show/46582/menu.svg" width="15" height="15"/>
</OverlayTrigger>
</div>
{componentMeta.component === 'Table' ?

2
frontend/src/_helpers/utils.js
View file

@ -39,7 +39,7 @@ export function computeComponentName(componentType, currentComponents) {
const currentComponentsForKind = Object.values(currentComponents).filter(component => component.component.component === componentType);
let found = false;
let name = '';
let currentNumber = currentComponentsForKind.length;
let currentNumber = currentComponentsForKind.length + 1;
while(!found) {
name = `${componentType.toLowerCase()}${currentNumber}`;