@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/MessageInput/Forward.tsx

@@ -1,187 +0,0 @@
-import React, {
-  PropsWithChildren, useCallback, useEffect, useState,
-} from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Conversation, Message } from '@tencentcloud/chat';
-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?: Conversation[];
-  message?: Message;
-}
-
-interface TUIForwardToProps {
-  handleForward?: (data: HandleForwardParams) => void;
-}
-
-export function Forward<T extends TUIForwardToProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    handleForward: propsHandleForward,
-  } = props;
-  const { t } = useUIKit();
-  const [selectList, setSelectList] = useState([]);
-  const [searchResult, setSearchResult] = useState([]);
-  const [searchValue, setSearchValue] = useState('');
-
-  const { operateMessage } = useTUIChatActionContext('TUIForward');
-
-  const { message, sendForwardMessage, conversationList = [] } = useHandleForwardMessage();
-
-  const handleClose = useCallback(() => {
-    operateMessage && operateMessage({
-      // eslint-disable-next-line
-      // @ts-ignore
-      [MESSAGE_OPERATE.FORWARD]: null,
-    });
-  }, [operateMessage]);
-
-  // const FrequentlyList = conversationList.slice(0, 2);
-  const RecentList = conversationList;
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    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: any) => {
-    if (e.checked) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      setSelectList([...selectList, e.value]);
-    } else {
-      setSelectList(selectList.filter(item => item !== e.value));
-    }
-  };
-
-  const handleDisplayForwardName = (value: any) => {
-    const listName = value?.map((item: any) => getDisplayTitle(item));
-    return listName.toString();
-  };
-
-  const handleForward = () => {
-    if (propsHandleForward) {
-      propsHandleForward({
-        list: selectList,
-        message,
-      });
-    } else {
-      sendForwardMessage(selectList);
-    }
-    handleClose();
-  };
-
-  const stopPropagation = (e: any) => {
-    e.stopPropagation();
-  };
-
-  useEffect(() => {
-    setSelectList([]);
-    setSearchResult([]);
-    setSearchValue('');
-  }, [message]);
-  // eslint-disable-next-line
-  // @ts-ignore
-  return message && conversationList.length > 0 && (
-    <Model onClick={handleClose}>
-      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => { stopPropagation(e); }}>
-        <header className="tui-forward-header">
-          <Icon
-            type={IconTypes.CANCEL}
-            width={16}
-            height={16}
-            onClick={handleClose}
-          />
-          <h2 className="tui-forward-title">{t('TUIChat.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">{t('TUIChat.Search Result')}</h3>
-                {
-                  searchResult.length > 0 && searchResult.map((item: any) => (
-                    <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={(e) => { handleCheckboxChange(e); }}
-                        id={`${item.conversationID}`}
-                        value={item}
-                      />
-                    </li>
-                  ))
-                }
-                {
-                  searchResult.length === 0
-                  && <p className="no-result">{t('TUIChat.No Result')}</p>
-                }
-              </ul>
-            )
-          }
-          { !searchValue && RecentList.length > 0 && (
-            <ul className="tui-forward-list">
-              {
-                RecentList.map((item: any) => (
-                  <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}
-            disabled={selectList.length === 0}
-          >
-            {t('TUIChat.Forward')}
-          </button>
-        </footer>
-      </div>
-    </Model>
-  );
-}

package/src/components/MessageInput/InputPluginsDefalut.tsx

@@ -1,114 +0,0 @@
-import React, { useRef } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import './styles/index.scss';
-
-import { EmojiPicker } from './EmojiPicker';
-import { Plugins } from '../Plugins';
-import { IPluginsRef } from '../Plugins';
-import { useUploadElement } from './hooks/useUploadElement';
-import { MESSAGE_TYPE_NAME } from '../../constants';
-import { useTUIMessageInputContext } from '../../context/MessageInputContext';
-import { Icon, IconTypes } from '../Icon';
-import { useTUIChatStateContext } from '../../context';
-export function InputPluginsDefalut(): React.ReactElement {
-  const {
-    sendUploadMessage,
-    pluginConfig: propsPluginConfig,
-  } = useTUIMessageInputContext('TUIMessageInputDefault');
-  const { t } = useUIKit();
-
-  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
-
-  const propPlugins = propsPluginConfig?.plugins
-    || TUIMessageInputConfig?.pluginConfig?.plugins || [];
-  const showNumber = propsPluginConfig?.showNumber
-    || TUIMessageInputConfig?.pluginConfig?.showNumber || 1;
-  const MoreIcon = propsPluginConfig?.MoreIcon || TUIMessageInputConfig?.pluginConfig?.MoreIcon;
-
-  const handlePluginBoolenParams = (
-    porpsVal?: boolean | undefined,
-    contextVal?: boolean | undefined,
-    defaultVal?: boolean,
-  ) => {
-    if (typeof (porpsVal) === 'boolean') {
-      return porpsVal;
-    }
-    if (typeof (contextVal) === 'boolean') {
-      return contextVal;
-    }
-    return defaultVal;
-  };
-
-  const isEmojiPicker = handlePluginBoolenParams(
-    propsPluginConfig?.isEmojiPicker,
-    TUIMessageInputConfig?.pluginConfig?.isEmojiPicker,
-    true,
-  );
-  const isImagePicker = handlePluginBoolenParams(
-    propsPluginConfig?.isImagePicker,
-    TUIMessageInputConfig?.pluginConfig?.isImagePicker,
-    true,
-  );
-  const isVideoPicker = handlePluginBoolenParams(
-    propsPluginConfig?.isVideoPicker,
-    TUIMessageInputConfig?.pluginConfig?.isVideoPicker,
-    true,
-  );
-  const isFilePicker = handlePluginBoolenParams(
-    propsPluginConfig?.isFilePicker,
-    TUIMessageInputConfig?.pluginConfig?.isFilePicker,
-    true,
-  );
-
-  const pluginsRef = useRef<IPluginsRef>();
-
-  const ImagePicker = isImagePicker && useUploadElement({
-    children: (
-      <div className="input-plugin-item">
-        <i className="iconfont input-icon">&#xe604;</i>
-        <span>{t('TUIChat.Image')}</span>
-      </div>
-    ),
-    type: 'image',
-    accept: 'image/*',
-    onChange: (file: HTMLInputElement | File) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
-    },
-  });
-
-  const VideoPicker = isVideoPicker && useUploadElement({
-    children: (
-      <div className="input-plugin-item">
-        <i className="iconfont input-icon">&#xe603;</i>
-        <span>{t('TUIChat.Video')}</span>
-      </div>
-    ),
-    type: 'video',
-    accept: 'video/*',
-    onChange: (file: HTMLInputElement | File) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.VIDEO);
-    },
-  });
-
-  const FilePicker = isFilePicker && useUploadElement({
-    children: (
-      <div className="input-plugin-item">
-        <i className="iconfont input-icon">&#xe602;</i>
-        <span>{t('TUIChat.File')}</span>
-      </div>
-    ),
-    type: 'file',
-    accept: 'file/*',
-    onChange: (file: HTMLInputElement | File) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
-    },
-  });
-  const plugins = [
-    isEmojiPicker && <EmojiPicker />, ImagePicker, VideoPicker, FilePicker, ...propPlugins,
-  ].filter(item => item);
-
-  return <Plugins ref={pluginsRef} plugins={plugins} showNumber={showNumber} MoreIcon={MoreIcon} />;
-}

