From d1f32524ba38609417ea91d613f1aa278955788c Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Sun, 1 Nov 2020 18:15:31 +0100 Subject: [PATCH] Updates --- src/@types/mastodon.d.ts | 2 +- src/components/Toot/Actions.tsx | 59 +++++++++++++++++++-- src/components/Toot/Responses/Success.tsx | 62 +++++++++++++++++++++++ src/components/Toot/action.ts | 2 - src/components/TootTimeline.tsx | 7 +-- src/stacks/common/Timeline.tsx | 2 - 6 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 src/components/Toot/Responses/Success.tsx diff --git a/src/@types/mastodon.d.ts b/src/@types/mastodon.d.ts index 3b7c0732..0ba647a2 100644 --- a/src/@types/mastodon.d.ts +++ b/src/@types/mastodon.d.ts @@ -187,7 +187,7 @@ declare namespace mastodon { type Status = { // Base id: string - urk: string + url: string created_at: string account: Account content: string diff --git a/src/components/Toot/Actions.tsx b/src/components/Toot/Actions.tsx index ab35ba30..74765083 100644 --- a/src/components/Toot/Actions.tsx +++ b/src/components/Toot/Actions.tsx @@ -1,12 +1,22 @@ -import React, { useState } from 'react' -import { Modal, Pressable, StyleSheet, Text, View } from 'react-native' +import React, { useEffect, useState } from 'react' +import { + ActionSheetIOS, + Clipboard, + Modal, + Pressable, + StyleSheet, + Text, + View +} from 'react-native' import { useDispatch } from 'react-redux' import { Feather } from '@expo/vector-icons' import action from './action' +import Success from './Responses/Success' export interface Props { id: string + url: string replies_count: number reblogs_count: number reblogged?: boolean @@ -17,6 +27,7 @@ export interface Props { const Actions: React.FC = ({ id, + url, replies_count, reblogs_count, reblogged, @@ -27,8 +38,19 @@ const Actions: React.FC = ({ const dispatch = useDispatch() const [modalVisible, setModalVisible] = useState(false) + const [successMessage, setSuccessMessage] = useState() + useEffect(() => { + setTimeout(() => { + setSuccessMessage(undefined) + console.log('ajwieorjawioejri') + }, 2000) + return () => {} + }, [successMessage]) + return ( <> + + @@ -96,7 +118,38 @@ const Actions: React.FC = ({ onPress={() => setModalVisible(false)} > - 分享，复制链接，（删除） + + ActionSheetIOS.showShareActionSheetWithOptions( + { + url, + excludedActivityTypes: [ + 'com.apple.UIKit.activity.Mail', + 'com.apple.UIKit.activity.Print', + 'com.apple.UIKit.activity.SaveToCameraRoll', + 'com.apple.UIKit.activity.OpenInIBooks' + ] + }, + () => {}, + () => { + setModalVisible(false) + setSuccessMessage('分享成功！') + } + ) + } + > + 分享 + + { + Clipboard.setString(url) + // Success message + setModalVisible(false) + }} + > + 复制链接 + + （删除） （静音），（置顶） 静音用户，屏蔽用户，屏蔽域名，举报用户 diff --git a/src/components/Toot/Responses/Success.tsx b/src/components/Toot/Responses/Success.tsx new file mode 100644 index 00000000..474e5f59 --- /dev/null +++ b/src/components/Toot/Responses/Success.tsx @@ -0,0 +1,62 @@ +import React, { useEffect, useRef } from 'react' +import { Animated, StyleSheet, Text, View } from 'react-native' + +export interface Props { + message?: string +} + +const Success: React.FC = ({ message }) => { + const fadeAnim = useRef(new Animated.Value(0)).current + useEffect(() => { + console.log(message) + if (message !== undefined) { + fadeIn() + } else { + fadeOut() + } + }, [message]) + + const fadeIn = () => { + // Will change fadeAnim value to 1 in 5 seconds + Animated.timing(fadeAnim, { + useNativeDriver: false, + toValue: 300, + duration: 1000 + }).start() + } + + const fadeOut = () => { + // Will change fadeAnim value to 0 in 5 seconds + Animated.timing(fadeAnim, { + useNativeDriver: false, + toValue: 400, + duration: 1000 + }).start() + } + + return ( + + {message} + + ) +} + +const styles = StyleSheet.create({ + success: { + width: '80%', + height: 25, + position: 'absolute', + top: 400, + backgroundColor: 'red', + zIndex: 50 + } +}) + +export default Success diff --git a/src/components/Toot/action.ts b/src/components/Toot/action.ts index c28801b5..6080d62f 100644 --- a/src/components/Toot/action.ts +++ b/src/components/Toot/action.ts @@ -17,7 +17,6 @@ const action = async ({ stateKey: 'favourited' | 'reblogged' | 'bookmarked' | 'muted' | 'pinned' statePrev: boolean }): Promise => { - console.log(stateKey + ' --- ' + statePrev) const alert = { title: 'This is a title', message: 'This is a message' @@ -37,7 +36,6 @@ const action = async ({ if (!res.body[stateKey] === statePrev) { dispatch(updateStatus(res.body)) - console.log('------ ' + res.body[stateKey]) } else { Alert.alert(alert.title, alert.message, [ { text: 'OK', onPress: () => console.log('OK Pressed') } diff --git a/src/components/TootTimeline.tsx b/src/components/TootTimeline.tsx index 9721e557..3bd543ef 100644 --- a/src/components/TootTimeline.tsx +++ b/src/components/TootTimeline.tsx @@ -20,7 +20,7 @@ const TootTimeline: React.FC = ({ toot }) => { let actualContent = toot.reblog ? toot.reblog : toot - // const tootView = useMemo(() => { + const tootView = useMemo(() => { return ( {toot.reblog && ( @@ -76,6 +76,7 @@ const TootTimeline: React.FC = ({ toot }) => { = ({ toot }) => { ) - // }, [toot]) + }, [toot]) - // return tootView + return tootView } const styles = StyleSheet.create({ diff --git a/src/stacks/common/Timeline.tsx b/src/stacks/common/Timeline.tsx index 0bb3c149..ce41f81f 100644 --- a/src/stacks/common/Timeline.tsx +++ b/src/stacks/common/Timeline.tsx @@ -19,7 +19,6 @@ const Timeline: React.FC<{ }> = ({ page, hashtag, list, toot, account, disableRefresh = false }) => { const dispatch = useDispatch() const state = useSelector((state: RootState) => state.timelines[page]) - const [updateStatus, setUpdateStatus] = useState(false) const [timelineReady, setTimelineReady] = useState(false) useEffect(() => { @@ -28,7 +27,6 @@ const Timeline: React.FC<{ dispatch(fetch({ page, hashtag, list, toot, account })) setTimelineReady(true) } - setUpdateStatus(!updateStatus) return () => { mounted = false }