@tencentcloud/chat-uikit-react 0.0.1

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -0,0 +1,136 @@
+import React, { useRef, useState } from 'react';
+import { ConversationPreviewUIComponentProps } from './ConversationPreview';
+import { Avatar as DefaultAvatar } from '../Avatar/index';
+import './styles/index.scss';
+import { Icon, IconTypes } from '../Icon';
+import { Plugins } from '../Plugins';
+import { useConversation } from '../../hooks';
+import { useTUIKitContext } from '../../context';
+
+export function unMemoConversationPreviewContent<T extends ConversationPreviewUIComponentProps>(
+  props: T,
+):React.ReactElement {
+  const {
+    conversation,
+    Avatar = DefaultAvatar,
+    displayImage,
+    displayTitle,
+    displayMessage,
+    displayTime,
+    unread,
+    active,
+    setActiveConversation,
+  } = props;
+
+  const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
+  const activeClass = active ? 'conversation-preview-content--active' : '';
+  const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
+  const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
+  const [isHover, setIsHover] = useState(false);
+  const onSelectConversation = () => {
+    if (setActiveConversation) {
+      setActiveConversation(conversation);
+    }
+    if (conversationPreviewButton?.current) {
+      conversationPreviewButton.current.blur();
+    }
+  };
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const { tim, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
+  const { pinConversation, deleteConversation } = useConversation(tim);
+  const moreHandle = (type: string) => {
+    const { conversationID, isPinned } = conversation;
+    switch (type) {
+      case 'pin':
+        pinConversation({ conversationID, isPinned: !isPinned });
+        break;
+      case 'delete':
+        deleteConversation(conversationID);
+        if (conversation === activeConversation) {
+          setActiveConversation(null);
+        }
+        break;
+      default:
+    }
+  };
+  return (
+    <button
+      type="button"
+      aria-selected={active}
+      role="option"
+      className={`conversation-preview-container ${activeClass} ${unreadClass} ${pinClass}`}
+      onClick={onSelectConversation}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={conversationPreviewButton}
+    >
+      <div className="avatar">
+        <Avatar image={displayImage} name={displayTitle} size={40} />
+      </div>
+      <div className="content">
+        <div className="title">
+          {displayTitle}
+        </div>
+        <div className="message">
+          {displayMessage}
+        </div>
+      </div>
+      <div className="external">
+        {unread ? (<div className="unread">{unread <= 99 ? unread : '99+'}</div>) : (<div className="unread" />)}
+        {!isHover
+          ? (
+            <div className="time">
+              {displayTime}
+            </div>
+          )
+          : (
+            <div className={`${isHover ? 'more--hover' : 'more'}`}>
+              <Plugins
+                customClass="more-handle-box"
+                plugins={[
+                  <div
+                    role="presentation"
+                    className="more-handle-item"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      moreHandle('pin');
+                    }}
+                  >
+                    {!conversation.isPinned ? 'Pin' : 'Cancel Pin'}
+                  </div>,
+                  <div
+                    className="more-handle-item"
+                    style={{ color: '#FF584C' }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      moreHandle('delete');
+                    }}
+                    role="presentation"
+                  >
+                    Delete
+                  </div>,
+                ]}
+                showNumber={0}
+                MoreIcon={(
+                  <Icon
+                    className="icon-more"
+                    width={16}
+                    height={16}
+                    type={IconTypes.MORE}
+                  />
+              )}
+              />
+            </div>
+          )}
+      </div>
+    </button>
+  );
+}
+
+export const ConversationPreviewContent = React.memo(unMemoConversationPreviewContent) as
+  typeof unMemoConversationPreviewContent;

package/src/components/ConversationPreview/index.ts

@@ -0,0 +1,2 @@
+export * from './ConversationPreview';
+export * from './ConversationPreviewContent';

package/src/components/ConversationPreview/styles/index.scss

