Initial commit

src/components/DependencyList/Dependency/Dependency.css

@@ -0,0 +1,9 @@
+.Dependency {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.Link {
+  cursor: pointer;
+}

src/components/DependencyList/Dependency/Dependency.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Dependency.css';
+
+export default CSSModules((props) => {
+  return (
+    <div styleName='Dependency'>
+      <table width="100%">
+        <tbody>
+          <tr>
+            <td width="35%">
+              <h3>{props.name}</h3>
+            </td>
+            <td>
+              {props.allowDownload ?
+                <a styleName='Link' href={void(0)} onClick={()=>{props.onDownload(props.download); return false;}}><u>Install</u></a> :
+                'Installing...'}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/DependencyList/DependencyList.css

@@ -0,0 +1,3 @@
+.DependencyList {
+
+}

src/components/DependencyList/DependencyList.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './DependencyList.css';
+import Dependency from './Dependency/Dependency';
+import Box from '../UI/Box/Box';
+
+export default CSSModules((props) => {
+  const items = props.dependencies.map((k, i)=> {
+    return (
+      <Dependency allowDownload={props.allowDownload}
+                  key={i}
+                  name={k.display}
+                  download={k.download}
+                  onDownload={props.onDownload}/>
+    );
+  });
+
+  return (
+    <Box dxDark dxStyle={{width: '300px', height: 'auto', padding: '5px'}}>
+      <div style={{width: '100%', height: 'auto', paddingBottom: '5px', boxSizing: 'border-box'}}>
+        <h1 style={{width: '100%', textAlign: 'center'}}>Missing Dependencies</h1>
+      </div>
+      {items}
+    </Box>
+  );
+
+}, styles, {allowMultiple: true});