Skip to content

Commit 9d95eca

Browse files
esracoskunesracoskun
committed
default props edites
1 parent 6066d8f commit 9d95eca

8 files changed

Lines changed: 69 additions & 129 deletions

File tree

‎src/Button/Button.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,12 @@ import './Button.css'
22
import classNames from 'classnames'
33
import { IButtonProps } from '../type'
44

5-
const Button: React.FC<IButtonProps> = ({
6-
text = '',
7-
disabled = false,
8-
type = null,
9-
icon = null,
10-
backgroundColor = '#3979aa',
11-
color = 'white',
12-
className = null,
13-
buttonRef = null,
14-
...props
15-
}) => {
5+
const Button: React.FC<IButtonProps> = ({ disabled = false, backgroundColor = '#3979aa', color = 'white', ...props }) => {
166
return (
177
<button
18-
ref={buttonRef}
8+
ref={props.buttonRef}
199
title={props.title}
20-
className={classNames('rce-button', type, className)}
10+
className={classNames('rce-button', props.type, props.className)}
2111
style={{
2212
backgroundColor: backgroundColor,
2313
color: color,
@@ -26,18 +16,18 @@ const Button: React.FC<IButtonProps> = ({
2616
disabled={disabled}
2717
onClick={props.onClick}
2818
>
29-
{icon ? (
19+
{props.icon ? (
3020
<span className='rce-button-icon--container'>
31-
{(icon.float === 'right' || !icon.float) && <span>{text}</span>}
21+
{(props.icon.float === 'right' || !props.icon.float) && <span>{props.text}</span>}
3222

33-
<span style={{ float: icon.float, fontSize: icon.size || 12 }} className='rce-button-icon'>
34-
{icon.component}
23+
<span style={{ float: props.icon.float, fontSize: props.icon.size || 12 }} className='rce-button-icon'>
24+
{props.icon.component}
3525
</span>
3626

37-
{icon.float === 'left' && <span>{text}</span>}
27+
{props.icon.float === 'left' && <span>{props.text}</span>}
3828
</span>
3929
) : (
40-
<span>{text}</span>
30+
<span>{props.text}</span>
4131
)}
4232
</button>
4333
)

‎src/ChatItem/ChatItem.tsx‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,12 @@ import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
1111
import { IChatItemProps } from '../type'
1212

1313
const ChatItem: React.FC<IChatItemProps> = ({
14-
id = '',
15-
onClick = null,
16-
avatar = '',
1714
avatarFlexible = false,
18-
alt = '',
19-
title = '',
20-
subtitle = '',
2115
date = new Date(),
2216
unread = 0,
23-
statusColor = null,
2417
statusColorType = 'badge',
25-
statusText = null,
26-
dateString = null,
2718
lazyLoadingImage = undefined,
2819
onAvatarError = () => void 0,
29-
showMute = null,
30-
showVideoCall = null,
3120
...props
3221
}) => {
3322
const [onHoverTool, setOnHoverTool] = useState(false)
@@ -46,64 +35,64 @@ const ChatItem: React.FC<IChatItemProps> = ({
4635

4736
if (onHoverTool === true) return
4837

49-
onClick?.(e)
38+
props.onClick?.(e)
5039
}
5140

5241
const onDragOver = (e: React.MouseEvent) => {
5342
e.preventDefault()
54-
if (props.onDragOver instanceof Function) props.onDragOver(e, id)
43+
if (props.onDragOver instanceof Function) props.onDragOver(e, props.id)
5544
}
5645

5746
const onDragEnter = (e: React.MouseEvent) => {
5847
e.preventDefault()
59-
if (props.onDragEnter instanceof Function) props.onDragEnter(e, id)
48+
if (props.onDragEnter instanceof Function) props.onDragEnter(e, props.id)
6049
if (!onDrag) setOnDrag(true)
6150
}
6251

6352
const onDragLeave = (e: React.MouseEvent) => {
6453
e.preventDefault()
65-
if (props.onDragLeave instanceof Function) props.onDragLeave(e, id)
54+
if (props.onDragLeave instanceof Function) props.onDragLeave(e, props.id)
6655
if (onDrag) setOnDrag(false)
6756
}
6857

6958
const onDrop = (e: React.MouseEvent) => {
7059
e.preventDefault()
71-
if (props.onDrop instanceof Function) props.onDrop(e, id)
60+
if (props.onDrop instanceof Function) props.onDrop(e, props.id)
7261
if (onDrag) setOnDrag(false)
7362
}
7463

7564
return (
7665
<div
77-
key={id as Key}
66+
key={props.id as Key}
7867
className={classNames('rce-container-citem', props.className)}
7968
onClick={handleOnClick}
8069
onContextMenu={props.onContextMenu}
8170
>
8271
<div className='rce-citem' onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
83-
{!!props.onDragComponent && onDrag && props.onDragComponent(id)}
72+
{!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
8473
{((onDrag && !props.onDragComponent) || !onDrag) && [
8574
<div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
8675
<Avatar
87-
src={avatar}
88-
alt={alt}
76+
src={props.avatar}
77+
alt={props.alt}
8978
className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
9079
size='large'
9180
letterItem={props.letterItem}
9281
sideElement={
93-
statusColor ? (
82+
props.statusColor ? (
9483
<span
9584
className='rce-citem-status'
9685
style={
9786
statusColorType === 'encircle'
9887
? {
99-
border: `solid 2px ${statusColor}`,
88+
border: `solid 2px ${props.statusColor}`,
10089
}
10190
: {
102-
backgroundColor: statusColor,
91+
backgroundColor: props.statusColor,
10392
}
10493
}
10594
>
106-
{statusText}
95+
{props.statusText}
10796
</span>
10897
) : (
10998
<></>
@@ -116,27 +105,27 @@ const ChatItem: React.FC<IChatItemProps> = ({
116105
</div>,
117106
<div className='rce-citem-body'>
118107
<div className='rce-citem-body--top'>
119-
<div className='rce-citem-body--top-title'>{title}</div>
120-
<div className='rce-citem-body--top-time'>{date && (dateString || format(date))}</div>
108+
<div className='rce-citem-body--top-title'>{props.title}</div>
109+
<div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
121110
</div>
122111

123112
<div className='rce-citem-body--bottom'>
124-
<div className='rce-citem-body--bottom-title'>{subtitle}</div>
113+
<div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
125114
<div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
126-
{showMute && (
115+
{props.showMute && (
127116
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
128117
{props.muted === true && <MdVolumeOff />}
129118
{props.muted === false && <MdVolumeUp />}
130119
</div>
131120
)}
132-
{showVideoCall && (
121+
{props.showVideoCall && (
133122
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
134123
<MdVideoCall />
135124
</div>
136125
)}
137126
</div>
138127
<div className='rce-citem-body--bottom-tools-item-hidden-hover'>
139-
{showMute && props.muted && (
128+
{props.showMute && props.muted && (
140129
<div className='rce-citem-body--bottom-tools-item'>
141130
<MdVolumeOff />
142131
</div>

‎src/Input/Input.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,30 @@ import classNames from 'classnames'
44
import { IInputProps } from '../type'
55

66
const Input: React.FC<IInputProps> = ({
7-
type = "text",
8-
placeholder = "",
9-
defaultValue = "",
10-
onChange = null,
11-
rightButtons = null,
12-
leftButtons = null,
7+
type = 'text',
138
multiline = false,
149
minHeight = 25,
1510
maxHeight = 200,
1611
autoHeight = true,
17-
referance = null,
18-
maxlength = null,
19-
onMaxLengthExceed = null,
2012
autofocus = false,
2113
...props
2214
}) => {
2315
useEffect(() => {
24-
if (autofocus === true) referance?.referance.current?.focus()
16+
if (autofocus === true) props.referance?.current?.focus()
2517

2618
if (props.clear instanceof Function) {
2719
props.clear(clear)
2820
}
2921
}, [])
3022

3123
const onChangeEvent = (e: any) => {
32-
if (maxlength && (e.target.value || '').length > maxlength) {
33-
if (onMaxLengthExceed instanceof Function) onMaxLengthExceed()
24+
if (props.maxlength && (e.target.value || '').length > props.maxlength) {
25+
if (props.onMaxLengthExceed instanceof Function) props.onMaxLengthExceed()
3426

35-
if (referance?.referance.current?.value == (e.target.value || '').substring(0, maxlength)) return
27+
if (props.referance?.current?.value == (e.target.value || '').substring(0, props.maxlength)) return
3628
}
3729

38-
if (onChange instanceof Function) onChange(e)
30+
if (props.onChange instanceof Function) props.onChange(e)
3931

4032
if (multiline === true) {
4133
if (autoHeight === true) {
@@ -57,26 +49,26 @@ const Input: React.FC<IInputProps> = ({
5749
const clear = () => {
5850
var _event = {
5951
FAKE_EVENT: true,
60-
target: referance?.current,
52+
target: props.referance?.current,
6153
}
6254

63-
if (referance?.current?.value) {
64-
referance.current.value = ''
55+
if (props.referance?.current?.value) {
56+
props.referance.current.value = ''
6557
}
6658

6759
onChangeEvent(_event)
6860
}
6961

7062
return (
7163
<div className={classNames('rce-container-input', props.className)}>
72-
{leftButtons && <div className='rce-input-buttons'>{leftButtons}</div>}
64+
{props.leftButtons && <div className='rce-input-buttons'>{props.leftButtons}</div>}
7365
{multiline === false ? (
7466
<input
75-
ref={referance}
67+
ref={props.referance}
7668
type={type}
7769
className={classNames('rce-input')}
78-
placeholder={placeholder}
79-
defaultValue={defaultValue}
70+
placeholder={props.placeholder}
71+
defaultValue={props.defaultValue}
8072
style={props.inputStyle}
8173
onChange={onChangeEvent}
8274
onCopy={props.onCopy}
@@ -93,10 +85,10 @@ const Input: React.FC<IInputProps> = ({
9385
/>
9486
) : (
9587
<textarea
96-
ref={referance}
88+
ref={props.referance}
9789
className={classNames('rce-input', 'rce-input-textarea')}
98-
placeholder={placeholder}
99-
defaultValue={defaultValue}
90+
placeholder={props.placeholder}
91+
defaultValue={props.defaultValue}
10092
style={props.inputStyle}
10193
onChange={onChangeEvent}
10294
onCopy={props.onCopy}
@@ -112,7 +104,7 @@ const Input: React.FC<IInputProps> = ({
112104
onKeyUp={props.onKeyUp}
113105
></textarea>
114106
)}
115-
{rightButtons && <div className='rce-input-buttons'>{rightButtons}</div>}
107+
{props.rightButtons && <div className='rce-input-buttons'>{props.rightButtons}</div>}
116108
</div>
117109
)
118110
}

‎src/LocationMessage/LocationMessage.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,14 @@ const STATIC_URL =
66
'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY'
77
const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM'
88

9-
const LocationMessage: React.FC<ILocationMessageProps> = ({
10-
apiKey = '',
11-
markerColor = 'red',
12-
target = '_blank',
13-
zoom = '14',
14-
...props
15-
}) => {
9+
const LocationMessage: React.FC<ILocationMessageProps> = ({ markerColor = 'red', target = '_blank', zoom = '14', ...props }) => {
1610
const buildURL = (url: string) => {
1711
return url
1812
.replace(/LATITUDE/g, props?.data.latitude)
1913
.replace(/LONGITUDE/g, props?.data.longitude)
2014
.replace('MARKER_COLOR', markerColor)
2115
.replace('ZOOM', zoom)
22-
.replace('KEY', apiKey)
16+
.replace('KEY', props.apiKey)
2317
}
2418
const className = () => {
2519
var _className = classNames('rce-mbox-location', props.className)

‎src/MeetingItem/MeetingItem.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,14 @@ import classNames from 'classnames'
1111
import { IMeetingItemProps } from '../type'
1212

1313
const MeetingItem: FC<IMeetingItemProps> = ({
14-
id = '',
1514
subjectLimit = 60,
1615
onClick = () => void 0,
1716
avatarFlexible = false,
18-
alt = '',
19-
title = '',
20-
subtitle = '',
2117
date = new Date(),
22-
dateString = '',
2318
lazyLoadingImage = undefined,
2419
avatarLimit = 5,
2520
avatars = [],
2621
audioMuted = true,
27-
audioSource = '',
2822
onAvatarError = () => void 0,
2923
onMeetingClick = () => void 0,
3024
onShareClick = () => void 0,
@@ -33,14 +27,14 @@ const MeetingItem: FC<IMeetingItemProps> = ({
3327
const statusColorType = props.statusColorType
3428
const AVATAR_LIMIT = avatarLimit
3529

36-
const dateText = date && (dateString || format(date))
30+
const dateText = date && (props.dateString || format(date))
3731

3832
const subject =
3933
props.subject && subjectLimit && props.subject.substring(0, subjectLimit) + (props.subject.length > subjectLimit ? '...' : '')
4034

4135
return (
4236
<div className={classNames('rce-container-mtitem', props.className)} onClick={onClick} onContextMenu={props.onContextMenu}>
43-
<audio autoPlay loop muted={audioMuted} src={audioSource} />
37+
<audio autoPlay loop muted={audioMuted} src={props.audioSource} />
4438

4539
<div className='rce-mtitem'>
4640
<div className='rce-mtitem-top'>

‎src/MessageList/MessageList.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ import { IMessageListProps, MessageListEvent } from '../type'
99

1010
const MessageList: FC<IMessageListProps> = ({
1111
referance = null,
12-
dataSource = [],
1312
lockable = false,
1413
toBottomHeight = 300,
1514
downButton = true,
1615
...props
1716
}) => {
1817
const [scrollBottom, setScrollBottom] = useState(0)
1918
const [_downButton, setDownButton] = useState(false)
20-
const prevProps = useRef(dataSource)
19+
const prevProps = useRef(props)
2120

2221
const checkScroll = () => {
2322
var e = referance
@@ -35,13 +34,13 @@ const MessageList: FC<IMessageListProps> = ({
3534
useEffect(() => {
3635
if (!referance) return
3736

38-
if (prevProps.current.length !== dataSource.length) {
37+
if (prevProps.current.dataSource.length !== props.dataSource.length) {
3938
setScrollBottom(getBottom(referance))
4039
checkScroll()
4140
}
4241

43-
prevProps.current = dataSource
44-
}, [prevProps, dataSource])
42+
prevProps.current = props
43+
}, [prevProps, props])
4544

4645
const getBottom = (e: any) => {
4746
if (e.current) return e.current.scrollHeight - e.current.scrollTop - e.current.offsetHeight
@@ -136,7 +135,7 @@ const MessageList: FC<IMessageListProps> = ({
136135
<div className={classNames(['rce-container-mlist', props.className])} {...props.customProps}>
137136
{!!props.children && props.isShowChild && props.children}
138137
<div ref={referance} onScroll={onScroll} className='rce-mlist'>
139-
{dataSource.map((x, i: number) => (
138+
{props.dataSource.map((x, i: number) => (
140139
<MessageBox
141140
key={i as Key}
142141
{...(x as any)}

0 commit comments

Comments
 (0)