Merge pull request #93 from Detaysoft/moment-remove

Moment.js replaced timeago.js

Author: abdurrahmanekr

.gitignore

@@ -11,6 +11,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 dist
+package-lock.json
 
 # -------- React Native -------- #
 

README.md

@@ -86,7 +86,7 @@ import { ChatItem } from 'react-chat-elements'
 | title | none | string | ChatItem title |
 | subtitle | none | string | ChatItem subtitle |
 | date | none | date | ChatItem date |
-| dateString | none | string | ChatItem represents dateString or moment(date).fromNow() |
+| dateString | none | string | ChatItem represents dateString or timeagojs(now, date) |
 | unread | 0 | int | ChatItem unread count |
 | onClick | none | function | ChatItem on click |
 | onContextMenu | none | function | ChatItem on context menu |
@@ -131,7 +131,7 @@ import { MessageBox } from 'react-chat-elements'
 | titleColor | none | string(color) | message title color |
 | data | {} | object | message data |
 | date | new Date() | Date | message date |
-| dateString | none | string | message represents dateString or moment(date).fromNow() |
+| dateString | none | string | message represents dateString or timeagojs(now, date) |
 | onClick | none | function | message on click (message(object) is returned) |
 | onOpen | none | function | message on open (file or photo) (message(object) is returned) |
 | onDownload | none | function | message on download (file or photo) (message(object) is returned) |
@@ -501,4 +501,4 @@ import { SpotifyMessage } from 'react-chat-elements'
 | view | list | string | spotify view type (list or coverart) |
 | data | {} | object | message data |
 | width | 300 | int | spotify embed width |
-| height | 380 | int | spotify embed height |
+| height | 380 | int | spotify embed height |

example/App.css

@@ -1,51 +1,52 @@
 body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, ubuntu;
-	background: navajowhite;
-	margin: 0;
-	padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, ubuntu;
+    background: navajowhite;
+    margin: 0;
+    padding: 0;
 }
 
 html,
 body {
-	height: 100%;
-	overflow: hidden;
+    height: 100%;
+    overflow: hidden;
 }
 
 input,
 button {
-	font-family: verdana, ubuntu;
+    font-family: verdana, ubuntu;
 }
 
 .container {
-	display: flex;
-	flex-direction: row;
-	min-height: 100%;
-	overflow: auto;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+    display: flex;
+    flex-direction: row;
+    min-height: 100%;
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 .chat-list {
-	min-width: 240px;
-	max-width: 380px;
-	overflow: auto;
+    min-width: 240px;
+    max-width: 380px;
+    overflow: auto;
 }
 
 .right-panel {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .message-list {
-	flex: 1;
-	min-width: 140px;
+    flex: 1;
+    min-width: 140px;
+    overflow: auto;
 }
 
 .input-area {
-	height: 50px;
-	background: red;
+    height: 50px;
+    background: red;
 }

example/App.js

@@ -18,10 +18,12 @@ import FaSearch from 'react-icons/lib/fa/search';
 import FaComments from 'react-icons/lib/fa/comments';
 import FaClose from 'react-icons/lib/fa/close';
 import FaMenu from 'react-icons/lib/md/more-vert';
+import {
+    format,
+} from 'timeago.js';
 
-const loremIpsum = require('lorem-ipsum');
-const Identicon = require('identicon.js')
-const moment = require('moment');
+import loremIpsum from 'lorem-ipsum';
+import Identicon from 'identicon.js';
 
 export class App extends Component {
 
@@ -113,8 +115,7 @@ export class App extends Component {
                         console.log('Photo loaded');
                     },
                     status: status,
-                    date: new Date(),
-                    dateString: moment(new Date()).format('HH:mm'),
+                    date: +new Date(),
                     avatar: `data:image/png;base64,${this.photo()}`,
                 };
             case 'chat':
@@ -145,7 +146,6 @@ export class App extends Component {
                                 'Menu Item3',
                             ]} />
                     ),
-                    dateString: moment(new Date()).format('HH:mm'),
                 };
         }
     }

