From f0234afd9ece2521e3b198d23be0df11038094e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B5=A9=E8=BF=9C?= Date: Tue, 28 Jul 2020 20:43:22 +0800 Subject: [PATCH] event handler cleanups --- package-lock.json | 2 +- src/components/article.tsx | 7 ++++--- src/components/cards/card.tsx | 7 ++++--- src/components/context-menu.tsx | 6 +++--- src/components/feeds/feed.tsx | 2 +- src/containers/article-container.tsx | 2 +- src/containers/feed-container.tsx | 2 +- src/scripts/models/item.ts | 9 +++++---- src/scripts/models/source.ts | 1 - src/scripts/utils.ts | 4 ++++ 10 files changed, 24 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2208085..7514e5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fluent-reader", - "version": "0.6.2", + "version": "0.6.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/article.tsx b/src/components/article.tsx index 96c9ba2..a558bf1 100644 --- a/src/components/article.tsx +++ b/src/components/article.tsx @@ -5,6 +5,7 @@ import { RSSItem } from "../scripts/models/item" import { Stack, CommandBarButton, IContextualMenuProps, FocusZone, ContextualMenuItemType, Spinner, Icon, Link } from "@fluentui/react" import { RSSSource, SourceOpenTarget } from "../scripts/models/source" import { shareSubmenu } from "./context-menu" +import { platformCtrl } from "../scripts/utils" const FONT_SIZE_OPTIONS = [12, 13, 14, 15, 16, 17, 18, 19, 20] @@ -12,7 +13,7 @@ type ArticleProps = { item: RSSItem source: RSSSource locale: string - shortcuts: (item: RSSItem, key: string) => void + shortcuts: (item: RSSItem, e: KeyboardEvent) => void dismiss: () => void offsetItem: (offset: number) => void toggleHasRead: (item: RSSItem) => void @@ -72,7 +73,7 @@ class Article extends React.Component { key: "openInBrowser", text: intl.get("openExternal"), iconProps: { iconName: "NavigateExternalInline" }, - onClick: e => { window.utils.openExternal(this.props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) } + onClick: e => { window.utils.openExternal(this.props.item.link, platformCtrl(e)) } }, { key: "copyURL", @@ -117,7 +118,6 @@ class Article extends React.Component { this.toggleWebpage() break default: - this.props.shortcuts(this.props.item, input.key) const keyboardEvent = new KeyboardEvent("keydown", { code: input.code, key: input.key, @@ -128,6 +128,7 @@ class Article extends React.Component { repeat: input.isAutoRepeat, bubbles: true }) + this.props.shortcuts(this.props.item, keyboardEvent) document.dispatchEvent(keyboardEvent) break } diff --git a/src/components/cards/card.tsx b/src/components/cards/card.tsx index 8896988..983fe1e 100644 --- a/src/components/cards/card.tsx +++ b/src/components/cards/card.tsx @@ -1,6 +1,7 @@ import * as React from "react" import { RSSSource, SourceOpenTarget } from "../../scripts/models/source" import { RSSItem } from "../../scripts/models/item" +import { platformCtrl } from "../../scripts/utils" export namespace Card { export type Props = { @@ -8,7 +9,7 @@ export namespace Card { item: RSSItem source: RSSSource keyword: string - shortcuts: (item: RSSItem, key: string) => void + shortcuts: (item: RSSItem, e: KeyboardEvent) => void markRead: (item: RSSItem) => void contextMenu: (feedId: string, item: RSSItem, e) => void showItem: (fid: string, item: RSSItem) => void @@ -16,7 +17,7 @@ export namespace Card { const openInBrowser = (props: Props, e: React.MouseEvent) => { props.markRead(props.item) - window.utils.openExternal(props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) + window.utils.openExternal(props.item.link, platformCtrl(e)) } export const bindEventsToProps = (props: Props) => ({ @@ -55,6 +56,6 @@ export namespace Card { } const onKeyDown = (props: Props, e: React.KeyboardEvent) => { - props.shortcuts(props.item, e.key) + props.shortcuts(props.item, e.nativeEvent) } } \ No newline at end of file diff --git a/src/components/context-menu.tsx b/src/components/context-menu.tsx index 19036a1..2fb3320 100644 --- a/src/components/context-menu.tsx +++ b/src/components/context-menu.tsx @@ -1,7 +1,7 @@ import * as React from "react" import intl from "react-intl-universal" import QRCode from "qrcode.react" -import { cutText, webSearch, getSearchEngineName } from "../scripts/utils" +import { cutText, webSearch, getSearchEngineName, platformCtrl } from "../scripts/utils" import { ContextualMenu, IContextualMenuItem, ContextualMenuItemType, DirectionalHint } from "office-ui-fabric-react/lib/ContextualMenu" import { ContextMenuType } from "../scripts/models/app" import { RSSItem } from "../scripts/models/item" @@ -77,7 +77,7 @@ export class ContextMenu extends React.Component { iconProps: { iconName: "NavigateExternalInline" }, onClick: (e) => { this.props.markRead(this.props.item) - window.utils.openExternal(this.props.item.link, window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) + window.utils.openExternal(this.props.item.link, platformCtrl(e)) } }, { @@ -158,7 +158,7 @@ export class ContextMenu extends React.Component { text: intl.get("openExternal"), iconProps: { iconName: "NavigateExternalInline" }, onClick: (e) => { - if (window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey) { + if (platformCtrl(e)) { window.utils.imageCallback(ImageCallbackTypes.OpenExternalBg) } else { window.utils.imageCallback(ImageCallbackTypes.OpenExternal) diff --git a/src/components/feeds/feed.tsx b/src/components/feeds/feed.tsx index 67cf1ca..fb3f3f9 100644 --- a/src/components/feeds/feed.tsx +++ b/src/components/feeds/feed.tsx @@ -12,7 +12,7 @@ export type FeedProps = FeedReduxProps & { items: RSSItem[] sourceMap: Object keyword: string - shortcuts: (item: RSSItem, key: string) => void + shortcuts: (item: RSSItem, e: KeyboardEvent) => void markRead: (item: RSSItem) => void contextMenu: (feedId: string, item: RSSItem, e) => void loadMore: (feed: RSSFeed) => void diff --git a/src/containers/article-container.tsx b/src/containers/article-container.tsx index 897221d..b41a0ed 100644 --- a/src/containers/article-container.tsx +++ b/src/containers/article-container.tsx @@ -28,7 +28,7 @@ const makeMapStateToProps = () => { const mapDispatchToProps = (dispatch: AppDispatch) => { return { - shortcuts: (item: RSSItem, key: string) => dispatch(itemShortcuts(item, key)), + shortcuts: (item: RSSItem, e: KeyboardEvent) => dispatch(itemShortcuts(item, e)), dismiss: () => dispatch(dismissItem()), offsetItem: (offset: number) => dispatch(showOffsetItem(offset)), toggleHasRead: (item: RSSItem) => dispatch(item.hasRead ? markUnread(item) : markRead(item)), diff --git a/src/containers/feed-container.tsx b/src/containers/feed-container.tsx index 3ea8dda..74c9be3 100644 --- a/src/containers/feed-container.tsx +++ b/src/containers/feed-container.tsx @@ -33,7 +33,7 @@ const makeMapStateToProps = () => { } const mapDispatchToProps = dispatch => { return { - shortcuts: (item: RSSItem, key: string) => dispatch(itemShortcuts(item, key)), + shortcuts: (item: RSSItem, e: KeyboardEvent) => dispatch(itemShortcuts(item, e)), markRead: (item: RSSItem) => dispatch(markRead(item)), contextMenu: (feedId: string, item: RSSItem, e) => dispatch(openItemMenu(item, feedId, e)), loadMore: (feed: RSSFeed) => dispatch(loadMore(feed)), diff --git a/src/scripts/models/item.ts b/src/scripts/models/item.ts index 0e6d41e..08ff3fb 100644 --- a/src/scripts/models/item.ts +++ b/src/scripts/models/item.ts @@ -1,6 +1,6 @@ import * as db from "../db" import intl from "react-intl-universal" -import { domParser, htmlDecode, ActionStatus, AppThunk } from "../utils" +import { domParser, htmlDecode, ActionStatus, AppThunk, platformCtrl } from "../utils" import { RSSSource } from "./source" import { FeedActionTypes, INIT_FEED, LOAD_MORE, FilterType, initFeeds } from "./feed" import Parser from "@yang991178/rss-parser" @@ -331,21 +331,22 @@ export function toggleHidden(item: RSSItem): AppThunk { } } -export function itemShortcuts(item: RSSItem, key: string): AppThunk { +export function itemShortcuts(item: RSSItem, e: KeyboardEvent): AppThunk { return (dispatch) => { - switch (key) { + switch (e.key) { case "m": case "M": if (item.hasRead) dispatch(markUnread(item)) else dispatch(markRead(item)) break case "b": case "B": if (!item.hasRead) dispatch(markRead(item)) - window.utils.openExternal(item.link) + window.utils.openExternal(item.link, platformCtrl(e)) break case "s": case "S": dispatch(toggleStarred(item)) break case "h": case "H": + if (!item.hasRead) dispatch(markRead(item)) dispatch(toggleHidden(item)) break } diff --git a/src/scripts/models/source.ts b/src/scripts/models/source.ts index 20f34a7..394a575 100644 --- a/src/scripts/models/source.ts +++ b/src/scripts/models/source.ts @@ -226,7 +226,6 @@ function insertSource(source: RSSSource): AppThunk> { })) }) } - } export function addSource(url: string, name: string = null, batch = false): AppThunk> { diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts index d352ed5..5a1486a 100644 --- a/src/scripts/utils.ts +++ b/src/scripts/utils.ts @@ -189,3 +189,7 @@ export function validateRegex(regex: string, flags = ""): RegExp { return null } } + +export function platformCtrl(e: React.MouseEvent | React.KeyboardEvent | MouseEvent | KeyboardEvent) { + return window.utils.platform === "darwin" ? e.metaKey : e.ctrlKey +}