@tencentcloud/chat-uikit-react 0.0.1

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren, useEffect, useMemo } from 'react';
+import { Message } from 'tim-js-sdk';
+import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
+
+interface MessageListElementProps {
+  enrichedMessageList: Array<Message>;
+  TUIMessage?: React.ComponentType<TUIMessageProps>,
+}
+
+function useMessageListElement <T extends MessageListElementProps>(
+  props: PropsWithChildren<T>,
+) {
+  const { enrichedMessageList, TUIMessage } = props;
+  return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
+    const key = `${JSON.stringify(item)}${index}`;
+    return (
+      <li className="message-list-item" key={key}>
+        <TUIMessage message={item} />
+      </li>
+    );
+  }), [enrichedMessageList]);
+}
+
+export default useMessageListElement;

package/src/components/TUIMessageList/index.ts

@@ -0,0 +1,2 @@
+export * from './TUIMessageList';
+export * from './hooks/useEnrichedMessageList';

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/TUIMessageList/styles/layout.scss

@@ -0,0 +1,28 @@
+ul,li,div,p,label,span {
+  margin: 0;
+  padding: 0;
+} 
+ul li {
+  list-style: none;
+}
+.message-list{
+  flex: 1;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+  padding: 0 20px;
+  &-item {
+    display: grid;
+    padding: 5px 0;
+  }
+  .no-more {
+    text-align: center;
+    font-family: SF Pro Text;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 17px;
+    color: #999999;
+  }
+}

