1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
|
3 | typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
|
4 | (global = global || self, factory(global.CuriReactDOM = {}, global.React));
|
5 | }(this, function (exports, React) { 'use strict';
|
6 |
|
7 | React = React && React.hasOwnProperty('default') ? React['default'] : React;
|
8 |
|
9 | function find(name, children) {
|
10 | return children.some(function (node) {
|
11 | if (node.name === name) {
|
12 | return true;
|
13 | }
|
14 | else if (node.children) {
|
15 | return find(name, node.children);
|
16 | }
|
17 | return false;
|
18 | });
|
19 | }
|
20 | function active(route, response, options) {
|
21 | if (options === void 0) { options = {}; }
|
22 | if (response.name !== route.name &&
|
23 | (!options.partial || !find(response.name, route.children))) {
|
24 | return false;
|
25 | }
|
26 | var keys = route.keys;
|
27 | if (keys.length) {
|
28 | if (!options.params) {
|
29 | return false;
|
30 | }
|
31 | for (var r = 0, length = keys.length; r < length; r++) {
|
32 | var key = keys[r];
|
33 | var param = options.params[key];
|
34 | if (!param || param !== response.params[key]) {
|
35 | return false;
|
36 | }
|
37 | }
|
38 | }
|
39 | if (options.components) {
|
40 | return options.components(response.location);
|
41 | }
|
42 | return true;
|
43 | }
|
44 |
|
45 | var key = {
|
46 | response: null,
|
47 | navigation: null
|
48 | };
|
49 | var responseContext = React.createContext(key);
|
50 | var ResponseProvider = responseContext.Provider, ResponseConsumer = responseContext.Consumer;
|
51 | var routerContext = React.createContext(null);
|
52 | var RouterProvider = routerContext.Provider, RouterConsumer = routerContext.Consumer;
|
53 |
|
54 | function createRouterComponent(router) {
|
55 | function initialState() {
|
56 | return router.current();
|
57 | }
|
58 | return function Router(props) {
|
59 | var _a = React.useState(initialState), response = _a[0], setResponse = _a[1];
|
60 | React.useEffect(function () {
|
61 | var removed = false;
|
62 | var stop = router.observe(function (_a) {
|
63 | var response = _a.response, navigation = _a.navigation;
|
64 | if (!removed) {
|
65 | setResponse({ response: response, navigation: navigation });
|
66 | }
|
67 | }, { initial: false });
|
68 | return function () {
|
69 | removed = true;
|
70 | stop();
|
71 | };
|
72 | }, []);
|
73 | return (React.createElement(RouterProvider, { value: router },
|
74 | React.createElement(ResponseProvider, { value: response }, props.children)));
|
75 | };
|
76 | }
|
77 |
|
78 | function useRouter() {
|
79 | return React.useContext(routerContext);
|
80 | }
|
81 |
|
82 | function useResponse() {
|
83 | return React.useContext(responseContext);
|
84 | }
|
85 |
|
86 | function useActive(props) {
|
87 | var router = useRouter();
|
88 | var response = useResponse().response;
|
89 | var route = router.route(props.name);
|
90 | if (!route) {
|
91 | return false;
|
92 | }
|
93 | return active(route, response, {
|
94 | params: props.params,
|
95 | partial: props.partial,
|
96 | components: props.components
|
97 | });
|
98 | }
|
99 |
|
100 | function useURL(props) {
|
101 | var router = useRouter();
|
102 | return router.url(props);
|
103 | }
|
104 |
|
105 | function useNavigating() {
|
106 | var router = useRouter();
|
107 | var _a = React.useState(undefined), cancel = _a[0], setCancel = _a[1];
|
108 | React.useEffect(function () {
|
109 | var removed = false;
|
110 | var stop = router.cancel(function (callback) {
|
111 | if (!removed) {
|
112 | setCancel(function () { return callback; });
|
113 | }
|
114 | });
|
115 | return function () {
|
116 | removed = true;
|
117 | stop();
|
118 | };
|
119 | }, []);
|
120 | return cancel;
|
121 | }
|
122 |
|
123 | function defaultCanNavigate() {
|
124 | return true;
|
125 | }
|
126 | function useNavigationHandler(props) {
|
127 | var url = props.url, onNav = props.onNav, method = props.method, target = props.target, state = props.state, _a = props.canNavigate, canNavigate = _a === void 0 ? defaultCanNavigate : _a;
|
128 | var router = useRouter();
|
129 | var eventHandler = React.useCallback(function eventHandler(event) {
|
130 | if (onNav) {
|
131 | onNav(event);
|
132 | }
|
133 | if (canNavigate(event, target)) {
|
134 | event.preventDefault();
|
135 | router.navigate({ url: url, state: state, method: method });
|
136 | }
|
137 | }, [url, method, state, onNav, target]);
|
138 | return {
|
139 | url: url,
|
140 | eventHandler: eventHandler
|
141 | };
|
142 | }
|
143 | function useStatefulNavigationHandler(props) {
|
144 | var url = props.url, onNav = props.onNav, method = props.method, target = props.target, state = props.state, _a = props.canNavigate, canNavigate = _a === void 0 ? defaultCanNavigate : _a;
|
145 | var router = useRouter();
|
146 | var removeCallbacks = React.useRef(undefined);
|
147 | var _b = React.useState(false), navigating = _b[0], setNavigating = _b[1];
|
148 | React.useEffect(function () {
|
149 | return function () {
|
150 | if (removeCallbacks.current) {
|
151 | removeCallbacks.current();
|
152 | }
|
153 | };
|
154 | }, []);
|
155 | var eventHandler = React.useCallback(function eventHandler(event) {
|
156 | if (onNav) {
|
157 | onNav(event);
|
158 | }
|
159 | if (canNavigate(event, target)) {
|
160 | event.preventDefault();
|
161 | var done = function () {
|
162 | removeCallbacks.current = undefined;
|
163 | setNavigating(false);
|
164 | };
|
165 | setNavigating(true);
|
166 | removeCallbacks.current = router.navigate({
|
167 | url: url,
|
168 | state: state,
|
169 | method: method,
|
170 | cancelled: done,
|
171 | finished: done
|
172 | });
|
173 | }
|
174 | }, [url, method, state, onNav, target]);
|
175 | return {
|
176 | url: url,
|
177 | eventHandler: eventHandler,
|
178 | navigating: navigating
|
179 | };
|
180 | }
|
181 |
|
182 | function useNavigationFocus(ref, props) {
|
183 | if (props === void 0) { props = {}; }
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 | var response = useResponse().response;
|
190 | var preserve = props.preserve, _a = props.preventScroll, preventScroll = _a === void 0 ? false : _a;
|
191 | React.useEffect(function () {
|
192 | var ele = ref.current;
|
193 | if (ele === null) {
|
194 | {
|
195 | console.warn("There is no element to focus. Did you forget to add the ref to an element?");
|
196 | }
|
197 | return;
|
198 | }
|
199 | if (preserve && ele.contains(document.activeElement)) {
|
200 | return;
|
201 | }
|
202 | {
|
203 | if (!ele.hasAttribute("tabIndex") && ele.tabIndex === -1) {
|
204 | console.warn('The component that is passed the ref must have a "tabIndex" prop or be focusable by default in order to be focused. ' +
|
205 | "Otherwise, the document's <body> will be focused instead.");
|
206 | }
|
207 | }
|
208 |
|
209 | ele.focus({ preventScroll: preventScroll });
|
210 | }, [response]);
|
211 | }
|
212 |
|
213 | |
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 | var __assign = function() {
|
229 | __assign = Object.assign || function __assign(t) {
|
230 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
231 | s = arguments[i];
|
232 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
233 | }
|
234 | return t;
|
235 | };
|
236 | return __assign.apply(this, arguments);
|
237 | };
|
238 |
|
239 | function __rest(s, e) {
|
240 | var t = {};
|
241 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
242 | t[p] = s[p];
|
243 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
244 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
|
245 | t[p[i]] = s[p[i]];
|
246 | return t;
|
247 | }
|
248 |
|
249 | function canNavigate(event, target) {
|
250 | return (!event.defaultPrevented &&
|
251 | !target &&
|
252 | event.button === 0 &&
|
253 | !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey));
|
254 | }
|
255 |
|
256 | var Link = React.forwardRef(function (props, ref) {
|
257 | var
|
258 |
|
259 | name = props.name, params = props.params, query = props.query, hash = props.hash,
|
260 |
|
261 | state = props.state, onNav = props.onNav, method = props.method,
|
262 |
|
263 | children = props.children, _a = props.anchor, Anchor = _a === void 0 ? "a" : _a, rest = __rest(props, ["name", "params", "query", "hash", "state", "onNav", "method", "children", "anchor"]);
|
264 | var url = useURL({ name: name, params: params, query: query, hash: hash });
|
265 | var eventHandler = useNavigationHandler({ url: url, state: state, onNav: onNav, method: method, canNavigate: canNavigate, target: rest.target }).eventHandler;
|
266 | return (React.createElement(Anchor, __assign({}, rest, { onClick: eventHandler, href: url, ref: ref }), children));
|
267 | });
|
268 | var AsyncLink = React.forwardRef(function (props, ref) {
|
269 | var
|
270 |
|
271 | name = props.name, params = props.params, query = props.query, hash = props.hash,
|
272 |
|
273 | state = props.state, onNav = props.onNav, method = props.method,
|
274 |
|
275 | children = props.children, _a = props.anchor, Anchor = _a === void 0 ? "a" : _a, rest = __rest(props, ["name", "params", "query", "hash", "state", "onNav", "method", "children", "anchor"]);
|
276 | var url = useURL({ name: name, params: params, query: query, hash: hash });
|
277 | var _b = useStatefulNavigationHandler({ url: url, state: state, onNav: onNav, method: method, canNavigate: canNavigate, target: rest.target }), eventHandler = _b.eventHandler, navigating = _b.navigating;
|
278 | return (React.createElement(Anchor, __assign({}, rest, { onClick: eventHandler, href: url, ref: ref }), children(navigating)));
|
279 | });
|
280 |
|
281 | exports.AsyncLink = AsyncLink;
|
282 | exports.Link = Link;
|
283 | exports.ResponseConsumer = ResponseConsumer;
|
284 | exports.RouterConsumer = RouterConsumer;
|
285 | exports.createRouterComponent = createRouterComponent;
|
286 | exports.useActive = useActive;
|
287 | exports.useNavigating = useNavigating;
|
288 | exports.useNavigationFocus = useNavigationFocus;
|
289 | exports.useNavigationHandler = useNavigationHandler;
|
290 | exports.useResponse = useResponse;
|
291 | exports.useRouter = useRouter;
|
292 | exports.useStatefulNavigationHandler = useStatefulNavigationHandler;
|
293 | exports.useURL = useURL;
|
294 |
|
295 | Object.defineProperty(exports, '__esModule', { value: true });
|
296 |
|
297 | }));
|