Update all UI dependencies and update React version to 18 (#2127)
parent
07f6666d46
commit
933a456b03
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
export * from "./inputs";
|
||||
export { default as Search } from "./Search";
|
||||
export * from "./inputs";
|
||||
export * from "./tables";
|
||||
export { default as Toolbox } from "./toolbox";
|
||||
|
@ -1,20 +1,19 @@
|
||||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { useRoutes } from "react-router-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { Router } from "./Router";
|
||||
import { AllProviders } from "./providers";
|
||||
import { useRouteItems } from "./Router";
|
||||
|
||||
const RouteApp = () => {
|
||||
const items = useRouteItems();
|
||||
const container = document.getElementById("root");
|
||||
|
||||
return useRoutes(items);
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<StrictMode>
|
||||
<AllProviders>
|
||||
<RouteApp />
|
||||
</AllProviders>
|
||||
</StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
if (container === null) {
|
||||
Error("Cannot initialize app, root not found");
|
||||
} else {
|
||||
const root = createRoot(container);
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<AllProviders>
|
||||
<Router />
|
||||
</AllProviders>
|
||||
</StrictMode>
|
||||
);
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
export * from "./hooks";
|
||||
export { default as ModalsProvider } from "./ModalsProvider";
|
||||
export { default as withModal } from "./WithModal";
|
||||
export * from "./hooks";
|
||||
|
@ -1,41 +1,9 @@
|
||||
// A workaround of built-in hooks in React-Router v6
|
||||
// https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
|
||||
|
||||
import type { Blocker, History, Transition } from "history";
|
||||
import { useContext, useEffect } from "react";
|
||||
// eslint-disable-next-line camelcase
|
||||
import { UNSAFE_NavigationContext } from "react-router-dom";
|
||||
|
||||
export function useBlocker(blocker: Blocker, when = true) {
|
||||
const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
|
||||
|
||||
useEffect(() => {
|
||||
if (!when) return;
|
||||
|
||||
const unblock = navigator.block((tx: Transition) => {
|
||||
const autoUnblockingTx = {
|
||||
...tx,
|
||||
retry() {
|
||||
// Automatically unblock the transition so it can play all the way
|
||||
// through before retrying it. TODO: Figure out how to re-enable
|
||||
// this block if the transition is cancelled for some reason.
|
||||
unblock();
|
||||
tx.retry();
|
||||
},
|
||||
};
|
||||
|
||||
blocker(autoUnblockingTx);
|
||||
});
|
||||
|
||||
return unblock;
|
||||
}, [navigator, blocker, when]);
|
||||
}
|
||||
import { unstable_usePrompt as useUnstablePrompt } from "react-router-dom";
|
||||
|
||||
// TODO: Replace with Mantine's confirmation modal
|
||||
export function usePrompt(when: boolean, message: string) {
|
||||
useBlocker((tx) => {
|
||||
if (window.confirm(message)) {
|
||||
tx.retry();
|
||||
}
|
||||
}, when);
|
||||
useUnstablePrompt({ when, message });
|
||||
}
|
||||
|
Loading…
Reference in new issue