Folder.jsx 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import React from 'react'
  2. import { translate } from 'react-i18next'
  3. import PropTypes from 'prop-types'
  4. import classnames from 'classnames'
  5. // import FileItem from './ContentItem.jsx'
  6. // import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
  7. import SubDropdownCreateButton from '../common/Input/SubDropdownCreateButton.jsx'
  8. import BtnExtandedAction from './BtnExtandedAction.jsx'
  9. class Folder extends React.Component {
  10. constructor (props) {
  11. super(props)
  12. this.state = {
  13. open: false
  14. }
  15. }
  16. handleClickToggleFolder = () => {
  17. !this.state.open && this.props.folderData.content.length === 0 && this.props.onClickFolder(this.props.folderData.id)
  18. this.setState({open: !this.state.open})
  19. }
  20. handleClickCreateContent = (e, folder, type) => {
  21. e.stopPropagation() // because we have a link inside a link (togler and newFile)
  22. this.props.onClickCreateContent(folder, type)
  23. }
  24. render () {
  25. const {
  26. availableApp,
  27. folderData,
  28. // onClickItem,
  29. onClickExtendedAction,
  30. onClickCreateContent,
  31. // onClickFolder,
  32. isLast,
  33. t
  34. } = this.props
  35. return (
  36. <div className={classnames('folder', {'active': this.state.open && folderData.content.length > 0, 'item-last': isLast})}>
  37. <div className='folder__header align-items-center' onClick={this.handleClickToggleFolder}>
  38. <div className='folder__header__triangleborder'>
  39. <div className='folder__header__triangleborder__triangle' />
  40. </div>
  41. <div className='folder__header__icon'>
  42. <i className={classnames('fa fa-fw', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
  43. </div>
  44. <div className='folder__header__name'>
  45. { folderData.label }
  46. </div>
  47. <div className='folder__header__button'>
  48. <div className='folder__header__button__addbtn'>
  49. <button
  50. className='addbtn__text btn btn-outline-primary dropdown-toggle'
  51. type='button'
  52. id='dropdownMenuButton'
  53. data-toggle='dropdown'
  54. aria-haspopup='true'
  55. aria-expanded='false'
  56. onClick={e => e.stopPropagation()}
  57. >
  58. {t('Create in folder...')}
  59. </button>
  60. <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
  61. <SubDropdownCreateButton
  62. idFolder={null}
  63. availableApp={availableApp}
  64. onClickCreateContent={onClickCreateContent}
  65. />
  66. </div>
  67. <div className='d-none d-md-flex'>
  68. <BtnExtandedAction onClickExtendedAction={{
  69. edit: e => onClickExtendedAction.edit(e, folderData),
  70. move: e => onClickExtendedAction.move(e, folderData),
  71. download: e => onClickExtendedAction.download(e, folderData),
  72. archive: e => onClickExtendedAction.archive(e, folderData),
  73. delete: e => onClickExtendedAction.delete(e, folderData)
  74. }} />
  75. </div>
  76. </div>
  77. </div>
  78. <div className='folder__header__status' />
  79. </div>
  80. <div className='folder__content'>
  81. {
  82. // folderData.map((c, i) => c.type === 'folder'
  83. // ? <Folder
  84. // app={app}
  85. // folderData={c}
  86. // onClickItem={onClickItem}
  87. // onClickExtendedAction={onClickExtendedAction}
  88. // onClickFolder={onClickFolder}
  89. // isLast={isLast}
  90. // t={t}
  91. // key={c.id}
  92. // />
  93. // : <FileItem
  94. // icon={(app[c.type] || {icon: ''}).icon}
  95. // name={c.title}
  96. // type={c.type}
  97. // status={c.status}
  98. // onClickItem={() => onClickItem(c)}
  99. // onClickExtendedAction={{
  100. // // we have to use the event here because it is the only place where we also have the content (c)
  101. // edit: e => onClickExtendedAction.edit(e, c),
  102. // move: e => onClickExtendedAction.move(e, c),
  103. // download: e => onClickExtendedAction.download(e, c),
  104. // archive: e => onClickExtendedAction.archive(e, c),
  105. // delete: e => onClickExtendedAction.delete(e, c)
  106. // }}
  107. // isLast={isLast && i === folderData.content.length - 1}
  108. // key={c.id}
  109. // />
  110. // )
  111. }
  112. </div>
  113. </div>
  114. )
  115. }
  116. }
  117. export default translate()(Folder)
  118. Folder.propTypes = {
  119. folderData: PropTypes.object,
  120. app: PropTypes.array,
  121. onClickItem: PropTypes.func.isRequired,
  122. onClickFolder: PropTypes.func.isRequired,
  123. isLast: PropTypes.bool.isRequired
  124. }