@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/Profile/DatePicker/DatePicker.scss

@@ -0,0 +1,175 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.date-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  border-radius: 8px;
+  padding: 16px;
+  min-width: 280px;
+  user-select: none;
+
+  @include theme() {
+    background: get(dropdown-color-default);
+  }
+
+  &.tui-profile-birthday {
+    position: relative;
+    top: auto;
+    left: auto;
+    margin-top: 8px;
+  }
+}
+
+.date-picker-header {
+  margin-bottom: 16px;
+}
+
+.date-picker-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.date-picker-nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  @include theme() {
+    color: get(text-color-secondary);
+  }
+
+  &:hover {
+    @include theme() {
+      background: get(dropdown-color-hover);
+      color: get(text-color-primary);
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.date-picker-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  justify-content: center;
+  font-weight: 600;
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
+}
+
+.date-picker-month {
+  font-size: 16px;
+}
+
+.date-picker-year {
+  font-size: 16px;
+
+  @include theme() {
+    color: get(text-color-secondary);
+  }
+}
+
+.date-picker-body {
+  .date-picker-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    margin-bottom: 8px;
+  }
+
+  .date-picker-weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    @include theme() {
+      color: get(text-color-secondary);
+    }
+  }
+
+  .date-picker-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+
+  .date-picker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    font-size: 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
+    &:hover:not(.empty) {
+      @include theme() {
+        background: get(dropdown-color-hover);
+      }
+    }
+
+    &.empty {
+      cursor: default;
+    }
+
+    &.today {
+      font-weight: 600;
+
+      @include theme() {
+        background: get(bg-color-input);
+        color: get(text-color-link);
+      }
+    }
+
+    &.selected {
+      font-weight: 600;
+
+      @include theme() {
+        background: get(text-color-link);
+        color: get(dropdown-color-default);
+      }
+
+      &:hover {
+        @include theme() {
+          background: get(text-color-link);
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &:active:not(.empty) {
+      transform: scale(0.95);
+    }
+  }
+}

package/src/components/Profile/DatePicker/DatePicker.tsx

@@ -0,0 +1,184 @@
+import type React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { IconChevronLeft, IconChevronRight, useUIKit } from '@tencentcloud/uikit-base-component-react';
+import './DatePicker.scss';
+
+interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
+  format?: string;
+  className?: string;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  value = new Date(),
+  onChange,
+  isOpen = false,
+  onClose,
+  format: _format = 'y-MM-dd',
+  className = '',
+}) => {
+  const { t } = useUIKit();
+  const [displayDate, setDisplayDate] = useState(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [selectedDate, setSelectedDate] = useState(value);
+  const datePickerRef = useRef<HTMLDivElement>(null);
+
+  // 获取国际化的月份名称
+  const getMonthNames = () => [
+    t('DateRangePicker.January'),
+    t('DateRangePicker.February'),
+    t('DateRangePicker.March'),
+    t('DateRangePicker.April'),
+    t('DateRangePicker.May'),
+    t('DateRangePicker.June'),
+    t('DateRangePicker.July'),
+    t('DateRangePicker.August'),
+    t('DateRangePicker.September'),
+    t('DateRangePicker.October'),
+    t('DateRangePicker.November'),
+    t('DateRangePicker.December'),
+  ];
+
+  // 获取国际化的星期名称
+  const getWeekdayNames = () => [
+    t('DateRangePicker.Sunday'),
+    t('DateRangePicker.Monday'),
+    t('DateRangePicker.Tuesday'),
+    t('DateRangePicker.Wednesday'),
+    t('DateRangePicker.Thursday'),
+    t('DateRangePicker.Friday'),
+    t('DateRangePicker.Saturday'),
+  ];
+
+  useEffect(() => {
+    if (value) {
+      setSelectedDate(value);
+      setDisplayDate(new Date(value.getFullYear(), value.getMonth(), 1));
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (datePickerRef.current && !datePickerRef.current.contains(event.target as Node)) {
+        onClose?.();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  const getDaysInMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+
+  const getFirstDayOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+
+  const handlePrevMonth = () => {
+    setDisplayDate(new Date(displayDate.getFullYear(), displayDate.getMonth() - 1, 1));
+  };
+
+  const handleNextMonth = () => {
+    setDisplayDate(new Date(displayDate.getFullYear(), displayDate.getMonth() + 1, 1));
+  };
+
+  const handlePrevYear = () => {
+    setDisplayDate(new Date(displayDate.getFullYear() - 1, displayDate.getMonth(), 1));
+  };
+
+  const handleNextYear = () => {
+    setDisplayDate(new Date(displayDate.getFullYear() + 1, displayDate.getMonth(), 1));
+  };
+
+  const handleDateClick = (day: number) => {
+    const newDate = new Date(displayDate.getFullYear(), displayDate.getMonth(), day);
+    setSelectedDate(newDate);
+    onChange?.(newDate);
+    onClose?.();
+  };
+
+  const renderCalendarDays = () => {
+    const daysInMonth = getDaysInMonth(displayDate);
+    const firstDay = getFirstDayOfMonth(displayDate);
+    const days = [];
+
+    // Add empty cells for days before the first day of the month
+    for (let i = 0; i < firstDay; i += 1) {
+      days.push(<div key={`empty-${i}`} className="date-picker-day empty"></div>);
+    }
+
+    // Add days of the month
+    for (let day = 1; day <= daysInMonth; day += 1) {
+      const isSelected = selectedDate.getDate() === day
+        && selectedDate.getMonth() === displayDate.getMonth()
+        && selectedDate.getFullYear() === displayDate.getFullYear();
+
+      const isToday = new Date().getDate() === day
+        && new Date().getMonth() === displayDate.getMonth()
+        && new Date().getFullYear() === displayDate.getFullYear();
+
+      days.push(
+        <div
+          key={day}
+          className={`date-picker-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''}`}
+          onClick={() => handleDateClick(day)}
+        >
+          {day}
+        </div>,
+      );
+    }
+
+    return days;
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const monthNames = getMonthNames();
+  const weekdayNames = getWeekdayNames();
+
+  return (
+    <div ref={datePickerRef} className={`date-picker ${className}`}>
+      <div className="date-picker-header">
+        <div className="date-picker-nav">
+          <button className="date-picker-nav-btn" onClick={handlePrevYear}>
+            <IconChevronLeft />
+            <IconChevronLeft />
+          </button>
+          <button className="date-picker-nav-btn" onClick={handlePrevMonth}>
+            <IconChevronLeft />
+          </button>
+          <div className="date-picker-title">
+            <span className="date-picker-month">{monthNames[displayDate.getMonth()]}</span>
+            <span className="date-picker-year">{displayDate.getFullYear()}</span>
+          </div>
+          <button className="date-picker-nav-btn" onClick={handleNextMonth}>
+            <IconChevronRight />
+          </button>
+          <button className="date-picker-nav-btn" onClick={handleNextYear}>
+            <IconChevronRight />
+            <IconChevronRight />
+          </button>
+        </div>
+      </div>
+      <div className="date-picker-body">
+        <div className="date-picker-weekdays">
+          {weekdayNames.map(day => (
+            <div key={day} className="date-picker-weekday">{day}</div>
+          ))}
+        </div>
+        <div className="date-picker-days">
+          {renderCalendarDays()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;

package/src/components/Profile/DatePicker/index.ts

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

package/src/components/Profile/Profile.tsx

@@ -4,10 +4,10 @@ import { MyProfile } from './myProfile/index';
 import './styles/index.scss';
 import { useMyProfile } from './hooks';
 import { TUIProfileDefault } from './ProfileDefault';
-import { useUIManagerStore } from '../../store';
+import { useUIManagerState } from '../../states';
 
 interface TUIProfileProps {
-  className?: string;
+  className?: string | undefined;
   TUIProfile?: React.ComponentType<any>;
 }
 
@@ -21,21 +21,20 @@ function UnMemoizedProfile<T extends TUIProfileProps>(
 
   const { myProfile, updateMyProfile } = useMyProfile();
 
-  const { setTUIProfileShow, TUIProfileShow } = useUIManagerStore('TUIProfile');
+  const { setTUIProfileShow, TUIProfileShow } = useUIManagerState('TUIProfile');
 
   const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
 
   return (
     <>
-      {/* //eslint-disable-next-line
-    @ts-ignore */}
-      <MyProfile
-        profile={myProfile}
-        handleAvatar={() => {
-          setTUIProfileShow && setTUIProfileShow(true);
-        }}
-      />
-      {TUIProfileShow && (
+      {!TUIProfileShow ? (
+        <MyProfile
+          profile={myProfile}
+          handleAvatar={() => {
+            setTUIProfileShow && setTUIProfileShow(!TUIProfileShow);
+          }}
+        />
+      ) : (
         <TUIProfileUIComponent
           className={className}
           userInfo={myProfile}

package/src/components/Profile/ProfileDefault.tsx

@@ -1,66 +1,59 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import DatePicker from 'react-date-picker';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import TencentCloudChat, { Profile } from '@tencentcloud/chat';
-import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
-import { isH5 } from '../../utils/env';
-import { useUIManagerStore } from '../../store';
-
-import { Avatar } from '../Avatar';
+import type { PropsWithChildren } from 'react';
+import React, { useState } from 'react';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { IconChevronLeft, useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { Avatar } from 'tuikit-atomicx-react';
+import { useUIManagerState } from '../../states';
 import { DivWithEdit } from '../DivWithEdit';
-import { Icon, IconTypes } from '../Icon';
-import { handleDisplayAvatar } from '../utils';
+import { DatePicker } from './DatePicker';
+import type { Profile } from '@tencentcloud/chat';
+import type { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
 
 const gender: any = {
-  [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
-  [TencentCloudChat.TYPES.GENDER_MALE]: 'male',
-  [TencentCloudChat.TYPES.GENDER_FEMALE]: 'female',
+  [TUIChatEngine.TYPES.GENDER_UNKNOWN]: 'Unknown',
+  [TUIChatEngine.TYPES.GENDER_MALE]: 'male',
+  [TUIChatEngine.TYPES.GENDER_FEMALE]: 'female',
 };
 const allowType: any = {
-  [TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY]: 'allowAny',
-  [TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM]: 'needConfirm',
-  [TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY]: 'denyAny',
+  [TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY]: 'allowAny',
+  [TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM]: 'needConfirm',
+  [TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY]: 'denyAny',
 };
 
-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: 'Unknown',
+    value: TUIChatEngine.TYPES.GENDER_UNKNOWN,
+  },
   {
     label: 'Male',
-    value: TencentCloudChat.TYPES.GENDER_MALE,
+    value: TUIChatEngine.TYPES.GENDER_MALE,
   },
   {
     label: 'Female',
-    value: TencentCloudChat.TYPES.GENDER_FEMALE,
+    value: TUIChatEngine.TYPES.GENDER_FEMALE,
   },
 ];
 
 const allowTypeList = [
   {
     label: 'AllowAny',
-    value: TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY,
+    value: TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY,
   },
   {
     label: 'NeedConfirm',
-    value: TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM,
+    value: TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM,
   },
   {
     label: 'DenyAny',
-    value: TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY,
+    value: TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY,
   },
 ];
 
 export interface TUIProfileDefaultProps {
-  userInfo?: Profile;
-  update?: (option: UpdateMyProfileParams) => void;
-  className?: string;
+  userInfo?: Profile | undefined;
+  update?: ((option: UpdateMyProfileParams) => void) | undefined;
+  className?: string | undefined;
 }
 
 function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
@@ -73,7 +66,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   } = props;
 
   const { t } = useUIKit();
-  const { setTUIProfileShow } = useUIManagerStore('TUIProfileDefault');
+  const { setTUIProfileShow } = useUIManagerState('TUIProfileDefault');
 
   const [isEditName, setIsEditName] = useState('');
 
@@ -108,7 +101,55 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     return `${year}${month}${day}`;
   };
 
-  let editListMap: any = [
+  const handleSetEditName = (name: string) => {
+    setIsEditName(name);
+  };
+
+  const confirm = (options: any) => {
+    if (update) {
+      update(options);
+    }
+    setIsEditName('');
+  };
+
+  // edit gender
+  const editGender = (data: any) => {
+    confirm({ gender: data.value });
+  };
+
+  // edit allowType
+  const editAllowType = (data: any) => {
+    confirm({ allowType: data.value });
+  };
+
+  // edit birthday
+  function editBirthday(value: Date) {
+    confirm({
+      birthday: Number(editBirthdayFormat(value)),
+    });
+  }
+
+  // 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);
+  };
+
+  const editListMap: any = [
     {
       name: 'Signature',
       value: userInfo?.selfSignature,
@@ -138,7 +179,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
                   role="menuitem"
                   tabIndex={index}
                   key={key}
-                  onClick={() => { editGender(item); }}
+                  onClick={() => {
+                    editGender(item);
+                  }}
                 >
                   {t(`TUIProfile.${item.label}`)}
                 </li>
@@ -166,7 +209,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
                   role="menuitem"
                   tabIndex={index}
                   key={key}
-                  onClick={() => { editAllowType(item); }}
+                  onClick={() => {
+                    editAllowType(item);
+                  }}
                 >
                   {t(`TUIProfile.${item.label}`)}
                 </li>
@@ -183,87 +228,33 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
       children: (
         <DatePicker
           className="tui-profile-birthday"
-          calendarClassName="tui-profile-birthday-calendar"
           isOpen
           format="y-MM-dd"
-          onChange={(value: Date) => { editBirthday(value); }}
+          onChange={editBirthday}
           value={transformBirthdayStringToDate(`${userInfo?.birthday}`)}
         />
       ),
     },
   ];
-  if (isH5) {
-    editListMap = editListMap.filter((item: any) => item.name !== 'Birthday');
-  }
-  const handleSetEditName = (name: string) => {
-    setIsEditName(name);
-  };
-
-  const confirm = (options: any) => {
-    update && 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: any) => {
-    confirm({ gender: data.value });
-  };
-
-  // edit allowType
-  const editAllowType = (data: any) => {
-    confirm({ allowType: data.value });
-  };
-
-  // edit birthday
-  const editBirthday = (value: Date) => {
-    confirm({
-      birthday: Number(editBirthdayFormat(value)),
-    });
-  };
 
   return (
     <div className={`${className} tui-profile`}>
-      <header className="tui-profile-header">
-        <Icon
-          width={9}
-          height={16}
-          type={IconTypes.BACK}
-          onClick={() => { setTUIProfileShow && setTUIProfileShow(false); }}
-        />
+      <header
+        className="tui-profile-header"
+        onClick={() => {
+          if (setTUIProfileShow) {
+            setTUIProfileShow(false);
+          }
+        }}
+      >
+        <IconChevronLeft size='24px' />
         <h1>{t('TUIProfile.Personal information')}</h1>
       </header>
       <main className="tui-profile-main">
         <div className="tui-profile-avatar">
           <Avatar
-            image={userInfo && handleDisplayAvatar(userInfo?.avatar)}
-            size={94}
-            update={editAvatar}
-            list={avatarList}
+            src={userInfo?.avatar || ''}
+            size="xl"
           />
         </div>
         <DivWithEdit
@@ -274,7 +265,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
           toggle={handleSetEditName}
           isEdit={isEditName === 'nick'}
           confirm={editText}
-          close={() => { setIsEditName(''); }}
+          close={() => {
+            setIsEditName('');
+          }}
         />
         <div className="tui-profile-ID">
           <h5>ID:</h5>
@@ -297,7 +290,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
                   toggle={handleSetEditName}
                   isEdit={isEditName === item.name}
                   confirm={editText}
-                  close={() => { setIsEditName(''); }}
+                  close={() => {
+                    setIsEditName('');
+                  }}
                 >
                   {item?.children}
                 </DivWithEdit>