Merge pull request #163 from Detaysoft/refs-broken-problems

messageList and messageBox converted to function component

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

@@ -50,3 +50,13 @@ button {
     height: 50px;
     background: red;
 }
+
+.on-drag-mlist {
+    width: 100%;
+    height: 100%;
+    background-color: #e2f3f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+}