Skip to content

Commit be8ccb7

Browse files
esracoskunesracoskun
committed
Converted class components to function components
1 parent e4cbdd5 commit be8ccb7

25 files changed

Lines changed: 2336 additions & 2410 deletions

File tree

‎example/App.js‎

Lines changed: 338 additions & 350 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "10.16.2",
3+
"version": "11.0.0",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/AudioMessage/AudioMessage.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,29 @@ import React from 'react';
22

33
import './AudioMessage.css';
44

5-
export default class AudioMessage extends React.PureComponent {
6-
render() {
7-
const audioURL = this.props.data.audioURL;
8-
const controlsList = this.props.data.controlsList;
5+
function AudioMessage({ data, text }) {
6+
const audioURL = data.audioURL;
7+
const controlsList = data.controlsList;
98

10-
return (
11-
<div className={'rce-mbox-audio'}>
12-
<audio controls controlsList={controlsList ? controlsList : "nodownload"}>
13-
<source src={audioURL} type="audio/mp3"/>
14-
Your browser does not support the audio element.
15-
</audio>
9+
return (
10+
<div className={'rce-mbox-audio'}>
11+
<audio controls controlsList={controlsList ? controlsList : 'nodownload'}>
12+
<source src={audioURL} type='audio/mp3'/>
13+
Your browser does not support the audio element.
14+
</audio>
1615

17-
{
18-
this.props.text &&
19-
<div className='rce-mbox-text'>
20-
{this.props.text}
21-
</div>
22-
}
23-
</div>
24-
);
25-
}
16+
{
17+
text &&
18+
<div className='rce-mbox-text'>
19+
{text}
20+
</div>
21+
}
22+
</div>
23+
);
2624
}
2725

2826
AudioMessage.defaultProps = {
29-
data: {},
27+
data: {},
3028
};
29+
30+
export default AudioMessage;

‎src/Avatar/Avatar.js‎

Lines changed: 95 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,104 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import './Avatar.css';
33

44
const classNames = require('classnames');
5-
6-
const loadedAvatars = [];
7-
8-
export class Avatar extends React.PureComponent {
9-
constructor(props) {
10-
super(props);
11-
12-
this.requestImage = this.requestImage.bind(this);
13-
}
14-
15-
componentDidMount() {
16-
this._isMounted = true;
17-
}
18-
19-
componentWillUnmount() {
20-
this._isMounted = false;
21-
}
22-
23-
isLoaded(src) {
24-
return loadedAvatars.indexOf(src) !== -1;
25-
}
26-
27-
requestImage(src) {
28-
var self = this;
29-
this.loading = true;
30-
31-
var loaded = () => {
32-
loadedAvatars.push(src);
33-
delete self.loading;
34-
if (this._isMounted !== false) {
35-
self.setState({});
36-
}
37-
};
38-
39-
var img = document.createElement('img');
40-
img.src = src;
41-
img.onload = loaded;
42-
img.onerror = loaded;
43-
}
44-
45-
stringToColour (str) {
46-
var hash = 0;
47-
for (let i = 0; i < str.length; i++) {
48-
hash = str.charCodeAt(i) + ((hash << 5) - hash);
49-
}
50-
var colour = '#';
51-
for (let i = 0; i < 3; i++) {
52-
var value = (hash >> (i * 8)) & 0xFF;
53-
value = (value % 150) + 50;
54-
colour += ('00' + value.toString(16)).substr(-2);
55-
}
56-
return colour;
57-
}
58-
59-
render() {
60-
let src = this.props.src;
61-
let isLazyImage = false;
62-
63-
if (this.props.lazyLoadingImage) {
64-
isLazyImage = true;
65-
66-
if (!this.isLoaded(src)) {
67-
src = this.props.lazyLoadingImage; // lazy image
68-
69-
if (!this.loading) {
70-
this.requestImage(this.props.src);
71-
}
72-
}
73-
else {
74-
isLazyImage = false;
75-
}
76-
}
77-
78-
return (
79-
<div className={classNames('rce-avatar-container', this.props.type, this.props.size, this.props.className)}>
80-
{
81-
this.props.letterItem ?
82-
<div
83-
className="rce-avatar-letter-background"
84-
style={{ backgroundColor: this.stringToColour(this.props.letterItem.id)}}>
85-
<span className="rce-avatar-letter">
86-
{this.props.letterItem.letter}
87-
</span>
88-
</div>
89-
:
90-
<img
91-
alt={this.props.alt}
92-
src={src}
93-
onError={this.props.onError}
94-
className={classNames(
95-
'rce-avatar',
96-
{'rce-avatar-lazy': isLazyImage},
97-
)} />
98-
}
99-
{this.props.sideElement}
100-
</div>
101-
);
102-
}
5+
function Avatar(props) {
6+
const [loadedAvatars, setLoadedAvatars] = useState([]);
7+
const [loading, setLoading] = useState(false);
8+
const [src, setSrc] = useState(props.src);
9+
const [isLazyImage, setIsLazyImage] = useState(false);
10+
11+
let _isMounted = false;
12+
13+
useEffect(() => {
14+
_isMounted = true;
15+
16+
if (props.lazyLoadingImage) {
17+
setIsLazyImage(true);
18+
19+
if (!isLoaded(src)) {
20+
setSrc(props.lazyLoadingImage);
21+
22+
if (!loading) {
23+
requestImage(props.src);
24+
}
25+
}
26+
else {
27+
setIsLazyImage(false);
28+
}
29+
}
30+
31+
return () => {
32+
_isMounted = false;
33+
}
34+
}, []);
35+
36+
const isLoaded = (src) => {
37+
return loadedAvatars.indexOf(src) !== -1;
38+
}
39+
40+
const requestImage = (src) => {
41+
setLoading(true);
42+
43+
var loaded = () => {
44+
setLoadedAvatars(loadedAvatars.concat(src));
45+
setLoading(false);
46+
};
47+
48+
var img = document.createElement('img');
49+
img.src = src;
50+
img.onload = loaded;
51+
img.onerror = loaded;
52+
}
53+
54+
const stringToColour = (str) => {
55+
var hash = 0;
56+
for (let i = 0; i < str.length; i++) {
57+
hash = str.charCodeAt(i) + ((hash << 5) - hash);
58+
}
59+
var colour = '#';
60+
for (let i = 0; i < 3; i++) {
61+
var value = (hash >> (i * 8)) & 0xFF;
62+
value = (value % 150) + 50;
63+
colour += ('00' + value.toString(16)).substr(-2);
64+
}
65+
return colour;
66+
}
67+
68+
return (
69+
<div className={classNames('rce-avatar-container', props.type, props.size, props.className)}>
70+
{
71+
props.letterItem ?
72+
<div
73+
className='rce-avatar-letter-background'
74+
style={{ backgroundColor: stringToColour(props.letterItem.id)}}>
75+
<span className='rce-avatar-letter'>
76+
{props.letterItem.letter}
77+
</span>
78+
</div>
79+
:
80+
<img
81+
alt={props.alt}
82+
src={src}
83+
onError={props.onError}
84+
className={classNames(
85+
'rce-avatar',
86+
{'rce-avatar-lazy': isLazyImage},
87+
)} />
88+
}
89+
{props.sideElement}
90+
</div>
91+
);
10392
}
10493

10594
Avatar.defaultProps = {
106-
type: 'default',
107-
size: 'default',
108-
src: '',
109-
alt: '',
110-
sideElement: null,
111-
lazyLoadingImage: undefined,
112-
onError: () => void(0),
95+
type: 'default',
96+
size: 'default',
97+
src: '',
98+
alt: '',
99+
sideElement: null,
100+
lazyLoadingImage: undefined,
101+
onError: () => void(0),
113102
};
114103

115104
export default Avatar;

‎src/Button/Button.js‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import './Button.css';
33

44
const classNames = require('classnames');
55

6-
export class Button extends Component {
7-
render() {
8-
return (
9-
<button
10-
ref={this.props.buttonRef}
11-
title={this.props.title}
12-
className={classNames('rce-button', this.props.type, this.props.className)}
13-
style={{
14-
backgroundColor: this.props.backgroundColor,
15-
color: this.props.color,
16-
borderColor: this.props.backgroundColor
17-
}}
18-
disabled={this.props.disabled}
19-
onClick={this.props.onClick}>
20-
{
21-
this.props.icon ?
22-
<span className='rce-button-icon--container'>
23-
{(this.props.icon.float === 'right' || !this.props.icon.float) && <span>{this.props.text}</span>}
6+
function Button(props) {
7+
return (
8+
<button
9+
ref={props.buttonRef}
10+
title={props.title}
11+
className={classNames('rce-button', props.type, props.className)}
12+
style={{
13+
backgroundColor: props.backgroundColor,
14+
color: props.color,
15+
borderColor: props.backgroundColor
16+
}}
17+
disabled={props.disabled}
18+
onClick={props.onClick}>
19+
{
20+
props.icon ?
21+
<span className='rce-button-icon--container'>
22+
{(props.icon.float === 'right' || !props.icon.float) && <span>{props.text}</span>}
2423

25-
<span style={{ float: this.props.icon.float, fontSize: this.props.icon.size || 12 }} className='rce-button-icon'>{this.props.icon.component}</span>
24+
<span style={{ float: props.icon.float, fontSize: props.icon.size || 12 }} className='rce-button-icon'>{props.icon.component}</span>
2625

27-
{this.props.icon.float === 'left' && <span>{this.props.text}</span>}
28-
</span>
29-
: <span>{this.props.text}</span>
30-
}
31-
</button>
32-
);
33-
}
26+
{props.icon.float === 'left' && <span>{props.text}</span>}
27+
</span>
28+
: <span>{props.text}</span>
29+
}
30+
</button>
31+
);
3432
}
3533

3634
Button.defaultProps = {
37-
text: '',
38-
disabled: false,
39-
type: null,
40-
icon: null,
41-
backgroundColor: '#3979aa',
42-
color: 'white',
43-
className: null,
44-
buttonRef: null,
45-
title: null,
35+
text: '',
36+
disabled: false,
37+
type: null,
38+
icon: null,
39+
backgroundColor: '#3979aa',
40+
color: 'white',
41+
className: null,
42+
buttonRef: null,
43+
title: null,
4644
};
4745

4846
export default Button;

0 commit comments

Comments
 (0)