9c0df36e16
* style: enforce sorting of imports * style: alphabetize imports * style: merge duplicated imports
129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
|
|
import { NativeCategorySelect } from 'loot-design/src/components/CategorySelect';
|
|
import {
|
|
View,
|
|
Text,
|
|
Block,
|
|
Modal,
|
|
Button
|
|
} from 'loot-design/src/components/common';
|
|
import { colors } from 'loot-design/src/style';
|
|
|
|
class ConfirmCategoryDelete extends React.Component {
|
|
state = { transferCategory: null, error: null };
|
|
|
|
componentDidMount() {
|
|
// Hack: 200ms is the timing of the modal animation
|
|
setTimeout(() => {
|
|
this.input.focus();
|
|
}, 200);
|
|
}
|
|
|
|
onDelete = () => {
|
|
let { transferCategory } = this.state;
|
|
let { category, group, onDelete } = this.props;
|
|
|
|
if (!transferCategory) {
|
|
this.setState({ error: 'required-transfer' });
|
|
} else {
|
|
onDelete(transferCategory);
|
|
this.props.modalProps.onClose();
|
|
}
|
|
};
|
|
|
|
renderError = error => {
|
|
let msg;
|
|
|
|
switch (error) {
|
|
case 'required-transfer':
|
|
msg = 'You must select a category';
|
|
break;
|
|
default:
|
|
msg = 'Something bad happened, sorry!';
|
|
}
|
|
|
|
return <Text style={{ marginTop: 15, color: colors.r4 }}>{msg}</Text>;
|
|
};
|
|
|
|
render() {
|
|
const { modalProps, category, group, categoryGroups } = this.props;
|
|
const { transferCategory, error } = this.state;
|
|
const isIncome = !!(category || group).is_income;
|
|
|
|
return (
|
|
<Modal title="Confirm Delete" {...modalProps} style={{ flex: 0 }}>
|
|
{() => (
|
|
<View style={{ lineHeight: 1.5 }}>
|
|
{group ? (
|
|
<Block>
|
|
Categories in the group <strong>{group.name}</strong> are used
|
|
by existing transaction
|
|
{!isIncome &&
|
|
' or it has a positive leftover balance currently'}
|
|
. <strong>Are you sure you want to delete it?</strong> If so,
|
|
you must select another category to transfer existing
|
|
transactions and balance to.
|
|
</Block>
|
|
) : (
|
|
<Block>
|
|
<strong>{category.name}</strong> is used by existing
|
|
transactions
|
|
{!isIncome &&
|
|
' or it has a positive leftover balance currently'}
|
|
. <strong>Are you sure you want to delete it?</strong> If so,
|
|
you must select another category to transfer existing
|
|
transactions and balance to.
|
|
</Block>
|
|
)}
|
|
|
|
{error && this.renderError(error)}
|
|
|
|
<View
|
|
style={{
|
|
marginTop: 20,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<Text>Transfer to:</Text>
|
|
|
|
<View style={{ flex: 1, marginLeft: 10, marginRight: 30 }}>
|
|
<NativeCategorySelect
|
|
ref={el => (this.input = el)}
|
|
categoryGroups={
|
|
group
|
|
? categoryGroups.filter(
|
|
g => g.id !== group.id && !!g.is_income === isIncome
|
|
)
|
|
: categoryGroups
|
|
.filter(g => !!g.is_income === isIncome)
|
|
.map(g => ({
|
|
...g,
|
|
categories: g.categories.filter(
|
|
c => c.id !== category.id
|
|
)
|
|
}))
|
|
}
|
|
name="category"
|
|
value={transferCategory}
|
|
onChange={e =>
|
|
this.setState({ transferCategory: e.target.value })
|
|
}
|
|
/>
|
|
</View>
|
|
|
|
<Button primary onClick={() => this.onDelete()}>
|
|
Delete
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ConfirmCategoryDelete;
|