default props edites

src/Button/Button.tsx

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

src/ChatItem/ChatItem.tsx

@@ -11,23 +11,12 @@ import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
 import { IChatItemProps } from '../type'
 
 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)
@@ -46,64 +35,64 @@ const ChatItem: React.FC<IChatItemProps> = ({
 
     if (onHoverTool === true) return
 
-    onClick?.(e)
+    props.onClick?.(e)
   }
 
   const onDragOver = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragOver instanceof Function) props.onDragOver(e, id)
+    if (props.onDragOver instanceof Function) props.onDragOver(e, props.id)
   }
 
   const onDragEnter = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragEnter instanceof Function) props.onDragEnter(e, id)
+    if (props.onDragEnter instanceof Function) props.onDragEnter(e, props.id)
     if (!onDrag) setOnDrag(true)
   }
 
   const onDragLeave = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDragLeave instanceof Function) props.onDragLeave(e, id)
+    if (props.onDragLeave instanceof Function) props.onDragLeave(e, props.id)
     if (onDrag) setOnDrag(false)
   }
 
   const onDrop = (e: React.MouseEvent) => {
     e.preventDefault()
-    if (props.onDrop instanceof Function) props.onDrop(e, id)
+    if (props.onDrop instanceof Function) props.onDrop(e, props.id)
     if (onDrag) setOnDrag(false)
   }
 
   return (
     <div
-      key={id as Key}
+      key={props.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(id)}
+        {!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
         {((onDrag && !props.onDragComponent) || !onDrag) && [
           <div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
             <Avatar
-              src={avatar}
-              alt={alt}
+              src={props.avatar}
+              alt={props.alt}
               className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
               size='large'
               letterItem={props.letterItem}
               sideElement={
-                statusColor ? (
+                props.statusColor ? (
                   <span
                     className='rce-citem-status'
                     style={
                       statusColorType === 'encircle'
                         ? {
-                            border: `solid 2px ${statusColor}`,
+                            border: `solid 2px ${props.statusColor}`,
                           }
                         : {
-                            backgroundColor: statusColor,
+                            backgroundColor: props.statusColor,
                           }
                     }
                   >
-                    {statusText}
+                    {props.statusText}
                   </span>
                 ) : (
                   <></>
@@ -116,27 +105,27 @@ const ChatItem: React.FC<IChatItemProps> = ({
           </div>,
           <div className='rce-citem-body'>
             <div className='rce-citem-body--top'>
-              <div className='rce-citem-body--top-title'>{title}</div>
-              <div className='rce-citem-body--top-time'>{date && (dateString || format(date))}</div>
+              <div className='rce-citem-body--top-title'>{props.title}</div>
+              <div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
             </div>
 
             <div className='rce-citem-body--bottom'>
-              <div className='rce-citem-body--bottom-title'>{subtitle}</div>
+              <div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
               <div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
-                {showMute && (
+                {props.showMute && (
                   <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
                     {props.muted === true && <MdVolumeOff />}
                     {props.muted === false && <MdVolumeUp />}
                   </div>
                 )}
-                {showVideoCall && (
+                {props.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'>
-                {showMute && props.muted && (
+                {props.showMute && props.muted && (
                   <div className='rce-citem-body--bottom-tools-item'>
                     <MdVolumeOff />
                   </div>

src/Input/Input.tsx

@@ -4,38 +4,30 @@ import classNames from 'classnames'
 import { IInputProps } from '../type'
 
 const Input: React.FC<IInputProps> = ({
-  type = "text",
-  placeholder = "",
-  defaultValue = "",
-  onChange = null,
-  rightButtons = null,
-  leftButtons = null,
+  type = 'text',
   multiline = false,
   minHeight = 25,
   maxHeight = 200,
   autoHeight = true,
-  referance = null,
-  maxlength = null,
-  onMaxLengthExceed = null,
   autofocus = false,
   ...props
 }) => {
   useEffect(() => {
-    if (autofocus === true) referance?.referance.current?.focus()
+    if (autofocus === true) props.referance?.current?.focus()
 
     if (props.clear instanceof Function) {
       props.clear(clear)
     }
   }, [])
 
   const onChangeEvent = (e: any) => {
-    if (maxlength && (e.target.value || '').length > maxlength) {
-      if (onMaxLengthExceed instanceof Function) onMaxLengthExceed()
+    if (props.maxlength && (e.target.value || '').length > props.maxlength) {
+      if (props.onMaxLengthExceed instanceof Function) props.onMaxLengthExceed()
 
-      if (referance?.referance.current?.value == (e.target.value || '').substring(0, maxlength)) return
+      if (props.referance?.current?.value == (e.target.value || '').substring(0, props.maxlength)) return
     }
 
-    if (onChange instanceof Function) onChange(e)
+    if (props.onChange instanceof Function) props.onChange(e)
 
     if (multiline === true) {
       if (autoHeight === true) {
@@ -57,26 +49,26 @@ const Input: React.FC<IInputProps> = ({
   const clear = () => {
     var _event = {
       FAKE_EVENT: true,
-      target: referance?.current,
+      target: props.referance?.current,
     }
 
-    if (referance?.current?.value) {
-      referance.current.value = ''
+    if (props.referance?.current?.value) {
+      props.referance.current.value = ''
     }
 
     onChangeEvent(_event)
   }
 
   return (
     <div className={classNames('rce-container-input', props.className)}>
-      {leftButtons && <div className='rce-input-buttons'>{leftButtons}</div>}
+      {props.leftButtons && <div className='rce-input-buttons'>{props.leftButtons}</div>}
       {multiline === false ? (
         <input
-          ref={referance}
+          ref={props.referance}
           type={type}
           className={classNames('rce-input')}
-          placeholder={placeholder}
-          defaultValue={defaultValue}
+          placeholder={props.placeholder}
+          defaultValue={props.defaultValue}
           style={props.inputStyle}
           onChange={onChangeEvent}
           onCopy={props.onCopy}
@@ -93,10 +85,10 @@ const Input: React.FC<IInputProps> = ({
         />
       ) : (
         <textarea
-          ref={referance}
+          ref={props.referance}
           className={classNames('rce-input', 'rce-input-textarea')}
-          placeholder={placeholder}
-          defaultValue={defaultValue}
+          placeholder={props.placeholder}
+          defaultValue={props.defaultValue}
           style={props.inputStyle}
           onChange={onChangeEvent}
           onCopy={props.onCopy}
@@ -112,7 +104,7 @@ const Input: React.FC<IInputProps> = ({
           onKeyUp={props.onKeyUp}
         ></textarea>
       )}
-      {rightButtons && <div className='rce-input-buttons'>{rightButtons}</div>}
+      {props.rightButtons && <div className='rce-input-buttons'>{props.rightButtons}</div>}
     </div>
   )
 }

src/LocationMessage/LocationMessage.tsx

@@ -6,20 +6,14 @@ const STATIC_URL =
   'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY'
 const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM'
 
-const LocationMessage: React.FC<ILocationMessageProps> = ({
-  apiKey = '',
-  markerColor = 'red',
-  target = '_blank',
-  zoom = '14',
-  ...props
-}) => {
+const LocationMessage: React.FC<ILocationMessageProps> = ({ markerColor = 'red', target = '_blank', zoom = '14', ...props }) => {
   const buildURL = (url: string) => {
     return url
       .replace(/LATITUDE/g, props?.data.latitude)
       .replace(/LONGITUDE/g, props?.data.longitude)
       .replace('MARKER_COLOR', markerColor)
       .replace('ZOOM', zoom)
-      .replace('KEY', apiKey)
+      .replace('KEY', props.apiKey)
   }
   const className = () => {
     var _className = classNames('rce-mbox-location', props.className)

src/MeetingItem/MeetingItem.tsx

@@ -11,20 +11,14 @@ import classNames from 'classnames'
 import { IMeetingItemProps } from '../type'
 
 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,
@@ -33,14 +27,14 @@ const MeetingItem: FC<IMeetingItemProps> = ({
   const statusColorType = props.statusColorType
   const AVATAR_LIMIT = avatarLimit
 
-  const dateText = date && (dateString || format(date))
+  const dateText = date && (props.dateString || format(date))
 
   const subject =
     props.subject && subjectLimit && props.subject.substring(0, subjectLimit) + (props.subject.length > subjectLimit ? '...' : '')
 
   return (
     <div className={classNames('rce-container-mtitem', props.className)} onClick={onClick} onContextMenu={props.onContextMenu}>
-      <audio autoPlay loop muted={audioMuted} src={audioSource} />
+      <audio autoPlay loop muted={audioMuted} src={props.audioSource} />
 
       <div className='rce-mtitem'>
         <div className='rce-mtitem-top'>

src/MessageList/MessageList.tsx

@@ -9,15 +9,14 @@ import { IMessageListProps, MessageListEvent } from '../type'
 
 const MessageList: FC<IMessageListProps> = ({
   referance = null,
-  dataSource = [],
   lockable = false,
   toBottomHeight = 300,
   downButton = true,
   ...props
 }) => {
   const [scrollBottom, setScrollBottom] = useState(0)
   const [_downButton, setDownButton] = useState(false)
-  const prevProps = useRef(dataSource)
+  const prevProps = useRef(props)
 
   const checkScroll = () => {
     var e = referance
@@ -35,13 +34,13 @@ const MessageList: FC<IMessageListProps> = ({
   useEffect(() => {
     if (!referance) return
 
-    if (prevProps.current.length !== dataSource.length) {
+    if (prevProps.current.dataSource.length !== props.dataSource.length) {
       setScrollBottom(getBottom(referance))
       checkScroll()
     }
 
-    prevProps.current = dataSource
-  }, [prevProps, dataSource])
+    prevProps.current = props
+  }, [prevProps, props])
 
   const getBottom = (e: any) => {
     if (e.current) return e.current.scrollHeight - e.current.scrollTop - e.current.offsetHeight
@@ -136,7 +135,7 @@ const MessageList: FC<IMessageListProps> = ({
     <div className={classNames(['rce-container-mlist', props.className])} {...props.customProps}>
       {!!props.children && props.isShowChild && props.children}
       <div ref={referance} onScroll={onScroll} className='rce-mlist'>
-        {dataSource.map((x, i: number) => (
+        {props.dataSource.map((x, i: number) => (
           <MessageBox
             key={i as Key}
             {...(x as any)}