6197c72 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

various: search hotkeys, dismissal

commit6197c72bc8405fd69e44325f2656b2962e9ed00e authorMatilde Park <matilde@tlon.io> dateFri 25 Jun 2021, 15:01 (5 years ago) parentc87ee75

11 files changed+39−23

compare with master

unifiedsplit

components/Container.js+17−7 components/Search.js+2−1 package-lock.json+8 package.json+1 pages/404.js+2−2 pages/blog.js+2−2 pages/blog/[slug].js+1−1 pages/events.js+1−1 pages/events/[slug].js+2−4 pages/grants.js+1−1 pages/index.js+2−4

components/Container.js+17−7

@@ -1,8 +1,18 @@

1+import { configure, GlobalHotKeys } from "react-hotkeys";

12// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis

2−export default function Container({children}) {

3− return (

4− <div className='flex flex-col min-h-screen w-screen items-center'>

5− {children}

6− </div>

7− )

8− }

3+export default function Container({ toggleSearch, children }) {

4+ const keyMap = { search: ["command+k", "ctrl+k", "esc"] };

5+ const handlers = { search: toggleSearch };

6+ configure({

7+ ignoreTags: [],

8+ });

10+ return (

11+ <>

12+ <GlobalHotKeys keyMap={keyMap} handlers={handlers} />

13+ <div className="flex flex-col min-h-screen w-screen items-center">

14+ {children}

15+ </div>

16+ </>

17+ );

18+}

components/Search.js+2−1

@@ -47,7 +47,8 @@ export default function Search(props) {

4747 glossaryResults = glossarySearch(query);

4848 }

4949

50− const clear = useCallback(() => {

50+ const clear = useCallback((e) => {

51+ e.stopPropagation();

5152 SetQuery("");

5253 }, []);

5354

package-lock.json+8

@@ -4896,6 +4896,14 @@

48964896 "scheduler": "^0.20.2"

48974897 }

48984898 },

4899+ "react-hotkeys": {

4900+ "version": "2.0.0",

4901+ "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",

4902+ "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",

4903+ "requires": {

4904+ "prop-types": "^15.6.1"

4905+ }

4906+ },

48994907 "react-is": {

49004908 "version": "16.13.1",

49014909 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json+1

@@ -18,6 +18,7 @@

1818 "next": "10.2.3",

1919 "react": "17.0.2",

2020 "react-dom": "17.0.2",

21+ "react-hotkeys": "^2.0.0",

2122 "remark": "^13.0.0",

2223 "remark-html": "^13.0.1",

2324 "remark-parse": "^9.0.0",

pages/404.js+2−2

@@ -8,8 +8,8 @@ import Search from "../components/Search";

88export default function NotFound() {

99 const [showSearch, toggleSearch] = useState(false);

1010 return (

11− <Container>

12− {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

11+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

12+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}

1313 <SingleColumn>

1414 <Header toggleSearch={() => toggleSearch(true)} />

1515 <section className="layout-wide pt-48">

pages/blog.js+2−2

@@ -12,8 +12,8 @@ import { getAllPosts, formatDate } from "../lib/lib";

1212export default function Blog({ posts }) {

1313 const [showSearch, toggleSearch] = useState(false);

1414 return (

15− <Container>

16− {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

15+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

16+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}

1717 <SingleColumn>

1818 <Header toggleSearch={() => toggleSearch(true)} />

1919 <section className="layout-wide">

pages/blog/[slug].js+1−1

@@ -28,7 +28,7 @@ export default function Post({ post, nextPost, previousPost }) {

2828 }

2929 const [showSearch, toggleSearch] = useState(false);

3030 return (

31− <Container>

31+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

3232 {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

3333 <SingleColumn>

3434 <Header toggleSearch={() => toggleSearch(true)} />

pages/events.js+1−1

@@ -72,7 +72,7 @@ function EventCard(props) {

7272export default function Events({ pastEvents, currentEvents }) {

7373 const [showSearch, toggleSearch] = useState(false);

7474 return (

75− <Container>

75+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

7676 {showSearch && (

7777 <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

7878 )}

pages/events/[slug].js+2−4

@@ -28,10 +28,8 @@ export default function Event({ post, nextPost, previousPost }) {

2828 }

2929 const [showSearch, toggleSearch] = useState(false);

3030 return (

31− <Container>

32− {showSearch && (

33− <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

34− )}

31+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

32+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}

3533 <SingleColumn>

3634 <Header toggleSearch={() => toggleSearch(true)} />

3735 <section className="flex flex-col layout-wide pt-24">

pages/grants.js+1−1

@@ -79,7 +79,7 @@ export default function Grants({ posts, categories, types, featuredGrants }) {

7979 }, []);

8080

8181 return (

82− <Container>

82+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

8383 <SingleColumn>

8484 {showSearch && (

8585 <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

pages/index.js+2−4

@@ -17,11 +17,9 @@ export default function Home({ posts, events, openGrantsCount }) {

1717 const [tab, setTab] = useState(0);

1818 const [showSearch, toggleSearch] = useState(false);

1919 return (

20− <Container>

20+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

2121 <SingleColumn>

22− {showSearch && (

23− <Search toggleSearch={() => toggleSearch(!showSearch)} />

24− )}

22+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}

2523 <Header toggleSearch={() => toggleSearch(true)} />

2624

2725 {