123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- import React from 'react'
- import { translate } from 'react-i18next'
- import PropTypes from 'prop-types'
- import classnames from 'classnames'
- import FileItem from './ContentItem.jsx'
- // import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
- import BtnExtandedAction from './BtnExtandedAction.jsx'
-
- class Folder extends React.Component {
- constructor (props) {
- super(props)
- this.state = {
- open: false
- }
- }
-
- handleClickToggleFolder = () => {
- !this.state.open && this.props.folderData.content.length === 0 && this.props.onClickFolder(this.props.folderData.id)
- this.setState({open: !this.state.open})
- }
-
- handleClickNewFile = e => {
- e.stopPropagation() // because we have a link inside a link (togler and newFile)
- console.log('new file') // @TODO
- }
-
- render () {
- const {
- app,
- folderData,
- onClickItem,
- onClickExtendedAction,
- onClickFolder,
- isLast,
- t
- } = this.props
-
- return (
- <div className={classnames('folder', {'active': this.state.open && folderData.content.length > 0, 'item-last': isLast})}>
- <div className='folder__header align-items-center' onClick={this.handleClickToggleFolder}>
-
- <div className='folder__header__triangleborder'>
- <div className='folder__header__triangleborder__triangle' />
- </div>
-
- <div className='folder__header__icon'>
- <i className={classnames('fa fa-fw', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
- </div>
-
- <div className='folder__header__name'>
- { folderData.title }
- </div>
-
- <div className='folder__header__button'>
-
- <div
- className='folder__header__button__addbtn'
- onClick={this.handleClickNewFile}
- >
- <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
- {t('Folder.create')} ...
- </button>
-
- <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__folder d-flex align-items-center'>
- <div className='subdropdown__link__folder__icon mr-3'>
- <i className='fa fa-fw fa-folder-o' />
- </div>
- <div className='subdropdown__link__folder__text'>
- Créer un dossier
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__apphtml d-flex align-items-center'>
- <div className='subdropdown__link__apphtml__icon mr-3'>
- <i className='fa fa-fw fa-file-text-o' />
- </div>
- <div className='subdropdown__link__apphtml__text'>
- Rédiger un document
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__appfile d-flex align-items-center'>
- <div className='subdropdown__link__appfile__icon mr-3'>
- <i className='fa fa-fw fa-file-image-o' />
- </div>
- <div className='subdropdown__link__appfile__text'>
- Importer un fichier
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
- <div className='subdropdown__link__appmarkdown__icon mr-3'>
- <i className='fa fa-fw fa-file-code-o' />
- </div>
- <div className='subdropdown__link__appmarkdown__text'>
- Rédiger un document markdown
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__appthread d-flex align-items-center'>
- <div className='subdropdown__link__appthread__icon mr-3'>
- <i className='fa fa-fw fa-comments-o' />
- </div>
- <div className='subdropdown__link__appthread__text'>
- Lancer une discussion
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__apptask d-flex align-items-center'>
- <div className='subdropdown__link__apptask__icon mr-3'>
- <i className='fa fa-fw fa-list-ul' />
- </div>
- <div className='subdropdown__link__apptask__text'>
- Créer une tâche
- </div>
- </div>
- </div>
- <div className='subdropdown__link dropdown-item'>
- <div className='subdropdown__link__appissue d-flex align-items-center'>
- <div className='subdropdown__link__appissue__icon mr-3'>
- <i className='fa fa-fw fa-ticket' />
- </div>
- <div className='subdropdown__link__appissue__text'>
- Ouvrir un ticket
- </div>
- </div>
- </div>
- </div>
-
- <div className='d-none d-md-flex'>
- <BtnExtandedAction onClickExtendedAction={{
- edit: e => onClickExtendedAction.edit(e, folderData),
- move: e => onClickExtendedAction.move(e, folderData),
- download: e => onClickExtendedAction.download(e, folderData),
- archive: e => onClickExtendedAction.archive(e, folderData),
- delete: e => onClickExtendedAction.delete(e, folderData)
- }} />
- </div>
-
- </div>
- </div>
-
- <div className='folder__header__status' />
-
- </div>
-
- <div className='folder__content'>
- { folderData.content.map((c, i) => c.type === 'folder'
- ? <Folder
- app={app}
- folderData={c}
- onClickItem={onClickItem}
- onClickExtendedAction={onClickExtendedAction}
- onClickFolder={onClickFolder}
- isLast={isLast}
- t={t}
- key={c.id}
- />
- : <FileItem
- icon={(app[c.type] || {icon: ''}).icon}
- name={c.title}
- type={c.type}
- status={c.status}
- onClickItem={() => onClickItem(c)}
- onClickExtendedAction={{
- // we have to use the event here because it is the only place where we also have the content (c)
- edit: e => onClickExtendedAction.edit(e, c),
- move: e => onClickExtendedAction.move(e, c),
- download: e => onClickExtendedAction.download(e, c),
- archive: e => onClickExtendedAction.archive(e, c),
- delete: e => onClickExtendedAction.delete(e, c)
- }}
- isLast={isLast && i === folderData.content.length - 1}
- key={c.id}
- />
- )}
- </div>
- </div>
- )
- }
- }
-
- export default translate()(Folder)
-
- Folder.propTypes = {
- folderData: PropTypes.shape({
- title: PropTypes.string.isRequired,
- content: PropTypes.array
- }),
- app: PropTypes.object,
- onClickItem: PropTypes.func.isRequired,
- onClickFolder: PropTypes.func.isRequired,
- isLast: PropTypes.bool.isRequired
- }
|