45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
// Create a ES6 class component
|
|
class FilesList extends React.Component {
|
|
// Use the render function to return JSX component
|
|
render() {
|
|
let final = [];
|
|
let files = this.props.files;
|
|
|
|
for (let file of files) {
|
|
final.push(
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">{file}</div>
|
|
<div class="card-body">
|
|
<img class="image-style" src="/api/files/file" alt="{file}" />
|
|
</div>
|
|
<div class="card-footer">
|
|
<input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
|
|
<input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch Locally"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div class="row">
|
|
{final}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const renderFilesList = (data = {"files": ['Dir 1', 'Dir 2', 'Dir 3', 'Dir 4', 'Dir 5']}) => {
|
|
// Obtain the root
|
|
const filesListElm = document.getElementById('files')
|
|
|
|
// Use the ReactDOM.render to show our component on the browser
|
|
ReactDOM.render(
|
|
React.createElement(FilesList, data),
|
|
filesListElm
|
|
)
|
|
}
|
|
|
|
renderFilesList()
|