diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js deleted file mode 100644 index 873385ff0..000000000 --- a/apps/mobile/src/components/EditorMenu/index.js +++ /dev/null @@ -1,573 +0,0 @@ -import React, {useState, useEffect} from 'react'; -import { - ActivityIndicator, - KeyboardAvoidingView, - Platform, - ScrollView, - StatusBar, - Text, - TouchableOpacity, - View, -} from 'react-native'; -import MMKV from 'react-native-mmkv-storage'; -import {TextInput} from 'react-native-gesture-handler'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import { - COLOR_SCHEME_DARK, - COLOR_SCHEME_LIGHT, - opacity, - pv, - SIZE, - WEIGHT, -} from '../../common/common'; -import {useTracked} from '../../provider'; -import {ACTIONS} from '../../provider/actions'; - -import {w, hexToRGBA, db} from '../../utils/utils'; -import {AnimatedSafeAreaView} from '../../utils/refs'; - -let tagsInputRef; -let tagsList; -export const EditorMenu = ({updateProps = () => {}, timestamp}) => { - const [state, dispatch] = useTracked(); - const {colors} = state; - const [noteProps, setNoteProps] = useState({ - pinned: false, - locked: false, - favorite: false, - tags: [], - colors: [], - }); - const [focused, setFocused] = useState(false); - - let tagToAdd = null; - let backPressCount = 0; - - function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { - let newColors = setColorScheme(colors, accent); - StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content'); - - dispatch({type: ACTIONS.THEME, colors: newColors}); - } - useEffect(() => { - if (timestamp) { - setNoteProps({...db.getNote(timestamp)}); - } - }, [timestamp]); - - const _renderListItem = item => ( - { - item.func(); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingVertical: pv, - }}> - - - - {item.name} - - - {item.switch ? ( - - ) : ( - undefined - )} - {item.check ? ( - - {item.on ? ( - - ) : null} - - ) : null} - - ); - - _renderTag = tag => ( - { - let oldProps = {...noteProps}; - - oldProps.tags.splice(oldProps.tags.indexOf(tag), 1); - db.addNote({ - dateCreated: timestamp, - content: noteProps.content, - title: noteProps.title, - tags: oldProps.tags, - }); - localRefresh(); - }} - style={{ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - margin: 1, - paddingHorizontal: 5, - paddingVertical: 2.5, - }}> - - - {tag.slice(0, 1)} - - {tag.slice(1)} - - - ); - - const localRefresh = () => { - if (!timestamp) return; - - let toAdd = db.getNote(timestamp); - - setNoteProps({...toAdd}); - }; - - _renderColor = item => ( - { - let props = {...noteProps}; - if (props.colors.includes(item)) { - props.colors.splice(props.colors.indexOf(item), 1); - } else { - props.colors.push(item); - } - - localRefresh(); - }} - style={{ - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - - marginBottom: 5, - borderRadius: 100, - }}> - - {noteProps.colors.includes(item) ? ( - - ) : null} - - - ); - - const _onSubmit = () => { - if (!tagToAdd || tagToAdd === '#') return; - - let tag = tagToAdd; - if (tag[0] !== '#') { - tag = '#' + tag; - } - if (tag.includes(' ')) { - tag = tag.replace(' ', '_'); - } - let oldProps = {...note}; - - if (oldProps.tags.includes(tag)) { - return; - } else { - oldProps.tags.push(tag); - } - - tagsInputRef.setNativeProps({ - text: '#', - }); - db.addNote({ - dateCreated: timestamp, - content: noteProps.content, - title: noteProps.title, - tags: oldProps.tags, - }); - localRefresh(); - tagToAdd = ''; - setTimeout(() => { - //tagsInputRef.focus(); - }, 300); - }; - - const _onKeyPress = event => { - if (event.nativeEvent.key === 'Backspace') { - if (backPressCount === 0 && !tagToAdd) { - backPressCount = 1; - - return; - } - if (backPressCount === 1 && !tagToAdd) { - backPressCount = 0; - - let tagInputValue = note.tags[note.tags.length - 1]; - let oldProps = {...note}; - if (oldProps.tags.length === 1) return; - - oldProps.tags.splice(oldProps.tags.length - 1); - - db.addNote({ - dateCreated: note.dateCreated, - content: note.content, - title: note.title, - tags: oldProps.tags, - }); - localRefresh(); - - tagsInputRef.setNativeProps({ - text: tagInputValue, - }); - - setTimeout(() => { - tagsInputRef.focus(); - }, 300); - } - } - }; - - return ( - - - - - - - - Properties - - - - - {[ - { - name: 'Dark Mode', - icon: 'moon', - func: () => { - if (!colors.night) { - MMKV.setStringAsync( - 'theme', - JSON.stringify(COLOR_SCHEME_DARK), - ); - changeColorScheme(COLOR_SCHEME_DARK); - } else { - MMKV.setStringAsync( - 'theme', - JSON.stringify(COLOR_SCHEME_LIGHT), - ); - changeColorScheme(COLOR_SCHEME_LIGHT); - } - }, - switch: true, - on: colors.night ? true : false, - close: false, - }, - { - name: 'Pinned', - icon: 'tag', - func: () => { - if (!timestamp) return; - db.pinItem(note.type, note.dateCreated); - localRefresh(); - dispatch({type: ACTIONS.PINNED}); - }, - close: false, - check: true, - on: noteProps.pinned, - }, - - { - name: 'Add to Favorites', - icon: 'star', - func: () => { - if (!timestamp) return; - - db.favoriteItem(note.type, note.dateCreated); - localRefresh(item.type); - dispatch({type: ACTIONS.FAVORITES}); - }, - close: false, - check: true, - on: noteProps.favorite, - }, - { - name: 'Share ', - icon: 'share', - func: () => {}, - close: true, - }, - { - name: 'Move to Notebook', - icon: 'arrow-right', - func: () => {}, - close: true, - }, - { - name: 'Export', - icon: 'external-link', - func: () => {}, - close: true, - }, - - { - name: 'Delete Note', - icon: 'trash', - func: () => {}, - close: true, - }, - { - name: noteProps.locked ? 'Remove from Vault' : 'Add to Vault', - icon: 'lock', - func: () => { - if (noteProps.locked) { - //setUnlock(true); - } else { - // setUnlock(false); - } - }, - close: true, - check: true, - on: noteProps.locked, - }, - ].map(_renderListItem)} - - - - - - - Add Tags - - - - - - {noteProps && noteProps.tags - ? noteProps.tags.map(_renderTag) - : null} - (tagsInputRef = ref)} - placeholderTextColor={colors.icon} - onFocus={() => { - setFocused(true); - }} - selectionColor={colors.accent} - onBlur={() => { - setFocused(false); - }} - placeholder="#hashtag" - onChangeText={value => { - tagToAdd = value; - if (tagToAdd.length > 0) backPressCount = 0; - }} - onSubmitEditing={_onSubmit} - onKeyPress={_onKeyPress} - /> - - - - - - - Assign Colors - - - - - - {[ - 'red', - 'yellow', - 'green', - 'blue', - 'purple', - 'orange', - 'gray', - ].map(_renderColor)} - - - - - - - Last Synced: 5 secs ago. - - {} - - - - - ); -}; diff --git a/apps/mobile/src/components/PullToRefresh/index.js b/apps/mobile/src/components/PullToRefresh/index.js deleted file mode 100644 index e131af9a7..000000000 --- a/apps/mobile/src/components/PullToRefresh/index.js +++ /dev/null @@ -1,162 +0,0 @@ -import React, {Component} from 'react'; -import { - View, - Animated, - PanResponder, - Platform, - ActivityIndicator, -} from 'react-native'; -import {COLOR_SCHEME} from '../../common/common'; - -export default class PullToRefresh extends Component { - constructor(props) { - super(props); - this.state = { - refreshing: false, - }; - this.currentScrollValue = 0; - this.prevScroll = 0; - this.translateY = new Animated.Value(0); - this.opacity = new Animated.Value(0); - this.PanResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (event, gestureEvent) => true, - onStartShouldSetPanResponder: (event, gestureEvent) => { - return true; - }, - onPanResponderMove: this.onPanResponderMove, - onPanResponderRelease: this.onPanResponderRelease, - }); - this.prevPull = 0; - } - - onPanResponderMove = (event, gestureEvent) => { - this.listRef.getScrollResponder().scrollTo({ - x: 0, - y: this.prevScroll + gestureEvent.dy * -1, - animated: true, - }); - - return; - if ( - !this.state.refreshing && - gestureEvent.dy < 120 && - gestureEvent.dy + this.prevPull < 120 && - gestureEvent.dy > 0 - ) { - if (gestureEvent.vy < 10) { - this.translateY.setValue(gestureEvent.dy + this.prevPull); - } - - let o = (gestureEvent.dy + this.prevPull) / 120; - - this.opacity.setValue(o * 1); - } - }; - setCurrentScrollValue(value) { - this.currentScrollValue = value; - } - - onPanResponderRelease = (event, gestureEvent) => { - this.prevScroll = this.currentScrollValue; - return; - - if (gestureEvent.dy > 80) { - this.setState( - { - refreshing: true, - }, - () => { - setTimeout(() => { - this.prevPull = 0; - Animated.parallel([ - Animated.timing(this.opacity, { - toValue: 0, - duration: 150, - useNativeDriver: true, - }), - Animated.spring(this.translateY, { - toValue: 0, - bounciness: 8, - useNativeDriver: true, - }), - ]).start(); - setTimeout(() => { - this.setState({ - refreshing: false, - }); - }, 150); - }, 400); - }, - ); - - this.prevPull = 80; - Animated.parallel([ - Animated.timing(this.opacity, { - toValue: 1, - duration: 150, - useNativeDriver: true, - }), - Animated.spring(this.translateY, { - toValue: 80, - bounciness: 8, - useNativeDriver: true, - }), - ]).start(); - } else { - Animated.parallel([ - Animated.timing(this.opacity, { - toValue: 0, - duration: 150, - useNativeDriver: true, - }), - Animated.spring(this.translateY, { - toValue: 0, - bounciness: 8, - useNativeDriver: true, - }), - ]).start(); - } - }; - - setListRef(ref) { - this.listRef = ref; - } - - render() { - return ( - - - {this.state.refreshing ? ( - - ) : ( - Pull to refresh - )} - - - {this.props.children} - - - ); - } -}