@tencentcloud/chat-uikit-react 0.0.1

package/src/components/TUIMessageInput/TUIForward.tsx

@@ -0,0 +1,194 @@
+import React, {
+  PropsWithChildren, useCallback, useEffect, useState,
+} from 'react';
+import { Conversation, Message } from 'tim-js-sdk';
+import { useTUIChatActionContext } from '../../context';
+import './styles/index.scss';
+import { Model } from '../Model';
+import { Icon, IconTypes } from '../Icon';
+import { Input } from '../Input';
+import { Checkbox } from '../Checkbox';
+import { Avatar } from '../Avatar';
+import { getDisplayImage, getDisplayTitle } from '../ConversationPreview/utils';
+import { MESSAGE_OPERATE } from '../../constants';
+import { useHandleForwardMessage } from './hooks';
+
+interface HandleForwardParams {
+  list?:Array<Conversation>,
+  message?:Message,
+}
+
+interface TUIForwardToProps {
+  handleForward?: (data:HandleForwardParams) => void,
+}
+
+export function TUIForward <T extends TUIForwardToProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    handleForward: propsHandleForward,
+  } = props;
+  const [selectList, setSelectList] = useState([]);
+  const [searchResult, setSearchResult] = useState([]);
+  const [searchValue, setSearchValue] = useState('');
+
+  const { operateMessage } = useTUIChatActionContext('TUIForward');
+
+  const { message, sendForwardMessage, conversationList = [] } = useHandleForwardMessage();
+
+  const handleClose = useCallback((e) => {
+    operateMessage({
+      [MESSAGE_OPERATE.FORWARD]: null,
+    });
+  }, [operateMessage]);
+
+  const FrequentlyList = conversationList.slice(0, 2);
+  const RecentList = conversationList.slice(2);
+
+  const handleInputChange = (e) => {
+    setSearchValue(e.target?.value);
+    if (e.target?.value) {
+      const result = conversationList.filter((item) => {
+        const name = (getDisplayTitle(item) as string).toLocaleLowerCase();
+        const value = e.target?.value.toLocaleLowerCase();
+        return name.includes(value);
+      });
+      setSearchResult(result);
+    } else {
+      setSearchResult([]);
+    }
+  };
+
+  const handleCheckboxChange = (e) => {
+    if (e.checked) {
+      setSelectList([...selectList, e.value]);
+    } else {
+      setSelectList(selectList.filter((item) => item !== e.value));
+    }
+  };
+
+  const handleDisplayForwardName = (value) => {
+    const listName = value?.map((item) => getDisplayTitle(item));
+    return listName.toString();
+  };
+
+  const handleForward = (e) => {
+    if (propsHandleForward) {
+      propsHandleForward({
+        list: selectList,
+        message,
+      });
+    } else {
+      sendForwardMessage(selectList);
+    }
+    handleClose(e);
+  };
+
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  useEffect(() => {
+    setSelectList([]);
+    setSearchResult([]);
+    setSearchValue('');
+  }, [message]);
+
+  return message && conversationList.length > 0 && (
+    <Model onClick={handleClose}>
+      <div role="button" tabIndex={0} className="tui-forward" onClick={stopPropagation}>
+        <header className="tui-forward-header">
+          <Icon
+            type={IconTypes.CANCEL}
+            width={16}
+            height={16}
+            onClick={handleClose}
+          />
+          <h2 className="tui-forward-title">Forward To</h2>
+        </header>
+        <div className="tui-forward-search">
+          <Input
+            className="tui-forward-search-input"
+            placeholder="Search"
+            clearable
+            value={searchValue}
+            onChange={handleInputChange}
+            prefix={<Icon type={IconTypes.SEARCH} height={16} width={16} />}
+          />
+        </div>
+        <main className="tui-forward-main">
+          {
+            searchValue && (
+            <ul className="tui-forward-list">
+              <h3 className="tui-forward-list-title">Search Result</h3>
+              {
+                searchResult.length > 0 && searchResult.map((item) => (
+                  <li key={item.conversationID} className="tui-forward-list-item">
+                    <label htmlFor={`${item.conversationID}`} className="info">
+                      <Avatar image={getDisplayImage(item)} size={40} />
+                      <div className="info-nick">{getDisplayTitle(item)}</div>
+                    </label>
+                    <Checkbox
+                      onChange={handleCheckboxChange}
+                      id={`${item.conversationID}`}
+                      value={item}
+                    />
+                  </li>
+                ))
+              }
+              {
+              searchResult.length === 0
+              && <p className="no-result">No Result</p>
+              }
+            </ul>
+            )
+          }
+          { !searchValue && FrequentlyList.length > 0 && (
+            <ul className="tui-forward-list">
+              <h3 className="tui-forward-list-title">Frequently Contacted</h3>
+              {
+                FrequentlyList.map((item) => (
+                  <li key={item.conversationID} className="tui-forward-list-item">
+                    <label htmlFor={`${item.conversationID}`} className="info">
+                      <Avatar image={getDisplayImage(item)} size={40} />
+                      <div className="info-nick">{getDisplayTitle(item)}</div>
+                    </label>
+                    <Checkbox
+                      onChange={handleCheckboxChange}
+                      id={`${item.conversationID}`}
+                      value={item}
+                    />
+                  </li>
+                ))
+              }
+            </ul>
+          )}
+          { !searchValue && RecentList.length > 0 && (
+          <ul className="tui-forward-list">
+            <h3 className="tui-forward-list-title">Recent Chats</h3>
+            {
+                RecentList.map((item) => (
+                  <li key={item.conversationID} className="tui-forward-list-item">
+                    <label htmlFor={`${item.conversationID}`} className="info">
+                      <Avatar image={getDisplayImage(item)} size={40} />
+                      <div className="info-nick">{getDisplayTitle(item)}</div>
+                    </label>
+                    <Checkbox
+                      onChange={handleCheckboxChange}
+                      id={`${item.conversationID}`}
+                      value={item}
+                    />
+                  </li>
+                ))
+              }
+          </ul>
+          )}
+        </main>
+        <footer className="tui-forward-footer">
+          <div className="tui-forward-footer-name">{selectList.length > 0 && handleDisplayForwardName(selectList)}</div>
+          <button type="button" className="button" onClick={() => { handleForward(selectList); }} disabled={selectList.length === 0}>Forward</button>
+        </footer>
+      </div>
+    </Model>
+  );
+}

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -0,0 +1,94 @@
+import React, { MutableRefObject, PropsWithChildren } from 'react';
+import TIM from 'tim-js-sdk';
+import { TUIMessageInputContextProvider } from '../../context/TUIMessageInputContext';
+import { useMessageInputState, useCreateMessageInputContext } from './hooks';
+import './styles/index.scss';
+import {
+  UnknowPorps,
+  useComponentContext,
+  useTUIChatStateContext,
+  useTUIKitContext,
+} from '../../context';
+import { EmptyStateIndicator } from '../EmptyStateIndicator';
+import { InputQuoteDefalut } from './InputQuoteDefalut';
+import { TUIMessageInputDefault } from './TUIMessageInputDefault';
+import { InputPluginsDefalut } from './InputPluginsDefalut';
+import { TUIForward } from './TUIForward';
+
+export interface TUIMessageInputProps {
+  disabled?: boolean,
+  TUIMessageInput?: React.ComponentType,
+  InputPlugins?: React.ComponentType<UnknowPorps>,
+  InputQuote?: React.ComponentType<UnknowPorps>,
+  focus?: boolean,
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  plugins?: Array<React.ReactElement>,
+  showNumber?: number,
+  MoreIcon?: React.ReactElement,
+}
+function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
+:React.ReactElement {
+  const {
+    children,
+    disabled: propsDisabled,
+    focus = true,
+    plugins,
+    showNumber = 1,
+    MoreIcon,
+  } = props;
+  const messageInputState = useMessageInputState(props);
+  const { conversation } = useTUIKitContext('TUIMessageInput');
+  const { textareaRef } = useTUIChatStateContext('TUIMessageInput');
+
+  const contextDisabled = conversation.type === TIM.TYPES.CONV_SYSTEM;
+
+  const messageInputContextValue = useCreateMessageInputContext({
+    ...messageInputState,
+    ...props,
+    textareaRef,
+    disabled: propsDisabled || contextDisabled,
+    focus,
+    plugins,
+    showNumber,
+    MoreIcon,
+  });
+
+  return (
+    <TUIMessageInputContextProvider value={messageInputContextValue}>
+      { children }
+    </TUIMessageInputContextProvider>
+  );
+}
+
+function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
+:React.ReactElement {
+  const {
+    TUIMessageInput: PropTUIMessageInput,
+    InputPlugins: PropInputPlugins,
+    InputQuote: PropInputQuote,
+  } = props;
+
+  const {
+    TUIMessageInput: ContextInput,
+    InputPlugins: ContextInputPlugins,
+    InputQuote: ContextInputQuote,
+  } = useComponentContext('TUIMessageInput');
+  const Input = PropTUIMessageInput || ContextInput || TUIMessageInputDefault;
+  const InputPlugins = PropInputPlugins
+  || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
+  const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut;
+  return (
+    <div className="tui-message-input">
+      <TUIMessageInputProvider {...props}>
+        <TUIForward />
+        <InputQuote />
+        <div className="tui-message-input-main">
+          <InputPlugins />
+          <Input />
+        </div>
+      </TUIMessageInputProvider>
+    </div>
+  );
+}
+export const TUIMessageInput = React.memo(UnMemoizedTUIMessageInput) as
+typeof UnMemoizedTUIMessageInput;

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { MESSAGE_OPERATE } from '../../constants';
+import { useTUIChatStateContext } from '../../context';
+
+import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+
+export function TUIMessageInputDefault():React.ReactElement {
+  const {
+    text,
+    disabled,
+    handleChange,
+    handleKeyDown,
+    handlePasete,
+    textareaRef,
+    focus,
+    setText,
+    setCursorPos,
+  } = useTUIMessageInputContext('TUIMessageInputDefault');
+  const {
+    operateData,
+  } = useTUIChatStateContext('TUIMessageInputDefault');
+
+  // operateData
+  useEffect(() => {
+    if (operateData[MESSAGE_OPERATE.REVOKE]) {
+      setText(operateData[MESSAGE_OPERATE.REVOKE].payload.text);
+    }
+  }, [operateData]);
+
+  // Focus
+  useEffect(() => {
+    if (focus && textareaRef.current) {
+      textareaRef.current.autofocus = true;
+      textareaRef.current.focus();
+      textareaRef?.current?.addEventListener('paste', handlePasete);
+    }
+    return () => {
+      textareaRef?.current?.removeEventListener('paste', handlePasete);
+    };
+  }, [focus]);
+
+  const [focused, setFocused] = useState<boolean>(false);
+
+  const handleFocus = (e) => {
+    setFocused(true);
+  };
+  const handleBlur = (e) => {
+    setCursorPos({
+      start: e.target.selectionStart,
+      end: e.target.selectionEnd,
+    });
+    setFocused(false);
+  };
+
+  return (
+    <div className={`input-box ${disabled ? 'disabled' : ''} ${focused ? 'tui-kit-input-box--focus' : 'tui-kit-input-box--blur'}`}>
+      <div className="input-visibility-content">{text}</div>
+      {
+        !disabled
+        && (
+        <textarea
+          placeholder="send a message"
+          rows={1}
+          value={text}
+          ref={textareaRef}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        )
+      }
+    </div>
+  );
+}

