display temp button to unblock removeTransaction functionality

Expensify · Apr 26, 2021 · b063b9c · b063b9c
1 parent d5bec43
commit b063b9c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/components/TransactionItem.js b/src/components/TransactionItem.js
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import { View, Text, Pressable } from 'react-native-web';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 import ReportActionItemIOUPreview from '../components/ReportActionItemIOUPreview';
+import styles from '../styles/styles';
 
 const propTypes = {
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
@@ -17,6 +19,9 @@ const propTypes = {
 
         // The transaction amount
         amount: PropTypes.number,
+
+        // Was this transaction created by the current user
+        createdByUser: PropTypes.bool,
     }).isRequired,
 };
 
@@ -26,13 +31,36 @@ const defaultProps = {
     },
 };
 
-const TransactionItem = props => (
-    <ReportActionItemIOUPreview
-            action={props.action}
-            isMostRecentIOUReport={false}// shouldDIsplayPreviewBox
-    />
+class TransactionItem extends Component {
+    constructor(props) {
+        super(props);
+
+        this.removeTransaction = this.removeTransaction.bind(this);
+    }
 
-);
+    removeTransaction() {
+        console.debug('removeTransaction');
+    }
+
+    render() {
+        return (
+            <View styles={[styles.mb5]}>
+                <ReportActionItemIOUPreview
+                        action={this.props.action}
+                        isMostRecentIOUReport={false}// shouldDIsplayPreviewBox
+                />
+                <Pressable
+                    style={[styles.button, styles.alignItemsStart, styles.mb3]}
+                    onPress={() => this.removeTransaction()}
+                >
+                    <Text style={[styles.buttonSmallText]}>
+                        {this.props.transaction.createdByUser ? 'Cancel' : 'Decline'}
+                    </Text>
+                </Pressable>
+            </View>
+        );
+    }
+};
 
 TransactionItem.displayName = 'TransactionItem';
 TransactionItem.propTypes = propTypes;

diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js
@@ -52,6 +52,10 @@ export default {
         alignItems: 'flex-end',
     },
 
+    alignItemsStart: {
+        alignItems: 'start',
+    },
+
     flexWrap: {
         flexWrap: 'wrap',
     },