[Consignments] Adds the ability to attach a bottom button to any comp…

…onent heirarchy
artsy · Jun 5, 2017 · e396b59 · e396b59
1 parent 282edad
commit e396b59
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/src/lib/components/consignments/__stories__/consignments-bottom-aligned.story.tsx b/src/lib/components/consignments/__stories__/consignments-bottom-aligned.story.tsx
@@ -12,16 +12,18 @@ interface States {
 }
 
 const withText = {
-  children: [<Text>hi</Text>],
+  children: [<Text style={{color: "white"}}>hi</Text>],
   onPress: () => "" ,
 }
 
 const withSearchResults = {
-  children: [<Search searching={false} query="Bank" results={null} />],
+  children: [<Search searching={false} query="Banko" results={null} />],
   onPress: () => "",
 }
 
 export const allStates: States[] = [
   { "With a Text element" : withText },
   { "With an Artist Search Results Component" : withSearchResults },
 ]
+
+// TODO: Make a component that animates keyboard back and forth
diff --git a/src/lib/components/consignments/components/bottom-aligned-button.tsx b/src/lib/components/consignments/components/bottom-aligned-button.tsx
@@ -1,32 +1,24 @@
 import * as React from "react"
-import { Button, View } from "react-native"
+import { KeyboardAvoidingView, View } from "react-native"
 
 import styled from "styled-components/native"
 import colors from "../../../../data/colors"
 import fonts from "../../../../data/fonts"
 
-const Title = styled.Text`
+const ButtonText = styled.Text`
   color: white
   font-family: "${fonts["avant-garde-regular"]}"
   flex: 1
+  text-align: center
+  font-size: 14
 `
 
-const Subtitle = styled.Text`
-  color: white
-  font-family: "${fonts["garamond-regular"]}"
-  padding-top: 6
-  flex: 1
-  text-align: right
+const Body = styled.TouchableOpacity`
+  height: 40
+  margin-bottom: 20
+  padding-top: 18
 `
 
-const ImageDarkener = styled.View`
-  background-color: rgba(0, 0, 0, 0.5)
-  flex: 1
-  width: 38
-  justify-content: center
-  align-items: center
-  padding-top: 2
-`
 const Separator = styled.View`
   background-color: ${colors["gray-regular"]}
   height: 1
@@ -38,13 +30,16 @@ export interface BottomAlignedProps {
 }
 
 const render = (props: BottomAlignedProps) =>
-  <View>
+  <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={{ flex: 1 }}>
+
     {props.children}
-    <Separator />
-    <View style={{ backgroundColor: "black", color: "white", height: 40 }}>
-      <Button title="DONE" onPress={props.onPress} />
-    </View>
-  </View>
+
+    <View key="space-eater" style={{flexGrow: 1}}/>
+    <Separator key="separator"/>
+    <Body key="button" onPress={props.onPress}>
+      <ButtonText>DONE</ButtonText>
+    </Body>
+  </KeyboardAvoidingView>
 
 // Export a pure component version
 export default class BottomAlignedButton extends React.PureComponent<BottomAlignedProps, null> {