From 2b83c00b5743cbb836af9533956ab70c8df0ecaf Mon Sep 17 00:00:00 2001 From: "Diogo Franco (Kovensky)" Date: Mon, 13 Nov 2017 16:54:24 +0900 Subject: [PATCH 1/3] Add emoji-mart typings --- .../dist-es/components/category.d.ts | 18 ++++ .../emoji-mart/dist-es/components/emoji.d.ts | 27 ++++++ .../emoji-mart/dist-es/components/index.d.ts | 4 + .../emoji-mart/dist-es/components/picker.d.ts | 54 +++++++++++ types/emoji-mart/dist-es/index.d.ts | 15 +++ .../emoji-mart/dist-es/utils/emoji-index.d.ts | 23 +++++ .../emoji-mart/dist-es/utils/frequently.d.ts | 9 ++ types/emoji-mart/dist-es/utils/store.d.ts | 15 +++ types/emoji-mart/emoji-mart-tests.tsx | 93 +++++++++++++++++++ types/emoji-mart/index.d.ts | 9 ++ types/emoji-mart/tsconfig.json | 32 +++++++ types/emoji-mart/tslint.json | 1 + 12 files changed, 300 insertions(+) create mode 100644 types/emoji-mart/dist-es/components/category.d.ts create mode 100644 types/emoji-mart/dist-es/components/emoji.d.ts create mode 100644 types/emoji-mart/dist-es/components/index.d.ts create mode 100644 types/emoji-mart/dist-es/components/picker.d.ts create mode 100644 types/emoji-mart/dist-es/index.d.ts create mode 100644 types/emoji-mart/dist-es/utils/emoji-index.d.ts create mode 100644 types/emoji-mart/dist-es/utils/frequently.d.ts create mode 100644 types/emoji-mart/dist-es/utils/store.d.ts create mode 100644 types/emoji-mart/emoji-mart-tests.tsx create mode 100644 types/emoji-mart/index.d.ts create mode 100644 types/emoji-mart/tsconfig.json create mode 100644 types/emoji-mart/tslint.json diff --git a/types/emoji-mart/dist-es/components/category.d.ts b/types/emoji-mart/dist-es/components/category.d.ts new file mode 100644 index 0000000000..71b23f3964 --- /dev/null +++ b/types/emoji-mart/dist-es/components/category.d.ts @@ -0,0 +1,18 @@ +import React = require('react'); + +import { Emoji, EmojiProps, I18n } from '.'; + +export interface Props { + emojis?: Array; + hasStickyPosition?: boolean; + name: string; + native: boolean; + perLine: number; + emojiProps: EmojiProps; + recent?: string[]; + i18n: I18n; +} + +export default class Category extends React.Component { + // all methods and properties inside this are most likely intended to be private +} diff --git a/types/emoji-mart/dist-es/components/emoji.d.ts b/types/emoji-mart/dist-es/components/emoji.d.ts new file mode 100644 index 0000000000..16c3dfc373 --- /dev/null +++ b/types/emoji-mart/dist-es/components/emoji.d.ts @@ -0,0 +1,27 @@ +import React = require('react'); + +import { EmojiData } from '..'; + +export interface Props { + onOver?(emoji: EmojiData, e: React.MouseEvent): void; + onLeave?(emoji: EmojiData, e: React.MouseEvent): void; + onClick?(emoji: EmojiData, e: React.MouseEvent): void; + /** defaults to returning a png from unpkg.com-hosted emoji-datasource-${set} */ + backgroundImageFn?(set: 'apple'|'google'|'twitter'|'emojione'|'messenger'|'facebook', sheetSize: 16|20|32|64): string; + native?: boolean; + forceSize?: boolean; + tooltip?: boolean; + /** defaults to 1 */ + skin?: 1|2|3|4|5|6; + /** defaults to 64 */ + sheetSize?: 16|20|32|64; + /** defaults to 'apple' */ + set?: 'apple'|'google'|'twitter'|'emojione'|'messenger'|'facebook'; + size: number; + emoji: string|EmojiData; +} + +// tslint:disable-next-line strict-export-declare-modifiers +declare const Emoji: React.SFC; + +export { Emoji as default }; diff --git a/types/emoji-mart/dist-es/components/index.d.ts b/types/emoji-mart/dist-es/components/index.d.ts new file mode 100644 index 0000000000..49b02511bd --- /dev/null +++ b/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 } from './emoji'; +export { default as Picker, Props as PickerProps, I18n, PartialI18n, CustomEmoji } from './picker'; diff --git a/types/emoji-mart/dist-es/components/picker.d.ts b/types/emoji-mart/dist-es/components/picker.d.ts new file mode 100644 index 0000000000..b38c436378 --- /dev/null +++ b/types/emoji-mart/dist-es/components/picker.d.ts @@ -0,0 +1,54 @@ +import React = require('react'); + +import { EmojiData } from '..'; + +import { Category, Emoji, EmojiProps } 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 & { categories: Partial}>; + +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): void; + perLine?: number; + emojiSize?: number; + i18n?: PartialI18n; + style?: React.CSSProperties; + title?: string; + emoji?: string; + color?: string; + set?: EmojiProps['set']; + skin?: EmojiProps['skin']; + native?: boolean; + backgroundImageFn?: EmojiProps['backgroundImageFn']; + sheetSize?: EmojiProps['sheetSize']; + emojisToShowFilter?(emoji: EmojiData): boolean; + showPreview?: boolean; + emojiTooltip?: EmojiProps['tooltip']; + 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 { + // everything inside it is supposed to be private +} diff --git a/types/emoji-mart/dist-es/index.d.ts b/types/emoji-mart/dist-es/index.d.ts new file mode 100644 index 0000000000..82049c8495 --- /dev/null +++ b/types/emoji-mart/dist-es/index.d.ts @@ -0,0 +1,15 @@ +export { default as emojiIndex, EmojiData } 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'; diff --git a/types/emoji-mart/dist-es/utils/emoji-index.d.ts b/types/emoji-mart/dist-es/utils/emoji-index.d.ts new file mode 100644 index 0000000000..bcf542254e --- /dev/null +++ b/types/emoji-mart/dist-es/utils/emoji-index.d.ts @@ -0,0 +1,23 @@ +export interface EmojiData { + id: string; + name: string; + colons: string; + /** Reverse mapping to keyof emoticons */ + emoticons: string[]; + unified: string; + skin: 1|2|3|4|5|6|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 }; diff --git a/types/emoji-mart/dist-es/utils/frequently.d.ts b/types/emoji-mart/dist-es/utils/frequently.d.ts new file mode 100644 index 0000000000..d2f318de5f --- /dev/null +++ b/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): void + get(perLine: number): string[] +}; + +export { _default as default }; diff --git a/types/emoji-mart/dist-es/utils/store.d.ts b/types/emoji-mart/dist-es/utils/store.d.ts new file mode 100644 index 0000000000..009284bd7b --- /dev/null +++ b/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 }; diff --git a/types/emoji-mart/emoji-mart-tests.tsx b/types/emoji-mart/emoji-mart-tests.tsx new file mode 100644 index 0000000000..5c49fdd19a --- /dev/null +++ b/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 '.'; + +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 = { + native: true, + set: 'apple', + emoji: 'point_up', + title: 'Pick your emoji…', + custom: CUSTOM_EMOJIS + }; + render() { + return ( +
+
+

Emoji Mart 🏬

+
+ +
+ {(['native', 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'] as Array).map((set) => { + const props = { disabled: !this.state.native && set === this.state.set }; + + if (set === 'native' && this.state.native) { + props.disabled = true; + } + + return ( + + ); + })} +
+ +
+ +
+
+ ); + } +} diff --git a/types/emoji-mart/index.d.ts b/types/emoji-mart/index.d.ts new file mode 100644 index 0000000000..1116d6eb6f --- /dev/null +++ b/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 +// 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'; diff --git a/types/emoji-mart/tsconfig.json b/types/emoji-mart/tsconfig.json new file mode 100644 index 0000000000..fb776e9a21 --- /dev/null +++ b/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" + ] +} diff --git a/types/emoji-mart/tslint.json b/types/emoji-mart/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/emoji-mart/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From c84389c360ab47c0c88ea2f08ddab76eb79a4e22 Mon Sep 17 00:00:00 2001 From: "Diogo Franco (Kovensky)" Date: Mon, 13 Nov 2017 17:26:39 +0900 Subject: [PATCH 2/3] Declare aliases for most literal union types --- types/emoji-mart/dist-es/components/category.d.ts | 4 +++- types/emoji-mart/dist-es/components/emoji.d.ts | 14 +++++++++----- types/emoji-mart/dist-es/components/index.d.ts | 2 +- types/emoji-mart/dist-es/components/picker.d.ts | 14 +++++++------- types/emoji-mart/dist-es/index.d.ts | 2 +- types/emoji-mart/dist-es/utils/emoji-index.d.ts | 4 +++- 6 files changed, 24 insertions(+), 16 deletions(-) diff --git a/types/emoji-mart/dist-es/components/category.d.ts b/types/emoji-mart/dist-es/components/category.d.ts index 71b23f3964..8cd4ceefbb 100644 --- a/types/emoji-mart/dist-es/components/category.d.ts +++ b/types/emoji-mart/dist-es/components/category.d.ts @@ -1,9 +1,11 @@ import React = require('react'); +import { EmojiData } from '..'; + import { Emoji, EmojiProps, I18n } from '.'; export interface Props { - emojis?: Array; + emojis?: Array; hasStickyPosition?: boolean; name: string; native: boolean; diff --git a/types/emoji-mart/dist-es/components/emoji.d.ts b/types/emoji-mart/dist-es/components/emoji.d.ts index 16c3dfc373..030ff7ce12 100644 --- a/types/emoji-mart/dist-es/components/emoji.d.ts +++ b/types/emoji-mart/dist-es/components/emoji.d.ts @@ -1,22 +1,26 @@ import React = require('react'); -import { EmojiData } from '..'; +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): void; onLeave?(emoji: EmojiData, e: React.MouseEvent): void; onClick?(emoji: EmojiData, e: React.MouseEvent): void; /** defaults to returning a png from unpkg.com-hosted emoji-datasource-${set} */ - backgroundImageFn?(set: 'apple'|'google'|'twitter'|'emojione'|'messenger'|'facebook', sheetSize: 16|20|32|64): string; + backgroundImageFn?: BackgroundImageFn; native?: boolean; forceSize?: boolean; tooltip?: boolean; /** defaults to 1 */ - skin?: 1|2|3|4|5|6; + skin?: EmojiSkin; /** defaults to 64 */ - sheetSize?: 16|20|32|64; + sheetSize?: EmojiSheetSize; /** defaults to 'apple' */ - set?: 'apple'|'google'|'twitter'|'emojione'|'messenger'|'facebook'; + set?: EmojiSet; size: number; emoji: string|EmojiData; } diff --git a/types/emoji-mart/dist-es/components/index.d.ts b/types/emoji-mart/dist-es/components/index.d.ts index 49b02511bd..6fc29ecd54 100644 --- a/types/emoji-mart/dist-es/components/index.d.ts +++ b/types/emoji-mart/dist-es/components/index.d.ts @@ -1,4 +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 } from './emoji'; +export { default as Emoji, Props as EmojiProps, BackgroundImageFn, EmojiSet, EmojiSheetSize } from './emoji'; export { default as Picker, Props as PickerProps, I18n, PartialI18n, CustomEmoji } from './picker'; diff --git a/types/emoji-mart/dist-es/components/picker.d.ts b/types/emoji-mart/dist-es/components/picker.d.ts index b38c436378..9f9132df05 100644 --- a/types/emoji-mart/dist-es/components/picker.d.ts +++ b/types/emoji-mart/dist-es/components/picker.d.ts @@ -1,8 +1,8 @@ import React = require('react'); -import { EmojiData } from '..'; +import { EmojiData, EmojiSkin } from '..'; -import { Category, Emoji, EmojiProps } from '.'; +import { Category, Emoji, EmojiProps, BackgroundImageFn, EmojiSet, EmojiSheetSize } from '.'; // tslint:disable-next-line interface-name export interface I18n { @@ -33,14 +33,14 @@ export interface Props { title?: string; emoji?: string; color?: string; - set?: EmojiProps['set']; - skin?: EmojiProps['skin']; + set?: EmojiSet; + skin?: EmojiSkin; native?: boolean; - backgroundImageFn?: EmojiProps['backgroundImageFn']; - sheetSize?: EmojiProps['sheetSize']; + backgroundImageFn?: BackgroundImageFn; + sheetSize?: EmojiSheetSize; emojisToShowFilter?(emoji: EmojiData): boolean; showPreview?: boolean; - emojiTooltip?: EmojiProps['tooltip']; + emojiTooltip?: boolean; include?: string[]; exclude?: string[]; recent?: string[]; diff --git a/types/emoji-mart/dist-es/index.d.ts b/types/emoji-mart/dist-es/index.d.ts index 82049c8495..e49d37fcf6 100644 --- a/types/emoji-mart/dist-es/index.d.ts +++ b/types/emoji-mart/dist-es/index.d.ts @@ -1,4 +1,4 @@ -export { default as emojiIndex, EmojiData } from './utils/emoji-index'; +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'; diff --git a/types/emoji-mart/dist-es/utils/emoji-index.d.ts b/types/emoji-mart/dist-es/utils/emoji-index.d.ts index bcf542254e..c6499e663c 100644 --- a/types/emoji-mart/dist-es/utils/emoji-index.d.ts +++ b/types/emoji-mart/dist-es/utils/emoji-index.d.ts @@ -1,3 +1,5 @@ +export type EmojiSkin = 1|2|3|4|5|6; + export interface EmojiData { id: string; name: string; @@ -5,7 +7,7 @@ export interface EmojiData { /** Reverse mapping to keyof emoticons */ emoticons: string[]; unified: string; - skin: 1|2|3|4|5|6|null; + skin: EmojiSkin|null; native: string; } From ad815ce9c6bd1b1db00e9b2710c82bc3c83cbc5f Mon Sep 17 00:00:00 2001 From: "Diogo Franco (Kovensky)" Date: Mon, 13 Nov 2017 18:47:04 +0900 Subject: [PATCH 3/3] Fix test import --- types/emoji-mart/emoji-mart-tests.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/emoji-mart/emoji-mart-tests.tsx b/types/emoji-mart/emoji-mart-tests.tsx index 5c49fdd19a..7b7b8d0471 100644 --- a/types/emoji-mart/emoji-mart-tests.tsx +++ b/types/emoji-mart/emoji-mart-tests.tsx @@ -2,7 +2,7 @@ import React = require('react'); -import { Picker, Emoji, EmojiProps, CustomEmoji } from '.'; +import { Picker, Emoji, EmojiProps, CustomEmoji } from 'emoji-mart'; declare var console: { log(...args: any[]): void; };