Просмотр исходного кода

[frontend] Update the SQL Scratchpad example with the latest changes

Johan Ahlen 4 лет назад
Родитель
Сommit
be177e13ec

+ 6 - 1
tools/examples/components/sql-scratchpad/src/App.css

@@ -20,7 +20,7 @@
 }
 
 .app > .ace-editor {
-  flex: 0 1 50%;
+  flex: 0 0 30%;
   position: relative;
   overflow: hidden;
 }
@@ -48,6 +48,11 @@
   padding: 5px;
 }
 
+.app > .executable-actions > div {
+  display: inline-block;
+  margin-right: 5px;
+}
+
 .app > .result-table {
   flex: 0 1 50%;
   padding: 5px;

+ 28 - 0
tools/examples/components/sql-scratchpad/src/components/ExecuteButton.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+
+export interface ExecuteButtonProps {
+  activeExecutable?: SqlExecutable
+}
+
+interface ExecuteButtonElement extends HTMLElement {
+  executable?: SqlExecutable;
+}
+
+export const ExecuteButton: FC<ExecuteButtonProps> = React.memo(({ activeExecutable }) => {
+  const newNode = document.createElement('query-editor-execute-button');
+  newNode.setAttribute('executable', '');
+  (newNode as ExecuteButtonElement).executable = activeExecutable;
+
+  return <div
+    ref={
+      (element: HTMLDivElement | null) => {
+        if (element) {
+          element.innerHTML = '';
+          element.appendChild(newNode);
+        }
+      }
+    }
+  />
+});

+ 5 - 5
tools/examples/components/sql-scratchpad/src/components/ExecuteActions.tsx → tools/examples/components/sql-scratchpad/src/components/ExecuteLimit.tsx

@@ -2,18 +2,18 @@ import React, { FC } from 'react';
 
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
 
-export interface ExecuteActionsProps {
+export interface ExecuteLimitProps {
   activeExecutable?: SqlExecutable
 }
 
-interface ExecuteActionsElement extends HTMLElement {
+interface ExecuteLimitElement extends HTMLElement {
   executable?: SqlExecutable;
 }
 
-export const ExecuteActions: FC<ExecuteActionsProps> = React.memo(({ activeExecutable }) => {
-  const newNode = document.createElement('query-editor-actions');
+export const ExecuteLimit: FC<ExecuteLimitProps> = React.memo(({ activeExecutable }) => {
+  const newNode = document.createElement('query-editor-limit-input');
   newNode.setAttribute('executable', '');
-  (newNode as ExecuteActionsElement).executable = activeExecutable;
+  (newNode as ExecuteLimitElement).executable = activeExecutable;
 
   return <div
     ref={

+ 7 - 5
tools/examples/components/sql-scratchpad/src/components/SqlScratchpad.tsx

@@ -5,10 +5,11 @@ import hueConfig from 'gethue/lib/config/hueConfig';
 import Executor from 'gethue/lib/execution/executor';
 
 import { QueryEditor } from './QueryEditor';
-import { ExecuteActions } from './ExecuteActions';
+import { ExecuteButton } from './ExecuteButton';
 import { ExecuteProgress } from './ExecuteProgress';
 import { ResultTable } from './ResultTable';
 import SqlExecutable from 'gethue/src/apps/editor/execution/sqlExecutable';
+import {ExecuteLimit} from "./ExecuteLimit";
 
 const HUE_BASE_URL = 'http://localhost:8888'
 
@@ -62,16 +63,17 @@ export class SqlScratchpad extends React.Component<{}, SqlScratchpadState> {
     if (executor) {
       return <React.Fragment>
         <div className="ace-editor">
-          <QueryEditor executor={executor} setActiveExecutable={this.setActiveExecutable}/>
+          <QueryEditor executor={executor} setActiveExecutable={this.setActiveExecutable} />
         </div>
         <div className="executable-progress-bar">
-          <ExecuteProgress activeExecutable={this.state.activeExecutable}/>
+          <ExecuteProgress activeExecutable={this.state.activeExecutable} />
         </div>
         <div className="executable-actions">
-          <ExecuteActions activeExecutable={this.state.activeExecutable}/>
+          <ExecuteButton activeExecutable={this.state.activeExecutable} />
+          <ExecuteLimit activeExecutable={this.state.activeExecutable} />
         </div>
         <div className="result-table">
-          <ResultTable activeExecutable={this.state.activeExecutable}/>
+          <ResultTable activeExecutable={this.state.activeExecutable} />
         </div>
       </React.Fragment>
     } else {