|
|
@@ -1,11 +1,13 @@
|
|
|
'use strict';
|
|
|
|
|
|
import React, { FunctionComponent } from 'react';
|
|
|
+import { Button } from 'antd';
|
|
|
|
|
|
-// If importing using "import { Ace } from 'ext/ace'" VSCode typescript will complain
|
|
|
+// tsx-files don't have the same baseUrl as other js files so
|
|
|
+// we are using a relative path when importing
|
|
|
import { Ace } from '../../../../../ext/ace';
|
|
|
|
|
|
-import {CURSOR_POSITION_CHANGED_EVENT} from '../../../components/aceEditor/AceLocationHandler';
|
|
|
+import { CURSOR_POSITION_CHANGED_EVENT } from '../../aceEditor/AceLocationHandler';
|
|
|
import ReactExampleGlobal from '../../../../../reactComponents/ReactExampleGlobal/ReactExampleGlobal';
|
|
|
import { useHuePubSub } from '../../../../../reactComponents/useHuePubSub';
|
|
|
import SqlExecutable from '../../../execution/sqlExecutable';
|
|
|
@@ -22,7 +24,7 @@ export interface ReactExampleProps {
|
|
|
// When we have type definitions and Ace imported using webackpack we should
|
|
|
// use those types instead of creating our own, e.g. Ace.Position
|
|
|
interface EditorCursor {
|
|
|
- position: Ace.Position
|
|
|
+ position: Ace.Position;
|
|
|
}
|
|
|
|
|
|
const defaultProps = { title: 'Default result title' };
|
|
|
@@ -39,7 +41,11 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
|
|
|
editorCursor?.position !== undefined ? JSON.stringify(editorCursor.position) : 'not available';
|
|
|
|
|
|
return (
|
|
|
- <div className="react-example">
|
|
|
+ // The 'antd' class is added to the root element since we want it to apply the correct
|
|
|
+ // "global" styling to its antd sub components, e.g. the antd Button.
|
|
|
+ // Also make sure that the component specific Antd style is imported in the file
|
|
|
+ // 'root-wrapped-antd.less'.
|
|
|
+ <div className="react-example antd">
|
|
|
<h1 className="react-example__title">{title}</h1>
|
|
|
<p className="react-example__description">
|
|
|
I'm an Editor specific react component containing subcomponents. The dynamic id that I'm
|
|
|
@@ -53,6 +59,9 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
|
|
|
<ReactExampleGlobal className="react-example__react-example-global-component">
|
|
|
I'm a button from the application global component set
|
|
|
</ReactExampleGlobal>
|
|
|
+ <Button type="primary" onClick={() => console.info('clicked')}>
|
|
|
+ I'm an Antd button
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
);
|
|
|
};
|