From 0329c6849f4c5fad516dfe1baccdbbb906ff77e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20BOULETKESSLER?= Date: Thu, 10 Aug 2017 14:31:37 +0200 Subject: [PATCH 1/2] Add new option to change time display of comments --- src/component/comment/index.js | 29 +++++++++++++++-------------- src/component/index.js | 8 ++++++-- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/component/comment/index.js b/src/component/comment/index.js index 19663f8..2903b30 100644 --- a/src/component/comment/index.js +++ b/src/component/comment/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from 'react'; +import React, { Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; import './style.scss'; import moment from 'moment'; @@ -13,11 +13,13 @@ const propTypes = { authorDisplayName: PropTypes.string.isRequired, userPictureResolver: PropTypes.func.isRequired, currentUserId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - showAvatar: PropTypes.bool + showAvatar: PropTypes.bool, + timeDisplay: PropTypes.oneOf(['ago', 'dateTime']).isRequired, + dateTimeFormat: PropTypes.string.isRequired } const defaultProps = { - showAvatar: true + showAvatar: true } class Comment extends Component { @@ -28,24 +30,22 @@ class Comment extends Component { }; } - componentWillReceiveProps({isLoading}) { + componentWillReceiveProps({ isLoading }) { if (isLoading === false && this.props.isLoading === true && this.state.isEditing) { - this.setState({isEditing: false}); + this.setState({ isEditing: false }); } } - - render() { - const {msg, author, authorDisplayName, creationDate, currentUserId, lastModified, userPictureResolver, texts, showAvatar, ...otherProps} = this.props; - const {isEditing} = this.state; + const { msg, author, authorDisplayName, creationDate, currentUserId, lastModified, userPictureResolver, texts, showAvatar, timeDisplay, dateTimeFormat, ...otherProps } = this.props; + const { isEditing } = this.state; const isMine = currentUserId === author; return (
{showAvatar &&
account_circle - +
}
@@ -55,17 +55,18 @@ class Comment extends Component {
{isMine &&
- {this.setState({isEditing: !this.state.isEditing})}}> + { this.setState({ isEditing: !this.state.isEditing }) }}> {isEditing ? texts.cancel : texts.edit}
}
- {moment(creationDate).fromNow()} + {timeDisplay === 'ago' && moment(creationDate).fromNow()} + {timeDisplay === 'dateTime' && moment(creationDate).format(dateTimeFormat)}
- {isMine && isEditing ? :
')}}>
} + {isMine && isEditing ? :
') }}>
}
@@ -75,6 +76,6 @@ class Comment extends Component { } Comment.propTypes = propTypes; -Comment.defaultProps= defaultProps; +Comment.defaultProps = defaultProps; export default Comment; diff --git a/src/component/index.js b/src/component/index.js index 32c0205..c9e0c8f 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -26,7 +26,9 @@ const propTypes = { empty: PropTypes.string.isRequired }).isRequired, locale: PropTypes.string.isRequired, - messageSentCallback: PropTypes.func + messageSentCallback: PropTypes.func, + timeDisplay: PropTypes.oneOf(['ago', 'dateTime']), + dateTimeFormat: PropTypes.string } const defaultProps = { @@ -43,7 +45,9 @@ const defaultProps = { loading: 'Loading...', empty: 'Be the first to leave your comment below !' }, - locale: 'en' + locale: 'en', + timeDisplay: 'ago', + dateTimeFormat: 'DD/MM/YYYY HH:mm' } class Container extends Component { From 1c68bbfbc037c2c57129bac2c8d7e451dcec3742 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20BOULETKESSLER?= Date: Thu, 10 Aug 2017 14:36:09 +0200 Subject: [PATCH 2/2] update README.md to show new props --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 8216eb0..84718ae 100644 --- a/README.md +++ b/README.md @@ -38,3 +38,5 @@ Please note that you must you React with addons, so choose the appropriate built - **locale** (`string`): application locale (from [momentJS](http://momentjs.com/docs/#/i18n/changing-locale/)), - **currentUserId** (`number`): the current user id - **messageSentCallback** (`function`): a callback to know when a message has been sent +- **timeDisplay** (`string`): the display format, either `ago` or `dateTime`, `ago` by default +- **dateTimeFormat** (`string`): the dateTime format if **timeDisplay** is set to `dateTime`