@@ -0,0 +1,140 @@
+$font-color: #7A7A7A;
+.conversation-list-container {
+  overflow-x: hidden;
+  height: 100%;
+}
+
+.conversation-preview-container {
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  border: none;
+  width: 100%;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
+  padding: 0 20px;
+
+  .content {
+    flex: 1;
+    text-align: left;
+    max-width: 58%;
+    min-width: 58%;
+    margin-left: 10px;
+
+    .title {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 17px;
+      font-family: 'SF Pro Text';
+      padding: 1px 0;
+    }
+
+    .message {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: $font-color;
+      font-family: 'SF Pro Text';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      padding: 1px 0;
+    }
+  }
+
+  .external {
+    min-width: 90px;
+    text-align: right;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .unread {
+      height: 19px;
+      padding: 1px 0;
+    }
+
+    .time {
+      color: $font-color;
+      font-family: 'SF Pro Text';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      padding: 1px 0;
+    }
+
+    .more--hover {
+      display: flex;
+      justify-content: right;
+
+      .icon-more {
+        transform: scale(1.5);
+        &:hover {
+        }
+      }
+
+      .more-handle-box {
+        top: 0;
+        right: 0;
+        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+        bottom: initial;
+        padding: 14px 0;
+        box-sizing: border-box;
+        text-align: start;
+        white-space: nowrap;
+
+        .more-handle-item {
+          font-size: 16px;
+          line-height: 19px;
+          padding: 6px 16px;
+          cursor: pointer;
+          font-weight: 500;
+          box-sizing: border-box;
+
+          &:hover {
+            background: #147AFF;
+            opacity: 0.6;
+            color: #FFFFFF !important;
+          }
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: rgba(0, 110, 255, 0.1);
+  }
+
+  &.conversation-preview-content--pin {
+    background-color: #F2F2F2D4;
+  }
+
+  &.conversation-preview-content--active {
+    background-color: rgba(0, 110, 255, 0.1);
+
+    .title {
+      color: rgb(20, 122, 255);
+    }
+  }
+
+  &.conversation-preview-content--unread {
+    .unread {
+      width: 16px;
+      height: 13px;
+      background: #FF3742;
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2px 5px 1px;
+      color: #FFFFFF;
+      font-size: 11px;
+      font-weight: 700;
+      margin: 2px 0 2px auto;
+    }
+  }
+}

package/src/components/ConversationPreview/utils.tsx

@@ -0,0 +1,124 @@
+import {
+  format, isToday, isYesterday, formatDistance, isThisYear, isThisWeek,
+} from 'date-fns';
+import React from 'react';
+import TIM, { Conversation, Group, Profile } from 'tim-js-sdk';
+import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
+
+export const getDisplayTitle = (
+  conversation: Conversation,
+  searchValue?: string,
+  highlightColor = '#147AFF',
+): string | React.ReactElement => {
+  const {
+    name, nick, groupID, userID,
+  } = getMessageProfile(conversation);
+  const { type } = conversation;
+  let title = '';
+  switch (type) {
+    case TIM.TYPES.CONV_C2C:
+      title = nick || userID;
+      break;
+    case TIM.TYPES.CONV_GROUP:
+      title = name || groupID;
+      break;
+    default:
+      title = '';
+  }
+  const handleTitle = (str:string) => {
+    const tempStr = str.toLocaleLowerCase();
+    const pos = tempStr.indexOf(searchValue.toLocaleLowerCase());
+    return (
+      <div>
+        <span>{str.slice(0, pos)}</span>
+        <span style={{ color: highlightColor }}>{str.slice(pos, pos + searchValue.length)}</span>
+        <span>{str.slice(pos + searchValue.length)}</span>
+      </div>
+    );
+  };
+  return !searchValue ? title : handleTitle(title);
+};
+export const getDisplayImage = (conversation: Conversation) => {
+  const { type } = conversation;
+  const { avatar } = getMessageProfile(conversation);
+  let displayImage = avatar;
+  if (!avatar) {
+    switch (type) {
+      case TIM.TYPES.CONV_C2C:
+        displayImage = defaultUserAvatar;
+        break;
+      case TIM.TYPES.CONV_GROUP:
+        displayImage = defaultGroupAvatarWork;
+        break;
+      default:
+        displayImage = defaultGroupAvatarWork;
+    }
+  }
+  return displayImage;
+};
+export const getDisplayMessage = (conversation:Conversation, myProfile:Profile) => {
+  const { lastMessage, type } = conversation;
+  const {
+    fromAccount, nick, nameCard, isRevoked,
+  } = lastMessage;
+  let from = '';
+  switch (type) {
+    case TIM.TYPES.CONV_GROUP:
+      from = lastMessage?.fromAccount === myProfile?.userID ? 'You: ' : `${nameCard || nick || fromAccount}: `;
+      break;
+    case TIM.TYPES.CONV_C2C:
+      from = isRevoked ? 'you ' : '';
+      break;
+    default:
+  }
+  return (
+    <div style={{
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }}
+    >
+      <span>{from}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : lastMessage.messageForShow}</span>
+    </div>
+  );
+};
+interface TProfile extends Profile, Group {}
+export const getMessageProfile = (conversation: Conversation):TProfile => {
+  if (!conversation) return null;
+  let result = {};
+  const { type, groupProfile, userProfile } = conversation;
+  switch (type) {
+    case TIM.TYPES.CONV_C2C:
+      result = userProfile;
+      break;
+    case TIM.TYPES.CONV_GROUP:
+      result = groupProfile;
+      break;
+    case TIM.TYPES.CONV_SYSTEM:
+    default:
+  }
+  return result as TProfile;
+};
+export const getDisplayTime = (conversation: Conversation) => {
+  const { lastMessage } = conversation;
+  return getTimeStamp(lastMessage.lastTime * 1000);
+};
+export const getTimeStamp = (time: number) => {
+  if (!time) {
+    return '';
+  }
+  if (!isThisYear(time)) {
+    return format(time, 'yyyy MMM dd');
+  }
+  if (isToday(time)) {
+    return format(time, 'p');
+  }
+  if (isYesterday(time)) {
+    return formatDistance(time, new Date());
+  }
+  if (isThisWeek(time)) {
+    return format(time, 'eeee');
+  }
+  return format(time, 'MMM dd');
+};

package/src/components/ConversationSearch/ConversationSearchInput.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect, InputHTMLAttributes } from 'react';
+import './styles/index.scss';
+import { Icon, IconTypes } from '../Icon';
+import { Input, InputProps } from '../Input';
+
+export function ConversationSearchInput(props:InputProps) {
+  const {
+    className = '',
+    placeholder,
+    clearable,
+    value,
+    onChange: handleChange,
+    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
+  } = props;
+  return (
+    <Input
+      className={`conversation-search-input ${className}`}
+      placeholder={placeholder || 'Search'}
+      clearable={clearable}
+      value={value}
+      onChange={handleChange}
+      prefix={prefix}
+    />
+  );
+}

package/src/components/ConversationSearch/ConversationSearchResult.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Conversation } from 'tim-js-sdk';
+import {
+  ConversationPreview,
+  ConversationPreviewUIComponentProps,
+} from '../ConversationPreview';
+import { Icon, IconTypes } from '../Icon';
+
+export interface ConversationSearchResultProps {
+  result: Array<Conversation>
+  searchValue?: string,
+  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>
+}
+export function ConversationSearchResult(props:ConversationSearchResultProps):React.ReactElement {
+  const { result, searchValue, Preview } = props;
+  return (
+    <div>
+      {result?.length === 0 ? (
+        <div className="conversation-search-result no-result">
+          <Icon className="no-result-icon" type={IconTypes.CRY} width={42} height={42} />
+          <span className="no-result-message">{`No results for "${searchValue}"`}</span>
+        </div>
+      )
+        : result.map((item) => {
+          const previewProps = {
+            conversation: item,
+            Preview,
+          };
+          return (
+            <ConversationPreview
+              searchValue={searchValue}
+              key={item.conversationID}
+              {...previewProps}
+            />
+          );
+        })}
+    </div>
+  );
+}