package/src/components/TUIProfile/TUIProfile.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+
+import './styles/index.scss';
+import { useMyProfile } from './hooks';
+import { TUIProfileDefault } from './TUIProfileDefault';
+import { useTUIKitContext } from '../../context';
+
+interface TUIProfileProps {
+  className?: string,
+  TUIProfile?: React.ComponentType<any>,
+}
+
+function UnMemoizedTUIProfile<T extends TUIProfileProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    className,
+    TUIProfile: PropTUIProfile,
+  } = props;
+
+  const { myProfile, updateMyProfile } = useMyProfile();
+
+  const { TUIProfileShow } = useTUIKitContext('TUIProfile');
+
+  const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
+
+  return TUIProfileShow && (
+    <TUIProfileUIComponent
+      className={className}
+      userInfo={myProfile}
+      update={updateMyProfile}
+    />
+  );
+}
+
+export const TUIProfile = React.memo(UnMemoizedTUIProfile) as
+typeof UnMemoizedTUIProfile;

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -0,0 +1,247 @@
+import React, { PropsWithChildren, useState } from 'react';
+import DatePicker from 'react-date-picker';
+import TIM, { Profile } from 'tim-js-sdk';
+
+import { useTUIKitContext } from '../../context';
+
+import { Avatar } from '../Avatar';
+import { DivWithEdit } from '../DivWithEdit';
+import { Icon, IconTypes } from '../Icon';
+import { handleDisplayAvatar } from '../untils';
+import { ProfileParams } from './hooks';
+
+const gender = {
+  [TIM.TYPES.GENDER_UNKNOWN]: 'unknow',
+  [TIM.TYPES.GENDER_MALE]: 'male',
+  [TIM.TYPES.GENDER_FEMALE]: 'female',
+};
+
+const avatarList = [
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_1.png',
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_2.png',
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png',
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_4.png',
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_5.png',
+  'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_6.png',
+];
+
+const genderList = [
+  {
+    label: 'Male',
+    value: TIM.TYPES.GENDER_MALE,
+  },
+  {
+    label: 'Female',
+    value: TIM.TYPES.GENDER_FEMALE,
+  },
+];
+
+export interface TUIProfileDefaultProps {
+  userInfo?: Profile,
+  update?:(option:ProfileParams) => void,
+  className?: string,
+}
+
+function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    userInfo,
+    className,
+    update,
+  } = props;
+
+  const { setTUIProfileShow } = useTUIKitContext('TUIProfileDefault');
+
+  const [isEditName, setIsEditName] = useState('');
+
+  // show birthday famate
+  const showBirthdayFormat = (value: string) => {
+    if (value?.length === 8) {
+      const y = Number(value.slice(0, 4));
+      const m = Number(value.slice(4, 6));
+      const d = Number(value.slice(-2));
+      return new Date(y, m - 1, d);
+    }
+    return new Date();
+  };
+
+  // edit birthday famate transform
+  const editBirthdayFamate = (date:Date) => {
+    const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
+    const month = date.getMonth() > 8 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
+    const year = date.getFullYear();
+    return `${year}${month}${day}`;
+  };
+
+  const editListMap = [
+    {
+      name: 'Signature',
+      value: userInfo?.selfSignature,
+      type: 'text',
+      children: null,
+    },
+    {
+      name: 'Gender',
+      value: gender[userInfo?.gender]?.replace(
+        gender[userInfo?.gender][0],
+        gender[userInfo?.gender][0]?.toLocaleUpperCase(),
+      ),
+      type: 'select',
+      children: (
+        <ul className="select-list">
+          {
+        genderList?.map((item, index) => {
+          const key = `${item.value}${index}`;
+          return (
+            <li
+              className="select-list-item"
+              role="menuitem"
+              tabIndex={index}
+              key={key}
+              onClick={() => { editGender(item); }}
+            >
+              {item.label}
+            </li>
+          );
+        })
+      }
+        </ul>
+      ),
+    },
+    {
+      name: 'Birthday',
+      value: userInfo?.birthday,
+      type: 'select',
+      children: (
+        <DatePicker
+          className="tui-profile-birthday"
+          calendarClassName="tui-profile-birthday-calendar"
+          isOpen
+          format="y-MM-dd"
+          onChange={(value) => { editBirthday(value); }}
+          value={showBirthdayFormat(`${userInfo?.birthday}`)}
+        />
+      ),
+    },
+  ];
+
+  const handleSetEditName = (name:string) => {
+    setIsEditName(name);
+  };
+
+  const confirm = (options) => {
+    update(options);
+    setIsEditName('');
+  };
+
+  // edit avatar
+  const editAvatar = (url:string) => {
+    confirm({ avatar: url });
+  };
+
+  // edit nick / selfSignature
+  const editText = (data?:any) => {
+    let key = '';
+    switch (data?.name) {
+      case 'nick':
+        key = 'nick';
+        break;
+      case 'Signature':
+        key = 'selfSignature';
+        break;
+      default:
+        setIsEditName('');
+        return;
+    }
+    const options = {
+      [key]: data.value,
+    };
+    confirm(options);
+  };
+
+  // edit gender
+  const editGender = (data) => {
+    confirm({ gender: data.value });
+  };
+
+  // edit birthday
+  const editBirthday = (value:Date) => {
+    confirm({
+      birthday: Number(editBirthdayFamate(value)),
+    });
+  };
+
+  return (
+    <div className={`${className} tui-profile`}>
+      <header className="tui-profile-header">
+        <Icon
+          width={9}
+          height={16}
+          type={IconTypes.BACK}
+          onClick={() => { setTUIProfileShow(false); }}
+        />
+        <h1>Personal information</h1>
+      </header>
+      <main className="tui-profile-main">
+        <div className="tui-profile-avatar">
+          <Avatar
+            image={handleDisplayAvatar(userInfo?.avatar)}
+            size={94}
+            update={editAvatar}
+            list={avatarList}
+          />
+        </div>
+        <DivWithEdit
+          name="nick"
+          className="tui-profile-nick"
+          value={userInfo?.nick}
+          type="text"
+          toggle={handleSetEditName}
+          isEdit={isEditName === 'nick'}
+          confirm={editText}
+          close={() => { setIsEditName(''); }}
+        />
+        <div className="tui-profile-ID">
+          <h5>ID:</h5>
+          <span>{userInfo?.userID}</span>
+        </div>
+      </main>
+      <ul className="tui-profile-list">
+        {
+          editListMap.map((item) => {
+            const key = `${item.name}`;
+            return (
+              <li className="tui-profile-list-item" key={key}>
+                <h4>{item.name}</h4>
+                <DivWithEdit
+                  className="tui-profile-div-with-edit"
+                  classEditName="tui-profile-edit"
+                  name={item.name}
+                  value={item?.value}
+                  type={item.type}
+                  toggle={handleSetEditName}
+                  isEdit={isEditName === item.name}
+                  confirm={editText}
+                  close={() => { setIsEditName(''); }}
+                >
+                  {item?.children}
+                </DivWithEdit>
+              </li>
+            );
+          })
+        }
+
+      </ul>
+    </div>
+  );
+}
+
+const MemoizedTUIProfileDefault = React.memo(TUIProfileDefaultWithContext) as
+typeof TUIProfileDefaultWithContext;
+
+export function TUIProfileDefault(props: TUIProfileDefaultProps)
+:React.ReactElement {
+  const options = { ...props };
+  return <MemoizedTUIProfileDefault {...options} />;
+}

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

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

