react-mentions types (#29773)

* react-mentions types

* fixed typescript version error.

types/react-mentions/index.d.ts

@@ -0,0 +1,112 @@
+// Type definitions for react-mentions 2.3
+// Project: https://github.com/signavio/react-mentions
+// Definitions by: Scott Willeke <https://github.com/activescott>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+import * as React from "react";
+
+/**
+ * MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children.
+ */
+export const MentionsInput: MentionsInputClass;
+
+/**
+ * Each Mention component represents a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.
+ */
+export const Mention: React.SFC<MentionProps>;
+
+/**
+ * The properties for the @see MentionsInput component.
+ */
+export interface MentionsInputProps {
+    /**
+     * If set to `true` a regular text input element will be rendered
+     * instead of a textarea
+     */
+    singleLine?: boolean;
+    /**
+     * If set to `true` spaces will not interrupt matching suggestions
+     */
+    allowSpaceInQuery?: boolean;
+    markup?: string;
+    value?: string;
+    displayTransform?: DisplayTransformFunc;
+    onChange?: OnChangeHandlerFunc;
+    placeholder?: string;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>, clickedSuggestion: boolean) => void;
+    onSelect?: (event: React.UIEvent) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    children: React.ReactElement<MentionProps> | Array<React.ReactElement<MentionProps>>;
+    className?: string;
+    style?: any;
+    regex?: RegExp;
+    suggestionsPortalHost?: Element;
+}
+
+/**
+ * Exposes the type for use with the @see MentionsInputComponent.wrappedInstance which is added by react-mentions' use of substyle (https://github.com/jfschwarz/substyle).
+ */
+export interface MentionsInputComponentUnrwapped extends React.Component<MentionsInputProps> {
+    inputRef?: HTMLInputElement | HTMLTextAreaElement;
+}
+
+/**
+ * Used with @see React.RefObject<MentionsInputComponent>.
+ */
+export interface MentionsInputComponent extends React.Component<MentionsInputProps> {
+    // MentionsInput uses substyle (https://github.com/jfschwarz/substyle) which adds this wrappedInstance
+    wrappedInstance?: MentionsInputComponentUnrwapped;
+}
+
+/**
+ * Used to reference MentionsInput element in a TSX file.
+ */
+export interface MentionsInputClass extends React.ComponentClass<MentionsInputProps> {
+}
+
+/**
+ * Props definition for a mention subelement.
+ */
+export interface MentionProps {
+    type?: string;
+    onAdd?: (id: string | number, display: string) => void;
+    renderSuggestion?: (suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focused: boolean) => React.ReactNode;
+    className?: string;
+    trigger: string | RegExp;
+    isLoading?: boolean;
+    data: SuggestionDataItem[] | DataFunc;
+    style?: any;
+    appendSpaceOnAdd?: boolean;
+}
+
+/**
+ * The shape of a mention.
+ */
+export interface MentionItem {
+    display: string;
+    id: string;
+    type: null;
+}
+
+/**
+ * The shape of suggestion items.
+ */
+export interface SuggestionDataItem {
+    id: string | number;
+    display: string;
+}
+
+/**
+ * Defines the function signature for implementing @see MentionsInputProps.displayTransform
+ */
+export type DisplayTransformFunc = (id: string, display: string, type: string) => string;
+
+/**
+ * Defines the function signature for implementing @see MentionsInputProps.onChange
+ */
+export type OnChangeHandlerFunc = (event: { target: { value: string } }, newValue: string, newPlainTextValue: string, mentions: MentionItem[]) => void;
+
+/**
+ * The function to implement asynchronous loading of suggestions in @see MentionProps.data .
+ */
+export type DataFunc = (query: string, callback: (data: SuggestionDataItem[]) => void) => void | SuggestionDataItem[];

types/react-mentions/lib/utils.d.ts

@@ -0,0 +1,17 @@
+import { DisplayTransformFunc } from "../";
+
+/**
+ * For the passed character index in the plain text string, returns the corresponding index in the marked up value string.
+ * If the passed character index lies inside a mention, the value of `inMarkupCorrection` defines the correction to apply:
+ * - 'START' to return the index of the mention markup's first char (default)
+ * - 'END' to return the index after its last char
+ * - 'NULL' to return null
+ */
+export function mapPlainTextIndex(
+    value: string,
+    markup: string,
+    indexInPlainText: number,
+    inMarkupCorrection: string,
+    displayTransform: DisplayTransformFunc,
+    regex: RegExp
+): number;

types/react-mentions/react-mentions-tests.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { MentionsInput, Mention, SuggestionDataItem } from "react-mentions";
+import { mapPlainTextIndex } from "react-mentions/lib/utils";
+
+interface TestProps {
+    data: SuggestionDataItem[];
+    value?: string;
+    onChange?: () => void;
+    onAdd?: () => void;
+    regex: RegExp;
+}
+
+export const TestSimple: React.SFC<TestProps> = (props) => {
+    return (
+        <MentionsInput
+            value={props.value}
+            onChange={props.onChange}
+            placeholder={"Mention people using '@'"}
+            displayTransform={login => `@${login}`}
+        >
+        <Mention
+            trigger="@"
+            data={props.data}
+            onAdd={props.onAdd}
+        />
+        </MentionsInput>
+    );
+};
+
+export const TestMultipleTrigger: React.SFC<TestProps> = (props) => {
+    return (
+        <MentionsInput
+            value={props.value}
+            onChange={props.onChange}
+            markup="@[__display__](__type__:__id__)"
+            placeholder={"Mention people using '@'"}
+        >
+            <Mention
+                type="user"
+                trigger="@"
+                data={props.data}
+                renderSuggestion={(suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focused: boolean) => (
+                    <div className={`user ${focused ? 'focused' : ''}`}>
+                    {highlightedDisplay}
+                    </div>
+                )}
+                onAdd={props.onAdd}
+            />
+
+            <Mention
+                type="email"
+                trigger={props.regex}
+                data={search => [{ id: search, display: search }]}
+                onAdd={props.onAdd}
+            />
+        </MentionsInput>
+    );
+};
+
+mapPlainTextIndex("foo", "bar", 1, "NULL", login => `@${login}`, /.*/); // $ExpectType number

types/react-mentions/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "lib/utils.d.ts",
+        "react-mentions-tests.tsx"
+    ]
+}

types/react-mentions/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }