react-native-gesture-handler#Swipeable JavaScript Examples
The following examples show how to use
react-native-gesture-handler#Swipeable.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: transaction.js From actual with MIT License | 4 votes |
|
render() {
const {
adding,
categories,
accounts,
payees,
renderChildEdit,
navigation,
onDelete
} = this.props;
const { editingChild } = this.state;
const transactions = this.serializeTransactions(
this.state.transactions || []
);
const [transaction, ...childTransactions] = transactions;
const { payee: payeeId, category, account: accountId } = transaction;
// Child transactions should always default to the signage
// of the parent transaction
let forcedSign = transaction.amount < 0 ? 'negative' : 'positive';
let account = getAccountsById(accounts)[accountId];
let payee = payees && payeeId && getPayeesById(payees)[payeeId];
let transferAcct =
payee &&
payee.transfer_acct &&
getAccountsById(accounts)[payee.transfer_acct];
let descriptionPretty = getDescriptionPretty(
transaction,
payee,
transferAcct
);
return (
<KeyboardAvoidingView>
<View
style={{
margin: 10,
marginTop: 3,
backgroundColor: 'white',
flex: 1,
borderRadius: 4,
// This shadow make the card "pop" off of the screen below
// it
shadowColor: colors.n3,
shadowOffset: { width: 0, height: 0 },
shadowRadius: 4,
shadowOpacity: 1
}}
>
<View style={{ borderRadius: 4, overflow: 'hidden', flex: 1 }}>
<View
style={{
borderBottomWidth: 1,
borderColor: colors.n9,
flexDirection: 'row',
justifyContent: 'center',
padding: 15
}}
>
<TextOneLine
centered={true}
style={[
styles.header.headerTitleStyle,
{ marginHorizontal: 30 }
]}
>
{payeeId == null
? adding
? 'New Transaction'
: 'Transaction'
: descriptionPretty}
</TextOneLine>
</View>
<ScrollView
ref={el => (this.scrollView = el)}
automaticallyAdjustContentInsets={false}
keyboardShouldPersistTaps="always"
style={{
backgroundColor: colors.n11,
flexGrow: 1,
overflow: 'hidden'
}}
contentContainerStyle={{ flexGrow: 1 }}
>
<View
style={{
alignItems: 'center',
marginVertical: 20
}}
>
<FieldLabel
title="Amount"
flush
style={{ marginBottom: 0, paddingLeft: 0 }}
/>
<FocusableAmountInput
ref={el => (this.amount = el)}
value={transaction.amount}
zeroIsNegative={true}
onBlur={value =>
this.onEdit(transaction, 'amount', value.toString())
}
onChange={value =>
this.onQueueChange(transaction, 'amount', value)
}
style={{ height: 37, transform: [] }}
focusedStyle={{
width: 'auto',
paddingVertical: 0,
paddingHorizontal: 10,
minWidth: 120,
transform: [{ translateY: -0.5 }]
}}
textStyle={{ fontSize: 30, textAlign: 'center' }}
/>
</View>
<FieldLabel title="Payee" flush />
<TapField
value={descriptionPretty}
onTap={() => this.onTap(transaction.id, 'payee')}
/>
<View>
<FieldLabel
title={
transaction.is_parent ? 'Categories (split)' : 'Category'
}
/>
{!transaction.is_parent ? (
<TapField
value={category ? lookupName(categories, category) : null}
disabled={(account && !!account.offbudget) || transferAcct}
rightContent={
<Button
contentStyle={{
paddingVertical: 4,
paddingHorizontal: 15,
margin: 0
}}
onPress={this.onSplit}
>
Split
</Button>
}
onTap={() => this.onTap(transaction.id, 'category')}
/>
) : (
<View>
{childTransactions.map((child, idx) => {
const isLast = idx === childTransactions.length - 1;
return (
<Swipeable
key={child.id}
renderRightActions={this.renderActions}
onSwipeableRightOpen={() => this.onDeleteSplit(child)}
rightThreshold={100}
>
<TapField
value={
child.category
? lookupName(categories, child.category)
: null
}
rightContent={
<FocusableAmountInput
ref={
isLast
? el => (this.lastChildAmount = el)
: null
}
value={child.amount}
sign={forcedSign}
scrollIntoView={true}
buttonProps={{
paddingVertical: 5,
style: {
width: 80,
alignItems: 'flex-end'
}
}}
textStyle={{ fontSize: 14 }}
onBlur={value =>
this.onEdit(child, 'amount', value.toString())
}
/>
}
style={{ marginTop: idx === 0 ? 0 : -1 }}
onTap={() => this.openChildEdit(child)}
/>
</Swipeable>
);
})}
<View
style={{
alignItems: 'flex-end',
marginRight: EDITING_PADDING,
paddingTop: 10
}}
>
{transaction.error && (
<Text style={{ marginBottom: 10 }}>
Remaining:{' '}
{integerToCurrency(transaction.error.difference)}
</Text>
)}
<Button
contentStyle={{
paddingVertical: 6,
paddingHorizontal: 15
}}
onPress={this.onAddSplit}
>
Add split
</Button>
</View>
</View>
)}
</View>
<FieldLabel title="Account" />
<TapField
disabled={!adding}
value={account ? account.name : null}
onTap={() => this.onTap(transaction.id, 'account')}
/>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<FieldLabel title="Date" />
<InputField
defaultValue={transaction.date}
onUpdate={value => this.onEdit(transaction, 'date', value)}
onChange={e =>
this.onQueueChange(
transaction,
'date',
e.nativeEvent.text
)
}
/>
</View>
<View style={{ marginHorizontal: 35 }}>
<FieldLabel title="Cleared" />
<BooleanField
value={transaction.cleared}
onUpdate={value =>
this.onEdit(transaction, 'cleared', value)
}
style={{ marginTop: 4 }}
/>
</View>
</View>
<FieldLabel title="Notes" />
<InputField
defaultValue={transaction.notes}
onUpdate={value => this.onEdit(transaction, 'notes', value)}
onChange={e =>
this.onQueueChange(transaction, 'notes', e.nativeEvent.text)
}
/>
{!adding && (
<View style={{ alignItems: 'center' }}>
<Button
onPress={() => onDelete()}
style={{
paddingVertical: 5,
marginHorizontal: EDITING_PADDING,
marginTop: 20,
marginBottom: 15,
backgroundColor: 'transparent'
}}
contentStyle={{ borderWidth: 0 }}
>
<Trash
width={17}
height={17}
style={{ color: colors.r4 }}
/>
<Text style={{ color: colors.r4, marginLeft: 5 }}>
Delete transaction
</Text>
</Button>
</View>
)}
</ScrollView>
<View
style={{
paddingHorizontal: EDITING_PADDING,
paddingVertical: 15,
backgroundColor: colors.n11,
borderTopWidth: 1,
borderColor: colors.n10
}}
>
{adding ? (
<Button onPress={() => this.onAdd()}>
<Add width={17} height={17} style={{ color: colors.b3 }} />
<Text
style={[styles.text, { color: colors.b3, marginLeft: 5 }]}
>
Add transaction
</Text>
</Button>
) : (
<Button onPress={() => this.onSave()}>
<PencilWriteAlternate
style={{ width: 16, height: 16, color: colors.n1 }}
/>
<Text
style={[styles.text, { marginLeft: 6, color: colors.n1 }]}
>
Save changes
</Text>
</Button>
)}
</View>
<ExitTransition
alive={editingChild}
withProps={{
transaction:
editingChild && transactions.find(t => t.id === editingChild)
}}
>
{(exiting, onDone, { transaction }) =>
renderChildEdit({
transaction,
exiting,
amountSign: forcedSign,
getCategoryName: id =>
id ? lookupName(categories, id) : null,
navigation: navigation,
onEdit: this.onEdit,
onStartClose: this.onSaveChild,
onClose: onDone
})
}
</ExitTransition>
</View>
</View>
</KeyboardAvoidingView>
);
}
