From 01a4e7370fa932f4fbfa10024a92b1bf4c7c7d93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 26 Feb 2023 20:34:57 +0100 Subject: [PATCH] Types, update styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../components/emoji-picker-dropdown.tsx | 11 +- .../emoji/components/emoji-picker.tsx | 4 +- app/soapbox/features/emoji/data.ts | 54 +++- app/soapbox/features/emoji/index.ts | 2 +- app/soapbox/features/emoji/search.ts | 4 +- app/styles/emoji-picker.scss | 299 +----------------- package.json | 4 +- types/emoji-mart/index.d.ts | 108 ------- yarn.lock | 4 +- 9 files changed, 73 insertions(+), 417 deletions(-) delete mode 100644 types/emoji-mart/index.d.ts diff --git a/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx b/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx index cacac1914..01fdeee28 100644 --- a/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx +++ b/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx @@ -15,7 +15,6 @@ import { RootState } from 'soapbox/store'; import { buildCustomEmojis } from '../../emoji'; import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components'; -import type { EmojiPick } from 'emoji-mart'; import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji'; let EmojiPicker: any; // load asynchronously @@ -169,7 +168,7 @@ const EmojiPickerDropdown: React.FC = ({ onPickEmoji, cond } }; - const handlePick = (emoji: EmojiPick) => { + const handlePick = (emoji: any) => { setVisible(false); let pickedEmoji: Emoji; @@ -189,12 +188,12 @@ const EmojiPickerDropdown: React.FC = ({ onPickEmoji, cond custom: true, imageUrl: emoji.src, } as CustomEmoji; + } - dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks + dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks - if (onPickEmoji) { - onPickEmoji(pickedEmoji); - } + if (onPickEmoji) { + onPickEmoji(pickedEmoji); } }; diff --git a/app/soapbox/features/emoji/components/emoji-picker.tsx b/app/soapbox/features/emoji/components/emoji-picker.tsx index df59b9cf4..06e7dfa9a 100644 --- a/app/soapbox/features/emoji/components/emoji-picker.tsx +++ b/app/soapbox/features/emoji/components/emoji-picker.tsx @@ -1,4 +1,4 @@ -import { Picker as EmojiPicker, PickerProps } from 'emoji-mart'; +import { Picker as EmojiPicker } from 'emoji-mart'; import React, { useRef, useEffect } from 'react'; import { joinPublicPath } from 'soapbox/utils/static'; @@ -13,7 +13,7 @@ const getImageURL = (set: string, name: string) => { return joinPublicPath(`/packs/emoji/${name}.svg`); }; -function Picker(props: PickerProps) { +function Picker(props: any) { const ref = useRef(null); useEffect(() => { diff --git a/app/soapbox/features/emoji/data.ts b/app/soapbox/features/emoji/data.ts index f04e591cc..2d74822f3 100644 --- a/app/soapbox/features/emoji/data.ts +++ b/app/soapbox/features/emoji/data.ts @@ -1,2 +1,52 @@ -export * from '@emoji-mart/data/sets/14/twitter.json'; -export { default } from '@emoji-mart/data/sets/14/twitter.json'; +import data from '@emoji-mart/data/sets/14/twitter.json'; + +export interface NativeEmoji { + unified: string + native: string + x: number + y: number +} + +export interface CustomEmoji { + src: string +} + +export interface Emoji { + id: string + name: string + keywords: string[] + skins: T[] + version?: number +} + +export interface EmojiCategory { + id: string + emojis: string[] +} + +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 emojiData = data as EmojiData; +const { categories, emojis, aliases, sheet } = emojiData; + +export { categories, emojis, aliases, sheet }; + +export default emojiData; diff --git a/app/soapbox/features/emoji/index.ts b/app/soapbox/features/emoji/index.ts index b5ae7d6e4..8fa279dad 100644 --- a/app/soapbox/features/emoji/index.ts +++ b/app/soapbox/features/emoji/index.ts @@ -2,7 +2,7 @@ import split from 'graphemesplit'; import unicodeMapping from './mapping'; -import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart'; +import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data'; /* * TODO: Consolate emoji object types diff --git a/app/soapbox/features/emoji/search.ts b/app/soapbox/features/emoji/search.ts index 815f1fd36..14123367f 100644 --- a/app/soapbox/features/emoji/search.ts +++ b/app/soapbox/features/emoji/search.ts @@ -5,6 +5,7 @@ import data from './data'; import type { Emoji } from './index'; // import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart'; +// @ts-ignore const index = new Index({ tokenize: 'full', optimize: true, @@ -38,8 +39,7 @@ export const addCustomToPool = (customEmojis: any[]) => { // we can share an index by prefixing custom emojis with 'c' and native with 'n' const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => { return index.search(str, maxResults) - .flatMap(id => { - // @ts-ignore + .flatMap((id: string) => { if (id[0] === 'c') { const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS(); diff --git a/app/styles/emoji-picker.scss b/app/styles/emoji-picker.scss index b4322e2e2..2efb2e388 100644 --- a/app/styles/emoji-picker.scss +++ b/app/styles/emoji-picker.scss @@ -1,295 +1,10 @@ -.emoji-mart * { - box-sizing: border-box; - line-height: 1.15; +em-emoji-picker { + --rgb-background: 255 255 255; + --rgb-accent: var(--color-primary-600); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.emoji-mart { - @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-primary-900 shadow-lg; -} - -.emoji-mart .emoji-mart-emoji { - @apply p-1.5 align-middle; -} - -.emoji-mart-bar { - @apply border-0 border-solid border-gray-200 dark:border-gray-800; -} - -.emoji-mart-bar:first-child { - border-bottom-width: 1px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} - -.emoji-mart-bar:last-child { - border-top-width: 1px; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} - -.emoji-mart-anchors { - @apply flex flex-row justify-between px-1.5; -} - -.emoji-mart-anchor { - @apply relative block flex-auto text-gray-700 dark:text-gray-600 text-center overflow-hidden transition-colors py-3 px-1; -} - -.emoji-mart-anchor:focus { outline: 0; } - -.emoji-mart-anchor:hover, -.emoji-mart-anchor:focus, -.emoji-mart-anchor-selected { - @apply text-gray-600 dark:text-gray-300; -} - -.emoji-mart-anchor-selected .emoji-mart-anchor-bar { - @apply bottom-0; -} - -.emoji-mart-anchor-bar { - @apply absolute -bottom-0.5 left-0 w-11/12 h-0.5 bg-primary-600; -} - -.emoji-mart-anchors i { - @apply inline-block w-full; - max-width: 22px; -} - -.emoji-mart-anchors svg, -.emoji-mart-anchors img { - fill: currentcolor; - height: 18px; - width: 18px; -} - -.emoji-mart-scroll { - overflow-y: scroll; - overflow-x: hidden; - height: 270px; - padding: 0 6px 6px; - will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */ -} - -.emoji-mart-search { - @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-primary-900; -} - -.emoji-mart-search input { - @apply text-sm pr-9 block w-full border-gray-300 dark:bg-transparent dark:border-gray-800 rounded-full focus:ring-primary-500 focus:border-primary-500; - - &::-moz-focus-inner { - border: 0; - } - - &::-webkit-search-cancel-button { - @apply hidden; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -.emoji-mart-search input, -.emoji-mart-search input::-webkit-search-decoration, -.emoji-mart-search input::-webkit-search-cancel-button, -.emoji-mart-search input::-webkit-search-results-button, -.emoji-mart-search input::-webkit-search-results-decoration { - /* remove webkit/blink styles for - * via https://stackoverflow.com/a/9422689 */ - appearance: none; -} - -.emoji-mart-search-icon { - @apply absolute z-10 border-0; - top: 20px; - right: 56px; - padding: 2px 5px 1px; -} - -.emoji-mart-search-icon svg { - @apply fill-gray-700 dark:fill-gray-600; -} - -.emoji-mart-search-icon:hover svg { - @apply stroke-gray-800; -} - -.emoji-mart-category .emoji-mart-emoji span { - @apply relative text-center; - z-index: 1; -} - -.emoji-mart-category .emoji-mart-emoji:hover::before { - @apply bg-gray-50 dark:bg-primary-800; - z-index: 0; - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 100%; -} - -.emoji-mart-category-label { - z-index: 2; - position: relative; - position: sticky; - top: 0; -} - -.emoji-mart-category-label span { - @apply bg-white dark:bg-primary-900; - display: block; - width: 100%; - font-weight: 500; - padding: 5px 6px; -} - -.emoji-mart-category-list { - margin: 0; - padding: 0; -} - -.emoji-mart-category-list li { - list-style: none; - margin: 0; - padding: 0; - display: inline-block; -} - -.emoji-mart-emoji { - position: relative; - display: inline-block; - font-size: 0; - margin: 0; - padding: 0; - border: none; - background: none; - box-shadow: none; -} - -.emoji-mart-emoji-native { - font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji', sans-serif; -} - -.emoji-mart-no-results { - @apply text-sm text-center text-gray-600 dark:text-gray-300; - padding-top: 70px; -} - -.emoji-mart-no-results-img { - display: block; - margin-left: auto; - margin-right: auto; - width: 50%; -} - -.emoji-mart-no-results .emoji-mart-category-label { - display: none; -} - -.emoji-mart-no-results .emoji-mart-no-results-label { - margin-top: 0.2em; -} - -.emoji-mart-no-results .emoji-mart-emoji:hover::before { - content: none; -} - -.emoji-mart-preview { - @apply hidden; -} - -/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ -.emoji-mart-sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.emoji-picker-dropdown__menu { - @apply rounded-lg absolute mt-1.5; - transform: translateX(calc(-1 * env(safe-area-inset-right))); /* iOS PWA */ - z-index: 20000; - - .emoji-mart-scroll { - transition: opacity 200ms ease; - } - - &.selecting .emoji-mart-scroll { - opacity: 0.5; - } -} - -.emoji-picker-dropdown__modifiers { - position: absolute; - top: 65px; - right: 14px; - cursor: pointer; -} - -.emoji-picker-dropdown__modifiers__menu { - @apply absolute bg-white dark:bg-primary-900 rounded-3xl shadow overflow-hidden; - z-index: 4; - top: -4px; - left: -8px; - - button { - @apply block cursor-pointer border-0 px-2 py-1 bg-transparent; - - &:hover, - &:focus, - &:active { - @apply bg-gray-300 dark:bg-primary-600; - } - } - - .emoji-mart-emoji { - height: 22px; - } -} - -.font-icon-picker { - .emoji-mart-search { - // Search doesn't work. Hide it for now. - display: none; - padding: 10px !important; - } - - .emoji-mart-category-label > span { - padding: 9px 6px 5px; - } - - .emoji-mart-scroll { - border-radius: 4px; - } - - .emoji-mart-search-icon { - right: 18px; - } - - .emoji-mart-bar { - display: none; - } - - .fa { - font-size: 18px; - width: 22px; - height: 22px; - text-align: center; - } - - .fa-hack { - margin: 0 auto; - } +.dark em-emoji-picker { + --rgb-background: var(--color-primary-900); } diff --git a/package.json b/package.json index 604f60f18..a31fbe5ae 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "@babel/runtime": "^7.20.13", - "@emoji-mart/data": "^1.0.2", + "@emoji-mart/data": "^1.1.2", "@floating-ui/react": "^0.19.1", "@fontsource/inter": "^4.5.1", "@fontsource/roboto-mono": "^4.5.8", @@ -114,7 +114,7 @@ "detect-passive-events": "^2.0.0", "dotenv": "^16.0.0", "emoji-datasource": "14.0.0", - "emoji-mart": "^5.1.0", + "emoji-mart": "^5.5.2", "escape-html": "^1.0.3", "exif-js": "^2.3.0", "flexsearch": "^0.7.31", diff --git a/types/emoji-mart/index.d.ts b/types/emoji-mart/index.d.ts deleted file mode 100644 index 39ce0a0d0..000000000 --- a/types/emoji-mart/index.d.ts +++ /dev/null @@ -1,108 +0,0 @@ - -declare module 'emoji-mart' { - export interface NativeEmoji { - unified: string - native: string - x: number - y: number - } - - export interface CustomEmoji { - src: string - } - - export interface Emoji { - id: string - name: string - keywords: string[] - skins: T[] - version?: number - } - - export interface EmojiPick { - id: string - name: string - native?: string - unified?: string - keywords: string[] - shortcodes: string - emoticons: string[] - src?: string - } - - export interface PickerProps { - custom?: { emojis: Emoji }[] - set?: string - title?: string - theme?: string - onEmojiSelect?: (emoji: EmojiPick) => void - recent?: any - skin?: any - perLine?: number - emojiSize?: number - emojiButtonSize?: number - navPosition?: string - autoFocus?: boolean - i18n?: any - getImageURL: (set: string, name: string) => string - getSpritesheetURL: (set: string) => string - } - - export class Picker { - - constructor(props: PickerProps); - - } - -} - -declare module '@emoji-mart/data/sets/14/twitter.json' { - export interface NativeEmoji { - unified: string - native: string - x: number - y: number - } - - export interface CustomEmoji { - src: string - } - - export interface Emoji { - id: string - name: string - keywords: string[] - skins: T[] - version?: number - } - - export interface EmojiCategory { - id: string - emojis: string[] - } - - 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; - -} diff --git a/yarn.lock b/yarn.lock index 773250cbb..bd8d51858 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1698,7 +1698,7 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== -"@emoji-mart/data@^1.0.2": +"@emoji-mart/data@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513" integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg== @@ -7986,7 +7986,7 @@ emoji-datasource@14.0.0: resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-14.0.0.tgz#99529a62f3a86546fc670c09b672ddc9f24f3d44" integrity sha512-SoOv0lSa+9/2X9ulSRDhu2u1zAOaOv5vtMY3OYUDcQCoReEh0/3eQAMuBM9LyD7Hy3G4K7mDPDqVeHUWvy7cow== -emoji-mart@^5.1.0: +emoji-mart@^5.5.2: version "5.5.2" resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af" integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==