package/src/components/TUIProfile/hooks/useMyProfile.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react';
+import TIM from 'tim-js-sdk';
+import { useTUIKitContext } from '../../../context';
+
+export interface ProfileParams {
+  nick?: string,
+  avatar?: string,
+  gender?: string,
+  selfSignature?: string,
+  allowType?: string,
+  birthday?: number,
+  location?: string,
+  language?: string,
+  messageSettings?: number,
+  adminForbidType?: string,
+  level?: number,
+  role?: number,
+  profileCustomField?: Array<any>,
+}
+
+export function useMyProfile() {
+  const [myProfile, setMyPofile] = useState(null);
+  const { tim, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
+
+  const getMyProfile = useCallback(async () => {
+    if (contextProfile) {
+      setMyPofile(contextProfile);
+    } else {
+      const res = await tim?.getMyProfile();
+      setMyPofile(res?.data);
+    }
+  }, [tim]);
+
+  const updateMyProfile = useCallback(async (options) => {
+    const res = await tim?.updateMyProfile(options);
+    const userInfo = { ...myProfile };
+    const keys = Object.keys(res.data);
+    keys.map((name) => {
+      userInfo[name] = res.data[name];
+      return name;
+    });
+    setMyPofile(userInfo);
+    return res;
+  }, [tim]);
+
+  const onProfileUpdated = (event) => {
+    console.log('onProfileUpdated', event.data); // 包含 Profile 对象的数组
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getMyProfile();
+    })();
+    tim?.on(TIM.EVENT.PROFILE_UPDATED, onProfileUpdated);
+    return () => {
+      tim?.off(TIM.EVENT.PROFILE_UPDATED, onProfileUpdated);
+    };
+  }, [tim]);
+
+  return {
+    myProfile,
+    updateMyProfile,
+  };
+}

package/src/components/TUIProfile/index.ts

@@ -0,0 +1,2 @@
+export * from './TUIProfile';
+export * from './TUIProfileDefault';

package/src/components/TUIProfile/styles/color.scss

