conflict fixed

Author: esracoskun

CHANGELOG.md

@@ -0,0 +1,126 @@
+<details open>
+<summary>11.0.0 Updates</summary>
+<br>
+
+This update target to fix component ref broken problems
+
+Fixed issues:
+
+-   https://github.com/Detaysoft/react-chat-elements/issues/158
+-   https://github.com/Detaysoft/react-chat-elements/issues/157
+-   https://github.com/Detaysoft/react-chat-elements/issues/142
+
+1.  All react-chat-elements components turneded to function component for "ref" property problems.
+
+2.  In the [Input](https://github.com/Detaysoft/react-chat-elements#input-component) component `referance={...}` instead of use `ref={...}`
+
+3.  **10.16.2** and before vesion usage
+
+    **Before usage**: this.refs.input.clear();
+
+    After **11.0.0** version usage is:
+
+    ```js
+    import { Input } from 'react-chat-elements'
+
+    <Input
+    	ref='input'
+    	placeholder="Type here..."
+    	multiline={true}
+    	.
+    	.
+    	.
+    />
+    ```
+
+    New usage in **class component**: clearRef();
+
+    ```js
+
+    import { Input } from 'react-chat-elements'
+    let clearRef = () => {};
+    this.inputReferance = React.createRef();
+
+    <Input
+    	referance={this.inputReferance}
+    	clear={(clear) => clearRef = clear}
+    	placeholder="Type here..."
+    	multiline={true}
+    	.
+    	.
+    	.
+    />
+
+    ```
+
+    New usage in **function component**: clearRef();
+
+    ```js
+
+    import { Input } from 'react-chat-elements'
+    let clearRef = () => {};
+    const inputReferance = React.useRef();
+
+    <Input
+    	referance={inputReferance}
+    	clear={(clear) => clearRef = clear}
+    	placeholder="Type here..."
+    	multiline={true}
+    	.
+    	.
+    	.
+    />
+
+    ```
+
+4.  In the [MessageList](https://github.com/Detaysoft/react-chat-elements#messagelist-component) component usage `referance={...}` instead of use `ref={...}`
+
+    **Class Component:**
+
+    ```js
+    import { MessageList } from 'react-chat-elements'
+    this.messageList = React.createRef();
+
+    <MessageList
+    	referance={this.messageList}
+    	className='message-list'
+    	lockable={true}
+    	toBottomHeight={'100%'}
+    	dataSource={[
+    		{
+    			position: 'right',
+    			type: 'text',
+    			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+    			date: new Date(),
+    		},
+    		.
+    		.
+    		.
+    	]} />
+    ```
+
+    **Function Component:**
+
+    ```js
+    import { MessageList } from 'react-chat-elements'
+    const messageListReferance = React.useRef();
+
+    <MessageList
+    	referance={messageListReferance}
+    	className='message-list'
+    	lockable={true}
+    	toBottomHeight={'100%'}
+    	dataSource={[
+    		{
+    			position: 'right',
+    			type: 'text',
+    			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+    			date: new Date(),
+    		},
+    		.
+    		.
+    		.
+    	]} />
+    ```
+
+</details>

README.md

@@ -270,6 +270,7 @@ function App() {
     var list = messageList;
     list.push(random('message', mtype));
     setMessageList(list);
+    clearRef();
     forceUpdate();
   }
 

example/App.js

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.16.2",
+  "version": "11.0.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

package.json

@@ -2,29 +2,29 @@ import React from 'react';
 
 import './AudioMessage.css';
 
-export default class AudioMessage extends React.PureComponent {
-    render() {
-        const audioURL = this.props.data.audioURL;
-        const controlsList = this.props.data.controlsList;
+function AudioMessage({ data, text }) {
+  const audioURL = data.audioURL;
+  const controlsList = data.controlsList;
 
-        return (
-            <div className={'rce-mbox-audio'}>
-                <audio controls controlsList={controlsList ? controlsList : "nodownload"}>
-                    <source src={audioURL} type="audio/mp3"/>
-                    Your browser does not support the audio element.
-                </audio>
+  return (
+    <div className={'rce-mbox-audio'}>
+      <audio controls controlsList={controlsList ? controlsList : 'nodownload'}>
+        <source src={audioURL} type='audio/mp3'/>
+        Your browser does not support the audio element.
+      </audio>
 
-                {
-                    this.props.text &&
-                    <div className='rce-mbox-text'>
-                        {this.props.text}
-                    </div>
-                }
-            </div>
-        );
-    }
+      {
+        text &&
+        <div className='rce-mbox-text'>
+          {text}
+        </div>
+      }
+    </div>
+  );
 }
 
 AudioMessage.defaultProps = {
-    data: {},
+  data: {},
 };
+
+export default AudioMessage;