Skip to content

Commit

Permalink
Remove EmojiContext & adjust components
Browse files Browse the repository at this point in the history
  • Loading branch information
arnautov-anton committed Oct 12, 2023
1 parent 3d489d5 commit 517d67d
Show file tree
Hide file tree
Showing 17 changed files with 116 additions and 320 deletions.
19 changes: 14 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "stream-chat-react",
"version": "0.0.5-development",
"version": "0.0.0-development",
"description": "React components to create chat conversations or livestream style chat",
"author": "GetStream",
"homepage": "https://getstream.io/chat/",
Expand Down Expand Up @@ -33,7 +33,6 @@
"@stream-io/stream-chat-css": "^3.13.0",
"clsx": "^2.0.0",
"dayjs": "^1.10.4",
"emoji-mart": "3.0.1",
"emoji-regex": "^9.2.0",
"hast-util-find-and-replace": "^4.1.2",
"i18next": "^21.6.14",
Expand Down Expand Up @@ -68,10 +67,18 @@
"react": "^18.0.0 || ^17.0.0 || ^16.8.0",
"react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
"stream-chat": "^8.0.0",
"emoji-picker-react": "^4.5.2"
"emoji-mart": "^5.5.2",
"@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1"
},
"peerDependenciesMeta": {
"emoji-picker-react": {
"emoji-mart": {
"optional": true
},
"@emoji-mart/data": {
"optional": true
},
"@emoji-mart/react": {
"optional": true
}
},
Expand All @@ -92,6 +99,9 @@
"@babel/preset-typescript": "^7.12.7",
"@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1",
"emoji-mart": "^5.5.2",
"@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1",
"@ladle/react": "^0.16.0",
"@playwright/test": "^1.29.1",
"@rollup/plugin-babel": "^5.2.1",
Expand Down Expand Up @@ -133,7 +143,6 @@
"codecov": "^3.8.1",
"core-js": "^3.6.5",
"css-loader": "^5.0.1",
"emoji-picker-react": "^4.5.2",
"eslint": "7.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
Expand Down
4 changes: 2 additions & 2 deletions src/components/AutoCompleteTextarea/Textarea.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export class ReactTextareaAutocomplete extends React.Component {
this._replaceWord();
};

_replaceWord = () => {
_replaceWord = async () => {
const { value } = this.state;

const lastWordRegex = /([^\s]+)(\s*)$/;
Expand All @@ -149,7 +149,7 @@ export class ReactTextareaAutocomplete extends React.Component {

const spaces = match[2];

const newWord = this.props.replaceWord(lastWord);
const newWord = await this.props.replaceWord(lastWord);
if (newWord == null) return;

const textBeforeWord = value.slice(0, this.getCaretPosition() - match[0].length);
Expand Down
43 changes: 8 additions & 35 deletions src/components/Channel/Channel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { nanoid } from 'nanoid';
import clsx from 'clsx';

import { channelReducer, ChannelStateReducer, initialState } from './channelState';
import { commonEmoji, defaultMinimalEmojis, emojiSetDef } from './emojiData';
import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
import { useCreateTypingContext } from './hooks/useCreateTypingContext';
import { useEditMessageHandler } from './hooks/useEditMessageHandler';
Expand Down Expand Up @@ -56,7 +55,6 @@ import {
} from '../../context/ChannelStateContext';
import { ComponentContextValue, ComponentProvider } from '../../context/ComponentContext';
import { useChatContext } from '../../context/ChatContext';
import { EmojiConfig, EmojiContextValue, EmojiProvider } from '../../context/EmojiContext';
import { useTranslationContext } from '../../context/TranslationContext';
import { TypingProvider } from '../../context/TypingContext';

Expand All @@ -67,12 +65,9 @@ import {
} from '../../constants/limits';

import { hasMoreMessagesProbably, hasNotMoreMessages } from '../MessageList/utils';
import defaultEmojiData from '../../stream-emoji.json';
import { makeAddNotifications } from './utils';
import { getChannel } from '../../utils/getChannel';

import type { Data as EmojiMartData } from 'emoji-mart';

import type { MessageProps } from '../Message/types';
import type { MessageInputProps } from '../MessageInput/MessageInput';

Expand Down Expand Up @@ -142,10 +137,6 @@ export type ChannelProps<
dragAndDropWindow?: boolean;
/** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
/** Custom prop to override default `facebook.json` emoji data set from `emoji-mart` */
emojiData?: EmojiMartData;
/** Custom UI component to override default `NimbleEmojiIndex` from `emoji-mart` */
EmojiIndex?: EmojiContextValue['EmojiIndex'];
/** Custom UI component for rendering button with emoji picker in MessageInput */
EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
/** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
Expand Down Expand Up @@ -319,7 +310,6 @@ const ChannelInner = <
doSendMessageRequest,
doUpdateMessageRequest,
dragAndDropWindow = false,
emojiData = defaultEmojiData,
enrichURLForPreviewConfig,
initializeOnMount = true,
LoadingErrorIndicator = DefaultLoadingErrorIndicator,
Expand Down Expand Up @@ -368,13 +358,6 @@ const ChannelInner = <

const channelCapabilitiesArray = channel.data?.own_capabilities as string[];

const emojiConfig: EmojiConfig = {
commonEmoji,
defaultMinimalEmojis,
emojiData,
emojiSetDef,
};

const throttledCopyStateFromChannel = throttle(
() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }),
500,
Expand Down Expand Up @@ -1002,14 +985,6 @@ const ChannelInner = <
[props.reactionOptions],
);

const emojiContextValue: EmojiContextValue = useMemo(
() => ({
emojiConfig,
EmojiIndex: props.EmojiIndex,
}),
[],
);

const typingContextValue = useCreateTypingContext({
typing,
});
Expand Down Expand Up @@ -1045,16 +1020,14 @@ const ChannelInner = <
<ChannelStateProvider value={channelStateContextValue}>
<ChannelActionProvider value={channelActionContextValue}>
<ComponentProvider value={componentContextValue}>
<EmojiProvider value={emojiContextValue}>
<TypingProvider value={typingContextValue}>
<div className={`${chatContainerClass}`}>
{dragAndDropWindow && (
<DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
)}
{!dragAndDropWindow && <>{children}</>}
</div>
</TypingProvider>
</EmojiProvider>
<TypingProvider value={typingContextValue}>
<div className={`${chatContainerClass}`}>
{dragAndDropWindow && (
<DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
)}
{!dragAndDropWindow && <>{children}</>}
</div>
</TypingProvider>
</ComponentProvider>
</ChannelActionProvider>
</ChannelStateProvider>
Expand Down
82 changes: 0 additions & 82 deletions src/components/Channel/emojiData.ts

This file was deleted.

40 changes: 26 additions & 14 deletions src/components/ChatAutoComplete/ChatAutoComplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
import { useTranslationContext } from '../../context/TranslationContext';
import { useComponentContext } from '../../context/ComponentContext';

import type { EmojiData, NimbleEmojiIndex } from 'emoji-mart';
import type { CommandResponse, UserResponse } from 'stream-chat';
import type { CommandResponse, UR, UserResponse } from 'stream-chat';

import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';

import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
import { EmojiSearchIndex } from 'components/MessageInput';

type ObjectUnion<T> = T[keyof T];

Expand All @@ -24,19 +24,30 @@ export type SuggestionUser<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = UserResponse<StreamChatGenerics>;

// FIXME: entity type is wrong, fix
export type SuggestionItemProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
T extends UR = UR
> = {
className: string;
component: React.ComponentType<{
entity: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>;
entity:
| ReturnType<EmojiSearchIndex<T>['search']>
| SuggestionUser<StreamChatGenerics>
| SuggestionCommand<StreamChatGenerics>;
selected: boolean;
}>;
item: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>;
item:
| ReturnType<EmojiSearchIndex<T>['search']>
| SuggestionUser<StreamChatGenerics>
| SuggestionCommand<StreamChatGenerics>;
key: React.Key;
onClickHandler: (event: React.BaseSyntheticEvent) => void;
onSelectHandler: (
item: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>,
item:
| ReturnType<EmojiSearchIndex<T>['search']>
| SuggestionUser<StreamChatGenerics>
| SuggestionCommand<StreamChatGenerics>,
) => void;
selected: boolean;
style: React.CSSProperties;
Expand Down Expand Up @@ -104,7 +115,7 @@ export type ChatAutoCompleteProps = {
/** The text value of the underlying `textarea` component */
value?: string;
/** Function to override the default emojiReplace behavior on the `wordReplace` prop of the `textarea` component */
wordReplace?: (word: string, emojiIndex?: NimbleEmojiIndex) => string;
wordReplace?: (word: string, emojiIndex?: EmojiSearchIndex) => string;
};

const UnMemoizedChatAutoComplete = <
Expand All @@ -120,20 +131,21 @@ const UnMemoizedChatAutoComplete = <
const { t } = useTranslationContext('ChatAutoComplete');

const messageInput = useMessageInputContext<StreamChatGenerics, V>('ChatAutoComplete');
const { cooldownRemaining, disabled, emojiIndex, textareaRef: innerRef } = messageInput;
const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef } = messageInput;

const placeholder = props.placeholder || t('Type your message');

const emojiReplace = props.wordReplace
? (word: string) => props.wordReplace?.(word, emojiIndex)
: (word: string) => {
const found = emojiIndex?.search(word) || [];
? (word: string) => props.wordReplace?.(word, emojiSearchIndex)
: async (word: string) => {
const found = (await emojiSearchIndex?.search(word)) || [];
const emoji = found
.filter(Boolean)
.slice(0, 10)
.find(({ emoticons }: EmojiData) => !!emoticons?.includes(word));
if (!emoji || !('native' in emoji)) return null;
return emoji.native;
.find(({ emoticons }) => !!emoticons?.includes(word));
if (!emoji) return null;
const [firstSkin] = emoji.skins;
return firstSkin.native;
};

const updateInnerRef = useCallback(
Expand Down
8 changes: 3 additions & 5 deletions src/components/MessageInput/DefaultTriggerProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
useMessageInputContext,
} from '../../context/MessageInputContext';

import type { EmojiData } from 'emoji-mart';

import type { SuggestionCommand, SuggestionUser } from '../ChatAutoComplete/ChatAutoComplete';
import type { CommandItemProps } from '../CommandItem/CommandItem';
import type { EmoticonItemProps } from '../EmoticonItem/EmoticonItem';
Expand All @@ -27,7 +25,7 @@ export type CommandTriggerSetting<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = TriggerSetting<CommandItemProps, SuggestionCommand<StreamChatGenerics>>;

export type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps, EmojiData>;
export type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps>;

export type UserTriggerSetting<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
Expand All @@ -39,7 +37,7 @@ export type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType>
query: string,
text: string,
onReady: (data: (U & AutocompleteMinimalData)[], token: string) => void,
) => U[] | Promise<void> | void;
) => U[] | PromiseLike<void> | void;
output: (
entity: U,
) =>
Expand Down Expand Up @@ -76,7 +74,7 @@ export const DefaultTriggerProvider = <

const defaultAutocompleteTriggers: TriggerSettings<StreamChatGenerics> = {
'/': useCommandTrigger<StreamChatGenerics>(),
':': useEmojiTrigger(currentValue.emojiIndex),
':': useEmojiTrigger(currentValue.emojiSearchIndex),
'@': useUserTrigger<StreamChatGenerics>({
disableMentions: currentValue.disableMentions,
mentionAllAppUsers: currentValue.mentionAllAppUsers,
Expand Down
Loading

0 comments on commit 517d67d

Please sign in to comment.