From e4da412d831f70f6057dcbcb19f2437d5d1207b4 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Wed, 25 Sep 2019 11:02:08 -0700 Subject: [PATCH] move to use meta and shift symbols to define keyboard listening --- components/Billing.js | 2 +- components/EditorContainer.js | 2 +- components/ExportMenu.js | 8 ++------ components/ImagePicker.js | 2 +- components/RandomImage.js | 2 +- components/Settings.js | 11 ++++------- components/SnippetToolbar.js | 2 +- components/TweetButton.js | 2 +- components/WindowControls.js | 2 +- package.json | 2 +- pages/snippets.js | 2 +- yarn.lock | 18 +++++++++--------- 12 files changed, 24 insertions(+), 31 deletions(-) diff --git a/components/Billing.js b/components/Billing.js index 7b0ad67..3dfed46 100644 --- a/components/Billing.js +++ b/components/Billing.js @@ -1,6 +1,6 @@ import React from 'react' import { Elements, StripeProvider, CardElement, injectStripe } from 'react-stripe-elements' -import { useAsyncCallback } from '@dawnlabs/tacklebox' +import { useAsyncCallback } from 'actionsack' import Button from './Button' import Input from './Input' diff --git a/components/EditorContainer.js b/components/EditorContainer.js index 1fc9fe5..5d74dbd 100644 --- a/components/EditorContainer.js +++ b/components/EditorContainer.js @@ -1,6 +1,6 @@ // Theirs import React from 'react' -import { useAsyncCallback } from '@dawnlabs/tacklebox' +import { useAsyncCallback } from 'actionsack' import Editor from './Editor' import Toasts from './Toasts' diff --git a/components/ExportMenu.js b/components/ExportMenu.js index 2113817..988dbaa 100644 --- a/components/ExportMenu.js +++ b/components/ExportMenu.js @@ -1,6 +1,6 @@ import React from 'react' import { withRouter } from 'next/router' -import { useCopyTextHandler, useOnline, useKeyboardListener } from '@dawnlabs/tacklebox' +import { useCopyTextHandler, useOnline, useKeyboardListener } from 'actionsack' import { COLORS, EXPORT_SIZES } from '../lib/constants' import Button from './Button' @@ -73,11 +73,7 @@ function ExportMenu({ const online = useOnline() const isSafari = useSafari() - useKeyboardListener('e', e => { - if (e.shiftKey && e.metaKey) { - exportImage() - } - }) + useKeyboardListener('⌘-⇧-e', () => exportImage()) const disablePNG = isSafari && (tooLarge || !online) diff --git a/components/ImagePicker.js b/components/ImagePicker.js index af2a349..4e245cc 100644 --- a/components/ImagePicker.js +++ b/components/ImagePicker.js @@ -1,6 +1,6 @@ import React from 'react' import ReactCrop, { makeAspectCrop } from 'react-image-crop' -import { useLocalStorage } from '@dawnlabs/tacklebox' +import { useLocalStorage } from 'actionsack' import RandomImage from './RandomImage' import PhotoCredit from './PhotoCredit' diff --git a/components/RandomImage.js b/components/RandomImage.js index 3b3ac66..483d9d6 100644 --- a/components/RandomImage.js +++ b/components/RandomImage.js @@ -1,6 +1,6 @@ import React from 'react' import Spinner from 'react-spinner' -import { useAsyncCallback } from '@dawnlabs/tacklebox' +import { useAsyncCallback } from 'actionsack' import { useAPI } from './ApiContext' import PhotoCredit from './PhotoCredit' diff --git a/components/Settings.js b/components/Settings.js index 6a8b802..41775f8 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -1,6 +1,6 @@ import React from 'react' import omitBy from 'lodash.omitby' -import { useKeyboardListener } from '@dawnlabs/tacklebox' +import { useKeyboardListener } from 'actionsack' import ThemeSelect from './ThemeSelect' import FontSelect from './FontSelect' @@ -15,12 +15,8 @@ import { COLORS, DEFAULT_PRESETS } from '../lib/constants' import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util' import SettingsIcon from './svg/Settings' -function KeyboardShortcut({ handle }) { - useKeyboardListener('/', e => { - if (e.metaKey) { - handle() - } - }) +function KeyboardShortcut({ trigger, handle }) { + useKeyboardListener(trigger, handle) return null } @@ -389,6 +385,7 @@ class Settings extends React.PureComponent { return (
{ toggleVisibility() if (!isVisible) { diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js index e6a11b5..401d4b2 100644 --- a/components/SnippetToolbar.js +++ b/components/SnippetToolbar.js @@ -1,5 +1,5 @@ import React from 'react' -import { useAsyncCallback, useOnline } from '@dawnlabs/tacklebox' +import { useAsyncCallback, useOnline } from 'actionsack' import Button from './Button' import Toolbar from './Toolbar' diff --git a/components/TweetButton.js b/components/TweetButton.js index c065944..ecdc723 100644 --- a/components/TweetButton.js +++ b/components/TweetButton.js @@ -1,5 +1,5 @@ import React from 'react' -import { useAsyncCallback, useOnline as useOnlineListener } from '@dawnlabs/tacklebox' +import { useAsyncCallback, useOnline as useOnlineListener } from 'actionsack' import { useAPI } from './ApiContext' import Button from './Button' diff --git a/components/WindowControls.js b/components/WindowControls.js index ac7abf7..7164a54 100644 --- a/components/WindowControls.js +++ b/components/WindowControls.js @@ -1,5 +1,5 @@ import React from 'react' -import { useCopyTextHandler } from '@dawnlabs/tacklebox' +import { useCopyTextHandler } from 'actionsack' import { COLORS } from '../lib/constants' import { Controls, ControlsBW } from './svg/Controls' diff --git a/package.json b/package.json index 6238313..465a530 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,9 @@ "cy:open": "cypress open" }, "dependencies": { - "@dawnlabs/tacklebox": "^0.0.11", "@next/bundle-analyzer": "^9.0.5", "@reach/visually-hidden": "^0.1.4", + "actionsack": "^0.0.13", "axios": "^0.19.0", "codemirror": "^5.48.4", "codemirror-graphql": "^0.9.0", diff --git a/pages/snippets.js b/pages/snippets.js index 7a16d76..ef00357 100644 --- a/pages/snippets.js +++ b/pages/snippets.js @@ -3,7 +3,7 @@ import React from 'react' import Link from 'next/link' import Router from 'next/router' import formatDistanceToNow from 'date-fns/formatDistanceToNow' -import { useAsyncCallback } from '@dawnlabs/tacklebox' +import { useAsyncCallback } from 'actionsack' import Button from '../components/Button' import LoginButton from '../components/LoginButton' diff --git a/yarn.lock b/yarn.lock index e25e136..f340141 100644 --- a/yarn.lock +++ b/yarn.lock @@ -922,15 +922,6 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@dawnlabs/tacklebox@^0.0.11": - version "0.0.11" - resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.11.tgz#96890f4b40256e1cb912be940e86d397660bd138" - integrity sha512-VfxkJlHU2xGyHl0iDLd21GHHqp3Y4m3xjvUxqrZSs0zEUE7qp8U2+s65dCtjYLza9Eu5yI6a+gsJoe2P66m31A== - dependencies: - copy-to-clipboard "^3.2.0" - react-click-outside "^3.0.1" - react-fast-compare "2.0.4" - "@firebase/app-types@0.4.3", "@firebase/app-types@0.x": version "0.4.3" resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.4.3.tgz#80d2b6e5ee43ac99892329ab02301ee7ed82da45" @@ -1523,6 +1514,15 @@ acorn@^7.0.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.0.0.tgz#26b8d1cd9a9b700350b71c0905546f64d1284e7a" integrity sha512-PaF/MduxijYYt7unVGRuds1vBC9bFxbNf+VWqhOClfdgy7RlVkQqt610ig1/yxTgsDIfW1cWDel5EBbOy3jdtQ== +actionsack@^0.0.13: + version "0.0.13" + resolved "https://registry.yarnpkg.com/actionsack/-/actionsack-0.0.13.tgz#5dcf43db1c2e894ba433676524c0ba48aad52356" + integrity sha512-A3C6uzkZoZ9sJysfnbhuvJ4mt61HDrmPaYixz4XLvwKpvvo7j+13cEMKBWi2aPJPNYBaWTM6YNQRy1xgltZO1A== + dependencies: + copy-to-clipboard "^3.2.0" + react-click-outside "^3.0.1" + react-fast-compare "2.0.4" + agentkeepalive@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.0.2.tgz#38a490b779a97bd542d153e5a7da0d1fdef35dd3"