diff --git a/src/components/CodeEditor/index.tsx b/src/components/CodeEditor/index.tsx index d20c7da..6068951 100644 --- a/src/components/CodeEditor/index.tsx +++ b/src/components/CodeEditor/index.tsx @@ -20,7 +20,7 @@ import {IAceOptions, ICommand, IEditorProps, IMarker} from "react-ace/src/types" export type CodeEditorProps = { tables?: any[]; - onRef?: Ref; + onRef?: React.RefObject; name?: string; style?: React.CSSProperties; /** For available modes see https://github.com/thlorenz/brace/tree/master/mode */ @@ -70,16 +70,31 @@ export type CodeEditorProps = { markers?: IMarker[]; }; -const CodeEditor: React.FC = (props) => { +const CodeEditor: React.FC = ({ onRef, ...props }) => { const {mode, height, width, name, placeholder, value, theme, ref, onChange, tables} = props; console.log(63, mode || 'mysql'); - const editorRef = useRef(null); + const updateAutoCompleteData = (tables: string[], fields: string[]) => { + console.log(110, tables, fields) + if (editorRef.current) { + const editor = editorRef.current.editor; + const session = editor.getSession(); + const sqlCompleter = { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { + callback(null, [ + ...tables.map(table => ({ name: table, value: table, score: 1000, meta: 'Table' })), + ...fields.map(field => ({ name: field, value: field, score: 900, meta: 'Field' })), + ]); + } + }; + session.setMode("ace/mode/sql"); + editor.completers = [sqlCompleter]; + } + }; - useImperativeHandle(props.onRef, () => ({ - // changeVal 就是暴露给父组件的方法 + useImperativeHandle(onRef, () => ({ getSelectValue: () => { console.log(130, editorRef.current) // @ts-ignore @@ -90,6 +105,7 @@ const CodeEditor: React.FC = (props) => { // @ts-ignore return editorRef.current.editor.insert(value); }, + updateAutoCompleteData, })); useEffect(() => { diff --git a/src/components/ProjectSelect/index.tsx b/src/components/ProjectSelect/index.tsx index bb15a0b..b44acfc 100644 --- a/src/components/ProjectSelect/index.tsx +++ b/src/components/ProjectSelect/index.tsx @@ -61,7 +61,7 @@ const ProjectSelect: React.FC = ({ value, onChange, style, s return (