import SqlEditor, { Kind } from '@baic/sql-editor';
const hintData = {
databases: [
{
content: 'bigdata',
kind: Kind.Struct,
tables: [
{
content: 'auth',
fields: [
{
content: 'id',
kind: Kind.Field,
},
],
kind: Kind.Folder,
},
{
content: 'role',
fields: [
{
content: 'id',
kind: Kind.Field,
},
],
kind: Kind.Folder,
},
],
},
],
keywords: [
{
content: 'SELECT',
kind: Kind.Keyword,
},
{
content: 'INSERT',
kind: Kind.Keyword,
},
{
content: 'UPDATE',
kind: Kind.Keyword,
},
],
};
export default () => <SqlEditor hintData={hintData} />;
import { create, setHintData, Kind } from '@baic/sql-editor';
export default ({hintData}: any) => {
React.useEffect(() => {
create(
document.getElementById('container')!,
{},
{
databases: [
{
content: 'bigdata',
kind: Kind.Struct,
tables: [
{
content: 'auth',
fields: [
{
content: 'id',
kind: Kind.Field,
},
],
kind: Kind.Folder,
},
{
content: 'role',
fields: [
{
content: 'id',
kind: Kind.Field,
},
],
kind: Kind.Folder,
},
],
},
],
keywords: [
{
content: 'SELECT',
kind: Kind.Keyword,
},
{
content: 'INSERT',
kind: Kind.Keyword,
},
{
content: 'UPDATE',
kind: Kind.Keyword,
},
],
},
);
}, []);
React.useEffect(() => setHintData(hintData), [hintData]);
return (
<div
id="container"
style={{
height: '100%',
}}
/>
);
};