Merge pull request #52 from Detaysoft/next

Next Version 0.8.2
Detaysoft · Feb 9, 2018 · aaf0613 · aaf0613
2 parents 881ad74 + 9e92b2a
commit aaf0613
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -113,6 +113,7 @@ import { MessageBox } from 'react-chat-elements'
 | notch | true | boolean | message box notch |
 | avatar | none | url | message box avatar url |
 | renderAddCmp | none | function (component) | adding custom components to message box |
+| copiableDate | false | boolean | message box date text copiable |
 
 
 ## SystemMessage Component

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -96,6 +96,10 @@
     bottom: -5px;
 }
 
+.rce-mbox-time.non-copiable:before {
+    content: attr(data-text);
+}
+
 .rce-mbox-time-block {
     /*position: relative;*/
     right: 0;

diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -25,6 +25,12 @@ export class MessageBox extends Component {
         var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
         var thatAbsoluteTime = this.props.type !== 'text' && this.props.type !== 'file' && !(this.props.type === 'location' && this.props.text);
 
+
+        const dateText = this.props.date && !isNaN(this.props.date) && (
+            this.props.dateString ||
+            moment(this.props.date).fromNow()
+        );
+
         return (
             <div
                 className={classNames('rce-container-mbox', this.props.className)}
@@ -130,8 +136,15 @@ export class MessageBox extends Component {
                                         uri={this.props.uri || this.props.text} />
                                 }
 
-                                <div className={classNames('rce-mbox-time', { 'rce-mbox-time-block': thatAbsoluteTime })}>
+                                <div
+                                    className={classNames(
+                                        'rce-mbox-time',
+                                        { 'rce-mbox-time-block': thatAbsoluteTime },
+                                        { 'non-copiable': !this.props.copiableDate },
+                                    )}
+                                    data-text={this.props.copiableDate ? undefined : dateText}>
                                     {
+                                        this.props.copiableDate &&
                                         this.props.date &&
                                         !isNaN(this.props.date) &&
                                         (
@@ -213,6 +226,7 @@ MessageBox.defaultProps = {
     notch: true,
     avatar: null,
     renderAddCmp: null,
+    copiableDate: false,
 };