example/index.js

@@ -4,10 +4,10 @@ import './App.css';
 import App from './App';
 
 const render = Component => {
-	ReactDOM.render(
-		<Component/>,
-		document.getElementById('app'),
-	);
+    ReactDOM.render(
+        <Component/>,
+        document.getElementById('app'),
+    );
 };
 
-render(App);
+render(App);

native/MessageBox/MessageBox.js

@@ -9,6 +9,10 @@ import {
     Image,
 } from 'react-native';
 
+import {
+    format,
+} from'timeago.js';
+
 import IconI from 'react-native-vector-icons/Ionicons';
 import IconM from 'react-native-vector-icons/MaterialIcons';
 
@@ -90,7 +94,7 @@ export class MessageBox extends Component {
                                         !isNaN(this.props.date) &&
                                         (
                                             this.props.dateString ||
-                                            moment(this.props.date).fromNow()
+                                            format(new Date(), undefined, this.props.date)
                                         )
                                     }
                                     </Text>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.3.1",
+  "version": "10.4.1",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
@@ -16,9 +16,7 @@
     "enzyme": "^2.9.1",
     "enzyme-to-json": "^1.5.1",
     "extract-text-webpack-plugin": "^3.0.0",
-    "identicon": "^2.1.1",
     "identicon.js": "^2.3.1",
-    "isomorphic-style-loader": "^2.0.0",
     "lorem-ipsum": "^1.0.4",
     "nwb": "^0.18.10",
     "react": "16.0.0-beta.5",
@@ -65,11 +63,11 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "moment": "^2.18.1",
     "react-icons": "^2.2.5",
+    "react-native-icons": "^0.7.1",
+    "react-native-vector-icons": "^4.4.2",
     "react-progress-bar.js": "^0.2.3",
     "react-spinkit": "^3.0.0",
-    "react-native-icons": "^0.7.1",
-    "react-native-vector-icons": "^4.4.2"
+    "timeago.js": "^4.0.0-beta.2"
   }
 }

src/ChatItem/ChatItem.js

@@ -3,8 +3,11 @@ import './ChatItem.css';
 
 import Avatar from '../Avatar/Avatar';
 
-const moment = require('moment');
-const classNames = require('classnames');
+import {
+    format,
+} from'timeago.js';
+
+import classNames from 'classnames';
 
 export class ChatItem extends Component {
 
@@ -42,7 +45,7 @@ export class ChatItem extends Component {
                                     !isNaN(this.props.date) &&
                                     (
                                         this.props.dateString ||
-                                        moment(this.props.date).fromNow()
+                                        format(new Date(), undefined, this.props.date)
                                     )
                                 }
                             </div>

src/ChatItem/__tests__/__snapshots__/ChatItem.js.snap

@@ -32,7 +32,7 @@ exports[`ChatItem component should render without issues 1`] = `
         <div
           className="rce-citem-body--top-time"
         >
-          a few seconds ago
+          right now
         </div>
       </div>
       <div

src/MessageBox/MessageBox.js

@@ -16,9 +16,11 @@ import IoDoneAll from 'react-icons/lib/io/android-done-all';
 import MdIosTime from 'react-icons/lib/md/access-time';
 import MdCheck from 'react-icons/lib/md/check';
 
-const moment = require('moment');
+import {
+    format,
+} from 'timeago.js';
 
-const classNames = require('classnames');
+import classNames from 'classnames';
 
 export class MessageBox extends Component {
     render() {
@@ -28,7 +30,7 @@ export class MessageBox extends Component {
 
         const dateText = this.props.date && !isNaN(this.props.date) && (
             this.props.dateString ||
-            moment(this.props.date).fromNow()
+            format(new Date(), undefined, this.props.date)
         );
 
         return (
@@ -152,7 +154,7 @@ export class MessageBox extends Component {
                                         !isNaN(this.props.date) &&
                                         (
                                             this.props.dateString ||
-                                            moment(this.props.date).fromNow()
+                                            format(new Date(), undefined, this.props.date)
                                         )
                                     }
                                     {