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

Use codehinter for eventselector

Browse source
This commit is contained in:
navaneeth 2021-05-08 10:27:03 +05:30
parent 6a467496b4
commit e22ff49bca
4 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -223,9 +223,10 @@ class Table extends React.Component {
eventUpdated={this.actionButtonEventUpdated}
dataQueries={this.state.dataQueries}
eventOptionUpdated={this.actionButtonEventOptionUpdated}
currentState={this.state.currentState}
extraData={{ actionButton: action, index: index }} // This data is returned in the callbacks
/>
<button className="btn btn-sm btn-danger col" onClick={() => this.removeAction(index)}>
<button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
Remove
</button>
</Popover.Content>
@ -400,8 +401,8 @@ class Table extends React.Component {
<hr></hr>
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState)}
{renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}

14
frontend/src/Editor/Inspector/EventSelector.jsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import { ActionTypes } from '../ActionTypes';
import SelectSearch, { fuzzySearch } from 'react-select-search';
import { CodeHinter } from '../CodeBuilder/CodeHinter';
export const EventSelector = ({
param,
@ -9,7 +10,8 @@ export const EventSelector = ({
eventOptionUpdated,
dataQueries,
extraData,
eventMeta
eventMeta,
currentState
}) => {
function onChange(value) {
const query = dataQueries.find((dataquery) => dataquery.id === value);
@ -59,12 +61,10 @@ export const EventSelector = ({
{definition.actionId === 'open-webpage' && (
<div className="p-3">
<label className="form-label mt-2">URL</label>
<input
onChange={(e) => eventOptionUpdated(param, 'url', e.target.value, extraData)}
value={message}
type="text"
className="form-control form-control-sm"
placeholder="https://example.com"
<CodeHinter
currentState={currentState}
initialValue={definition.options.url}
onChange={(value) => eventOptionUpdated(param, 'url', value, extraData)}
/>
</div>
)}

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

@ -150,7 +150,7 @@ export const Inspector = ({
{Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', currentState, components))}
{Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
<hr></hr>
{Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName]))}
{Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState))}
</div>
)}
</div>

3
frontend/src/Editor/Inspector/Utils.js
View file

@ -49,7 +49,7 @@ export function renderElement(component, componentMeta, paramUpdated, dataQuerie
);
}
export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta) {
export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta, currentState) {
let definition = component.component.definition.events[eventName];
definition = definition || { };
@ -61,6 +61,7 @@ export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpd
eventUpdated={eventUpdated}
dataQueries={dataQueries}
eventOptionUpdated={eventOptionUpdated}
currentState={currentState}
/>
);
}