123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- import React from 'react'
- import PropTypes from 'prop-types'
- import classnames from 'classnames'
- import Radium from 'radium'
- import color from 'color'
- import Comment from './Comment.jsx'
- import Revision from './Revision.jsx'
- import { translate } from 'react-i18next'
-
- require('./Timeline.styl')
-
- class Timeline extends React.Component {
- componentDidMount () {
- this.scrollToBottom()
- }
-
- componentDidUpdate () {
- this.props.shouldScrollToBottom && this.scrollToBottom()
- }
-
- scrollToBottom = () => this.timelineBottom.scrollIntoView({behavior: 'instant'})
-
- render () {
- const { props } = this
-
- if (!Array.isArray(props.timelineData)) {
- console.log('Error in Timeline.jsx, props.timelineData is not an array. timelineData: ', props.timelineData)
- return null
- }
-
- return (
- <div className={classnames('timeline')}>
- {props.showHeader &&
- <div
- className={classnames(`${props.customClass}__header`, 'timeline__header')}
- onClick={props.toggleRightPart}
- >
- <div className='timeline__header__icon mt-3 mb-auto'>
- <i className={classnames('fa fa-fw', {'fa-angle-double-right': props.rightPartOpen, 'fa-angle-double-left': !props.rightPartOpen})} />
- </div>
- <div className='timeline__header__title'>
- {this.props.t('Timeline')}
- </div>
- <div className='timeline__header__icon mb-3 mt-auto'>
- <i className={classnames('fa fa-fw', {'fa-angle-double-right': props.rightPartOpen, 'fa-angle-double-left': !props.rightPartOpen})} />
- </div>
- </div>
- }
-
- {props.isArchived &&
- <div className='timeline__info'>
- <div className='timeline__info__msg'>
- <i className='fa fa-fw fa-archive' />
- {this.props.t('This content is archived.')}
- </div>
-
- <button className='timeline__info__btnrestore btn' onClick={props.onClickRestoreArchived}>
- <i className='fa fa-fw fa-archive' />
- {this.props.t('Restore')}
- </button>
- </div>
- }
-
- {props.isDeleted &&
- <div className='timeline__info'>
- <div className='timeline__info__msg'>
- <i className='fa fa-fw fa-trash' />
- {this.props.t('This content is deleted.')}
- </div>
-
- <button className='timeline__info__btnrestore btn' onClick={props.onClickRestoreDeleted}>
- <i className='fa fa-fw fa-trash' />
- {this.props.t('Restore')}
- </button>
- </div>
- }
-
- <div className='timeline__body'>
- <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__body__messagelist')}>
- {props.timelineData.map(content => {
- switch (content.timelineType) {
- case 'comment':
- return <Comment
- customClass={props.customClass}
- customColor={props.customColor}
- author={content.author.public_name}
- avatar={content.author.avatar_url}
- createdAt={content.created}
- text={content.raw_content}
- fromMe={props.loggedUser.user_id === content.author.user_id}
- key={`comment_${content.content_id}`}
- />
-
- case 'revision':
- return <Revision
- customClass={props.customClass}
- customColor={props.customColor}
- createdAt={content.created}
- number={content.number}
- key={`revision_${content.revision_id}`}
- onClickRevision={() => props.onClickRevisionBtn(content)}
- />
- }
- })}
- <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
- </ul>
-
- {props.loggedUser.idRoleUserWorkspace >= 2 &&
- <form className={classnames(`${props.customClass}__texteditor`, 'timeline__body__texteditor')}>
- <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__body__texteditor__textinput')}>
- <textarea
- id='wysiwygTimelineComment'
- placeholder='Votre message ...'
- value={props.newComment}
- onChange={props.onChangeNewComment}
- disabled={props.disableComment}
- />
- </div>
-
- <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__body__texteditor__wrapper')}>
- <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__body__texteditor__advancedtext')}>
- <button
- type='button'
- className={classnames(
- `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn`
- )}
- onClick={props.onClickWysiwygBtn}
- disabled={props.disableComment}
- style={{
- backgroundColor: 'transparent',
- color: '#333',
- borderColor: props.customColor,
- ':hover': {
- backgroundColor: props.customColor,
- color: '#fdfdfd'
- }
- }}
- key={'timeline__comment__advancedtext'}
- >
- {props.wysiwyg ? 'Texte simple' : 'Texte riche'}
- </button>
- </div>
-
- <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__body__texteditor__submit')}>
- <button
- type='button'
- className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
- onClick={props.onClickValidateNewCommentBtn}
- disabled={props.disableComment}
- style={{
- backgroundColor: props.customColor,
- color: '#fdfdfd',
- ':hover': {
- backgroundColor: color(props.customColor).darken(0.15).hexString()
- }
- }}
- key={'timeline__comment__send'}
- >
- Envoyer
- <div
- className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__body__texteditor__submit__btn__icon')}>
- <i className='fa fa-paper-plane-o' />
- </div>
- </button>
- </div>
- </div>
- </form>
- }
- </div>
- </div>
- )
- }
- }
-
- export default Radium(translate()(Timeline))
-
- Timeline.propTypes = {
- timelineData: PropTypes.array.isRequired,
- newComment: PropTypes.string.isRequired,
- onChangeNewComment: PropTypes.func.isRequired,
- onClickValidateNewCommentBtn: PropTypes.func.isRequired,
- disableComment: PropTypes.bool,
- customClass: PropTypes.string,
- customColor: PropTypes.string,
- loggedUser: PropTypes.object,
- wysiwyg: PropTypes.bool,
- onClickWysiwygBtn: PropTypes.func,
- onClickRevisionBtn: PropTypes.func,
- shouldScrollToBottom: PropTypes.bool,
- showHeader: PropTypes.bool,
- rightPartOpen: PropTypes.bool, // irrelevant if showHeader is false
- isArchived: PropTypes.bool,
- onClickRestoreArchived: PropTypes.func,
- isDeleted: PropTypes.bool,
- onClickRestoreDeleted: PropTypes.func
- }
-
- Timeline.defaultProps = {
- disableComment: false,
- customClass: '',
- customColor: '',
- loggedUser: {
- id: '',
- name: '',
- avatar: '',
- idRoleUserWorkspace: 1
- },
- timelineData: [],
- wysiwyg: false,
- onClickWysiwygBtn: () => {},
- shouldScrollToBottom: true,
- showHeader: true,
- rightPartOpen: false,
- isArchived: false,
- isDeleted: false
- }
|