Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 06:59:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui: dynamic ActionSheet Component

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-10 18:44:41 +05:00
parent 4ff2ebecc2
commit dc24b58231
1 changed files with 386 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
apps/mobile/src/components/ActionSheetComponent/index.js
View File

@@ -6,14 +6,21 @@ import {
Dimensions,
TextInput,
FlatList,
Platform,
} from 'react-native';
import {SIZE, pv, WEIGHT, opacity} from '../../common/common';
import {
SIZE,
pv,
WEIGHT,
opacity,
COLOR_SCHEME_DARK,
COLOR_SCHEME_LIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import NavigationService from '../../services/NavigationService';
import {db} from '../../../App';
import {useAppContext} from '../../provider/useAppContext';
import AsyncStorage from '@react-native-community/async-storage';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -23,8 +30,12 @@ export const ActionSheetComponent = ({
close = () => {},
item = {},
setWillRefresh = value => {},
hasColors = false,
hasTags = false,
rowItems = [],
columnItems = [],
}) => {
const {colors} = useAppContext();
const {colors, changeColorScheme} = useAppContext();
const [focused, setFocused] = useState(false);
const [note, setNote] = useState(item ? item : {});
@@ -100,21 +111,30 @@ export const ActionSheetComponent = ({
}
};
return (
<View>
<View
style={{
width: w - 24,
justifyContent: 'space-around',
alignItems: 'center',
marginHorizontal: 12,
paddingVertical: 10,
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
}}>
<TouchableOpacity
onPress={() => {
const localRefresh = type => {
let toAdd;
switch (type) {
case 'note': {
toAdd = db.getNote(note.dateCreated);
break;
}
case 'notebook': {
toAdd = db.getNotebook(note.dateCreated);
break;
}
case 'topic': {
toAdd = db.getTopic(topic.notebookId, topic.title);
break;
}
}
setNote({...toAdd});
};
const rowItemsData = [
{
name: 'Add to',
icon: 'book',
func: () => {
close();
NavigationService.push('Folders', {
note: note,
@@ -123,22 +143,154 @@ export const ActionSheetComponent = ({
hideMore: true,
canGoBack: true,
});
}}
},
},
{
name: 'Share',
icon: 'share-2',
func: () => {
close();
},
},
{
name: 'Export',
icon: 'external-link',
func: () => {
close();
},
},
{
name: 'Delete',
icon: 'trash',
func: () => close('delete'),
},
{
name: 'Edit Notebook',
icon: 'trash',
func: () => {
close('topic');
},
},
{
name: 'Edit Topic',
icon: 'trash',
func: () => {
close('topic');
},
},
{
name: 'Restore',
icon: 'trash',
func: () => {
db.restoreItem(item.dateCreated);
ToastEvent.show(
item.type == 'note' ? 'Note restored' : 'Notebook restored',
'success',
1000,
() => {},
'',
);
close();
},
},
{
name: 'Remove',
icon: 'trash',
func: () => {
close();
},
},
];
columnItemsData = [
{
name: 'Dark Mode',
icon: 'moon',
func: () => {
if (!colors.night) {
AsyncStorage.setItem('theme', JSON.stringify(COLOR_SCHEME_DARK));
changeColorScheme(COLOR_SCHEME_DARK);
} else {
AsyncStorage.setItem('theme', JSON.stringify(COLOR_SCHEME_LIGHT));
changeColorScheme(COLOR_SCHEME_LIGHT);
}
},
switch: true,
on: colors.night ? true : false,
close: false,
},
{
name: 'Pin',
icon: 'tag',
func: () => {
db.pinItem(note.type, note.dateCreated);
localRefresh(item.type);
setWillRefresh(true);
},
close: false,
check: true,
on: note.pinned,
},
{
name: 'Favorite',
icon: 'star',
func: () => {
db.favoriteItem(note.type, note.dateCreated);
localRefresh(item.type);
setWillRefresh(true);
},
close: false,
check: true,
on: note.favorite,
},
{
name: 'Add to Vault',
icon: 'lock',
func: () => {
note.locked ? close('unlock') : close('lock');
},
close: true,
check: true,
on: note.locked,
},
];
return (
<View
style={{
paddingBottom: 15,
backgroundColor: colors.bg,
}}>
<View
style={{
width: w - 24,
justifyContent: 'space-between',
alignItems: 'center',
marginHorizontal: 12,
paddingVertical: 10,
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
}}>
{rowItemsData.map(rowItem =>
rowItems.includes(rowItem.name) ? (
<TouchableOpacity
onPress={rowItem.func}
style={{
alignItems: 'center',
width: (w - 24) / rowItems.length,
}}>
<Icon
style={{
width: 50,
height: 50,
height: 40,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
marginBottom: 5,
}}
name="arrow-right"
name={rowItem.icon}
size={SIZE.lg}
color={colors.accent}
/>
@@ -147,102 +299,16 @@ export const ActionSheetComponent = ({
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
color: colors.pri,
}}>
Move to
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
close();
}}
style={{
alignItems: 'center',
}}>
<Icon
style={{
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
marginBottom: 5,
}}
name="share-2"
size={SIZE.lg}
color={colors.accent}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
}}>
Share
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
close();
}}
style={{
alignItems: 'center',
}}>
<Icon
style={{
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
marginBottom: 5,
}}
name="external-link"
size={SIZE.lg}
color={colors.accent}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
}}>
Export
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
close('delete');
}}
style={{
alignItems: 'center',
}}>
<Icon
style={{
width: 50,
height: 50,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
marginBottom: 5,
}}
name="trash"
size={SIZE.lg}
color={colors.accent}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
}}>
Delete
{rowItem.name}
</Text>
</TouchableOpacity>
) : null,
)}
</View>
{hasColors ? (
<View
style={{
flexDirection: 'row',
@@ -271,7 +337,7 @@ export const ActionSheetComponent = ({
content: note.content,
title: note.title,
});
setNote({...db.getNote(note.dateCreated)});
localRefresh(item.type);
setWillRefresh(true);
}}
style={{
@@ -297,7 +363,9 @@ export const ActionSheetComponent = ({
),
)}
</View>
) : null}
{hasTags ? (
<View
style={{
flexDirection: 'row',
@@ -307,6 +375,7 @@ export const ActionSheetComponent = ({
borderRadius: 5,
borderWidth: 1.5,
borderColor: focused ? colors.accent : colors.nav,
paddingVertical: 5,
}}>
{note.tags.map(tag => (
<TouchableOpacity
@@ -320,7 +389,8 @@ export const ActionSheetComponent = ({
title: note.title,
tags: oldProps.tags,
});
setNote({...db.getNote(note.dateCreated)});
localRefresh(item.type);
setWillRefresh(true);
}}
style={{
flexDirection: 'row',
@@ -375,50 +445,12 @@ export const ActionSheetComponent = ({
onKeyPress={_onKeyPress}
/>
</View>
) : null}
<FlatList
style={{
marginTop: 10,
}}
data={[
{
name: 'Pin',
icon: 'tag',
func: () => {
db.pinItem(note.type, note.dateCreated);
setNote({...db.getNote(note.dateCreated)});
setWillRefresh(true);
},
close: false,
check: true,
on: note.pinned,
},
{
name: 'Favorite',
icon: 'star',
func: () => {
db.favoriteItem(note.type, note.dateCreated);
setNote({...db.getNote(note.dateCreated)});
setWillRefresh(true);
},
close: false,
check: true,
on: note.favorite,
},
{
name: 'Add to Vault',
icon: 'lock',
func: () => {
note.locked ? close('unlock') : close('lock');
},
close: true,
check: true,
on: note.locked,
},
]}
keyExtractor={(item, index) => item.name}
renderItem={({item, index}) => (
{columnItems.length > 0 ? (
<View>
{columnItemsData.map(item =>
columnItems.includes(item.name) ? (
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
@@ -432,7 +464,6 @@ export const ActionSheetComponent = ({
alignItems: 'flex-end',
paddingHorizontal: 12,
paddingVertical: pv + 5,
paddingTop: index === 0 ? 5 : pv + 5,
}}>
<View
style={{
@@ -478,13 +509,19 @@ export const ActionSheetComponent = ({
paddingTop: 3,
}}>
{item.on ? (
<Icon size={SIZE.sm - 2} color={colors.accent} name="check" />
) : null}
</TouchableOpacity>
) : null}
</TouchableOpacity>
)}
<Icon
size={SIZE.sm - 2}
color={colors.accent}
name="check"
/>
) : null}
</TouchableOpacity>
) : null}
</TouchableOpacity>
) : null,
)}
</View>
) : null}
</View>
);
};