39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import './DependencyList.css';
|
|
import {connect} from 'react-redux';
|
|
import * as Constants from '../../constants';
|
|
import Dependency from './Dependency/Dependency';
|
|
import Box from '../UI/Box/Box';
|
|
import {downloadItem} from '../../redux/actions/download_actions';
|
|
import {extractFileNameFromURL} from '../../utils';
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
MissingDependencies: state.install.MissingDependencies,
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
downloadItem: (name, type, url) => dispatch(downloadItem(name, type, url))
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(props => {
|
|
const items = props.MissingDependencies.map((k, i)=> {
|
|
return (
|
|
<Dependency key={i}
|
|
name={k.display}
|
|
onDownload={()=>props.downloadItem(extractFileNameFromURL(k.download), Constants.INSTALL_TYPES.Dependency, k.download)}/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<Box dxStyle={{width: '300px', height: 'auto', padding: '5px'}}>
|
|
<div style={{width: '100%', height: 'auto', paddingBottom: '5px', boxSizing: 'border-box'}}>
|
|
<h1 style={{width: '100%', textAlign: 'center', color: 'var(--text_color_error)'}}>Missing Dependencies</h1>
|
|
</div>
|
|
{items}
|
|
</Box>
|
|
);
|
|
}); |