|
1 |
| -import React from "preact/compat"; |
2 |
| -import ReactDOM from "preact/compat"; |
3 |
| -import { createLocationObject, pushState, replaceState } from "./utils"; |
4 |
| -import { HistoryProps, LinkProps, NavigateProps } from "./types"; |
5 |
| - |
6 |
| -/** |
7 |
| - * Interface used to bind a ReactPy node to React. |
8 |
| - */ |
9 |
| -export function bind(node) { |
10 |
| - return { |
11 |
| - create: (type, props, children) => |
12 |
| - React.createElement(type, props, ...children), |
13 |
| - render: (element) => { |
14 |
| - ReactDOM.render(element, node); |
15 |
| - }, |
16 |
| - unmount: () => ReactDOM.unmountComponentAtNode(node), |
17 |
| - }; |
18 |
| -} |
19 |
| - |
20 |
| -/** |
21 |
| - * History component that captures browser "history go back" actions and notifies the server. |
22 |
| - */ |
23 |
| -export function History({ onHistoryChangeCallback }: HistoryProps): null { |
24 |
| - // Tell the server about history "popstate" events |
25 |
| - React.useEffect(() => { |
26 |
| - const listener = () => { |
27 |
| - onHistoryChangeCallback(createLocationObject()); |
28 |
| - }; |
29 |
| - |
30 |
| - // Register the event listener |
31 |
| - window.addEventListener("popstate", listener); |
32 |
| - |
33 |
| - // Delete the event listener when the component is unmounted |
34 |
| - return () => window.removeEventListener("popstate", listener); |
35 |
| - }); |
36 |
| - |
37 |
| - // Tell the server about the URL during the initial page load |
38 |
| - React.useEffect(() => { |
39 |
| - onHistoryChangeCallback(createLocationObject()); |
40 |
| - return () => {}; |
41 |
| - }, []); |
42 |
| - return null; |
43 |
| -} |
44 |
| - |
45 |
| -/** |
46 |
| - * Link component that captures clicks on anchor links and notifies the server. |
47 |
| - * |
48 |
| - * This component is not the actual `<a>` link element. It is just an event |
49 |
| - * listener for ReactPy-Router's server-side link component. |
50 |
| - */ |
51 |
| -export function Link({ onClickCallback, linkClass }: LinkProps): null { |
52 |
| - React.useEffect(() => { |
53 |
| - // Event function that will tell the server about clicks |
54 |
| - const handleClick = (event: Event) => { |
55 |
| - let click_event = event as MouseEvent; |
56 |
| - if (!click_event.ctrlKey) { |
57 |
| - event.preventDefault(); |
58 |
| - let to = (event.currentTarget as HTMLElement).getAttribute("href"); |
59 |
| - pushState(to); |
60 |
| - onClickCallback(createLocationObject()); |
61 |
| - } |
62 |
| - }; |
63 |
| - |
64 |
| - // Register the event listener |
65 |
| - let link = document.querySelector(`.${linkClass}`); |
66 |
| - if (link) { |
67 |
| - link.addEventListener("click", handleClick); |
68 |
| - } else { |
69 |
| - console.warn(`Link component with class name ${linkClass} not found.`); |
70 |
| - } |
71 |
| - |
72 |
| - // Delete the event listener when the component is unmounted |
73 |
| - return () => { |
74 |
| - if (link) { |
75 |
| - link.removeEventListener("click", handleClick); |
76 |
| - } |
77 |
| - }; |
78 |
| - }); |
79 |
| - return null; |
80 |
| -} |
81 |
| - |
82 |
| -/** |
83 |
| - * Client-side portion of the navigate component, that allows the server to command the client to change URLs. |
84 |
| - */ |
85 |
| -export function Navigate({ |
86 |
| - onNavigateCallback, |
87 |
| - to, |
88 |
| - replace = false, |
89 |
| -}: NavigateProps): null { |
90 |
| - React.useEffect(() => { |
91 |
| - if (replace) { |
92 |
| - replaceState(to); |
93 |
| - } else { |
94 |
| - pushState(to); |
95 |
| - } |
96 |
| - onNavigateCallback(createLocationObject()); |
97 |
| - return () => {}; |
98 |
| - }, []); |
99 |
| - |
100 |
| - return null; |
101 |
| -} |
| 1 | +export { bind, History, Link, Navigate } from "./components"; |
0 commit comments