Merge pull request #21468 from Kovensky/emoji-mart

Add type definitions for emoji-mart

types/emoji-mart/dist-es/components/category.d.ts

@@ -0,0 +1,20 @@
+import React = require('react');
+
+import { EmojiData } from '..';
+
+import { Emoji, EmojiProps, I18n } from '.';
+
+export interface Props {
+    emojis?: Array<string|EmojiData>;
+    hasStickyPosition?: boolean;
+    name: string;
+    native: boolean;
+    perLine: number;
+    emojiProps: EmojiProps;
+    recent?: string[];
+    i18n: I18n;
+}
+
+export default class Category extends React.Component<Props> {
+    // all methods and properties inside this are most likely intended to be private
+}

types/emoji-mart/dist-es/components/emoji.d.ts

@@ -0,0 +1,31 @@
+import React = require('react');
+
+import { EmojiData, EmojiSkin } from '..';
+
+export type BackgroundImageFn = (set: EmojiSet, sheetSize: EmojiSheetSize) => string;
+export type EmojiSet = 'apple'|'google'|'twitter'|'emojione'|'messenger'|'facebook';
+export type EmojiSheetSize = 16|20|32|64;
+
+export interface Props {
+    onOver?(emoji: EmojiData, e: React.MouseEvent<HTMLElement>): void;
+    onLeave?(emoji: EmojiData, e: React.MouseEvent<HTMLElement>): void;
+    onClick?(emoji: EmojiData, e: React.MouseEvent<HTMLElement>): void;
+    /** defaults to returning a png from unpkg.com-hosted emoji-datasource-${set} */
+    backgroundImageFn?: BackgroundImageFn;
+    native?: boolean;
+    forceSize?: boolean;
+    tooltip?: boolean;
+    /** defaults to 1 */
+    skin?: EmojiSkin;
+    /** defaults to 64 */
+    sheetSize?: EmojiSheetSize;
+    /** defaults to 'apple' */
+    set?: EmojiSet;
+    size: number;
+    emoji: string|EmojiData;
+}
+
+// tslint:disable-next-line strict-export-declare-modifiers
+declare const Emoji: React.SFC<Props>;
+
+export { Emoji as default };

types/emoji-mart/dist-es/components/index.d.ts

@@ -0,0 +1,4 @@
+// The other exports on the components folder are not public API
+export { default as Category, Props as CategoryProps } from './category';
+export { default as Emoji, Props as EmojiProps, BackgroundImageFn, EmojiSet, EmojiSheetSize } from './emoji';
+export { default as Picker, Props as PickerProps, I18n, PartialI18n, CustomEmoji } from './picker';

types/emoji-mart/dist-es/components/picker.d.ts

@@ -0,0 +1,54 @@
+import React = require('react');
+
+import { EmojiData, EmojiSkin } from '..';
+
+import { Category, Emoji, EmojiProps, BackgroundImageFn, EmojiSet, EmojiSheetSize } from '.';
+
+// tslint:disable-next-line interface-name
+export interface I18n {
+    search: string;
+    categories: Record<'search'|'recent'|'people'|'nature'|'foods'|'activity'|'places'|'objects'|'symbols'|'flags'|'custom', string>;
+    notfound: string;
+}
+
+export type PartialI18n = Partial<Pick<I18n, 'search'|'notfound'> & { categories: Partial<I18n['categories']>}>;
+
+export interface CustomEmoji {
+    // id is overridden by short_names[0]
+    name: string;
+    /** Must contain at least one name. The first name is used as the unique id. */
+    short_names: string[];
+    emoticons?: string[];
+    keywords?: string[];
+    imageUrl: string;
+}
+
+export interface Props {
+    /** NOTE: default is not preventable */
+    onClick?(emoji: EmojiData, e: React.MouseEvent<HTMLElement>): void;
+    perLine?: number;
+    emojiSize?: number;
+    i18n?: PartialI18n;
+    style?: React.CSSProperties;
+    title?: string;
+    emoji?: string;
+    color?: string;
+    set?: EmojiSet;
+    skin?: EmojiSkin;
+    native?: boolean;
+    backgroundImageFn?: BackgroundImageFn;
+    sheetSize?: EmojiSheetSize;
+    emojisToShowFilter?(emoji: EmojiData): boolean;
+    showPreview?: boolean;
+    emojiTooltip?: boolean;
+    include?: string[];
+    exclude?: string[];
+    recent?: string[];
+    autoFocus?: boolean;
+    /** NOTE: custom emoji are copied into a singleton object on every new mount */
+    custom: CustomEmoji[];
+}
+
+export default class Picker extends React.PureComponent<Props> {
+    // everything inside it is supposed to be private
+}

types/emoji-mart/dist-es/index.d.ts

@@ -0,0 +1,15 @@
+export { default as  emojiIndex, EmojiData, EmojiSkin } from './utils/emoji-index';
+export { default as store, StoreHandlers } from './utils/store';
+export { default as frequently } from './utils/frequently';
+
+export {
+    Picker,
+    PickerProps,
+    I18n,
+    PartialI18n,
+    CustomEmoji,
+    Emoji,
+    EmojiProps,
+    Category,
+    CategoryProps
+} from './components';

