Files
notesnook/apps/mobile/src/components/SelectionWrapper/index.js

68 lines
1.9 KiB
JavaScript
Raw Normal View History

import React from 'react';
import {View, TouchableOpacity} from 'react-native';
import {SIZE} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {w} from '../../utils/utils';
2020-01-24 23:13:09 +05:00
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
2020-01-25 00:02:13 +05:00
import * as Animatable from 'react-native-animatable';
const SelectionWrapper = ({children, item, currentEditingNote, index}) => {
2020-01-17 21:26:01 +05:00
const [state, dispatch] = useTracked();
const {colors, selectionMode, selectedItemsList} = state;
2020-01-17 00:23:16 +05:00
return (
2020-01-25 00:02:13 +05:00
<Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={300 * index + 1}
delay={index * 300}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
2020-01-22 02:51:24 +05:00
width: '100%',
paddingHorizontal: 12,
2020-01-24 19:36:58 +05:00
backgroundColor:
currentEditingNote === item.dateCreated
? colors.shade
: 'transparent',
}}>
2020-01-22 02:51:24 +05:00
<View
2020-01-18 00:46:29 +05:00
onPress={() => {
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
style={{
2020-01-22 02:51:24 +05:00
width: '10%',
height: 70,
justifyContent: 'center',
2020-01-22 02:51:24 +05:00
alignItems: 'center',
display: selectionMode ? 'flex' : 'none',
2020-01-17 00:23:16 +05:00
opacity: selectionMode ? 1 : 0,
2020-01-22 02:51:24 +05:00
paddingRight: 10,
}}>
<View
style={{
borderWidth: 2,
borderColor: selectedItemsList.includes(item)
? colors.accent
: colors.icon,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100,
paddingTop: 4,
}}>
{selectedItemsList.includes(item) ? (
<Icon size={SIZE.md} color={colors.accent} name="check" />
) : null}
</View>
2020-01-22 02:51:24 +05:00
</View>
{children}
2020-01-25 00:02:13 +05:00
</Animatable.View>
);
};
export default SelectionWrapper;