default props

Detaysoft · Jun 22, 2022 · 3f66d27 · 3f66d27
1 parent c4aec0d
commit 3f66d27
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 116 deletions.
diff --git a/example/utils/messageTypes.ts b/example/utils/messageTypes.ts
@@ -16,18 +16,18 @@ export const photoMessage: MessageType = {
   retracted: false,
   text: loremIpsum({ count: 1, units: 'sentences' }),
   titleColor: getRandomColor(),
-  uri: `data:image/png;base64,${photo(150)}`,
   status: 'sent',
   data: {
+    uri: `data:image/png;base64,${photo(150)}`,
     status: {
       click: true,
       loading: 0.5,
       download: false, //type === "video",
       error: false,
     },
+    width: 300,
+    height: 300,
   },
-  width: 300,
-  height: 300,
 }
 
 export const locationMessage: MessageType = {
@@ -52,10 +52,12 @@ export const locationMessage: MessageType = {
   copiableDate: true,
   retracted: false,
   className: '',
-  latitude: '37.773972',
-  longitude: '-122.431297',
-  staticURL:
-    'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-circle+FF0000(LONGITUDE,LATITUDE)/LONGITUDE,LATITUDE,ZOOM/270x200@2x?access_token=KEY',
+  data: {
+    latitude: '37.773972',
+    longitude: '-122.431297',
+    staticURL:
+      'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-circle+FF0000(LONGITUDE,LATITUDE)/LONGITUDE,LATITUDE,ZOOM/270x200@2x?access_token=KEY',
+  },
   reply:
     token() >= 1
       ? {
@@ -76,9 +78,9 @@ export const fileMessage: MessageType = {
       download: () => {}, //item === "video",
       error: false,
     },
+    size: '100MB',
   },
   status: 'read',
-  size: '100MB',
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',
   text: loremIpsum({ count: 1, units: 'sentences' }),
@@ -176,19 +178,20 @@ export const videoMessage: MessageType = {
   forwarded: true,
   replyButton: true,
   removeButton: true,
-  videoURL: token() >= 1 ? 'https://www.w3schools.com/html/mov_bbb.mp4' : 'http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4',
-  uri: `data:image/png;base64,${photo(150)}`,
+  controlsList: '',
   status: 'read',
   data: {
+    uri: `data:image/png;base64,${photo(150)}`,
+    videoURL: token() >= 1 ? 'https://www.w3schools.com/html/mov_bbb.mp4' : 'http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4',
     status: {
       click: true,
       loading: 0.5,
       download: true, //item === "video",
       error: false,
     },
+    width: 300,
+    height: 200,
   },
-  width: 300,
-  height: 200,
   notch: true,
   copiableDate: true,
   retracted: false,
@@ -223,9 +226,11 @@ export const audioMessage: MessageType = {
   copiableDate: true,
   retracted: false,
   className: '',
-  audioURL: 'https://www.w3schools.com/html/horse.mp3',
-  audioType: 'audio/mp3',
-  controlsList: 'nodownload',
+  data: {
+    audioURL: 'https://www.w3schools.com/html/horse.mp3',
+    audioType: 'audio/mp3',
+    controlsList: 'nodownload',
+  },
   reply:
     token() >= 1
       ? {

diff --git a/src/AudioMessage/AudioMessage.tsx b/src/AudioMessage/AudioMessage.tsx
@@ -3,12 +3,12 @@ import { IAudioMessageProps } from '../type'
 import './AudioMessage.css'
 
 const AudioMessage: React.FC<IAudioMessageProps> = props => {
-  const controlsList = props.controlsList
+  const controlsList = props.data.controlsList
 
   return (
     <div className={'rce-mbox-audio'} style={props.customStyle}>
       <audio {...props.audioProps} controls controlsList={controlsList ? controlsList : 'nodownload'}>
-        <source src={props.audioURL} type={props.audioType || 'audio/mp3'} />
+        <source src={props.data.audioURL} type={props.data.audioType || 'audio/mp3'} />
         Your browser does not support the audio element.
       </audio>
       {props.text && <div className='rce-mbox-text'>{props.text}</div>}

diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
@@ -3,18 +3,24 @@ import './Avatar.css'
 import classNames from 'classnames'
 import { IAvatarProps } from '../type'
 
-const Avatar: React.FC<IAvatarProps> = props => {
+const Avatar: React.FC<IAvatarProps> = ({
+  type = 'default',
+  size = 'default',
+  sideElement = null,
+  lazyLoadingImage = undefined,
+  ...props
+}) => {
   let loadedAvatars: string[] = []
   let loading: boolean = false
   let src = props.src
   let isLazyImage: boolean = false
 
   useEffect(() => {
-    if (props.lazyLoadingImage) {
+    if (lazyLoadingImage) {
       isLazyImage = true
 
       if (!isLoaded(src)) {
-        src = props.lazyLoadingImage
+        src = lazyLoadingImage
 
         if (!loading) {
           requestImage(props.src)
@@ -58,7 +64,7 @@ const Avatar: React.FC<IAvatarProps> = props => {
   }
 
   return (
-    <div className={classNames('rce-avatar-container', props.type, props.size, props.className)}>
+    <div className={classNames('rce-avatar-container', type, size, props.className)}>
       {props.letterItem ? (
         <div className='rce-avatar-letter-background' style={{ backgroundColor: stringToColour(props.letterItem.id) }}>
           <span className='rce-avatar-letter'>{props.letterItem.letter}</span>
@@ -71,7 +77,7 @@ const Avatar: React.FC<IAvatarProps> = props => {
           className={classNames('rce-avatar', { 'rce-avatar-lazy': isLazyImage })}
         />
       )}
-      {props.sideElement}
+      {sideElement}
     </div>
   )
 }

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -2,32 +2,43 @@ import './Button.css'
 import classNames from 'classnames'
 import { IButtonProps } from '../type'
 
-const Button: React.FC<IButtonProps> = props => {
+const Button: React.FC<IButtonProps> = ({
+  text = '',
+  disabled = false,
+  type = null,
+  icon = null,
+  backgroundColor = '#3979aa',
+  color = 'white',
+  className = null,
+  buttonRef = null,
+  title = null,
+  ...props
+}) => {
   return (
     <button
-      ref={props.buttonRef}
-      title={props.title}
-      className={classNames('rce-button', props.type, props.className)}
+      ref={buttonRef}
+      title={title}
+      className={classNames('rce-button', type, className)}
       style={{
-        backgroundColor: props.backgroundColor,
-        color: props.color,
-        borderColor: props.backgroundColor,
+        backgroundColor: backgroundColor,
+        color: color,
+        borderColor: backgroundColor,
       }}
-      disabled={props.disabled}
+      disabled={disabled}
       onClick={props.onClick}
     >
-      {props.icon ? (
+      {icon ? (
         <span className='rce-button-icon--container'>
-          {(props.icon.float === 'right' || !props.icon.float) && <span>{props.text}</span>}
+          {(icon.float === 'right' || !icon.float) && <span>{text}</span>}
 
-          <span style={{ float: props.icon.float, fontSize: props.icon.size || 12 }} className='rce-button-icon'>
-            {props.icon.component}
+          <span style={{ float: icon.float, fontSize: icon.size || 12 }} className='rce-button-icon'>
+            {icon.component}
           </span>
 
-          {props.icon.float === 'left' && <span>{props.text}</span>}
+          {icon.float === 'left' && <span>{text}</span>}
         </span>
       ) : (
-        <span>{props.text}</span>
+        <span>{text}</span>
       )}
     </button>
   )

diff --git a/src/ChatItem/ChatItem.tsx b/src/ChatItem/ChatItem.tsx
@@ -10,9 +10,27 @@ import classNames from 'classnames'
 import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
 import { IChatItemProps } from '../type'
 
-const ChatItem: React.FC<IChatItemProps> = props => {
+const ChatItem: React.FC<IChatItemProps> = ({
+  id = '',
+  onClick = null,
+  avatar = '',
+  avatarFlexible = false,
+  alt = '',
+  title = '',
+  subtitle = '',
+  date = new Date(),
+  unread = 0,
+  statusColor = null,
+  statusColorType = 'badge',
+  statusText = null,
+  dateString = null,
+  lazyLoadingImage = undefined,
+  onAvatarError = () => void 0,
+  showMute = null,
+  showVideoCall = null,
+  ...props
+}) => {
   const [onHoverTool, setOnHoverTool] = useState(false)
-  const statusColorType = props.statusColorType
   const [onDrag, setOnDrag] = useState(false)
 
   const handleOnMouseEnter = () => {
@@ -28,103 +46,101 @@ const ChatItem: React.FC<IChatItemProps> = props => {
 
     if (onHoverTool === true) return
 
-    props.onClick?.(e)
+    onClick?.(e)
   }
 
   const onDragOver = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragOver instanceof Function) props.onDragOver(e, props.id)
+    if (props.onDragOver instanceof Function) props.onDragOver(e, id)
   }
 
   const onDragEnter = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragEnter instanceof Function) props.onDragEnter(e, props.id)
+    if (props.onDragEnter instanceof Function) props.onDragEnter(e, id)
     if (!onDrag) setOnDrag(true)
   }
 
   const onDragLeave = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragLeave instanceof Function) props.onDragLeave(e, props.id)
+    if (props.onDragLeave instanceof Function) props.onDragLeave(e, id)
     if (onDrag) setOnDrag(false)
   }
 
   const onDrop = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDrop instanceof Function) props.onDrop(e, props.id)
+    if (props.onDrop instanceof Function) props.onDrop(e, id)
     if (onDrag) setOnDrag(false)
   }
 
   return (
     <div
-      key={props.id as Key}
+      key={id as Key}
       className={classNames('rce-container-citem', props.className)}
       onClick={handleOnClick}
       onContextMenu={props.onContextMenu}
     >
       <div className='rce-citem' onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
-        {!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
+        {!!props.onDragComponent && onDrag && props.onDragComponent(id)}
         {((onDrag && !props.onDragComponent) || !onDrag) && [
           <div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
             <Avatar
-              src={props.avatar}
-              alt={props.alt}
+              src={avatar}
+              alt={alt}
               className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
               size='large'
               letterItem={props.letterItem}
               sideElement={
-                props.statusColor && (
+                statusColor && (
                   <span
                     className='rce-citem-status'
                     style={
                       statusColorType === 'encircle'
                         ? {
-                            border: `solid 2px ${props.statusColor}`,
+                            border: `solid 2px ${statusColor}`,
                           }
                         : {
-                            backgroundColor: props.statusColor,
+                            backgroundColor: statusColor,
                           }
                     }
                   >
-                    {props.statusText}
+                    {statusText}
                   </span>
                 )
               }
-              onError={props.onAvatarError}
-              lazyLoadingImage={props.lazyLoadingImage}
-              type={classNames('circle', { 'flexible': props.avatarFlexible })}
+              onError={onAvatarError}
+              lazyLoadingImage={lazyLoadingImage}
+              type={classNames('circle', { 'flexible': avatarFlexible })}
             />
           </div>,
           <div className='rce-citem-body'>
             <div className='rce-citem-body--top'>
-              <div className='rce-citem-body--top-title'>{props?.title}</div>
-              <div className='rce-citem-body--top-time'>{props.date && (props.dateString || format(props.date))}</div>
+              <div className='rce-citem-body--top-title'>{title}</div>
+              <div className='rce-citem-body--top-time'>{date && (dateString || format(date))}</div>
             </div>
 
             <div className='rce-citem-body--bottom'>
-              <div className='rce-citem-body--bottom-title'>{props?.subtitle}</div>
+              <div className='rce-citem-body--bottom-title'>{subtitle}</div>
               <div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
-                {props.showMute && (
+                {showMute && (
                   <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
                     {props.muted === true && <MdVolumeOff />}
                     {props.muted === false && <MdVolumeUp />}
                   </div>
                 )}
-                {props.showVideoCall && (
+                {showVideoCall && (
                   <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
                     <MdVideoCall />
                   </div>
                 )}
               </div>
               <div className='rce-citem-body--bottom-tools-item-hidden-hover'>
-                {props.showMute && props.muted && (
+                {showMute && props.muted && (
                   <div className='rce-citem-body--bottom-tools-item'>
                     <MdVolumeOff />
                   </div>
                 )}
               </div>
-              <div className='rce-citem-body--bottom-status'>
-                {props.unread && props.unread > 0 ? <span>{props.unread}</span> : null}
-              </div>
+              <div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
             </div>
           </div>,
         ]}

diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import './Dropdown.css'
 import classNames from 'classnames'
 import Button from '../Button/Button'
 import { IDropdownProps, IDropdownItemType } from '../type'
 
-const Dropdown: React.FC<IDropdownProps> = props => {
-  const [show, setShow] = useState<boolean>(false)
+const Dropdown: React.FC<IDropdownProps> = ({ animationPosition = 'nortwest', animationType = 'default', ...props }) => {
+  const [show, setShow] = useState<boolean>(undefined)
 
   const onBlur = () => {
     if (show === true) setShow(false)
@@ -17,8 +17,8 @@ const Dropdown: React.FC<IDropdownProps> = props => {
       <div
         className={classNames(
           'rce-dropdown',
-          props.animationType,
-          'rce-dropdown-open__' + props.animationPosition,
+          animationType,
+          'rce-dropdown-open__' + animationPosition,
           { 'dropdown-hide': show === false },
           { 'dropdown-show': show === true }
         )}