From 36d6275107d62c62850b1821bfdcb1cc42530529 Mon Sep 17 00:00:00 2001 From: ewwwwwwww Date: Mon, 4 Jul 2022 16:07:04 -0700 Subject: [PATCH] type fixes --- app/soapbox/features/emoji/data.ts | 5 +- app/soapbox/features/emoji/emoji_picker.tsx | 2 +- app/soapbox/features/emoji/mapping.ts | 10 +- app/soapbox/features/emoji/search.ts | 3 + app/soapbox/features/emoji/util.ts | 213 ++++++++++++++++++++ types/emoji-mart/index.d.ts | 51 ++++- 6 files changed, 266 insertions(+), 18 deletions(-) create mode 100644 app/soapbox/features/emoji/util.ts diff --git a/app/soapbox/features/emoji/data.ts b/app/soapbox/features/emoji/data.ts index ac5d3d0daf..f04e591cc2 100644 --- a/app/soapbox/features/emoji/data.ts +++ b/app/soapbox/features/emoji/data.ts @@ -1,3 +1,2 @@ -import data from '@emoji-mart/data/sets/14/twitter.json'; - -export default data; +export * from '@emoji-mart/data/sets/14/twitter.json'; +export { default } from '@emoji-mart/data/sets/14/twitter.json'; diff --git a/app/soapbox/features/emoji/emoji_picker.tsx b/app/soapbox/features/emoji/emoji_picker.tsx index d76eec5060..0a6c973ce0 100644 --- a/app/soapbox/features/emoji/emoji_picker.tsx +++ b/app/soapbox/features/emoji/emoji_picker.tsx @@ -1,4 +1,4 @@ -import data from '@emoji-mart/data/sets/14/twitter.json'; +import data from './data'; import { Picker as EmojiPicker, PickerProps } from 'emoji-mart'; import React, { useRef, useEffect } from 'react'; diff --git a/app/soapbox/features/emoji/mapping.ts b/app/soapbox/features/emoji/mapping.ts index 413db7e2d3..5de22faf33 100644 --- a/app/soapbox/features/emoji/mapping.ts +++ b/app/soapbox/features/emoji/mapping.ts @@ -1,15 +1,13 @@ -import emojiData from './data'; +import data, { EmojiData } from './data'; -import type EmojiData from '@emoji-mart/data'; - -interface IUniMap { +interface UnicodeMap { [s: string]: { unified: string, shortcode: string, } } -export const generateMappings = (data: typeof EmojiData): IUniMap => { +export const generateMappings = (data: EmojiData): UnicodeMap => { const result = {}; const emojis = Object.values(data.emojis ?? {}); @@ -26,6 +24,6 @@ export const generateMappings = (data: typeof EmojiData): IUniMap => { return result; }; -const unicodeMapping = generateMappings(emojiData); +const unicodeMapping = generateMappings(data); export default unicodeMapping; diff --git a/app/soapbox/features/emoji/search.ts b/app/soapbox/features/emoji/search.ts index ef31f1e276..33a090cd10 100644 --- a/app/soapbox/features/emoji/search.ts +++ b/app/soapbox/features/emoji/search.ts @@ -1,3 +1,6 @@ +// import data from './data'; +// import { getData, getSanitizedData, uniq, intersect } from './utils'; + export interface searchOptions { maxResults?: number; } diff --git a/app/soapbox/features/emoji/util.ts b/app/soapbox/features/emoji/util.ts new file mode 100644 index 0000000000..0736113646 --- /dev/null +++ b/app/soapbox/features/emoji/util.ts @@ -0,0 +1,213 @@ +// // This code is largely borrowed from: +// // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js +// +// import data, { Emoji, EmojiData } from './data'; +// +// const buildSearch = (data: any) => { +// const search: string[] = []; +// +// const addToSearch = (strings: string | string[], split: boolean) => { +// if (!strings) { +// return; +// } +// +// (Array.isArray(strings) ? strings : [strings]).forEach((string) => { +// (split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => { +// s = s.toLowerCase(); +// +// if (search.indexOf(s) === -1) { +// search.push(s); +// } +// }); +// }); +// }; +// +// addToSearch(data.short_names, true); +// addToSearch(data.name, true); +// addToSearch(data.keywords, false); +// addToSearch(data.emoticons, false); +// +// return search.join(','); +// }; +// +// const _String = String; +// +// const stringFromCodePoint = _String.fromCodePoint || function() { +// const MAX_SIZE = 0x4000; +// const codeUnits = []; +// let highSurrogate; +// let lowSurrogate; +// let index = -1; +// const length = arguments.length; +// if (!length) { +// return ''; +// } +// let result = ''; +// while (++index < length) { +// let codePoint = Number(arguments[index]); +// if ( +// !isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity` +// codePoint < 0 || // not a valid Unicode code point +// codePoint > 0x10FFFF || // not a valid Unicode code point +// Math.floor(codePoint) !== codePoint // not an integer +// ) { +// throw RangeError('Invalid code point: ' + codePoint); +// } +// if (codePoint <= 0xFFFF) { // BMP code point +// codeUnits.push(codePoint); +// } else { // Astral code point; split in surrogate halves +// // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae +// codePoint -= 0x10000; +// highSurrogate = (codePoint >> 10) + 0xD800; +// lowSurrogate = (codePoint % 0x400) + 0xDC00; +// codeUnits.push(highSurrogate, lowSurrogate); +// } +// if (index + 1 === length || codeUnits.length > MAX_SIZE) { +// result += String.fromCharCode.apply(null, codeUnits); +// codeUnits.length = 0; +// } +// } +// return result; +// }; +// +// const _JSON = JSON; +// +// const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/; +// const SKINS = [ +// '1F3FA', '1F3FB', '1F3FC', +// '1F3FD', '1F3FE', '1F3FF', +// ]; +// +// function unifiedToNative(unified: string) { +// const unicodes = unified.split('-'); +// const codePoints = unicodes.map((u) => `0x${u}`); +// +// return stringFromCodePoint.apply(null, codePoints); +// } +// +// function sanitize(emoji: any) { +// const { name, short_names, skin_tone, skin_variations, emoticons, unified, custom, imageUrl } = emoji; +// const id = emoji.id || short_names[0]; +// const colons = `:${id}:`; +// +// if (custom) { +// return { +// id, +// name, +// colons, +// emoticons, +// custom, +// imageUrl, +// }; +// } +// +// return { +// id, +// name, +// colons: skin_tone ? `${colons}:skin-tone-${skin_tone}:` : colons, +// emoticons, +// unified: unified.toLowerCase(), +// skin: skin_tone || (skin_variations ? 1 : null), +// native: unifiedToNative(unified), +// }; +// } +// +// function getSanitizedData() { +// return sanitize(getData(...arguments)); +// } +// +// function getData(emoji: string | {}, skin: any, set: any) { +// let emojiData = {}; +// +// if (typeof emoji === 'string') { +// const matches = emoji.match(COLONS_REGEX); +// +// if (matches) { +// emoji = matches[1]; +// +// if (matches[2]) { +// skin = parseInt(matches[2]); +// } +// } +// +// if (Object.prototype.hasOwnProperty.call(data.short_names, emoji)) { +// emoji = data.short_names[emoji]; +// } +// +// if (Object.prototype.hasOwnProperty.call(data.emojis, emoji)) { +// emojiData = data.emojis[emoji]; +// } +// } else if (emoji.id) { +// if (Object.prototype.hasOwnProperty.call(data.short_names, emoji.id)) { +// emoji.id = data.short_names[emoji.id]; +// } +// +// if (Object.prototype.hasOwnProperty.call(data.emojis, emoji.id)) { +// emojiData = data.emojis[emoji.id]; +// skin = skin || emoji.skin; +// } +// } +// +// if (!Object.keys(emojiData).length) { +// emojiData = emoji; +// emojiData.custom = true; +// +// if (!emojiData.search) { +// emojiData.search = buildSearch(emoji); +// } +// } +// +// emojiData.emoticons = emojiData.emoticons || []; +// emojiData.variations = emojiData.variations || []; +// +// if (emojiData.skin_variations && skin > 1 && set) { +// emojiData = JSON.parse(_JSON.stringify(emojiData)); +// +// const skinKey = SKINS[skin - 1], +// variationData = emojiData.skin_variations[skinKey]; +// +// if (!variationData.variations && emojiData.variations) { +// delete emojiData.variations; +// } +// +// if (variationData[`has_img_${set}`]) { +// emojiData.skin_tone = skin; +// +// for (const k in variationData) { +// const v = variationData[k]; +// emojiData[k] = v; +// } +// } +// } +// +// if (emojiData.variations && emojiData.variations.length) { +// emojiData = JSON.parse(_JSON.stringify(emojiData)); +// emojiData.unified = emojiData.variations.shift(); +// } +// +// return emojiData; +// } +// +// function uniq(arr: any[]) { +// return arr.reduce((acc, item) => { +// if (acc.indexOf(item) === -1) { +// acc.push(item); +// } +// return acc; +// }, []); +// } +// +// function intersect(a: any[], b: any[]) { +// const uniqA = uniq(a); +// const uniqB = uniq(b); +// +// return uniqA.filter((item: any) => uniqB.indexOf(item) >= 0); +// } +// +// export { +// getData, +// getSanitizedData, +// uniq, +// intersect, +// unifiedToNative, +// }; diff --git a/types/emoji-mart/index.d.ts b/types/emoji-mart/index.d.ts index 0a9b928554..0be86505b8 100644 --- a/types/emoji-mart/index.d.ts +++ b/types/emoji-mart/index.d.ts @@ -36,14 +36,49 @@ declare module 'emoji-mart' { } -declare module '@emoji-mart/data' { - interface EmojiData { - emojis: { - [s: string]: { - skins: { unified: string, native: string }[], - } - } +declare module '@emoji-mart/data/sets/14/twitter.json' { + export interface EmojiSkin { + unified: string, + native: string, + x: number, + y: number, } - export const emojis: Emojidata; + export interface EmojiCategory { + id: string, + emojis: string[], + } + + export interface Emoji { + id: string, + name: string, + keywords: string[], + skins: EmojiSkin[], + version: number, + } + + export interface EmojiMap { + [s: string]: Emoji, + } + + export interface EmojiAlias { + [s: string]: string, + } + + export interface EmojiSheet { + cols: number, + rows: number, + } + + export interface EmojiData { + categories: EmojiCategory[], + emojis: EmojiMap, + aliases: EmojiAlias, + sheet: EmojiSheet, + } + + const data: EmojiData; + + export default data; + }