package/src/components/MessageInput/InputQuoteDefalut.tsx

@@ -1,44 +0,0 @@
-import React, { PropsWithChildren, useCallback, useEffect } from 'react';
-import './styles/index.scss';
-
-import { Message } from '@tencentcloud/chat';
-import { useTUIChatActionContext } from '../../context';
-import { Icon, IconTypes } from '../Icon';
-import { MESSAGE_OPERATE } from '../../constants';
-import { useHandleQuoteMessage } from './hooks/useHandleQuoteMessage';
-import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
-
-interface InputQuoteProps {
-  message?: Message;
-}
-
-export function InputQuoteDefalut<T extends InputQuoteProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message: propsMessage,
-  } = props;
-
-  const { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
-  const { cloudCustomData, message } = useHandleQuoteMessage(propsMessage);
-
-  const handleClose = useCallback(() => {
-    operateMessage && operateMessage({
-      // eslint-disable-next-line
-      // @ts-ignore
-      [MESSAGE_OPERATE.QUOTE]: null,
-    });
-  }, [operateMessage]);
-
-  const context: any = cloudCustomData?.messageReply;
-
-  return context && (
-    <div className="input-quote">
-      <div className="input-quote-content">
-        <label htmlFor="input-quote-content">{message?.nick || message?.from}</label>
-        <span>{transformTextWithEmojiKeyToName(context?.messageAbstract)}</span>
-      </div>
-      <Icon className="icon" width={12} height={12} type={IconTypes.CLOSE} onClick={handleClose} />
-    </div>
-  );
-}

