From 162f12cdaa7eb9788f360ef9aa72d5a21b7845bf Mon Sep 17 00:00:00 2001
From: Simon Siegert <sisiegert@uni-potsdam.de>
Date: Tue, 14 Sep 2021 19:59:16 +0200
Subject: [PATCH] Enable left image alignment in Card List

---
 package.json               |  2 +-
 src/CardList/index.js      | 33 ++++++++++++++++++++++++++++++++-
 src/CardList/manifest.json |  3 ++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index f7834b6..e2eb086 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@protonapp/material-components",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "Material UI Components for Proton",
   "main": "index.js",
   "scripts": {
diff --git a/src/CardList/index.js b/src/CardList/index.js
index 6478168..17e10ec 100644
--- a/src/CardList/index.js
+++ b/src/CardList/index.js
@@ -286,7 +286,11 @@ class Cell extends Component {
     } else if (media.position === 'right') {
       wrapperStyles = [styles.rightMedia]
       imageStyles = [{ height: percent, borderRadius: 2 }]
-    } else {
+    } else if (media.position === 'left') {
+      wrapperStyles = [styles.leftMedia]
+      imageStyles = [{ height: percent, borderRadius: 4 }]
+    }
+    else {
       wrapperStyles.push(styles.middleMedia)
     }
     if (cardStyles) {
@@ -363,6 +367,21 @@ class Cell extends Component {
     )
   }
 
+
+  renderMediaLeft() {
+    return (
+      <View style={[styles.cellInner, styles.cellLeftMedia]}>
+        <View style={{ justifyContent: 'center' }}>
+         {this.renderMedia()}
+        </View>
+        <View style={[styles.contentWrapper]}>
+          {this.renderTitle()}
+          {this.renderBody()}
+        </View>
+      </View>
+    )
+  }
+
   renderContent() {
     let { media } = this.props
 
@@ -370,6 +389,8 @@ class Cell extends Component {
       return this.renderMediaMiddle()
     } else if (media && media.position === 'right') {
       return this.renderMediaRight()
+    } else if (media && media.position === 'left') {
+      return this.renderMediaLeft()
     }
 
     return this.renderMediaTop()
@@ -736,6 +757,9 @@ const styles = StyleSheet.create({
   cellRightMedia: {
     flexDirection: 'row',
   },
+  cellLeftMedia: {
+    flexDirection: 'row'
+  },
   rightMedia: {
     height: 80,
     width: 80,
@@ -743,6 +767,13 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     marginLeft: 16,
   },
+  leftMedia: {
+    height: 80,
+    width: 80,
+    marginTop: 0,
+    marginBottom: 8,
+    marginRight: 16,
+  },
   contentWrapper: {
     flex: 1,
   },
diff --git a/src/CardList/manifest.json b/src/CardList/manifest.json
index e75942d..8556646 100644
--- a/src/CardList/manifest.json
+++ b/src/CardList/manifest.json
@@ -144,7 +144,8 @@
             "options": [
               { "label": "Image Top", "value": "top" },
               { "label": "Image Middle", "value": "middle" },
-              { "label": "Image Right", "value": "right" }
+              { "label": "Image Right", "value": "right" },
+              { "label": "Image Left", "value": "left" }
             ]
           }
         },