package/src/components/ConversationSearch/index.ts

@@ -0,0 +1,2 @@
+export * from './ConversationSearchInput';
+export * from './ConversationSearchResult';

package/src/components/ConversationSearch/styles/index.scss

@@ -0,0 +1,19 @@
+.conversation-search-result.no-result {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &-icon {
+    margin: 100px auto 50px;
+  }
+  &-message {
+    color: #999999;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+.conversation-search-input {
+  height: 36px;
+  width: 100%;
+}

package/src/components/DivWithEdit/DivWithEdit.tsx

@@ -0,0 +1,90 @@
+import React, {
+  PropsWithChildren, useLayoutEffect, useRef, useState,
+} from 'react';
+import { Icon, IconTypes } from '../Icon';
+import { Popup } from '../Popup';
+
+import './styles/index.scss';
+import { WithSelect } from './WithSelect';
+import { WithText } from './WithText';
+
+const elements = {
+  text: WithText,
+  select: WithSelect,
+};
+
+interface DivWithEditProps {
+  name?: string,
+  value?: string,
+  confirm?: (data?:any) => void,
+  className?: string,
+  classEditName?: string,
+  type?: string,
+  isEdit?: boolean,
+  toggle?: (name:string) => void,
+  close?: () => void,
+}
+
+export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<T>) {
+  const {
+    value: propsValue,
+    className,
+    classEditName,
+    confirm,
+    type,
+    isEdit,
+    toggle,
+    children,
+    name,
+    close,
+  } = props;
+
+  const [value, setValue] = useState(propsValue);
+
+  const WithEditElements = elements[type] || WithText;
+
+  useLayoutEffect(() => {
+    setValue(propsValue);
+  }, [propsValue]);
+
+  const handleConfirm = (data) => {
+    confirm({
+      name,
+      value: data,
+    });
+  };
+
+  return (
+    <div className={`div-with-edit ${className}`}>
+      <Popup
+        className="div-with-edit-popup"
+        show
+        close={close}
+      >
+        {
+        !isEdit && (
+        <div className="show">
+          <p>{value || '-'}</p>
+          <div className="icon">
+            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle(name); }} />
+          </div>
+        </div>
+        )
+      }
+        {
+        isEdit
+        && (
+        <WithEditElements
+          value={value}
+          confirm={handleConfirm}
+          className={classEditName}
+          close={close}
+        >
+          {children}
+        </WithEditElements>
+        )
+      }
+      </Popup>
+    </div>
+  );
+}

