default props

Detaysoft · Jun 22, 2022 · 443a127 · 443a127
1 parent bfaf666
commit 443a127
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 52 deletions.
diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
@@ -3,13 +3,7 @@ import './Avatar.css'
 import classNames from 'classnames'
 import { IAvatarProps } from '../type'
 
-const Avatar: React.FC<IAvatarProps> = ({
-  type = 'default',
-  size = 'default',
-  sideElement = null,
-  lazyLoadingImage = undefined,
-  ...props
-}) => {
+const Avatar: React.FC<IAvatarProps> = ({ type = 'default', size = 'default', lazyLoadingImage = undefined, ...props }) => {
   let loadedAvatars: string[] = []
   let loading: boolean = false
   let src = props.src
@@ -77,7 +71,7 @@ const Avatar: React.FC<IAvatarProps> = ({
           className={classNames('rce-avatar', { 'rce-avatar-lazy': isLazyImage })}
         />
       )}
-      {sideElement}
+      {props.sideElement}
     </div>
   )
 }

diff --git a/src/ChatItem/ChatItem.tsx b/src/ChatItem/ChatItem.tsx
@@ -90,7 +90,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
               size='large'
               letterItem={props.letterItem}
               sideElement={
-                statusColor && (
+                statusColor ? (
                   <span
                     className='rce-citem-status'
                     style={
@@ -105,6 +105,8 @@ const ChatItem: React.FC<IChatItemProps> = ({
                   >
                     {statusText}
                   </span>
+                ) : (
+                  <></>
                 )
               }
               onError={onAvatarError}

diff --git a/src/MeetingItem/MeetingItem.tsx b/src/MeetingItem/MeetingItem.tsx
@@ -10,37 +10,50 @@ import { format } from 'timeago.js'
 import classNames from 'classnames'
 import { IMeetingItemProps } from '../type'
 
-const MeetingItem: FC<IMeetingItemProps> = props => {
+const MeetingItem: FC<IMeetingItemProps> = ({
+  id = '',
+  subjectLimit = 60,
+  onClick = () => void 0,
+  avatarFlexible = false,
+  alt = '',
+  title = '',
+  subtitle = '',
+  date = new Date(),
+  dateString = '',
+  lazyLoadingImage = undefined,
+  avatarLimit = 5,
+  avatars = [],
+  audioMuted = true,
+  audioSource = '',
+  onAvatarError = () => void 0,
+  onMeetingClick = () => void 0,
+  onShareClick = () => void 0,
+  ...props
+}) => {
   const statusColorType = props.statusColorType
-  const AVATAR_LIMIT = props.avatarLimit
+  const AVATAR_LIMIT = avatarLimit
 
-  const dateText = props.date && (props.dateString || format(props.date))
+  const dateText = date && (dateString || format(date))
 
   const subject =
-    props.subject &&
-    props.subjectLimit &&
-    props.subject.substring(0, props.subjectLimit) + (props.subject.length > props.subjectLimit ? '...' : '')
+    props.subject && subjectLimit && props.subject.substring(0, subjectLimit) + (props.subject.length > subjectLimit ? '...' : '')
 
   return (
-    <div
-      className={classNames('rce-container-mtitem', props.className)}
-      onClick={props.onClick}
-      onContextMenu={props.onContextMenu}
-    >
-      <audio autoPlay loop muted={props.audioMuted} src={props.audioSource} />
+    <div className={classNames('rce-container-mtitem', props.className)} onClick={onClick} onContextMenu={props.onContextMenu}>
+      <audio autoPlay loop muted={audioMuted} src={audioSource} />
 
       <div className='rce-mtitem'>
         <div className='rce-mtitem-top'>
           <div className='rce-mtitem-subject'>{subject}</div>
-          <div className='rce-mtitem-share' onClick={props.onShareClick}>
+          <div className='rce-mtitem-share' onClick={onShareClick}>
             <MdLink />
           </div>
         </div>
         <div className='rce-mtitem-body'>
           <div className='rce-mtitem-body--avatars'>
             {
               // props.avatars?.slice(0, AVATAR_LIMIT).map((x, i) => x instanceof Avatar ? x : (
-              props.avatars?.slice(0, AVATAR_LIMIT).map((x, i) => (
+              avatars?.slice(0, AVATAR_LIMIT).map((x, i) => (
                 <Avatar
                   key={i}
                   src={x.src}
@@ -49,7 +62,7 @@ const MeetingItem: FC<IMeetingItemProps> = props => {
                   size={'small'}
                   letterItem={x.letterItem}
                   sideElement={
-                    x.statusColor && (
+                    x.statusColor ? (
                       <span
                         className='rce-mtitem-status'
                         style={
@@ -64,18 +77,20 @@ const MeetingItem: FC<IMeetingItemProps> = props => {
                       >
                         {x.statusText}
                       </span>
+                    ) : (
+                      <></>
                     )
                   }
-                  onError={props.onAvatarError}
-                  lazyLoadingImage={props.lazyLoadingImage}
-                  type={classNames('circle', { 'flexible': props.avatarFlexible })}
+                  onError={onAvatarError}
+                  lazyLoadingImage={lazyLoadingImage}
+                  type={classNames('circle', { 'flexible': avatarFlexible })}
                 />
               ))
             }
 
-            {props.avatars && AVATAR_LIMIT && props.avatars.length > AVATAR_LIMIT && (
+            {avatars && AVATAR_LIMIT && avatars.length > AVATAR_LIMIT && (
               <div className='rce-avatar-container circle small rce-mtitem-letter'>
-                <span>{'+' + (props.avatars.length - AVATAR_LIMIT)}</span>
+                <span>{'+' + (avatars.length - AVATAR_LIMIT)}</span>
               </div>
             )}
           </div>
@@ -85,7 +100,7 @@ const MeetingItem: FC<IMeetingItemProps> = props => {
                 <MdCall />
               </div>
             )}
-            <div className='rce-mtitem-button' onClick={props.onMeetingClick}>
+            <div className='rce-mtitem-button' onClick={onMeetingClick}>
               <MdVideoCall />
             </div>
           </div>

diff --git a/src/MeetingMessage/MeetingMessage.tsx b/src/MeetingMessage/MeetingMessage.tsx
@@ -149,7 +149,8 @@ const MeetingMessage: FC<IMeetingMessageProps> = ({
                                     tooltip={x.event.avatars
                                       .slice(x.event.avatarsLimit, x.event.avatars.length)
                                       .map(avatar => avatar.title)
-                                      .join(',')}
+                                      .join(',')
+                                      .toString()}
                                   >
                                     <span className='rce-mitem-tooltip-text'>
                                       {'+' + (x.event.avatars.length - x.event.avatarsLimit)}

diff --git a/src/MessageBox/MessageBox.tsx b/src/MessageBox/MessageBox.tsx
@@ -23,8 +23,8 @@ import { format } from 'timeago.js'
 import classNames from 'classnames'
 import { MessageBoxType } from '../type'
 
-const MessageBox: React.FC<MessageBoxType> = props => {
-  const prevProps = useRef(props)
+const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...props }) => {
+  const prevProps = useRef(focus)
   const messageRef = useRef<HTMLDivElement>(null)
 
   var positionCls = classNames('rce-mbox', { 'rce-mbox-right': props.position === 'right' })
@@ -33,7 +33,7 @@ const MessageBox: React.FC<MessageBoxType> = props => {
   const dateText = props.date && (props.dateString || format(props.date))
 
   useEffect(() => {
-    if (prevProps.current.focus !== props.focus && prevProps.current.focus === true) {
+    if (prevProps.current !== focus && prevProps.current === true) {
       if (messageRef) {
         messageRef.current?.scrollIntoView({
           block: 'center',
@@ -43,21 +43,21 @@ const MessageBox: React.FC<MessageBoxType> = props => {
         props.onMessageFocused(prevProps)
       }
     }
-    prevProps.current = props
-  }, [props.focus, prevProps])
+    prevProps.current = focus
+  }, [focus, prevProps])
 
   return (
     <div ref={messageRef} className={classNames('rce-container-mbox', props.className)} onClick={props.onClick}>
       {/* {props.renderAddCmp instanceof Function && props.renderAddCmp()} */}
       {props.type === 'system' ? (
-        <SystemMessage {...props} />
+        <SystemMessage {...props} focus={focus} notch={notch} />
       ) : (
         <div
           className={classNames(
             positionCls,
             { 'rce-mbox--clear-padding': thatAbsoluteTime },
-            { 'rce-mbox--clear-notch': !props.notch },
-            { 'message-focus': props.focus }
+            { 'rce-mbox--clear-notch': !notch },
+            { 'message-focus': focus }
           )}
         >
           <div className='rce-mbox-body' onContextMenu={props.onContextMenu}>
@@ -144,20 +144,20 @@ const MessageBox: React.FC<MessageBoxType> = props => {
               </div>
             )}
 
-            {props.type === 'location' && <LocationMessage {...props} />}
+            {props.type === 'location' && <LocationMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'photo' && <PhotoMessage {...props} />}
+            {props.type === 'photo' && <PhotoMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'video' && <VideoMessage {...props} />}
+            {props.type === 'video' && <VideoMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'file' && <FileMessage {...props} />}
+            {props.type === 'file' && <FileMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'spotify' && <SpotifyMessage {...props} />}
+            {props.type === 'spotify' && <SpotifyMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'meeting' && <MeetingMessage {...props} />}
-            {props.type === 'audio' && <AudioMessage {...props} />}
+            {props.type === 'meeting' && <MeetingMessage focus={focus} notch={notch} {...props} />}
+            {props.type === 'audio' && <AudioMessage focus={focus} notch={notch} {...props} />}
 
-            {props.type === 'meetingLink' && <MeetingLink {...props} />}
+            {props.type === 'meetingLink' && <MeetingLink focus={focus} notch={notch} {...props} />}
 
             <div
               className={classNames(
@@ -182,10 +182,10 @@ const MessageBox: React.FC<MessageBoxType> = props => {
             </div>
           </div>
 
-          {props.notch &&
+          {notch &&
             (props.position === 'right' ? (
               <svg
-                className={classNames('rce-mbox-right-notch', { 'message-focus': props.focus })}
+                className={classNames('rce-mbox-right-notch', { 'message-focus': focus })}
                 xmlns='http://www.w3.org/2000/svg'
                 viewBox='0 0 20 20'
               >
@@ -194,7 +194,7 @@ const MessageBox: React.FC<MessageBoxType> = props => {
             ) : (
               <div>
                 <svg
-                  className={classNames('rce-mbox-left-notch', { 'message-focus': props.focus })}
+                  className={classNames('rce-mbox-left-notch', { 'message-focus': focus })}
                   xmlns='http://www.w3.org/2000/svg'
                   viewBox='0 0 20 20'
                 >

diff --git a/src/declaration.d.ts b/src/declaration.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 declare module 'react' {
-  interface HTMLAttributes<T> extends DOMAttributes<T> {
+  interface HTMLAttributes<T> extends React.DOMAttributes<T> {
     tooltip?: any
   }
 }
diff --git a/src/type.d.ts b/src/type.d.ts
@@ -1018,7 +1018,7 @@ export interface IAvatarProps {
   size?: Object
   className?: string
   alt?: string
-  sideElement?: React.ReactChild
+  sideElement?: React.ReactElement
   onError?: React.ReactEventHandler
   statusColorType?: string
   statusColor?: string