@gaddario98/react-pages
Version:
627 lines (608 loc) • 30.1 kB
JavaScript
import { createExtractor, withMemo } from '@gaddario98/utiles';
import { useRef, useCallback, useState, useEffect, useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { useQueryClient, QueryObserver } from '@tanstack/react-query';
import { useFormManager } from '@gaddario98/react-form';
import { useApi } from '@gaddario98/react-queries';
import { useInvalidateQueries } from '@gaddario98/react-providers';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useTranslation } from 'react-i18next';
import { useAuthValue } from '@gaddario98/react-auth';
import { Helmet } from 'react-helmet-async';
function createQueryExtractor(allQuery, queryCacheRef, usedKeys) {
return createExtractor(allQuery, queryCacheRef, usedKeys);
}
function createMutationExtractor(allMutation, mutationCacheRef, usedKeys) {
return createExtractor(allMutation, mutationCacheRef, usedKeys);
}
function createFormValuesExtractor(formValues, formValuesCacheRef, usedKeys) {
return createExtractor(formValues, formValuesCacheRef, usedKeys);
}
function useDataExtractor({ allQuery, allMutation, formValues }) {
// Initialize cache refs
const queryCacheRef = useRef(new Map());
const mutationCacheRef = useRef(new Map());
const formValuesCacheRef = useRef(new Map());
// Create extractors with caching
const extractQuery = useCallback((usedKeys) => createQueryExtractor(allQuery, queryCacheRef.current, usedKeys), [allQuery]);
const extractMutations = useCallback((usedKeys) => createMutationExtractor(allMutation, mutationCacheRef.current, usedKeys), [allMutation]);
const extractFormValues = useCallback((usedKeys) => createFormValuesExtractor(formValues, formValuesCacheRef.current, usedKeys), [formValues]);
// Clear cache utility
const clearCache = useCallback(() => {
queryCacheRef.current.clear();
mutationCacheRef.current.clear();
formValuesCacheRef.current.clear();
}, []);
return {
extractQuery,
extractMutations,
extractFormValues,
clearCache,
cacheRefs: {
queryCacheRef,
mutationCacheRef,
formValuesCacheRef,
},
};
}
const useFormPage = ({ form, }) => {
var _a, _b, _c;
const queryClient = useQueryClient();
const [defaultValueQuery, setDefaultValueQuery] = useState(form === null || form === void 0 ? void 0 : form.defaultValues);
useEffect(() => {
if (!(form === null || form === void 0 ? void 0 : form.defaultValueQueryKey)) {
setDefaultValueQuery(form === null || form === void 0 ? void 0 : form.defaultValues);
return;
}
const initialData = queryClient.getQueryData(form.defaultValueQueryKey);
if (initialData) {
setDefaultValueQuery(initialData);
}
const observer = new QueryObserver(queryClient, {
queryKey: form.defaultValueQueryKey,
enabled: true,
notifyOnChangeProps: ["data"],
refetchOnWindowFocus: false,
});
const unsubscribe = observer.subscribe((result) => {
if (result.data !== undefined) {
setDefaultValueQuery(result.data);
}
});
return () => unsubscribe();
}, [form === null || form === void 0 ? void 0 : form.defaultValueQueryKey, form === null || form === void 0 ? void 0 : form.defaultValues, queryClient]);
const defaultValues = useMemo(() => {
var _a, _b;
return (Object.assign(Object.assign({}, (defaultValueQuery !== null && defaultValueQuery !== void 0 ? defaultValueQuery : {})), ((_b = (_a = form === null || form === void 0 ? void 0 : form.defaultValueQueryMap) === null || _a === void 0 ? void 0 : _a.call(form, defaultValueQuery)) !== null && _b !== void 0 ? _b : {})));
}, [defaultValueQuery, form]);
const formControl = useForm(Object.assign(Object.assign({ mode: "all" }, ((_a = form === null || form === void 0 ? void 0 : form.formSettings) !== null && _a !== void 0 ? _a : {})), { defaultValues, resetOptions: Object.assign({ keepDirtyValues: true, keepDefaultValues: false }, ((_c = (_b = form === null || form === void 0 ? void 0 : form.formSettings) === null || _b === void 0 ? void 0 : _b.resetOptions) !== null && _c !== void 0 ? _c : {})) }));
// Memoize formControl to avoid unnecessary re-renders
const stableFormControl = useMemo(() => formControl, []);
useEffect(() => {
stableFormControl.reset(defaultValues, {
keepDirtyValues: true,
keepDefaultValues: false,
});
}, [defaultValues, stableFormControl]);
const formValues = stableFormControl.watch();
const setValueAndTrigger = useCallback(async (name, value, options) => {
stableFormControl.setValue(name, value, options);
await stableFormControl.trigger(name);
}, [stableFormControl]);
return {
formValues,
formControl: stableFormControl,
setValue: setValueAndTrigger,
};
};
const EMPTY_ARRAY = [];
// Utility: merge by key for arrays of objects
function mergeByKey(prev, next) {
const map = new Map();
prev.forEach((item) => map.set(item.key, item));
return next.map((item) => {
const prevItem = map.get(item.key);
// If the reference is the same, keep it; else, update
if (prevItem && shallowEqual(prevItem, item)) {
return prevItem;
}
return item;
});
}
// Utility: shallow equal for objects
function shallowEqual(objA, objB) {
if (objA === objB)
return true;
if (!objA || !objB)
return false;
const keysA = Object.keys(objA);
const keysB = Object.keys(objB);
if (keysA.length !== keysB.length)
return false;
for (let key of keysA) {
const valA = objA[key];
const valB = objB[key];
// Se entrambi sono funzioni, considerali uguali
// if (typeof valA === "function" && typeof valB === "function") continue;
if (valA !== valB)
return false;
}
return true;
}
const usePageConfig = ({ queries = EMPTY_ARRAY, form, ns, onValuesChange, viewSettings = {}, }) => {
const { formControl, formValues, setValue } = useFormPage({ form });
const usedQueries = useMemo(() => {
return queries.map((q) => {
if (q.type === "mutation") {
const mutationConfig = typeof q.mutationConfig === "function"
? q.mutationConfig({ formValues, setValue })
: q.mutationConfig;
return Object.assign(Object.assign({}, q), { mutationConfig });
}
if (q.type === "query") {
const queryConfig = typeof q.queryConfig === "function"
? q.queryConfig({ formValues, setValue })
: q.queryConfig;
return Object.assign(Object.assign({}, q), { queryConfig });
}
});
}, [queries, formValues]);
const { allMutation, allQuery } = useApi(usedQueries);
const { invalidateQueries } = useInvalidateQueries();
// Memoize extractors only once per hook instance
const { extractMutations, extractQuery } = useDataExtractor({
allMutation,
allQuery,
formValues,
});
// Memoize queriesKeys only when allQuery/allMutation change
const queriesKeys = useMemo(() => Object.keys(allQuery !== null && allQuery !== void 0 ? allQuery : {}).concat(Object.keys(allMutation !== null && allMutation !== void 0 ? allMutation : {})), [allMutation, allQuery]);
// Memoize isAllQueryMapped only when queries/queriesKeys cambiano
const isAllQueryMapped = useMemo(() => {
if (!queries.length)
return true;
return queries.map((el) => el.key).every((el) => queriesKeys.includes(el));
}, [queries, queriesKeys]);
// Memoize extractQueryHandle/extractMutationsHandle solo se serve
const extractQueryHandle = useMemo(() => {
var _a;
if (!((_a = form === null || form === void 0 ? void 0 : form.usedQueries) === null || _a === void 0 ? void 0 : _a.length))
return allQuery;
return extractQuery(form === null || form === void 0 ? void 0 : form.usedQueries);
}, [allQuery, extractQuery, form === null || form === void 0 ? void 0 : form.usedQueries]);
const extractMutationsHandle = useMemo(() => {
var _a;
if (!((_a = form === null || form === void 0 ? void 0 : form.usedQueries) === null || _a === void 0 ? void 0 : _a.length))
return allMutation;
return extractMutations(form.usedQueries);
}, [allMutation, extractMutations, form === null || form === void 0 ? void 0 : form.usedQueries]);
// Memoize isLoading solo su allQuery
const isLoading = useMemo(() => Object.values(allQuery).some((el) => typeof el !== "boolean" && (el === null || el === void 0 ? void 0 : el.isLoadingMapped) === true && !el.data), [allQuery]);
// Memoize queryKeys solo su queries
const queryKeys = useMemo(() => usedQueries
.filter((el) => (el === null || el === void 0 ? void 0 : el.type) === "query")
.map((el) => {
const queryConfig = el.queryConfig;
return queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.queryKey;
}), [usedQueries, formValues]);
// Memoize hasQueries solo su queries
const hasQueries = useMemo(() => {
if (!queries.length)
return false;
return queries.some((q) => q.type === "query");
}, [queries]);
// --- MEMOIZED STATE FOR MERGE ---
// Usare useRef per reference precedente
const prevFormDataRef = useRef([]);
const prevFormSubmitRef = useRef([]);
const prevViewSettingsRef = useRef(undefined);
// Memoize mappedFormData con merge by key solo se array di oggetti con key valida
const mappedFormData = useMemo(() => {
var _a, _b, _c;
if (!(form === null || form === void 0 ? void 0 : form.data) || !isAllQueryMapped)
return EMPTY_ARRAY;
const next = (_c = (_b = (_a = form.data) === null || _a === void 0 ? void 0 : _a.map((el) => {
if (typeof el === "function") {
return el({
formValues,
allMutation: extractMutationsHandle,
allQuery: extractQueryHandle,
setValue,
});
}
return el;
})) === null || _b === void 0 ? void 0 : _b.map((el, i) => { var _a; return (Object.assign(Object.assign({}, el), { key: (_a = el.key) !== null && _a !== void 0 ? _a : i })); })) !== null && _c !== void 0 ? _c : EMPTY_ARRAY;
if (Array.isArray(next) &&
next.length &&
next.every((item) => item && typeof item === "object" && item.key !== undefined)) {
const merged = mergeByKey(prevFormDataRef.current, next);
prevFormDataRef.current = merged;
return merged;
}
prevFormDataRef.current = next;
return next;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
form === null || form === void 0 ? void 0 : form.data,
isAllQueryMapped,
formValues,
extractMutationsHandle,
extractQueryHandle,
setValue,
]);
// Memoize formSubmit con merge by key solo se array di oggetti con key valida
const formSubmit = useMemo(() => {
var _a, _b;
if (!isAllQueryMapped || !(form === null || form === void 0 ? void 0 : form.submit))
return EMPTY_ARRAY;
const submitFn = form.submit;
const next = (_b = (_a = (typeof submitFn === "function"
? submitFn({
formValues,
allMutation: extractMutationsHandle,
allQuery: extractQueryHandle,
setValue,
})
: submitFn)) === null || _a === void 0 ? void 0 : _a.map((el, i) => { var _a; return (Object.assign(Object.assign({}, el), { key: (_a = el.key) !== null && _a !== void 0 ? _a : i })); })) !== null && _b !== void 0 ? _b : EMPTY_ARRAY;
if (Array.isArray(next) &&
next.length &&
next.every((item) => item && typeof item === "object" && item.key !== undefined)) {
const merged = mergeByKey(prevFormSubmitRef.current, next);
prevFormSubmitRef.current = merged;
return merged;
}
prevFormSubmitRef.current = next;
return next;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
isAllQueryMapped,
form === null || form === void 0 ? void 0 : form.submit,
formValues,
extractMutationsHandle,
extractQueryHandle,
setValue,
]);
// Memoize mappedViewSettings: merge by key solo se array di oggetti con key valida, altrimenti shallow compare
const mappedViewSettings = useMemo(() => {
let next;
if (typeof viewSettings === "function") {
next = viewSettings({
allQuery,
allMutation,
formValues,
setValue,
});
}
else {
next = viewSettings;
}
if (typeof next === "object" &&
next !== null &&
prevViewSettingsRef.current &&
shallowEqual(prevViewSettingsRef.current, next)) {
return prevViewSettingsRef.current;
}
prevViewSettingsRef.current = next;
return next;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [viewSettings, allQuery, allMutation, formValues, setValue]);
// Memoize handleRefresh
const handleRefresh = useCallback(async () => {
if (!queryKeys)
return;
await invalidateQueries(queryKeys);
}, [invalidateQueries, queryKeys]);
// Effetto per onValuesChange, solo se cambia ciò che serve
useEffect(() => {
if (isAllQueryMapped && onValuesChange) {
onValuesChange({
allMutation,
allQuery: allQuery !== null && allQuery !== void 0 ? allQuery : {},
formValues,
setValue,
});
}
}, [
isAllQueryMapped,
onValuesChange,
allMutation,
allQuery,
formValues,
setValue,
]);
const formData = useFormManager(Object.assign(Object.assign({}, form), { data: (mappedFormData !== null && mappedFormData !== void 0 ? mappedFormData : EMPTY_ARRAY), ns,
formControl, submit: formSubmit }));
return {
formData,
isAllQueryMapped,
formValues,
formControl,
hasQueries,
handleRefresh,
allMutation,
allQuery,
setValue,
form,
mappedViewSettings,
isLoading,
};
};
const usePageUtiles = () => {
const getContentProps = useCallback((props) => props, []);
const getContentItems = useCallback((props) => props, []);
return { getContentProps, getContentItems };
};
const DefaultContainer = ({ children, }) => {
return children;
};
let pageConfig = {
HeaderContainer: DefaultContainer,
FooterContainer: DefaultContainer,
BodyContainer: DefaultContainer,
authPageImage: "",
authPageProps: { id: "auth-page" },
isLogged: (val) => !!(val === null || val === void 0 ? void 0 : val.id) && !!(val === null || val === void 0 ? void 0 : val.isLogged),
ItemsContainer: ({ children }) => children,
PageContainer: ({ children }) => children,
meta: {
title: "",
description: "",
},
};
const setPageConfig = (config) => {
pageConfig = Object.assign(Object.assign({}, pageConfig), config);
};
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
const Container = withMemo(({ content, ns, pageId, allMutation, allQuery, formValues, setValue, }) => {
const { components } = useGenerateContentRender({
allMutation,
allQuery,
formValues,
pageId,
isAllQueryMapped: true,
formData: false,
contents: content.items,
ns,
setValue,
});
const Layout = useMemo(() => { var _a; return (_a = content === null || content === void 0 ? void 0 : content.component) !== null && _a !== void 0 ? _a : pageConfig.ItemsContainer; }, [content === null || content === void 0 ? void 0 : content.component]);
return jsx(Layout, { children: components === null || components === void 0 ? void 0 : components.map((el) => el.element) });
});
// Rimuovo l'uso di useRef: i dati dinamici devono propagarsi
const RenderComponent = withMemo(({ content, formValues, allMutation, allQuery, setValue, }) => {
const { component } = content;
// Memo solo su oggetti che non cambiano spesso, ma i dati dinamici devono propagarsi
return useMemo(() => {
if (typeof component === "function") {
return component({
allQuery,
allMutation,
formValues,
setValue,
});
}
return component;
}, [allMutation, allQuery, component, formValues, setValue]);
});
const ContentRenderer = withMemo(({ content, ns, formValues, pageId, allMutation, allQuery, setValue, }) => {
if (content.type === "container") {
return (jsx(Container, { content: content, ns: ns, pageId: pageId, allMutation: allMutation, allQuery: allQuery, formValues: formValues, setValue: setValue }));
}
return (jsx(RenderComponent, { content: content, ns: ns, formValues: formValues, pageId: pageId, allMutation: allMutation, allQuery: allQuery, setValue: setValue }));
});
const useGenerateContentRender = ({ pageId, ns = "", contents = [], allMutation, allQuery, formValues, isAllQueryMapped, formData, setValue, }) => {
var _a;
// Rimuovo l'uso di useRef per i dati dinamici
const memorizedContentsRef = useRef([]);
// Memo solo su oggetti che non cambiano spesso
const contentsWithQueriesDeps = useMemo(() => {
if (typeof contents === "function" && isAllQueryMapped) {
return contents({
formValues,
allMutation,
allQuery,
setValue,
});
}
return Array.isArray(contents) ? contents : [];
}, [contents, isAllQueryMapped, formValues, allMutation, allQuery, setValue]);
// Memo allContents per evitare loop di rendering
const filteredContents = useMemo(() => {
if (typeof contents === "function") {
return contentsWithQueriesDeps.filter((el) => !(el === null || el === void 0 ? void 0 : el.hidden));
}
else {
return contents.filter((el) => !(el === null || el === void 0 ? void 0 : el.hidden));
}
}, [contents, contentsWithQueriesDeps]);
// Usa filteredContents direttamente come sorgente, elimina lo stato allContents
const { extractFormValues, extractMutations, extractQuery } = useDataExtractor({
allMutation,
allQuery,
formValues,
});
// Memo: genera solo nuovi elementi se cambia la lista o la chiave
const memorizedContents = useMemo(() => {
if (!isAllQueryMapped)
return [];
const getStableKey = (content, index) => { var _a; return (_a = content.key) !== null && _a !== void 0 ? _a : `content-${index}`; };
const dynamicElements = filteredContents.map((content, index) => {
var _a, _b, _c, _d;
const stableKey = getStableKey(content, index);
return {
element: (jsx(ContentRenderer, { content: content, ns: ns, formValues: extractFormValues((_a = content.usedFormValues) !== null && _a !== void 0 ? _a : []), pageId: pageId, allMutation: extractMutations((_b = content.usedQueries) !== null && _b !== void 0 ? _b : []), allQuery: extractQuery(((_c = content.usedQueries) !== null && _c !== void 0 ? _c : [])), setValue: setValue }, stableKey)),
index: (_d = content.index) !== null && _d !== void 0 ? _d : index,
renderInFooter: !!content.renderInFooter,
renderInHeader: !!content.renderInHeader,
key: stableKey,
};
});
let formElementsWithKey = [];
if (formData && Array.isArray(formData.elements)) {
formElementsWithKey = formData.elements.map((el, idx) => {
var _a, _b;
return (Object.assign(Object.assign({}, el), { key: (_a = el.key) !== null && _a !== void 0 ? _a : `form-element-${(_b = el.index) !== null && _b !== void 0 ? _b : idx}` }));
});
}
// Merge e aggiorna solo se già presente
const next = [...dynamicElements, ...formElementsWithKey].sort((a, b) => a.index - b.index || String(a.key).localeCompare(String(b.key)));
const prev = memorizedContentsRef.current;
const merged = next.map((el) => {
const found = prev.find((e) => e.key === el.key);
if (found) {
// Aggiorna solo le props dell'elemento mantenendo la reference
return Object.assign(Object.assign(Object.assign({}, found), el), { element: el.element });
}
return el;
});
memorizedContentsRef.current = merged;
return next;
}, [
isAllQueryMapped,
filteredContents,
ns,
pageId,
setValue,
extractFormValues,
extractMutations,
extractQuery,
formData,
]);
return {
components: memorizedContents,
allContents: [
...filteredContents,
...(!formData ? [] : ((_a = formData === null || formData === void 0 ? void 0 : formData.formContents) !== null && _a !== void 0 ? _a : [])),
],
};
};
const useGenerateContent = ({ pageId, ns = "", contents = [], pageConfig, }) => {
const { allMutation, allQuery, formData, formValues, isAllQueryMapped, setValue, } = pageConfig;
const { allContents, components } = useGenerateContentRender({
allMutation,
allQuery,
formData,
formValues,
pageId,
contents,
isAllQueryMapped,
setValue,
ns,
});
const body = useMemo(() => components
.filter((el) => !el.renderInFooter && !el.renderInHeader)
.map((item) => item.element), [components]);
const header = useMemo(() => components.filter((el) => el.renderInHeader).map((item) => item.element), [components]);
const footer = useMemo(() => components.filter((el) => el.renderInFooter).map((item) => item.element), [components]);
return { header, body, footer, allContents };
};
const PageMetadata = ({ title = "Addario Giosuè App", description, documentLang = "it", otherMetaTags, disableIndexing, }) => {
var _a, _b;
return (jsxs(Helmet, { children: [jsx("html", { lang: documentLang }), jsx("title", { children: title || ((_a = pageConfig.meta) === null || _a === void 0 ? void 0 : _a.title) || "" }), jsx("meta", { name: "description", content: description || ((_b = pageConfig.meta) === null || _b === void 0 ? void 0 : _b.description) || "" }), jsx("meta", { name: "robots", content: disableIndexing ? "noindex, nofollow" : "index, follow" }), otherMetaTags] }));
};
const PageGenerator = withMemo((_a) => {
var { enableAuthControl = true, meta } = _a, props = __rest(_a, ["enableAuthControl", "meta"]);
const user = useAuthValue();
const authControl = useMemo(() => enableAuthControl && !pageConfig.isLogged(user), [enableAuthControl, user, pageConfig.isLogged]);
const [usedProps, setUsedProps] = useState(enableAuthControl && authControl ? "auth" : "page");
useEffect(() => {
const newUsedProps = authControl ? "auth" : "page";
if (newUsedProps !== usedProps)
setUsedProps(newUsedProps);
}, [authControl, usedProps]);
const selectedProps = useMemo(() => usedProps === "auth"
? pageConfig.authPageProps
: props, [props, usedProps]);
const { ns, contents = [], queries = [], form, id, onValuesChange, viewSettings, } = selectedProps;
const { t, i18n } = useTranslation(ns);
const pageMetadata = useMemo(() => (Object.assign(Object.assign({}, meta), { title: (meta === null || meta === void 0 ? void 0 : meta.title) ? t(meta === null || meta === void 0 ? void 0 : meta.title, { ns: "meta" }) : "", description: (meta === null || meta === void 0 ? void 0 : meta.description)
? t(meta === null || meta === void 0 ? void 0 : meta.description, { ns: "meta" })
: "", documentLang: i18n.language })), [t, i18n.language, meta]);
const config = usePageConfig({
queries,
form,
onValuesChange,
ns: ns !== null && ns !== void 0 ? ns : "",
viewSettings,
});
const { handleRefresh, hasQueries, isLoading, mappedViewSettings } = config;
const { allContents, body, footer, header } = useGenerateContent({
contents,
pageId: id,
ns,
pageConfig: config,
});
const layoutComponentRef = useRef(pageConfig.BodyContainer);
const pageContainerRef = useRef(pageConfig.PageContainer);
const Layout = useMemo(() => {
var _a, _b, _c;
if (((_a = mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.customLayoutComponent) === null || _a === void 0 ? void 0 : _a.name) !==
((_b = layoutComponentRef.current) === null || _b === void 0 ? void 0 : _b.name)) {
layoutComponentRef.current =
(_c = mappedViewSettings.customLayoutComponent) !== null && _c !== void 0 ? _c : pageConfig.BodyContainer;
}
return layoutComponentRef.current;
}, [mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.customLayoutComponent]);
const PageContainder = useMemo(() => {
var _a, _b, _c;
if (((_a = mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.customPageContainer) === null || _a === void 0 ? void 0 : _a.name) !==
((_b = pageContainerRef.current) === null || _b === void 0 ? void 0 : _b.name)) {
pageContainerRef.current =
(_c = mappedViewSettings.customPageContainer) !== null && _c !== void 0 ? _c : pageConfig.PageContainer;
}
return pageContainerRef.current;
}, [mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.customPageContainer]);
// Estraggo il contenuto per evitare re-rendering
const pageContent = useMemo(() => (jsxs(Fragment, { children: [jsx(PageMetadata, Object.assign({}, pageMetadata)), jsx(pageConfig.HeaderContainer, Object.assign({ allContents: allContents, handleRefresh: handleRefresh, hasQueries: hasQueries }, mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.header, { pageId: id, children: header })), !!isLoading &&
!!pageConfig.LoaderComponent &&
pageConfig.LoaderComponent({ loading: isLoading })] })), [
pageMetadata,
allContents,
handleRefresh,
hasQueries,
mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.header,
id,
header,
isLoading,
]);
const layoutBody = useMemo(() => body, [body]);
const layoutContent = useMemo(() => (jsx(Layout, { allContents: allContents, handleRefresh: handleRefresh, hasQueries: hasQueries, viewSettings: mappedViewSettings, pageId: id, children: layoutBody }, id)), [layoutBody]);
const footerContent = useMemo(() => (jsx(pageConfig.FooterContainer, Object.assign({ allContents: allContents, handleRefresh: handleRefresh, hasQueries: hasQueries }, mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.footer, { pageId: id, children: footer }))), [
allContents,
handleRefresh,
hasQueries,
mappedViewSettings === null || mappedViewSettings === void 0 ? void 0 : mappedViewSettings.footer,
id,
footer,
]);
return (jsxs(PageContainder, { id: id !== null && id !== void 0 ? id : "", children: [pageContent, layoutContent, footerContent] }, id));
});
export { PageGenerator, pageConfig, setPageConfig, useDataExtractor, useFormPage, usePageConfig, usePageUtiles };
//# sourceMappingURL=index.mjs.map