package/src/components/TUIMessageInput/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useCreateMessageInputContext';
+export * from './useMessageInputState';
+export * from './useMessageInputText';
+export * from './usePluginsElement';
+export * from './useEmojiPicker';
+export * from './useHandleForwardMessage';

package/src/components/TUIMessageInput/hooks/useCreateMessageInputContext.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+export const useCreateMessageInputContext = (value:any) => {
+  const {
+    textareaRef,
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    onSelectEmoji,
+    sendFaceMessage,
+    disabled,
+    focus,
+    operateData,
+    plugins,
+    showNumber,
+    MoreIcon,
+  } = value;
+  const messageInputContext = useMemo(
+    () => ({
+      textareaRef,
+      handleChange,
+      handleSubmit,
+      handleKeyDown,
+      onSelectEmoji,
+      sendFaceMessage,
+      disabled,
+      focus,
+      operateData,
+      plugins,
+      showNumber,
+      MoreIcon,
+      ...value,
+    }),
+    [
+      textareaRef,
+      handleChange,
+      handleSubmit,
+      handleKeyDown,
+      onSelectEmoji,
+      sendFaceMessage,
+      disabled,
+      focus,
+      plugins,
+      showNumber,
+      MoreIcon,
+      operateData,
+    ],
+  );
+
+  return messageInputContext;
+};

