You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Lidarr/frontend/src/TrackFile/ExpandingFileDetails.js

85 lines
1.8 KiB

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Icon from 'Components/Icon';
4 years ago
import { icons } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import FileDetails from './FileDetails';
import styles from './ExpandingFileDetails.css';
class ExpandingFileDetails extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isExpanded: props.isExpanded
};
}
//
// Listeners
onExpandPress = () => {
const {
isExpanded
} = this.state;
this.setState({ isExpanded: !isExpanded });
}
//
// Render
render() {
const {
filename,
audioTags,
rejections
} = this.props;
const {
isExpanded
} = this.state;
return (
<div
className={styles.fileDetails}
>
<div className={styles.header} onClick={this.onExpandPress}>
<div className={styles.filename}>
{filename}
</div>
<div className={styles.expandButton}>
<Icon
className={styles.expandButtonIcon}
name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
title={isExpanded ? translate('IsExpandedHideFileInfo') : translate('IsExpandedShowFileInfo')}
size={24}
/>
</div>
</div>
{
isExpanded &&
<FileDetails
audioTags={audioTags}
rejections={rejections}
/>
}
</div>
);
}
}
ExpandingFileDetails.propTypes = {
audioTags: PropTypes.object.isRequired,
filename: PropTypes.string.isRequired,
rejections: PropTypes.arrayOf(PropTypes.object),
isExpanded: PropTypes.bool
};
export default ExpandingFileDetails;