@@ -0,0 +1,6 @@
+.tui-profile {
+  background: #ffffff;
+    &-header {
+      background: #f9fafb;
+    }
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/TUIProfile/styles/layout.scss

@@ -0,0 +1,91 @@
+.tui-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30%;
+  max-width: 400px;
+  min-width: 360px;
+  height: 100%;
+  &-header {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    line-height: 32px;
+    h1 {
+      font-weight: 600;
+      padding: 0 11px;
+    }
+  }
+  &-main {
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &-avatar {
+    margin: 13px 0;
+    position: relative;
+  }
+  .displayFlex {
+    display: flex;
+  }
+  &-nick {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    .show {
+      padding-left: 25px;
+    }
+  }
+  &-ID{
+    padding: 6px 0;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #666666;
+  }
+  &-list {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    &-item {
+      padding: 20px 0 0;
+      h4 {
+        padding-bottom: 3px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+  &-div-with-edit {
+    padding: 4px 0;
+    border-bottom: 1px solid #EEEEEE;
+  }
+  &-edit {
+    border-bottom: none !important;
+  }
+}
+
+.tui-profile-birthday {
+  .react-date-picker__wrapper{
+    display: none !important;
+  }
+  .react-date-picker__calendar {
+    position: static !important;
+  }
+  &-calendar {
+    border: none !important;
+  }
+}
+

package/src/components/Toast/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import './styles/index.scss';
+
+interface ToastProps {
+  type?: 'info' | 'warn' | 'error',
+  text?: string,
+  time?: number,
+  className?: string,
+}
+
+export function Toast<
+T extends ToastProps
+>(props:React.PropsWithChildren<T>) {
+  const {
+    type = 'info',
+    text,
+    time: propsTime,
+    className,
+  } = props;
+
+  const time = propsTime || 3;
+
+  const root = document.body;
+
+  const elements = document.createElement('div');
+
+  elements.innerText = text;
+
+  elements.className = `toast ${className} ${type}`;
+
+  root.appendChild(elements);
+
+  const toastList = document.getElementsByClassName('toast');
+
+  elements.style.left = `calc(50% - ${elements.clientWidth / 2}px)`;
+  elements.style.zIndex = `${10 + toastList.length - 1}`;
+  elements.style.top = `${elements.clientHeight * (toastList.length - 1)}px`;
+
+  const Timer = setTimeout(() => {
+    root.removeChild(elements);
+    clearTimeout(Timer);
+  }, time * 1000);
+}

package/src/components/Toast/styles/color.scss

@@ -0,0 +1,11 @@
+.info {
+  background: #FFFFFF;
+}
+.warn {
+  color: #FFFFFF;
+  background: #faad14;
+}
+.error {
+  color: #FFFFFF;
+  background: #ff4d4f;
+}

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

@@ -0,0 +1,2 @@
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/Toast/styles/layout.scss

@@ -0,0 +1,11 @@
+.toast {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  margin: 20px;
+  padding: 10px;
+  box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+  max-width: 50%;
+  word-break: break-all;
+  border-radius: 5px;
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from './TUIKit';
+export * from './TUIConversation';
+export * from './TUIConversationList';
+export * from './TUIChat';
+export * from './ConversationPreview';
+export * from './TUIChatHeader';
+export * from './TUIMessageList';
+export * from './TUIMessageInput';
+export * from './TUIProfile';
+export * from './Avatar';
+export * from './ConversationSearch';
+export * from './TUIManage';

package/src/components/untils.ts

@@ -0,0 +1,72 @@
+import {
+  format,
+  formatDistance,
+  isThisWeek,
+  isThisYear,
+  isToday,
+  isYesterday,
+} from 'date-fns';
+import TIM from 'tim-js-sdk';
+import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
+
+// Determine if it is a JSON string
+export function isJSON(str: string) {
+  // eslint-disable-next-line no-useless-escape
+  if (
+    /^[\],:{}\s]*$/.test(
+      str
+      // eslint-disable-next-line no-useless-escape
+        .replace(/\\["\\\/bfnrtu]/g, '@')
+      // eslint-disable-next-line no-useless-escape
+        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''),
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+// Determine if it is a JSON string
+export function JSONStringToParse(str: string) {
+  if (!isJSON(str)) {
+    return str;
+  }
+  return JSON.parse(str);
+}
+
+export const handleDisplayAvatar = (avatar: string, type:string = TIM.TYPES.CONV_C2C) => {
+  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 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');
+};