package/src/components/MessageInput/MessageInput.tsx

@@ -1,116 +0,0 @@
-import React, { MutableRefObject, PropsWithChildren } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { TUIMessageInputContextProvider } from '../../context/MessageInputContext';
-import { useMessageInputState, useCreateMessageInputContext } from './hooks';
-import './styles/index.scss';
-import {
-  UnknowPorps,
-  useComponentContext,
-  useTUIChatStateContext,
-} from '../../context';
-import { EmptyStateIndicator } from '../EmptyStateIndicator';
-import { InputQuoteDefalut } from './InputQuoteDefalut';
-import { TUIMessageInputDefault } from './MessageInputDefault';
-import { InputPluginsDefalut } from './InputPluginsDefalut';
-import { Forward } from './Forward';
-import { Transmitter } from './Transmitter';
-
-export interface PluginConfigProps {
-  plugins?: React.ReactElement[];
-  showNumber?: number;
-  MoreIcon?: React.ReactElement;
-  isEmojiPicker?: boolean;
-  isImagePicker?: boolean;
-  isVideoPicker?: boolean;
-  isFilePicker?: boolean;
-}
-
-export interface TUIMessageInputBasicProps {
-  disabled?: boolean;
-  focus?: boolean;
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
-  isTransmitter?: boolean;
-  className?: string;
-  pluginConfig?: PluginConfigProps;
-}
-
-export interface TUIMessageInputProps extends TUIMessageInputBasicProps {
-  TUIMessageInput?: React.ComponentType;
-  InputPlugins?: React.ComponentType<UnknowPorps>;
-  InputQuote?: React.ComponentType<UnknowPorps>;
-}
-
-function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
-  const {
-    children,
-    disabled: propsDisabled,
-    focus: propsFoces,
-    pluginConfig,
-    textareaRef: propsTextareaRef,
-  } = props;
-  const messageInputState = useMessageInputState(props);
-  const { textareaRef, conversation } = useTUIChatStateContext('TUIMessageInput');
-
-  const contextDisabled = conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM;
-
-  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
-
-  const focus = propsFoces || TUIMessageInputConfig?.focus;
-
-  const messageInputContextValue = useCreateMessageInputContext({
-    ...messageInputState,
-    ...props,
-    textareaRef: propsTextareaRef || TUIMessageInputConfig?.textareaRef || textareaRef,
-    disabled: propsDisabled || TUIMessageInputConfig?.disabled || contextDisabled,
-    focus: typeof (focus) === 'boolean' ? focus : true,
-    pluginConfig,
-  });
-
-  return (
-    <TUIMessageInputContextProvider value={messageInputContextValue}>
-      { children }
-    </TUIMessageInputContextProvider>
-  );
-}
-
-function UnMemoizedMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
-  const {
-    TUIMessageInput: PropTUIMessageInput,
-    InputPlugins: PropInputPlugins,
-    InputQuote: PropInputQuote,
-    isTransmitter: propsIsTransmitter,
-    className: propsClassName,
-  } = props;
-
-  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
-
-  const className = propsClassName || TUIMessageInputConfig?.className;
-  const isTransmitter = propsIsTransmitter || TUIMessageInputConfig?.isTransmitter || false;
-
-  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 ${className}`}>
-      <TUIMessageInputProvider {...props}>
-        <Forward />
-        <InputQuote />
-        <div className="tui-message-input-main">
-          <div className="tui-message-input-box">
-            <InputPlugins />
-            <Input />
-          </div>
-          {isTransmitter && <Transmitter />}
-        </div>
-      </TUIMessageInputProvider>
-    </div>
-  );
-}
-export const MessageInput = React.memo(UnMemoizedMessageInput) as
-typeof UnMemoizedMessageInput;

package/src/components/MessageInput/MessageInputDefault.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { MESSAGE_OPERATE } from '../../constants';
-import { useTUIChatStateContext } from '../../context';
-import { isPC } from '../../utils/env';
-import { useTUIMessageInputContext } from '../../context/MessageInputContext';
-import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
-
-export function TUIMessageInputDefault(): React.ReactElement {
-  const {
-    text,
-    disabled,
-    handleChange,
-    handleKeyDown,
-    handlePasete,
-    textareaRef,
-    focus,
-    setText,
-    setCursorPos,
-  } = useTUIMessageInputContext('TUIMessageInputDefault');
-  const { t } = useUIKit();
-  const {
-    operateData,
-  } = useTUIChatStateContext('TUIMessageInputDefault');
-
-  // operateData
-  useEffect(() => {
-    if (operateData && operateData[MESSAGE_OPERATE.REVOKE]) {
-      setText && setText(transformTextWithEmojiKeyToName(operateData[MESSAGE_OPERATE.REVOKE].payload.text));
-    }
-  }, [operateData]);
-
-  // Focus
-  useEffect(() => {
-    if (focus && textareaRef && textareaRef.current) {
-      textareaRef.current.autofocus = true;
-      isPC && textareaRef?.current?.focus({
-        preventScroll: true,
-      });
-      // eslint-disable-next-line
-      // @ts-ignore
-      textareaRef?.current?.addEventListener('paste', handlePasete);
-    }
-    return () => {
-      // eslint-disable-next-line
-      // @ts-ignore
-      textareaRef?.current?.removeEventListener('paste', handlePasete);
-    };
-  }, [focus, textareaRef]);
-
-  const [focused, setFocused] = useState<boolean>(false);
-
-  const handleFocus = () => {
-    setFocused(true);
-  };
-  const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCursorPos && 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={t('TUIChat.Enter a message')}
-            rows={1}
-            value={text}
-            // eslint-disable-next-line
-          // @ts-ignore
-            ref={textareaRef}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onBlur={(e: any) => { handleBlur(e); }}
-          />
-        )
-      }
-    </div>
-  );
-}

package/src/components/MessageInput/Transmitter.tsx

@@ -1,15 +0,0 @@
-import React, { useState } from 'react';
-import { useTUIMessageInputContext } from '../../context/MessageInputContext';
-import { Icon, IconTypes } from '../Icon';
-
-export function Transmitter(): React.ReactElement {
-  const {
-    handleSubmit,
-  } = useTUIMessageInputContext('Transmitter');
-
-  return (
-    <div className="transmitter">
-      <Icon className="icon-send" type={IconTypes.SEND} onClick={handleSubmit} />
-    </div>
-  );
-}

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

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

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

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

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

@@ -1,40 +0,0 @@
-import {
-  MutableRefObject,
-  PropsWithChildren,
-  useCallback,
-} from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
-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 { language } = useUIKit();
-
-  const onSelectEmoji = useCallback((emoji: EmojiData) => {
-    insertText && insertText(emoji.data);
-  }, [insertText, language]);
-
-  const sendFaceMessage = useCallback((emoji: EmojiData) => {
-    TUIChatService.sendFaceMessage({ payload: emoji });
-  }, []);
-
-  return {
-    onSelectEmoji,
-    sendFaceMessage,
-  };
-}