package/src/components/DivWithEdit/WithSelect.tsx

@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+import { Icon, IconTypes } from '../Icon';
+
+import './styles/index.scss';
+import { WithEditProps } from './WithText';
+
+interface WithSelectProps extends WithEditProps {
+  list?: Array<any>,
+}
+
+export function WithSelect<T extends WithSelectProps>(props:PropsWithChildren<T>) {
+  const {
+    value,
+    confirm,
+    children,
+    className,
+    close,
+  } = props;
+
+  return (
+    <div className={`edit ${className}`}>
+      <span>{value}</span>
+      <Icon className="icon" width={12} height={7} type={IconTypes.ARROW_DOWN} onClick={confirm} />
+      <div className="select">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/DivWithEdit/WithText.tsx

@@ -0,0 +1,42 @@
+import React, {
+  PropsWithChildren, useLayoutEffect, useRef, useState,
+} from 'react';
+import { Icon, IconTypes } from '../Icon';
+
+export interface WithEditProps {
+  value?: string,
+  onChange?: (value:string) => void,
+  confirm?: (data?:any) => void,
+  className?: string,
+  close?: () => void,
+}
+
+export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
+  const {
+    value: propsVal,
+    confirm,
+    className,
+  } = props;
+  const inputRef = useRef<HTMLInputElement>();
+
+  const [value, setValue] = useState(propsVal);
+
+  useLayoutEffect(() => {
+    inputRef?.current?.focus();
+    setValue(value);
+  }, [inputRef, propsVal]);
+
+  const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleConfirm = () => {
+    confirm(value);
+  };
+  return (
+    <div className={`edit ${className}`}>
+      <input ref={inputRef} type="text" value={value} onChange={handleChange} />
+      <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />
+    </div>
+  );
+}

package/src/components/DivWithEdit/index.ts

@@ -0,0 +1 @@
+export * from './DivWithEdit';