import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch } from 'redux' ; import { IAttachment } from 'superdesk-api' ; import { superdeskApi } from '../../apis' ; import { IAssetItem , ISetItem , SET_STATE } from '../../interfaces' ; import { IApplicationState } from '../../store' ; import { getAssets } from '../../store/assets/selectors' ; import { loadAssetsByIds } from '../../store/assets/actions' ; import { Icon , Label , IconButton } from 'superdesk-ui-framework/react' ; import { ListItem , ListItemColumn , ListItemRow , ListItemActionMenu , } from '../../ui/list' ; import { getIconTypeFromMimetype , getHumanReadableFileSize } from '../../utils/ui' ; interface IProps { files : Array < IAttachment > ; assets : Dictionary < string , IAssetItem > ; sets : Dictionary < string , ISetItem > ; readOnly : boolean ; editFile : ( file : IAttachment ) => void ; download : ( file : IAttachment ) => void ; removeFile : ( file : IAttachment ) => void ; loadAssetsByIds ( ids ) : Promise < void > ; } interface IState { loading : boolean ; } const mapStateToProps = ( state ) => ( { assets : getAssets ( state ) , } ) ; const mapDispatchToProps = ( dispatch ) => ( { loadAssetsByIds : ( ids ) => dispatch < any > ( loadAssetsByIds ( ids ) ) , } ) ; class SamsAttachmentsListComponent extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { loading : false , } ; this . renderFile = this . renderFile . bind ( this ) ; } componentDidMount ( ) { this . loadAssets ( ) ; } componentDidUpdate ( prevProps ) { if ( prevProps . files . length !== this . props . files . length ) { this . loadAssets ( ) ; } } loadAssets ( ) { this . setState ( { loading : true } ) ; const { getMediaId } = superdeskApi . entities . attachment ; const mediaIds = this . props . files . map ( ( file ) => getMediaId ( file ) ) ; this . props . loadAssetsByIds ( mediaIds ) . then ( ( ) => { this . setState ( { loading : false } ) ; } ) ; } getAttachmentSet ( file ) { const mediaId = superdeskApi . entities . attachment . getMediaId ( file ) ; const asset = this . props . assets ?. [ mediaId ] ; return this . props . sets ?. [ asset ?. set_id ] ; } renderFile ( file ) { const { gettext } = superdeskApi . localization ; const set = this . getAttachmentSet ( file ) ; const canEdit = this . state . loading === false && set ?. state === SET_STATE . USABLE ; return ( < ListItem key = { file . _id } shadow = { 1 } > < ListItemColumn > < Icon name = { getIconTypeFromMimetype ( file . mimetype ) } /> < /ListItemColumn> < ListItemColumn grow = { true } > < ListItemRow > < h4 > { file . title } < /h4> < /ListItemRow> < ListItemRow > < h5 > { file . filename } { `(${ getHumanReadableFileSize ( file . media . length ) })` } < /h5> < /ListItemRow> < ListItemRow > < div className = "description" > { file . description } < /div> < /ListItemRow> { file . internal === false ? null : ( < ListItemRow > < Label text = { gettext ( 'internal' ) } color = "label--orange2" / > < /ListItemRow>)} { set ?. state !== SET_STATE . DISABLED ? null : ( < ListItemRow > < Label text = { gettext ( 'Set Disabled' ) } color = "label--orange2" / > < /ListItemRow>)} < /ListItemColumn> < ListItemActionMenu row = { true } > < IconButton ariaValue = "download" onClick = { ( ) => this . props . download ( file ) } icon = "download" / > { this . props . readOnly === true ? null : ( < React . Fragment > { canEdit === false ? null : ( < IconButton ariaValue = "edit" onClick = { ( ) => this . props . editFile ( file ) } icon = "pencil" / > ) } < IconButton ariaValue = "delete" onClick = { ( ) => this . props . removeFile ( file ) } icon = "trash" / > < /React.Fragment>)} < /ListItemActionMenu> < /ListItem>); } render ( ) { return ( < div className = "attachments-list" > { this . state . loading === false ? null : ( < div className = "sd-loader" / > ) } { this . props . files . length === 0 ? null : ( < ul > { this . props . files . map ( this . renderFile ) } < /ul>)} < /div>); } } export const SamsAttachmentsList = connect ( mapStateToProps , mapDispatchToProps ) ( SamsAttachmentsListComponent ) ;