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

refactor

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-16 19:53:16 +05:00
parent 8a101e03c7
commit ff20e0a808
1 changed files with 198 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,8 +5,6 @@ import {
TouchableOpacity, TouchableOpacity,
Dimensions, Dimensions,
TextInput, TextInput,
FlatList,
Platform,
} from 'react-native'; } from 'react-native';
import { import {
SIZE, SIZE,
@@ -21,6 +19,7 @@ import NavigationService from '../../services/NavigationService';
import {db} from '../../../App'; import {db} from '../../../App';
import {useAppContext} from '../../provider/useAppContext'; import {useAppContext} from '../../provider/useAppContext';
import FastStorage from 'react-native-fast-storage'; import FastStorage from 'react-native-fast-storage';
import {useTracked} from '../../provider';
const w = Dimensions.get('window').width; const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height; const h = Dimensions.get('window').height;
@@ -34,7 +33,13 @@ export const ActionSheetComponent = ({
rowItems = [], rowItems = [],
columnItems = [], columnItems = [],
}) => { }) => {
const {colors, changeColorScheme} = useAppContext(); const [state, dispatch] = useTracked();
const {colors} = state;
// Todo
const changeColorScheme = () => {};
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const [note, setNote] = useState( const [note, setNote] = useState(
item item
@@ -149,7 +154,7 @@ export const ActionSheetComponent = ({
} }
} }
setWillRefresh(toAdd); dispatch({type: 'updateNotes'});
setNote({...toAdd}); setNote({...toAdd});
}; };
@@ -279,6 +284,191 @@ export const ActionSheetComponent = ({
}, },
]; ];
const _renderTag = tag => (
<TouchableOpacity
key={tag}
onPress={() => {
let oldProps = {...note};
oldProps.tags.splice(oldProps.tags.indexOf(tag), 1);
db.addNote({
dateCreated: note.dateCreated,
content: note.content,
title: note.title,
tags: oldProps.tags,
});
localRefresh(item.type);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
margin: 1,
paddingHorizontal: 5,
paddingVertical: 2.5,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
<Text
style={{
color: colors.accent,
}}>
{tag.slice(0, 1)}
</Text>
{tag.slice(1)}
</Text>
</TouchableOpacity>
);
const _renderColor = color => (
<TouchableOpacity
key={color}
onPress={() => {
let noteColors = note.colors;
if (noteColors.includes(color)) {
noteColors.splice(color, 1);
} else {
noteColors.push(color);
}
db.addNote({
dateCreated: note.dateCreated,
colors: noteColors,
content: note.content,
title: note.title,
});
localRefresh(item.type);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderColor: colors.nav,
}}>
<View
style={{
width: (w - 12) / 10,
height: (w - 12) / 10,
backgroundColor: color,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
}}>
{note && note.colors && note.colors.includes(color) ? (
<Icon name="check" color="white" size={SIZE.lg} />
) : null}
</View>
</TouchableOpacity>
);
const _renderRowItem = rowItem =>
rowItems.includes(rowItem.name) ? (
<TouchableOpacity
onPress={rowItem.func}
key={rowItem.name}
style={{
alignItems: 'center',
width: (w - 24) / rowItems.length,
}}>
<Icon
style={{
width: 50,
height: 40,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
}}
name={rowItem.icon}
size={SIZE.lg}
color={colors.accent}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
color: colors.pri,
}}>
{rowItem.name}
</Text>
</TouchableOpacity>
) : null;
const _renderColumnItem = item =>
columnItems.includes(item.name) ? (
<TouchableOpacity
key={item.name}
activeOpacity={opacity}
onPress={() => {
item.func();
}}
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: 12,
paddingVertical: pv + 5,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Icon
style={{
width: 30,
}}
name={item.icon}
color={colors.pri}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
{item.name}
</Text>
</View>
{item.switch ? (
<Icon
size={SIZE.lg + 2}
color={item.on ? colors.accent : colors.icon}
name={item.on ? 'toggle-right' : 'toggle-left'}
/>
) : (
undefined
)}
{item.check ? (
<TouchableOpacity
style={{
borderWidth: 2,
borderColor: item.on ? colors.accent : colors.icon,
width: 23,
height: 23,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100,
paddingTop: 3,
}}>
{item.on ? (
<Icon size={SIZE.sm - 2} color={colors.accent} name="check" />
) : null}
</TouchableOpacity>
) : null}
</TouchableOpacity>
) : null;
return ( return (
<View <View
style={{ style={{
@@ -296,41 +486,7 @@ export const ActionSheetComponent = ({
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: colors.nav, borderBottomColor: colors.nav,
}}> }}>
{rowItemsData.map(rowItem => {rowItemsData.map(_renderRowItem)}
rowItems.includes(rowItem.name) ? (
<TouchableOpacity
onPress={rowItem.func}
key={rowItem.name}
style={{
alignItems: 'center',
width: (w - 24) / rowItems.length,
}}>
<Icon
style={{
width: 50,
height: 40,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
textAlignVertical: 'center',
}}
name={rowItem.icon}
size={SIZE.lg}
color={colors.accent}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
color: colors.pri,
}}>
{rowItem.name}
</Text>
</TouchableOpacity>
) : null,
)}
</View> </View>
{hasColors ? ( {hasColors ? (
@@ -345,47 +501,7 @@ export const ActionSheetComponent = ({
justifyContent: 'space-between', justifyContent: 'space-between',
}}> }}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
color => ( _renderColor,
<TouchableOpacity
key={color}
onPress={() => {
let noteColors = note.colors;
if (noteColors.includes(color)) {
noteColors.splice(color, 1);
} else {
noteColors.push(color);
}
db.addNote({
dateCreated: note.dateCreated,
colors: noteColors,
content: note.content,
title: note.title,
});
localRefresh(item.type);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderColor: colors.nav,
}}>
<View
style={{
width: (w - 12) / 10,
height: (w - 12) / 10,
backgroundColor: color,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
}}>
{note && note.colors && note.colors.includes(color) ? (
<Icon name="check" color="white" size={SIZE.lg} />
) : null}
</View>
</TouchableOpacity>
),
)} )}
</View> </View>
) : null} ) : null}
@@ -402,47 +518,7 @@ export const ActionSheetComponent = ({
borderColor: focused ? colors.accent : colors.nav, borderColor: focused ? colors.accent : colors.nav,
paddingVertical: 5, paddingVertical: 5,
}}> }}>
{note && note.tags {note && note.tags ? note.tags.map(_renderTag) : null}
? note.tags.map(tag => (
<TouchableOpacity
key={tag}
onPress={() => {
let oldProps = {...note};
oldProps.tags.splice(oldProps.tags.indexOf(tag), 1);
db.addNote({
dateCreated: note.dateCreated,
content: note.content,
title: note.title,
tags: oldProps.tags,
});
localRefresh(item.type);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
margin: 1,
paddingHorizontal: 5,
paddingVertical: 2.5,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
<Text
style={{
color: colors.accent,
}}>
{tag.slice(0, 1)}
</Text>
{tag.slice(1)}
</Text>
</TouchableOpacity>
))
: null}
<TextInput <TextInput
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
@@ -475,80 +551,7 @@ export const ActionSheetComponent = ({
) : null} ) : null}
{columnItems.length > 0 ? ( {columnItems.length > 0 ? (
<View> <View>{columnItemsData.map(_renderColumnItem)}</View>
{columnItemsData.map(item =>
columnItems.includes(item.name) ? (
<TouchableOpacity
key={item.name}
activeOpacity={opacity}
onPress={() => {
item.func();
}}
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: 12,
paddingVertical: pv + 5,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Icon
style={{
width: 30,
}}
name={item.icon}
color={colors.pri}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
{item.name}
</Text>
</View>
{item.switch ? (
<Icon
size={SIZE.lg + 2}
color={item.on ? colors.accent : colors.icon}
name={item.on ? 'toggle-right' : 'toggle-left'}
/>
) : (
undefined
)}
{item.check ? (
<TouchableOpacity
style={{
borderWidth: 2,
borderColor: item.on ? colors.accent : colors.icon,
width: 23,
height: 23,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100,
paddingTop: 3,
}}>
{item.on ? (
<Icon
size={SIZE.sm - 2}
color={colors.accent}
name="check"
/>
) : null}
</TouchableOpacity>
) : null}
</TouchableOpacity>
) : null,
)}
</View>
) : null} ) : null}
</View> </View>
); );