Fixed: Add Placeholder to tracks table for correct rendering

pull/6/head
Qstick 5 years ago
parent 6da224bfc4
commit 2b342bdd95

@ -0,0 +1,6 @@
.TrackActionsCell {
composes: cell from '~Components/Table/Cells/TableRowCell.css';
width: 70px;
white-space: nowrap;
}

@ -0,0 +1,34 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons } from 'Helpers/Props';
import IconButton from 'Components/Link/IconButton';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import styles from './TrackActionsCell.css';
class TrackActionsCell extends Component {
//
// Render
render() {
return (
// TODO: Placeholder until we figure out what to show here.
<TableRowCell className={styles.TrackActionsCell}>
<IconButton
name={icons.DELETE}
title="Delete Track"
/>
</TableRowCell>
);
}
}
TrackActionsCell.propTypes = {
id: PropTypes.number.isRequired,
albumId: PropTypes.number.isRequired
};
export default TrackActionsCell;

@ -6,6 +6,7 @@ import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
import TrackFileLanguageConnector from 'TrackFile/TrackFileLanguageConnector';
import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
import TrackActionsCell from './TrackActionsCell';
import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
import styles from './TrackRow.css';
@ -36,6 +37,7 @@ class TrackRow extends Component {
render() {
const {
id,
albumId,
mediumNumber,
trackFileId,
absoluteTrackNumber,
@ -166,6 +168,16 @@ class TrackRow extends Component {
);
}
if (name === 'actions') {
return (
<TrackActionsCell
key={name}
albumId={albumId}
id={id}
/>
);
}
return null;
})
}

@ -1,17 +1,13 @@
/* eslint max-params: 0 */
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
import TrackRow from './TrackRow';
function createMapStateToProps() {
return createSelector(
(state, { id }) => id,
(state, { mediumNumber }) => mediumNumber,
createTrackFileSelector(),
createCommandsSelector(),
(id, mediumNumber, trackFile, commands) => {
(id, trackFile) => {
return {
trackFilePath: trackFile ? trackFile.path : null,
trackFileRelativePath: trackFile ? trackFile.relativePath : null

Loading…
Cancel
Save