diff --git a/Signum.React/Scripts/Frames/ContainerToggle.tsx b/Signum.React/Scripts/Frames/ContainerToggle.tsx index 074df7fc86..4954ef9058 100644 --- a/Signum.React/Scripts/Frames/ContainerToggle.tsx +++ b/Signum.React/Scripts/Frames/ContainerToggle.tsx @@ -19,7 +19,7 @@ export default function ContainerToggleComponent(p: { children: React.ReactNode } return ( -
+
diff --git a/Signum.React/Scripts/Frames/FramePage.tsx b/Signum.React/Scripts/Frames/FramePage.tsx index ad9e88e258..d4ca219edd 100644 --- a/Signum.React/Scripts/Frames/FramePage.tsx +++ b/Signum.React/Scripts/Frames/FramePage.tsx @@ -178,7 +178,7 @@ export default function FramePage(p: FramePageProps) { const embeddedWidgets = renderEmbeddedWidgets(wc); return ( -
+
{renderTitle()} {renderWidgets(wc)} {entityComponent.current && } diff --git a/Signum.React/Scripts/Frames/Frames.css b/Signum.React/Scripts/Frames/Frames.css index 7840525a66..fbc1065485 100644 --- a/Signum.React/Scripts/Frames/Frames.css +++ b/Signum.React/Scripts/Frames/Frames.css @@ -174,3 +174,12 @@ a.expand-window:hover { .card.card-xs .card-body { padding: 0.3em 0.5em; } + + +.sf-page-container { + display: flex; +} + +.sf-page-container > div{ + flex-grow: 1; +} diff --git a/Signum.React/Scripts/Hooks.ts b/Signum.React/Scripts/Hooks.ts index ede728e242..4fc848c92c 100644 --- a/Signum.React/Scripts/Hooks.ts +++ b/Signum.React/Scripts/Hooks.ts @@ -209,32 +209,40 @@ export function useMounted() { return mounted; } -export function useThrottle(value: T, limit: number): T { +export function useThrottle(value: T, limit: number, options?: { enabled?: boolean }): T { const [throttledValue, setThrottledValue] = React.useState(value); - const mounted = React.useRef(true); const lastRequested = React.useRef<(undefined | { value: T })>(undefined); + const handleRef = React.useRef(undefined); + + function stop(){ + if (handleRef.current) + clearTimeout(handleRef.current); + + lastRequested.current = undefined; + } + React.useEffect( () => { - if (lastRequested.current) { - lastRequested.current.value = value; + if (options && options.enabled == false) { + stop(); } else { - lastRequested.current = { value }; - const handler = setTimeout(function () { - if (mounted.current) { + if (lastRequested.current) { + lastRequested.current.value = value; + } else { + lastRequested.current = { value }; + handleRef.current = setTimeout(function () { setThrottledValue(lastRequested.current!.value); - lastRequested.current = undefined; - - clearTimeout(handler); - } - }, limit); + stop(); + }, limit); + } } }, - [value, limit] + [value, options && options.enabled] ); React.useEffect(() => { - return () => { mounted.current = false; } + return () => stop(); }, []); return throttledValue; diff --git a/Signum.React/Scripts/SearchControl/SearchPage.tsx b/Signum.React/Scripts/SearchControl/SearchPage.tsx index 9d137331e9..8faafc07a2 100644 --- a/Signum.React/Scripts/SearchControl/SearchPage.tsx +++ b/Signum.React/Scripts/SearchControl/SearchPage.tsx @@ -56,7 +56,7 @@ function SearchPage(p: SearchPageProps) { if (!Finder.isFindable(fo.queryName, true)) return ( -
+

{getQueryNiceName(fo.queryName)} Error: Query not allowed {Finder.isFindable(fo.queryName, false) ? "in full screen" : ""} @@ -66,7 +66,7 @@ function SearchPage(p: SearchPageProps) { var qs = Finder.getSettings(fo.queryName); return ( -
+

{getQueryNiceName(fo.queryName)}