LD-531 - Adds correct margin/padding to last carousel image (#1556)

LD-531 - Adds correct margin/padding to last carousel image
artsy · Mar 22, 2019 · 0679ab1 · 0679ab1
2 parents 0c483a4 + fa12bf2
commit 0679ab1
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 113 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - Fixes scrollable tab bar on global saves & follows - ash & ashley
 - Requires phone number during bidder registration - sweir27
 - Migrates to React Native 0.57.x - orta/alloy/luc/justin
+- Adds correct margin/padding to last carousel image - kieran
 
 ### 1.9.1
 

diff --git a/src/lib/Scenes/Show/Components/ShowHeader/Components/Carousel.tsx b/src/lib/Scenes/Show/Components/ShowHeader/Components/Carousel.tsx
@@ -4,26 +4,6 @@ import React from "react"
 import { Dimensions, ScrollView, ScrollViewProperties } from "react-native"
 import styled from "styled-components/native"
 
-const ITEM_HEIGHT = 350
-
-const { width: windowWidth } = Dimensions.get("window")
-
-const ImageView = styled(OpaqueImageView)<{ isFirst: boolean; aspectRatio: number }>`
-  height: ${ITEM_HEIGHT};
-  margin-top: ${p => (p.isFirst ? 150 : 0)};
-  ${p =>
-    p.isFirst &&
-    `
-      height: 200;
-      width: ${windowWidth - space(2) - 80};
-    `};
-`
-
-const PageList = styled(ScrollView)`
-  height: ${ITEM_HEIGHT}px;
-  padding-left: ${space(2)};
-`
-
 interface Props extends ScrollViewProperties {
   sources: Array<{
     imageURL: string
@@ -39,11 +19,14 @@ export class Carousel extends React.Component<Props> {
   renderItems = () => {
     const { sources } = this.props
 
-    return sources.map((source, i) => (
-      <Flex key={this.keyForSource(source)} mr={1} alignItems="flex-start">
-        <ImageView {...source} isFirst={i === 0} />
-      </Flex>
-    ))
+    return sources.map((source, i) => {
+      const lastImage = i === sources.length - 1
+      return (
+        <Flex key={this.keyForSource(source)} mr={lastImage ? 2 : 1} pr={lastImage ? 2 : 0} alignItems="flex-start">
+          <ImageView {...source} isFirst={i === 0} />
+        </Flex>
+      )
+    })
   }
 
   render() {
@@ -64,3 +47,23 @@ export class Carousel extends React.Component<Props> {
     )
   }
 }
+
+const ITEM_HEIGHT = 350
+
+const { width: windowWidth } = Dimensions.get("window")
+
+const ImageView = styled(OpaqueImageView)<{ isFirst: boolean; aspectRatio: number }>`
+  height: ${ITEM_HEIGHT};
+  margin-top: ${p => (p.isFirst ? 150 : 0)};
+  ${p =>
+    p.isFirst &&
+    `
+      height: 200;
+      width: ${windowWidth - space(2) - 80};
+    `};
+`
+
+const PageList = styled(ScrollView)`
+  height: ${ITEM_HEIGHT}px;
+  padding-left: ${space(2)};
+`
diff --git a/...nes/Show/Components/ShowHeader/Components/__tests__/__snapshots__/Carousel-tests.tsx.snap b/...nes/Show/Components/ShowHeader/Components/__tests__/__snapshots__/Carousel-tests.tsx.snap
@@ -75,12 +75,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -105,12 +107,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -134,12 +138,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -163,12 +169,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -192,12 +200,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -221,12 +231,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -250,12 +262,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -279,12 +293,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -308,12 +324,14 @@ exports[`Carousel renders properly 1`] = `
       <View
         alignItems="flex-start"
         mr={1}
+        pr={0}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
               "marginRight": 4,
+              "paddingRight": 0,
             },
             undefined,
           ]
@@ -336,13 +354,15 @@ exports[`Carousel renders properly 1`] = `
       </View>
       <View
         alignItems="flex-start"
-        mr={1}
+        mr={2}
+        pr={2}
         style={
           Array [
             Object {
               "alignItems": "flex-start",
               "display": "flex",
-              "marginRight": 4,
+              "marginRight": 8,
+              "paddingRight": 8,
             },
             undefined,
           ]