types/emoji-mart/dist-es/utils/emoji-index.d.ts

@@ -0,0 +1,25 @@
+export type EmojiSkin = 1|2|3|4|5|6;
+
+export interface EmojiData {
+    id: string;
+    name: string;
+    colons: string;
+    /** Reverse mapping to keyof emoticons */
+    emoticons: string[];
+    unified: string;
+    skin: EmojiSkin|null;
+    native: string;
+}
+
+// tslint:disable-next-line strict-export-declare-modifiers
+declare const _default: {
+    search(query: ''): null
+    search(query: string): EmojiData|null
+
+    emojis: { [emoji: string]: EmojiData }
+
+    /** Mapping of string to keyof emojis */
+    emoticons: { [emoticon: string]: string }
+};
+
+export { _default as default };

types/emoji-mart/dist-es/utils/frequently.d.ts

@@ -0,0 +1,9 @@
+import { EmojiData } from '..';
+
+// tslint:disable-next-line strict-export-declare-modifiers
+declare const _default: {
+    add(emoji: Pick<EmojiData, 'id'>): void
+    get(perLine: number): string[]
+};
+
+export { _default as default };

types/emoji-mart/dist-es/utils/store.d.ts

@@ -0,0 +1,15 @@
+export interface StoreHandlers {
+    getter?(key: string): any;
+    setter?(key: string, value: any): void;
+}
+
+// tslint:disable-next-line strict-export-declare-modifiers
+declare const _default: {
+    setHandlers(handlers?: StoreHandlers): void
+    setNamespace(namespace: string): void
+    update(state: {[key: string]: any}): void
+    set(key: string, value: any): void
+    get(key: string): any
+};
+
+export { _default as default };

types/emoji-mart/emoji-mart-tests.tsx

@@ -0,0 +1,93 @@
+// Port of https://github.com/missive/emoji-mart/blob/master/src/components/emoji.js
+
+import React = require('react');
+
+import { Picker, Emoji, EmojiProps, CustomEmoji } from 'emoji-mart';
+
+declare var console: { log(...args: any[]): void; };
+
+const CUSTOM_EMOJIS: CustomEmoji[] = [
+  {
+    name: 'Party Parrot',
+    short_names: ['parrot'],
+    keywords: ['party'],
+    imageUrl: 'http://cultofthepartyparrot.com/parrots/hd/parrot.gif'
+  },
+  {
+    name: 'Octocat',
+    short_names: ['octocat'],
+    keywords: ['github'],
+    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
+  },
+  {
+    name: 'Squirrel',
+    short_names: ['shipit', 'squirrel'],
+    keywords: ['github'],
+    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
+  },
+];
+
+interface State {
+    native: boolean;
+    set: EmojiProps['set']|'native';
+    emoji: string;
+    title: string;
+    custom: CustomEmoji[];
+}
+
+class Example extends React.Component<{}, State> {
+    readonly state: Readonly<State> = {
+        native: true,
+        set: 'apple',
+        emoji: 'point_up',
+        title: 'Pick your emoji…',
+        custom: CUSTOM_EMOJIS
+    };
+  render() {
+    return (
+        <div>
+            <div className="row">
+                <h1>Emoji Mart 🏬</h1>
+            </div>
+
+            <div className="row">
+                {(['native', 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'] as Array<EmojiProps['set']|'native'>).map((set) => {
+                    const props = { disabled: !this.state.native && set === this.state.set };
+
+                    if (set === 'native' && this.state.native) {
+                        props.disabled = true;
+                    }
+
+                    return (
+                        <button
+                            key={set}
+                            value={set}
+                            onClick={() => {
+                                if (set === 'native') {
+                                    this.setState({ native: true });
+                                } else {
+                                    this.setState({ set, native: false });
+                                }
+                            }}
+                            {...props}
+                        >
+                            {set}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <div className="row">
+                <Picker
+                    {...this.state}
+                    // NOTE: The original code passes the this.state directly, which includes a potential
+                    // invalid 'set' value. The value of 'set' happens to be ignored if native is true, but no
+                    // good way to represent it in the typings.
+                    set={this.state.set === 'native' ? undefined : this.state.set}
+                    onClick={console.log}
+                />
+            </div>
+        </div>
+    );
+  }
+}

types/emoji-mart/index.d.ts

@@ -0,0 +1,9 @@
+// Type definitions for emoji-mart 2.2
+// Project: https://github.com/missive/emoji-mart
+// Definitions by: Diogo Franco <https://github.com/Kovensky>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.4
+
+// These definitions should work with 2.3, but the tests doesn't pass on 2.3.
+
+export * from './dist-es';

types/emoji-mart/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "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",
+        "dist-es/components/category.d.ts",
+        "dist-es/components/emoji.d.ts",
+        "dist-es/components/index.d.ts",
+        "dist-es/components/picker.d.ts",
+        "dist-es/utils/emoji-index.d.ts",
+        "dist-es/utils/frequently.d.ts",
+        "dist-es/utils/store.d.ts",
+        "dist-es/index.d.ts",
+        "emoji-mart-tests.tsx"
+    ]
+}

types/emoji-mart/tslint.json

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