Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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} eventUpdated={this.actionButtonEventUpdated}
dataQueries={this.state.dataQueries} dataQueries={this.state.dataQueries}
eventOptionUpdated={this.actionButtonEventOptionUpdated} eventOptionUpdated={this.actionButtonEventOptionUpdated}
currentState={this.state.currentState}
extraData={{ actionButton: action, index: index }} // This data is returned in the callbacks 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 Remove
</button> </button>
</Popover.Content> </Popover.Content>
@ -400,8 +401,8 @@ class Table extends React.Component {
<hr></hr> <hr></hr>
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)} {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)} {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState)}
{renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)} {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 React from 'react';
import { ActionTypes } from '../ActionTypes'; import { ActionTypes } from '../ActionTypes';
import SelectSearch, { fuzzySearch } from 'react-select-search'; import SelectSearch, { fuzzySearch } from 'react-select-search';
import { CodeHinter } from '../CodeBuilder/CodeHinter';
export const EventSelector = ({ export const EventSelector = ({
param, param,
@ -9,7 +10,8 @@ export const EventSelector = ({
eventOptionUpdated, eventOptionUpdated,
dataQueries, dataQueries,
extraData, extraData,
eventMeta eventMeta,
currentState
}) => { }) => {
function onChange(value) { function onChange(value) {
const query = dataQueries.find((dataquery) => dataquery.id === value); const query = dataQueries.find((dataquery) => dataquery.id === value);
@ -59,12 +61,10 @@ export const EventSelector = ({
{definition.actionId === 'open-webpage' && ( {definition.actionId === 'open-webpage' && (
<div className="p-3"> <div className="p-3">
<label className="form-label mt-2">URL</label> <label className="form-label mt-2">URL</label>
<input <CodeHinter
onChange={(e) => eventOptionUpdated(param, 'url', e.target.value, extraData)} currentState={currentState}
value={message} initialValue={definition.options.url}
type="text" onChange={(value) => eventOptionUpdated(param, 'url', value, extraData)}
className="form-control form-control-sm"
placeholder="https://example.com"
/> />
</div> </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.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))} {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
<hr></hr> <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>
)} )}
</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]; let definition = component.component.definition.events[eventName];
definition = definition || { }; definition = definition || { };
@ -61,6 +61,7 @@ export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpd
eventUpdated={eventUpdated} eventUpdated={eventUpdated}
dataQueries={dataQueries} dataQueries={dataQueries}
eventOptionUpdated={eventOptionUpdated} eventOptionUpdated={eventOptionUpdated}
currentState={currentState}
/> />
); );
} }