-
-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: undo/redo, action enhancements (#128)
* wip * undo/redo history * wip * stash, clean up removed files * wip * cleanup imports * wip, implicit negate * cleanup tests * chore: enableHistory * chore: invariant, imports * chore: add toast poc, cleanup components * chore: cleanup * wip, getting closer * cleanup, tests * fix: type * shouldRejectKeystrokes util tweaks * chore: cleanup * customIgnoredElements -> ignoreWhenFocused * fix: index check * fix: cleanup not working * fix: scrollbar style * chore: naming * chore: update readme * chore: update docs
- Loading branch information
Showing
38 changed files
with
993 additions
and
549 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| node_modules | ||
| lib | ||
| lib | ||
| .DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,27 @@ | ||
| import "./index.scss"; | ||
| import { Toaster } from "react-hot-toast"; | ||
| import * as React from "react"; | ||
| import { Switch, Route, useHistory, Redirect } from "react-router-dom"; | ||
| import Layout from "./Layout"; | ||
| import Home from "./Home"; | ||
| import Docs from "./Docs"; | ||
| import RegisterDocActions from "./Docs/RegisterDocActions"; | ||
| import useDocsActions from "./hooks/useDocsActions"; | ||
| import { useAnalytics } from "./utils"; | ||
| import Blog from "./Blog"; | ||
| import { ActionImpl } from "../../src/action"; | ||
|
|
||
| import { | ||
| ActionId, | ||
| KBarAnimator, | ||
| KBarProvider, | ||
| KBarPortal, | ||
| useDeepMatches, | ||
| KBarPositioner, | ||
| KBarSearch, | ||
| KBarResults, | ||
| createAction, | ||
| useMatches, | ||
| ActionImpl, | ||
| } from "../../src"; | ||
| import useThemeActions from "./hooks/useThemeActions"; | ||
|
|
||
| const searchStyle = { | ||
| padding: "12px 16px", | ||
|
|
@@ -52,93 +54,58 @@ const groupNameStyle = { | |
| const App = () => { | ||
| useAnalytics(); | ||
| const history = useHistory(); | ||
| const initialActions = [ | ||
| { | ||
| id: "homeAction", | ||
| name: "Home", | ||
| shortcut: ["h"], | ||
| keywords: "back", | ||
| section: "Navigation", | ||
| perform: () => history.push("/"), | ||
| icon: <HomeIcon />, | ||
| subtitle: "Subtitles can help add more context.", | ||
| }, | ||
| { | ||
| id: "docsAction", | ||
| name: "Docs", | ||
| shortcut: ["g", "d"], | ||
| keywords: "help", | ||
| section: "Navigation", | ||
| perform: () => history.push("/docs"), | ||
| }, | ||
| { | ||
| id: "contactAction", | ||
| name: "Contact", | ||
| shortcut: ["c"], | ||
| keywords: "email hello", | ||
| section: "Navigation", | ||
| perform: () => window.open("mailto:[email protected]", "_blank"), | ||
| }, | ||
| { | ||
| id: "twitterAction", | ||
| name: "Twitter", | ||
| shortcut: ["t"], | ||
| keywords: "social contact dm", | ||
| section: "Navigation", | ||
| perform: () => window.open("https://twitter.com/timcchang", "_blank"), | ||
| }, | ||
| createAction({ | ||
| name: "Github", | ||
| shortcut: ["g", "h"], | ||
| keywords: "sourcecode", | ||
| section: "Navigation", | ||
| perform: () => window.open("https://github.com/timc1/kbar", "_blank"), | ||
| }), | ||
| ]; | ||
|
|
||
| return ( | ||
| <KBarProvider | ||
| options={{ | ||
| callbacks: { | ||
| onOpen: () => console.log("open"), | ||
| onClose: () => console.log("close"), | ||
| onQueryChange: (query) => console.log("changed", query), | ||
| onSelectAction: (action) => console.log("executed", action), | ||
| }, | ||
| enableHistory: true, | ||
| }} | ||
| actions={[ | ||
| { | ||
| id: "homeAction", | ||
| name: "Home", | ||
| shortcut: ["h"], | ||
| keywords: "back", | ||
| section: "Navigation", | ||
| perform: () => history.push("/"), | ||
| icon: <HomeIcon />, | ||
| subtitle: "Subtitles can help add more context.", | ||
| }, | ||
| { | ||
| id: "docsAction", | ||
| name: "Docs", | ||
| shortcut: ["g", "d"], | ||
| keywords: "help", | ||
| section: "Navigation", | ||
| perform: () => history.push("/docs"), | ||
| }, | ||
| { | ||
| id: "contactAction", | ||
| name: "Contact", | ||
| shortcut: ["c"], | ||
| keywords: "email hello", | ||
| section: "Navigation", | ||
| perform: () => window.open("mailto:[email protected]", "_blank"), | ||
| }, | ||
| { | ||
| id: "twitterAction", | ||
| name: "Twitter", | ||
| shortcut: ["t"], | ||
| keywords: "social contact dm", | ||
| section: "Navigation", | ||
| perform: () => window.open("https://twitter.com/timcchang", "_blank"), | ||
| }, | ||
| createAction({ | ||
| name: "Github", | ||
| shortcut: ["g", "h"], | ||
| keywords: "sourcecode", | ||
| section: "Navigation", | ||
| perform: () => window.open("https://github.com/timc1/kbar", "_blank"), | ||
| }), | ||
| { | ||
| id: "theme", | ||
| name: "Change theme…", | ||
| keywords: "interface color dark light", | ||
| section: "Preferences", | ||
| }, | ||
| { | ||
| id: "darkTheme", | ||
| name: "Dark", | ||
| keywords: "dark theme", | ||
| section: "", | ||
| perform: () => | ||
| document.documentElement.setAttribute("data-theme-dark", ""), | ||
| parent: "theme", | ||
| }, | ||
| { | ||
| id: "lightTheme", | ||
| name: "Light", | ||
| keywords: "light theme", | ||
| section: "", | ||
| perform: () => | ||
| document.documentElement.removeAttribute("data-theme-dark"), | ||
| parent: "theme", | ||
| }, | ||
| ]} | ||
| actions={initialActions} | ||
| > | ||
| <RegisterDocActions /> | ||
| <KBarPortal> | ||
| <KBarPositioner> | ||
| <KBarAnimator style={animatorStyle}> | ||
| <KBarSearch style={searchStyle} /> | ||
| <RenderResults /> | ||
| </KBarAnimator> | ||
| </KBarPositioner> | ||
| </KBarPortal> | ||
| <CommandBar /> | ||
| <Layout> | ||
| <Switch> | ||
| <Route path="/docs" exact> | ||
|
|
@@ -155,12 +122,32 @@ const App = () => { | |
| </Route> | ||
| </Switch> | ||
| </Layout> | ||
| <Toaster | ||
| toastOptions={{ | ||
| position: "bottom-right", | ||
| }} | ||
| /> | ||
| </KBarProvider> | ||
| ); | ||
| }; | ||
|
|
||
| function CommandBar() { | ||
| useDocsActions(); | ||
| useThemeActions(); | ||
| return ( | ||
| <KBarPortal> | ||
| <KBarPositioner> | ||
| <KBarAnimator style={animatorStyle}> | ||
| <KBarSearch style={searchStyle} /> | ||
| <RenderResults /> | ||
| </KBarAnimator> | ||
| </KBarPositioner> | ||
| </KBarPortal> | ||
| ); | ||
| } | ||
|
|
||
| function RenderResults() { | ||
| const { results, rootActionId } = useDeepMatches(); | ||
| const { results, rootActionId } = useMatches(); | ||
|
|
||
| return ( | ||
| <KBarResults | ||
|
|
@@ -194,16 +181,16 @@ const ResultItem = React.forwardRef( | |
| ref: React.Ref<HTMLDivElement> | ||
| ) => { | ||
| const ancestors = React.useMemo(() => { | ||
| return (function collect(action: ActionImpl, ancestors = []) { | ||
| if (action.parent && action.parent.id !== currentRootActionId) { | ||
| ancestors.push(action.parent); | ||
| if (action.parent.parent) { | ||
| collect(action.parent.parent, ancestors); | ||
| } | ||
| } | ||
| return ancestors; | ||
| })(action); | ||
| }, [action, currentRootActionId]); | ||
| if (!currentRootActionId) return action.ancestors; | ||
| const index = action.ancestors.findIndex( | ||
| (ancestor) => ancestor.id === currentRootActionId | ||
| ); | ||
| // +1 removes the currentRootAction; e.g. | ||
| // if we are on the "Set theme" parent action, | ||
| // the UI should not display "Set theme… > Dark" | ||
| // but rather just "Dark" | ||
| return action.ancestors.slice(index + 1); | ||
| }, [action.ancestors, currentRootActionId]); | ||
|
|
||
| return ( | ||
| <div | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
e9bd63fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: