Component refactoring

2018-10-03 14:54:05 -05:00
parent b4aa381023
commit b430465b7b
15 changed files with 390 additions and 128 deletions
--- a/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js
+++ b/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import styles from './ReleaseVersionDisplay.css';
+import CSSModules from 'react-css-modules';
+import DropDown from '../UI/DropDown/DropDown';
+import Grid from '../UI/Grid/Grid';
+import Text from '../UI/Text/Text';
+import Button from '../UI/Button/Button';
+import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
+
+export default CSSModules((props) => {
+  let optionsDisplay = null;
+  if (props.releaseExtracting) {
+    optionsDisplay = <Text align='center'
+                           row={13}
+                           rowSpan={7}
+                           colSpan={'remain'}
+                           text={'Activating <' + props.installedVersion + '>'}/>
+  } else {
+    optionsDisplay = <Button clicked={props.downloadClicked}
+                             colSpan={20}
+                             disabled={props.downloadDisabled}
+                             row={13}
+                             rowSpan={7}>Install</Button>;
+  }
+
+  return (
+    <Grid>
+      <Text colSpan={columns=>columns / 3}
+            rowSpan={4}
+            text={'Release'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <DropDown changed={props.releaseChanged}
+                colSpan={remain=>remain / 3 - 1}
+                disabled={props.disabled}
+                items={props.releaseTypes}
+                row={5}
+                rowSpan={7}
+                selected={props.release}/>
+      <Text col={dimensions => dimensions.columns / 3}
+            colSpan={remain=>remain / 2}
+            rowSpan={4}
+            text={'Version'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <UpgradeIcon available={props.versionAvailable}
+                   col={dimensions => ((dimensions.columns / 3) * 2) - 6}
+                   colSpan={4}
+                   release
+                   rowSpan={4}/>
+      <DropDown changed={props.versionChanged}
+                col={dimensions => dimensions.columns / 3}
+                colSpan={remain=>remain / 2 - 1}
+                disabled={props.disabled}
+                items={props.versions}
+                row={5}
+                rowSpan={7}
+                selected={props.version}/>
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            rowSpan={4}
+            text={'Installed'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            row={5}
+            rowSpan={7}
+            text={props.installedVersion}
+            textAlign={'left'}/>
+      {optionsDisplay}
+    </Grid>
+  );
+}, styles, {allowMultiple: true});