From 0eb97d80348f04535ebc4c88fa2b60d8f61507f0 Mon Sep 17 00:00:00 2001 From: velveret Date: Sat, 18 Jun 2016 19:16:21 -0700 Subject: [PATCH] Add typings for react-codemirror (#9658) --- codemirror/codemirror.d.ts | 18 +++++----- react-codemirror/react-codemirror-tests.tsx | 40 +++++++++++++++++++++ react-codemirror/react-codemirror.d.ts | 35 ++++++++++++++++++ 3 files changed, 85 insertions(+), 8 deletions(-) create mode 100644 react-codemirror/react-codemirror-tests.tsx create mode 100644 react-codemirror/react-codemirror.d.ts diff --git a/codemirror/codemirror.d.ts b/codemirror/codemirror.d.ts index f513057216..b1bf33e2d2 100644 --- a/codemirror/codemirror.d.ts +++ b/codemirror/codemirror.d.ts @@ -220,14 +220,7 @@ declare namespace CodeMirror { /** Get an { left , top , width , height , clientWidth , clientHeight } object that represents the current scroll position, the size of the scrollable area, and the size of the visible area(minus scrollbars). */ - getScrollInfo(): { - left: any; - top: any; - width: any; - height: any; - clientWidth: any; - clientHeight: any; - } + getScrollInfo(): CodeMirror.ScrollInfo; /** Scrolls the given element into view. pos is a { line , ch } position, referring to a given character, null, to refer to the cursor. The margin parameter is optional. When given, it indicates the amount of pixels around the given area that should be made visible as well. */ @@ -609,6 +602,15 @@ declare namespace CodeMirror { text: string; } + interface ScrollInfo { + left: any; + top: any; + width: any; + height: any; + clientWidth: any; + clientHeight: any; + } + interface TextMarker { /** Remove the mark. */ clear(): void; diff --git a/react-codemirror/react-codemirror-tests.tsx b/react-codemirror/react-codemirror-tests.tsx new file mode 100644 index 0000000000..185f3b229d --- /dev/null +++ b/react-codemirror/react-codemirror-tests.tsx @@ -0,0 +1,40 @@ +/// +/// +/// + +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import * as Codemirror from "react-codemirror"; + +class CodemirrorTest extends React.Component, {}> { + private editorRef: ReactCodeMirror.ReactCodeMirror; + + componentDidMount() { + this.editorRef.focus(); + this.editorRef.getCodeMirror(); + } + + render() { + const options = { + lineNumbers: true, + readOnly: false, + mode: "markdown" + }; + const onChange = (value: any) => console.log(value); + const onFocusChange = (focused: boolean) => console.log(focused); + const onScroll = (scrollInfo: CodeMirror.ScrollInfo) => console.log(scrollInfo.top); + const codeMirrorInstance = CodeMirror(document.body); + + return
+ this.editorRef = r} + value="foo bar" /> +
; + } +} diff --git a/react-codemirror/react-codemirror.d.ts b/react-codemirror/react-codemirror.d.ts new file mode 100644 index 0000000000..12311a2665 --- /dev/null +++ b/react-codemirror/react-codemirror.d.ts @@ -0,0 +1,35 @@ +// Type definitions for React Codemirror v0.2.6 +// Project: https://github.com/JedWatson/react-codemirror +// Definitions by: Vicky Lai +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// +/// + +declare namespace ReactCodeMirror { + interface ReactCodeMirrorProps extends __React.Props { + onChange?: (newValue: string) => any; // called when a change is made + onFocusChange?: (focused: boolean) => any; // called when the editor is focused or loses focus + onScroll?: (scrollInfo: CodeMirror.ScrollInfo) => any; // called when the editor is scrolled + options?: CodeMirror.EditorConfiguration; // options passed to the CodeMirror instance + path?: string; // the identifying name for the textarea + value?: string; // the editor value + className?: string; // CSS className for the outer element + codeMirrorInstance?: CodeMirror.Editor; // the CodeMirror instance + } + + interface ReactCodeMirror extends __React.Component { + /** Focuses the CodeMirror instance. */ + focus(): void; + + /** Returns the CodeMirror instance, if available. */ + getCodeMirror(): CodeMirror.Editor; + } + + interface ReactCodeMirrorClass extends __React.ComponentClass { } +} + +declare module "react-codemirror" { + const RCM: ReactCodeMirror.ReactCodeMirrorClass; + export = RCM; +}