@creopse/react 0.0.11 → 0.0.13

package/dist/{index-B7GqfDTJ.js → content-CM9eJ2st.js}

@@ -1,5 +1,5 @@
 import { usePage, router } from "@inertiajs/react";
-import React__default, { createContext, useContext, useMemo, useCallback } from "react";
+import React__default, { createContext, useContext, useMemo, useCallback, useState, useEffect } from "react";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -6933,6 +6933,28 @@ const useApi = () => {
     handleError
   };
 };
+const useProps = () => {
+  const manager = useContext(PropsContext);
+  const page = usePage();
+  const [props, setProps] = useState(
+    manager ? manager.getState().props : {}
+  );
+  useEffect(() => {
+    if (!manager) return;
+    setProps(manager.getState().props);
+    const unsubscribe = manager.subscribe((newProps) => {
+      setProps(newProps);
+    });
+    return unsubscribe;
+  }, [manager]);
+  if (!manager) {
+    console.warn(
+      "[@creopse/react] Using native Inertia props - live preview disabled"
+    );
+    return page.props;
+  }
+  return props;
+};
 const useMediaQuery = (query) => {
   const [matches, setMatches] = React__default.useState(false);
   React__default.useEffect(() => {
@@ -6947,6 +6969,7 @@ const useMediaQuery = (query) => {
   return matches;
 };
 const useHelper = () => {
+  const props = useProps();
   const page = usePage();
   const { request } = useApi();
   const { apiBaseUrl, langKey } = useConfig();
@@ -7081,15 +7104,15 @@ const useHelper = () => {
   const updateLang = useCallback(
     async (val, reload = true, updateUserPrefs = true) => {
       localStorage.setItem(langKey, val);
-      if (page.props.isUserLoggedIn && updateUserPrefs) {
-        const userPrefs = page.props.userData?.preferences || {
+      if (props.isUserLoggedIn && updateUserPrefs) {
+        const userPrefs = props.userData?.preferences || {
           inAppNotifEnabled: Bool.TRUE,
           emailNotifEnabled: Bool.TRUE,
           locale: val
         };
         userPrefs.locale = val;
         await request({
-          url: `/users/self/${page.props.userData?.id}`,
+          url: `/users/self/${props.userData?.id}`,
           method: "put",
           data: {
             preferences: userPrefs
@@ -7098,7 +7121,7 @@ const useHelper = () => {
       }
       if (reload) location.reload();
     },
-    [langKey, page.props, request]
+    [langKey, props, request]
   );
   const displayFormErrors = useCallback(
     (errors, displayError) => {
@@ -7780,15 +7803,336 @@ function requireLodash_clonedeep() {
 }
 var lodash_clonedeepExports = requireLodash_clonedeep();
 const cloneDeep = /* @__PURE__ */ getDefaultExportFromCjs(lodash_clonedeepExports);
+const useContent = () => {
+  const { request } = useApi();
+  const { fileUrl } = useHelper();
+  const props = useProps();
+  const page = usePage();
+  const pageData = useMemo(
+    () => props.pageData,
+    [props.pageData]
+  );
+  const newsArticle = useMemo(
+    () => props.article,
+    [props.article]
+  );
+  const newsCategory = useMemo(
+    () => props.category,
+    [props.category]
+  );
+  const newsTag = useMemo(
+    () => props.tag,
+    [props.tag]
+  );
+  const contentModelItem = useMemo(
+    () => props.contentModelItem,
+    [props.contentModelItem]
+  );
+  const getSectionData = useCallback(
+    (key) => {
+      if (!key) return null;
+      const keyParts = key.split("__");
+      const slug = keyParts.length ? keyParts[0] : "";
+      const linkId = keyParts.length > 1 ? keyParts[1] : "";
+      return props.pageData?.sections?.find(
+        (section) => section.slug === slug && section.pivot?.linkId === linkId
+      )?.pivot?.data || null;
+    },
+    [props.pageData?.sections]
+  );
+  const getSectionRootData = useCallback(
+    (key) => getSectionData(key)?.index,
+    [getSectionData]
+  );
+  const getSectionSettings = useCallback(
+    (key) => {
+      if (!key) return null;
+      const keyParts = key.split("__");
+      const slug = keyParts.length ? keyParts[0] : "";
+      const linkId = keyParts.length > 1 ? keyParts[1] : "";
+      return props.pageData?.sections?.find(
+        (section) => section.slug === slug && section.pivot?.linkId === linkId
+      )?.pivot?.settings || null;
+    },
+    [props.pageData?.sections]
+  );
+  const getSectionSettingsGroup = useCallback(
+    (key, group) => {
+      const settings = getSectionSettings(key);
+      return settings?.[group];
+    },
+    [getSectionSettings]
+  );
+  const getSectionSetting = useCallback(
+    (key, group, name) => {
+      const settings = getSectionSettingsGroup(key, group);
+      return settings?.[name];
+    },
+    [getSectionSettingsGroup]
+  );
+  const getAnySectionData = useCallback(
+    async (sectionSlug, pageSlug, linkId = "default") => {
+      const task = await request({
+        url: `section-data/${sectionSlug}/source/${pageSlug}/link/${linkId}`
+      });
+      if (task.success && task.result) {
+        return task.result.data;
+      }
+      return null;
+    },
+    [request]
+  );
+  const getContentModel = useCallback(
+    (name) => {
+      return props?.contentModels?.find(
+        (contentModel) => contentModel.name === name
+      );
+    },
+    [props?.contentModels]
+  );
+  const formatContentModelItemData = useCallback(
+    (item) => {
+      const { index: _, ...rest } = item.contentModelData;
+      return {
+        ...item,
+        data: {
+          ...item.contentModelData?.index,
+          ...rest
+        }
+      };
+    },
+    []
+  );
+  const getContentModelItems = useCallback(
+    async (name, filterByIsActive = true) => {
+      const task = await request({
+        url: `content-model/items?contentModelName=${name}${filterByIsActive ? "&isActive=true" : ""}`
+      });
+      if (task.success && task.result) {
+        return (task.result.data || []).map(
+          (item) => formatContentModelItemData(item)
+        );
+      }
+      return [];
+    },
+    [request, formatContentModelItemData]
+  );
+  const getPaginatedContentModelItems = useCallback(
+    async (name, pageSize, filterByIsActive = true) => {
+      const task = await request({
+        url: `content-model/items?pageSize=${pageSize}&contentModelName=${name}${filterByIsActive ? "&isActive=true" : ""}`
+      });
+      if (task.success && task.result) {
+        const items = (task.result.data?.items || []).map(
+          (item) => formatContentModelItemData(item)
+        );
+        const total = task.result.data?.meta?.total || 0;
+        const currentPage = task.result.data?.meta?.currentPage || 1;
+        return {
+          items,
+          total,
+          currentPage
+        };
+      }
+      return {
+        items: [],
+        total: 0,
+        currentPage: 1
+      };
+    },
+    [request, formatContentModelItemData]
+  );
+  const getMenu = useCallback(
+    (name, filterByIsActive = true) => {
+      const menu = props?.menus?.find((menu2) => menu2.name === name);
+      if (menu) {
+        menu.items = cloneDeep(
+          menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
+        );
+      }
+      return menu;
+    },
+    [props?.menus]
+  );
+  const getMenuByLocation = useCallback(
+    (name, filterByIsActive = true) => {
+      const menu = props?.menus?.find((menu2) => menu2.location?.name === name);
+      if (menu) {
+        menu.items = cloneDeep(
+          menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
+        );
+      }
+      return menu;
+    },
+    [props?.menus]
+  );
+  const getMenuItems = useCallback(
+    (name, filterByIsVisible = true) => {
+      return getMenu(name)?.items?.filter((item) => !filterByIsVisible || item.isVisible)?.sort((a, b) => a.position - b.position);
+    },
+    [getMenu]
+  );
+  const getMenuItemById = useCallback(
+    (id) => {
+      const menuItems = [];
+      const menus = props?.menus || [];
+      menus.forEach((menu) => {
+        if (Array.isArray(menu.items)) menuItems.push(...menu.items);
+      });
+      return menuItems.find((item) => item.id === id);
+    },
+    [props?.menus]
+  );
+  const getMenuItemsByLocation = useCallback(
+    (name, filterByIsVisible = true) => {
+      return getMenuByLocation(name)?.items?.filter((item) => !filterByIsVisible || item.isVisible)?.sort((a, b) => a.position - b.position);
+    },
+    [getMenuByLocation]
+  );
+  const getMenuGroups = useCallback(
+    (name, byLocation = false, filterByIsVisible = true) => {
+      const groups = [];
+      const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
+      if (items) {
+        for (const item of items) {
+          const groupAlreadyExists = groups.find(
+            (group) => group.id === item.menuItemGroupId
+          );
+          if (!groupAlreadyExists) {
+            const group = props?.menuItemGroups?.find(
+              (group2) => group2.id === item.menuItemGroupId
+            );
+            if (group) groups.push(group);
+          }
+        }
+      }
+      return groups;
+    },
+    [getMenuItems, getMenuItemsByLocation, props?.menuItemGroups]
+  );
+  const getMenuItemsByGroup = useCallback(
+    (name, groupId, byLocation = false, filterByIsVisible = true) => {
+      const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
+      return items?.filter((item) => item.menuItemGroupId === groupId);
+    },
+    [getMenuItems, getMenuItemsByLocation]
+  );
+  const getMenuGroupedItems = useCallback(
+    (name, byLocation = false, filterByIsVisible = true) => {
+      const groups = getMenuGroups(name, byLocation);
+      return groups.map((group) => ({
+        group,
+        items: getMenuItemsByGroup(
+          name,
+          group.id || 0,
+          byLocation,
+          filterByIsVisible
+        )
+      }));
+    },
+    [getMenuGroups, getMenuItemsByGroup]
+  );
+  const getMenuUngroupedItems = useCallback(
+    (name, byLocation = false, filterByIsVisible = true) => {
+      const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
+      return items?.filter((item) => !item.menuItemGroupId);
+    },
+    [getMenuItems, getMenuItemsByLocation]
+  );
+  const getAppInformationValue = useCallback(
+    (key, type = "string") => {
+      const appInformation = props.appInformation;
+      const setting = appInformation.find((s) => s.key === key);
+      let value = "";
+      switch (type) {
+        case "number":
+          value = setting && parseInt(setting.value) && !isNaN(parseInt(setting.value)) ? parseInt(setting.value) : 0;
+          break;
+        case "boolean":
+          value = setting && !isNaN(parseInt(setting.value)) && parseInt(setting.value) > 0;
+          break;
+        case "object":
+          value = setting && setting.value ? JSON.parse(setting.value) : {};
+          break;
+        case "array":
+          value = setting && setting.value ? JSON.parse(setting.value) : [];
+          break;
+        default:
+          value = setting && setting.value ? setting.value : "";
+          break;
+      }
+      return value;
+    },
+    [props.appInformation]
+  );
+  const appPrimaryColor = useMemo(() => {
+    const primaryColor = getAppInformationValue(
+      "primaryColor"
+    );
+    return primaryColor || "#005B97";
+  }, [getAppInformationValue]);
+  const appSecondaryColor = useMemo(() => {
+    const secondaryColor = getAppInformationValue(
+      "secondaryColor"
+    );
+    return secondaryColor || "#1E9CD7";
+  }, [getAppInformationValue]);
+  const appAccentColor = useMemo(() => {
+    const accentColor = getAppInformationValue("accentColor");
+    return accentColor || "#FF6501";
+  }, [getAppInformationValue]);
+  const icon = useMemo(() => {
+    const icon2 = getAppInformationValue("icon");
+    return fileUrl(icon2) || "";
+  }, [getAppInformationValue, fileUrl]);
+  const logo = useMemo(() => {
+    const logo2 = getAppInformationValue("logo");
+    return fileUrl(logo2) || "";
+  }, [getAppInformationValue, fileUrl]);
+  return {
+    logo,
+    icon,
+    page,
+    pageData,
+    newsArticle,
+    newsCategory,
+    newsTag,
+    contentModelItem,
+    getMenu,
+    getMenuByLocation,
+    getMenuItems,
+    getMenuItemById,
+    getMenuItemsByLocation,
+    getMenuGroups,
+    getMenuItemsByGroup,
+    getMenuGroupedItems,
+    getMenuUngroupedItems,
+    getSectionData,
+    getSectionSettings,
+    getSectionSettingsGroup,
+    getSectionSetting,
+    getAnySectionData,
+    getSectionRootData,
+    getContentModel,
+    getContentModelItems,
+    getPaginatedContentModelItems,
+    getAppInformationValue,
+    appAccentColor,
+    appPrimaryColor,
+    appSecondaryColor
+  };
+};
 export {
   ConfigContext as C,
   EditorMessageType as E,
   PropsContext as P,
-  RouterContext as R,
-  ResolveSectionsContext as a,
-  useApi as b,
+  ResolveSectionsContext as R,
+  useContent as a,
+  useProps as b,
   cloneDeep as c,
-  useConfig as d,
+  RouterContext as d,
+  useApi as e,
+  useConfig as f,
   slideToId as s,
   useHelper as u
 };