package/src/components/TUIMessageInput/hooks/useEmojiPicker.tsx

@@ -0,0 +1,42 @@
+import {
+  MutableRefObject,
+  PropsWithChildren,
+  useCallback,
+} from 'react';
+import { useTUIChatActionContext } from '../../../context';
+import type { IbaseStateProps } from './useMessageInputState';
+
+export interface EmojiData {
+  index: number,
+  data: string,
+}
+
+interface useEmojiPickerProps extends IbaseStateProps {
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  insertText?: (textToInsert: string) => void
+}
+
+export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChildren<T>) {
+  const {
+    textareaRef,
+    insertText,
+  } = props;
+
+  const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
+
+  const onSelectEmoji = (emoji:EmojiData) => {
+    insertText(emoji.data);
+  };
+
+  const sendFaceMessage = useCallback((emoji:EmojiData) => {
+    const message = createFaceMessage({
+      payload: emoji,
+    });
+    sendMessage(message);
+  }, []);
+
+  return {
+    onSelectEmoji,
+    sendFaceMessage,
+  };
+}

package/src/components/TUIMessageInput/hooks/useHandleForwardMessage.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import TIM, { Conversation, Message } from 'tim-js-sdk';
+import { MESSAGE_OPERATE } from '../../../constants';
+import {
+  useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
+} from '../../../context';
+
+export function useHandleForwardMessage(msg?:Message) {
+  const {
+    operateData,
+  } = useTUIChatStateContext('TUIMessageInputDefault');
+
+  const [conversationList, setConversationList] = useState([]);
+  const { sendMessage, createForwardMessage } = useTUIChatActionContext('useHandleForwardMessage');
+  const { tim } = useTUIKitContext('TUIChat');
+
+  const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
+
+  const sendForwardMessage = (list:Array<Conversation>) => {
+    list.map((item:Conversation) => {
+      const forwardMessage = createForwardMessage({ conversation: item, message });
+      sendMessage(forwardMessage);
+      return item;
+    });
+  };
+
+  useEffect(() => {
+    (async () => {
+      const res = await tim.getConversationList();
+      setConversationList(res?.data?.conversationList.filter(
+        (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+      ));
+    })();
+  }, [tim]);
+
+  return {
+    message,
+    conversationList,
+    sendForwardMessage,
+  };
+}

package/src/components/TUIMessageInput/hooks/useHandleQuoteMessage.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+import { MESSAGE_OPERATE } from '../../../constants';
+import { useTUIChatStateContext } from '../../../context';
+
+const quoteConfigType = {
+  [TIM.TYPES.MSG_TEXT]: 1,
+  [TIM.TYPES.MSG_CUSTOM]: 2,
+  [TIM.TYPES.MSG_IMAGE]: 3,
+  [TIM.TYPES.MSG_AUDIO]: 4,
+  [TIM.TYPES.MSG_VIDEO]: 5,
+  [TIM.TYPES.MSG_FILE]: 6,
+  [TIM.TYPES.MSG_FACE]: 8,
+};
+
+const quoteConfigForShow = {
+  [TIM.TYPES.MSG_CUSTOM]: '[custom]',
+  [TIM.TYPES.MSG_IMAGE]: '[image]',
+  [TIM.TYPES.MSG_AUDIO]: '[audio]',
+  [TIM.TYPES.MSG_VIDEO]: '[video]',
+  [TIM.TYPES.MSG_FILE]: '[file]',
+  [TIM.TYPES.MSG_FACE]: '[face]',
+};
+
+export function useHandleQuoteMessage(msg?:Message) {
+  const {
+    operateData,
+  } = useTUIChatStateContext('TUIMessageInputDefault');
+
+  const [cloudCustomData, setCloudCustomData] = useState({ messageReply: null });
+
+  const handleQuoteMessage = (message: Message) => {
+    const messageType = quoteConfigType[message?.type];
+    const messageAbstract = message?.type === TIM.TYPES.MSG_TEXT
+      ? message?.payload?.text
+      : quoteConfigForShow[message?.type];
+
+    return {
+      messageAbstract,
+      messageSender: message?.nick || message?.from,
+      messageID: message?.ID,
+      messageType,
+      version: 1,
+    };
+  };
+
+  useEffect(
+    () => {
+      const message = msg || operateData[MESSAGE_OPERATE.QUOTE];
+      setCloudCustomData(
+        {
+          messageReply: message ? handleQuoteMessage(message) : null,
+        },
+      );
+    },
+    [operateData, msg],
+  );
+
+  return {
+    cloudCustomData,
+    handleQuoteMessage,
+  };
+}

package/src/components/TUIMessageInput/hooks/useMessageInputState.tsx

@@ -0,0 +1,101 @@
+import { Dispatch, useReducer } from 'react';
+import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
+import type { TUIMessageInputProps } from '../TUIMessageInput';
+import { useEmojiPicker } from './useEmojiPicker';
+import { useMessageInputText } from './useMessageInputText';
+import { useUploadPicker } from './useUploadPicker';
+
+export interface IbaseStateProps {
+  state: IinitState,
+  dispatch: Dispatch<MessageInputReducerAction>,
+}
+
+export interface IinitState {
+  text?: string,
+  cursorPos?: ICursorPos,
+}
+
+export interface ICursorPos {
+  start?: number,
+  end?: number,
+}
+
+export type MessageInputReducerAction =
+  | {
+    type: CONSTANT_DISPATCH_TYPE.SET_TEXT;
+    getNewText: (text: string) => void,
+  }
+  | {
+    type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS;
+    value: ICursorPos
+  }
+
+const initState:IinitState = {
+  text: '',
+  cursorPos: {
+    start: 0,
+    end: 0,
+  },
+};
+
+const reducer = (state:IinitState, action) => {
+  switch (action.type) {
+    case CONSTANT_DISPATCH_TYPE.SET_TEXT:
+      return { ...state, text: action?.getNewText(state.text) };
+    case CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS:
+      return { ...state, cursorPos: action?.value };
+    default: return state;
+  }
+};
+
+export const useMessageInputState = (props:TUIMessageInputProps) => {
+  const [state, dispatch] = useReducer(reducer, initState);
+  const { focus, textareaRef } = props;
+  const {
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    handlePasete,
+    insertText,
+    setText,
+    setCursorPos,
+  } = useMessageInputText({
+    state,
+    dispatch,
+    textareaRef,
+    focus,
+  });
+
+  const {
+    onSelectEmoji,
+    sendFaceMessage,
+  } = useEmojiPicker({
+    state,
+    dispatch,
+    textareaRef,
+    insertText,
+  });
+
+  const {
+    sendUploadMessage,
+  } = useUploadPicker({
+    state,
+    dispatch,
+  });
+
+  return {
+    ...state,
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    handlePasete,
+    onSelectEmoji,
+    sendFaceMessage,
+    sendUploadMessage,
+    textareaRef,
+    insertText,
+    setText,
+    focus,
+    setCursorPos,
+  };
+};