@creopse/react 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index-B7GqfDTJ.js → content-CM9eJ2st.js} +353 -9
- package/dist/{index-C3UpNpqk.cjs → content-WeAhwlM_.cjs} +348 -4
- package/dist/hooks/index.cjs +7 -392
- package/dist/hooks/index.mjs +7 -392
- package/dist/index.cjs +206 -46
- package/dist/index.mjs +185 -25
- package/package.json +4 -2
- package/types/components/RootContainer/RootContainer.d.ts +1 -8
- package/types/components/RootContainer/index.d.ts +1 -1
- package/types/core/contexts.d.ts +1 -1
- package/types/core/props-manager.d.ts +7 -6
- package/types/hooks/content.d.ts +1 -8
- package/types/hooks/props.d.ts +3 -2
- package/types/hooks/setup.d.ts +7 -0
- package/types/index.d.ts +1 -1
- package/types/types/plugin.d.ts +7 -2
|
@@ -6934,6 +6934,28 @@ const useApi = () => {
|
|
|
6934
6934
|
handleError
|
|
6935
6935
|
};
|
|
6936
6936
|
};
|
|
6937
|
+
const useProps = () => {
|
|
6938
|
+
const manager = React.useContext(PropsContext);
|
|
6939
|
+
const page = react.usePage();
|
|
6940
|
+
const [props, setProps] = React.useState(
|
|
6941
|
+
manager ? manager.getState().props : {}
|
|
6942
|
+
);
|
|
6943
|
+
React.useEffect(() => {
|
|
6944
|
+
if (!manager) return;
|
|
6945
|
+
setProps(manager.getState().props);
|
|
6946
|
+
const unsubscribe = manager.subscribe((newProps) => {
|
|
6947
|
+
setProps(newProps);
|
|
6948
|
+
});
|
|
6949
|
+
return unsubscribe;
|
|
6950
|
+
}, [manager]);
|
|
6951
|
+
if (!manager) {
|
|
6952
|
+
console.warn(
|
|
6953
|
+
"[@creopse/react] Using native Inertia props - live preview disabled"
|
|
6954
|
+
);
|
|
6955
|
+
return page.props;
|
|
6956
|
+
}
|
|
6957
|
+
return props;
|
|
6958
|
+
};
|
|
6937
6959
|
const useMediaQuery = (query) => {
|
|
6938
6960
|
const [matches, setMatches] = React.useState(false);
|
|
6939
6961
|
React.useEffect(() => {
|
|
@@ -6948,6 +6970,7 @@ const useMediaQuery = (query) => {
|
|
|
6948
6970
|
return matches;
|
|
6949
6971
|
};
|
|
6950
6972
|
const useHelper = () => {
|
|
6973
|
+
const props = useProps();
|
|
6951
6974
|
const page = react.usePage();
|
|
6952
6975
|
const { request } = useApi();
|
|
6953
6976
|
const { apiBaseUrl, langKey } = useConfig();
|
|
@@ -7082,15 +7105,15 @@ const useHelper = () => {
|
|
|
7082
7105
|
const updateLang = React.useCallback(
|
|
7083
7106
|
async (val, reload = true, updateUserPrefs = true) => {
|
|
7084
7107
|
localStorage.setItem(langKey, val);
|
|
7085
|
-
if (
|
|
7086
|
-
const userPrefs =
|
|
7108
|
+
if (props.isUserLoggedIn && updateUserPrefs) {
|
|
7109
|
+
const userPrefs = props.userData?.preferences || {
|
|
7087
7110
|
inAppNotifEnabled: Bool.TRUE,
|
|
7088
7111
|
emailNotifEnabled: Bool.TRUE,
|
|
7089
7112
|
locale: val
|
|
7090
7113
|
};
|
|
7091
7114
|
userPrefs.locale = val;
|
|
7092
7115
|
await request({
|
|
7093
|
-
url: `/users/self/${
|
|
7116
|
+
url: `/users/self/${props.userData?.id}`,
|
|
7094
7117
|
method: "put",
|
|
7095
7118
|
data: {
|
|
7096
7119
|
preferences: userPrefs
|
|
@@ -7099,7 +7122,7 @@ const useHelper = () => {
|
|
|
7099
7122
|
}
|
|
7100
7123
|
if (reload) location.reload();
|
|
7101
7124
|
},
|
|
7102
|
-
[langKey,
|
|
7125
|
+
[langKey, props, request]
|
|
7103
7126
|
);
|
|
7104
7127
|
const displayFormErrors = React.useCallback(
|
|
7105
7128
|
(errors, displayError) => {
|
|
@@ -7781,6 +7804,325 @@ function requireLodash_clonedeep() {
|
|
|
7781
7804
|
}
|
|
7782
7805
|
var lodash_clonedeepExports = requireLodash_clonedeep();
|
|
7783
7806
|
const cloneDeep = /* @__PURE__ */ getDefaultExportFromCjs(lodash_clonedeepExports);
|
|
7807
|
+
const useContent = () => {
|
|
7808
|
+
const { request } = useApi();
|
|
7809
|
+
const { fileUrl } = useHelper();
|
|
7810
|
+
const props = useProps();
|
|
7811
|
+
const page = react.usePage();
|
|
7812
|
+
const pageData = React.useMemo(
|
|
7813
|
+
() => props.pageData,
|
|
7814
|
+
[props.pageData]
|
|
7815
|
+
);
|
|
7816
|
+
const newsArticle = React.useMemo(
|
|
7817
|
+
() => props.article,
|
|
7818
|
+
[props.article]
|
|
7819
|
+
);
|
|
7820
|
+
const newsCategory = React.useMemo(
|
|
7821
|
+
() => props.category,
|
|
7822
|
+
[props.category]
|
|
7823
|
+
);
|
|
7824
|
+
const newsTag = React.useMemo(
|
|
7825
|
+
() => props.tag,
|
|
7826
|
+
[props.tag]
|
|
7827
|
+
);
|
|
7828
|
+
const contentModelItem = React.useMemo(
|
|
7829
|
+
() => props.contentModelItem,
|
|
7830
|
+
[props.contentModelItem]
|
|
7831
|
+
);
|
|
7832
|
+
const getSectionData = React.useCallback(
|
|
7833
|
+
(key) => {
|
|
7834
|
+
if (!key) return null;
|
|
7835
|
+
const keyParts = key.split("__");
|
|
7836
|
+
const slug = keyParts.length ? keyParts[0] : "";
|
|
7837
|
+
const linkId = keyParts.length > 1 ? keyParts[1] : "";
|
|
7838
|
+
return props.pageData?.sections?.find(
|
|
7839
|
+
(section) => section.slug === slug && section.pivot?.linkId === linkId
|
|
7840
|
+
)?.pivot?.data || null;
|
|
7841
|
+
},
|
|
7842
|
+
[props.pageData?.sections]
|
|
7843
|
+
);
|
|
7844
|
+
const getSectionRootData = React.useCallback(
|
|
7845
|
+
(key) => getSectionData(key)?.index,
|
|
7846
|
+
[getSectionData]
|
|
7847
|
+
);
|
|
7848
|
+
const getSectionSettings = React.useCallback(
|
|
7849
|
+
(key) => {
|
|
7850
|
+
if (!key) return null;
|
|
7851
|
+
const keyParts = key.split("__");
|
|
7852
|
+
const slug = keyParts.length ? keyParts[0] : "";
|
|
7853
|
+
const linkId = keyParts.length > 1 ? keyParts[1] : "";
|
|
7854
|
+
return props.pageData?.sections?.find(
|
|
7855
|
+
(section) => section.slug === slug && section.pivot?.linkId === linkId
|
|
7856
|
+
)?.pivot?.settings || null;
|
|
7857
|
+
},
|
|
7858
|
+
[props.pageData?.sections]
|
|
7859
|
+
);
|
|
7860
|
+
const getSectionSettingsGroup = React.useCallback(
|
|
7861
|
+
(key, group) => {
|
|
7862
|
+
const settings = getSectionSettings(key);
|
|
7863
|
+
return settings?.[group];
|
|
7864
|
+
},
|
|
7865
|
+
[getSectionSettings]
|
|
7866
|
+
);
|
|
7867
|
+
const getSectionSetting = React.useCallback(
|
|
7868
|
+
(key, group, name) => {
|
|
7869
|
+
const settings = getSectionSettingsGroup(key, group);
|
|
7870
|
+
return settings?.[name];
|
|
7871
|
+
},
|
|
7872
|
+
[getSectionSettingsGroup]
|
|
7873
|
+
);
|
|
7874
|
+
const getAnySectionData = React.useCallback(
|
|
7875
|
+
async (sectionSlug, pageSlug, linkId = "default") => {
|
|
7876
|
+
const task = await request({
|
|
7877
|
+
url: `section-data/${sectionSlug}/source/${pageSlug}/link/${linkId}`
|
|
7878
|
+
});
|
|
7879
|
+
if (task.success && task.result) {
|
|
7880
|
+
return task.result.data;
|
|
7881
|
+
}
|
|
7882
|
+
return null;
|
|
7883
|
+
},
|
|
7884
|
+
[request]
|
|
7885
|
+
);
|
|
7886
|
+
const getContentModel = React.useCallback(
|
|
7887
|
+
(name) => {
|
|
7888
|
+
return props?.contentModels?.find(
|
|
7889
|
+
(contentModel) => contentModel.name === name
|
|
7890
|
+
);
|
|
7891
|
+
},
|
|
7892
|
+
[props?.contentModels]
|
|
7893
|
+
);
|
|
7894
|
+
const formatContentModelItemData = React.useCallback(
|
|
7895
|
+
(item) => {
|
|
7896
|
+
const { index: _, ...rest } = item.contentModelData;
|
|
7897
|
+
return {
|
|
7898
|
+
...item,
|
|
7899
|
+
data: {
|
|
7900
|
+
...item.contentModelData?.index,
|
|
7901
|
+
...rest
|
|
7902
|
+
}
|
|
7903
|
+
};
|
|
7904
|
+
},
|
|
7905
|
+
[]
|
|
7906
|
+
);
|
|
7907
|
+
const getContentModelItems = React.useCallback(
|
|
7908
|
+
async (name, filterByIsActive = true) => {
|
|
7909
|
+
const task = await request({
|
|
7910
|
+
url: `content-model/items?contentModelName=${name}${filterByIsActive ? "&isActive=true" : ""}`
|
|
7911
|
+
});
|
|
7912
|
+
if (task.success && task.result) {
|
|
7913
|
+
return (task.result.data || []).map(
|
|
7914
|
+
(item) => formatContentModelItemData(item)
|
|
7915
|
+
);
|
|
7916
|
+
}
|
|
7917
|
+
return [];
|
|
7918
|
+
},
|
|
7919
|
+
[request, formatContentModelItemData]
|
|
7920
|
+
);
|
|
7921
|
+
const getPaginatedContentModelItems = React.useCallback(
|
|
7922
|
+
async (name, pageSize, filterByIsActive = true) => {
|
|
7923
|
+
const task = await request({
|
|
7924
|
+
url: `content-model/items?pageSize=${pageSize}&contentModelName=${name}${filterByIsActive ? "&isActive=true" : ""}`
|
|
7925
|
+
});
|
|
7926
|
+
if (task.success && task.result) {
|
|
7927
|
+
const items = (task.result.data?.items || []).map(
|
|
7928
|
+
(item) => formatContentModelItemData(item)
|
|
7929
|
+
);
|
|
7930
|
+
const total = task.result.data?.meta?.total || 0;
|
|
7931
|
+
const currentPage = task.result.data?.meta?.currentPage || 1;
|
|
7932
|
+
return {
|
|
7933
|
+
items,
|
|
7934
|
+
total,
|
|
7935
|
+
currentPage
|
|
7936
|
+
};
|
|
7937
|
+
}
|
|
7938
|
+
return {
|
|
7939
|
+
items: [],
|
|
7940
|
+
total: 0,
|
|
7941
|
+
currentPage: 1
|
|
7942
|
+
};
|
|
7943
|
+
},
|
|
7944
|
+
[request, formatContentModelItemData]
|
|
7945
|
+
);
|
|
7946
|
+
const getMenu = React.useCallback(
|
|
7947
|
+
(name, filterByIsActive = true) => {
|
|
7948
|
+
const menu = props?.menus?.find((menu2) => menu2.name === name);
|
|
7949
|
+
if (menu) {
|
|
7950
|
+
menu.items = cloneDeep(
|
|
7951
|
+
menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
|
|
7952
|
+
);
|
|
7953
|
+
}
|
|
7954
|
+
return menu;
|
|
7955
|
+
},
|
|
7956
|
+
[props?.menus]
|
|
7957
|
+
);
|
|
7958
|
+
const getMenuByLocation = React.useCallback(
|
|
7959
|
+
(name, filterByIsActive = true) => {
|
|
7960
|
+
const menu = props?.menus?.find((menu2) => menu2.location?.name === name);
|
|
7961
|
+
if (menu) {
|
|
7962
|
+
menu.items = cloneDeep(
|
|
7963
|
+
menu.items?.filter((item) => !filterByIsActive || item.isActive)?.sort((a, b) => a.position - b.position)
|
|
7964
|
+
);
|
|
7965
|
+
}
|
|
7966
|
+
return menu;
|
|
7967
|
+
},
|
|
7968
|
+
[props?.menus]
|
|
7969
|
+
);
|
|
7970
|
+
const getMenuItems = React.useCallback(
|
|
7971
|
+
(name, filterByIsVisible = true) => {
|
|
7972
|
+
return getMenu(name)?.items?.filter((item) => !filterByIsVisible || item.isVisible)?.sort((a, b) => a.position - b.position);
|
|
7973
|
+
},
|
|
7974
|
+
[getMenu]
|
|
7975
|
+
);
|
|
7976
|
+
const getMenuItemById = React.useCallback(
|
|
7977
|
+
(id) => {
|
|
7978
|
+
const menuItems = [];
|
|
7979
|
+
const menus = props?.menus || [];
|
|
7980
|
+
menus.forEach((menu) => {
|
|
7981
|
+
if (Array.isArray(menu.items)) menuItems.push(...menu.items);
|
|
7982
|
+
});
|
|
7983
|
+
return menuItems.find((item) => item.id === id);
|
|
7984
|
+
},
|
|
7985
|
+
[props?.menus]
|
|
7986
|
+
);
|
|
7987
|
+
const getMenuItemsByLocation = React.useCallback(
|
|
7988
|
+
(name, filterByIsVisible = true) => {
|
|
7989
|
+
return getMenuByLocation(name)?.items?.filter((item) => !filterByIsVisible || item.isVisible)?.sort((a, b) => a.position - b.position);
|
|
7990
|
+
},
|
|
7991
|
+
[getMenuByLocation]
|
|
7992
|
+
);
|
|
7993
|
+
const getMenuGroups = React.useCallback(
|
|
7994
|
+
(name, byLocation = false, filterByIsVisible = true) => {
|
|
7995
|
+
const groups = [];
|
|
7996
|
+
const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
|
|
7997
|
+
if (items) {
|
|
7998
|
+
for (const item of items) {
|
|
7999
|
+
const groupAlreadyExists = groups.find(
|
|
8000
|
+
(group) => group.id === item.menuItemGroupId
|
|
8001
|
+
);
|
|
8002
|
+
if (!groupAlreadyExists) {
|
|
8003
|
+
const group = props?.menuItemGroups?.find(
|
|
8004
|
+
(group2) => group2.id === item.menuItemGroupId
|
|
8005
|
+
);
|
|
8006
|
+
if (group) groups.push(group);
|
|
8007
|
+
}
|
|
8008
|
+
}
|
|
8009
|
+
}
|
|
8010
|
+
return groups;
|
|
8011
|
+
},
|
|
8012
|
+
[getMenuItems, getMenuItemsByLocation, props?.menuItemGroups]
|
|
8013
|
+
);
|
|
8014
|
+
const getMenuItemsByGroup = React.useCallback(
|
|
8015
|
+
(name, groupId, byLocation = false, filterByIsVisible = true) => {
|
|
8016
|
+
const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
|
|
8017
|
+
return items?.filter((item) => item.menuItemGroupId === groupId);
|
|
8018
|
+
},
|
|
8019
|
+
[getMenuItems, getMenuItemsByLocation]
|
|
8020
|
+
);
|
|
8021
|
+
const getMenuGroupedItems = React.useCallback(
|
|
8022
|
+
(name, byLocation = false, filterByIsVisible = true) => {
|
|
8023
|
+
const groups = getMenuGroups(name, byLocation);
|
|
8024
|
+
return groups.map((group) => ({
|
|
8025
|
+
group,
|
|
8026
|
+
items: getMenuItemsByGroup(
|
|
8027
|
+
name,
|
|
8028
|
+
group.id || 0,
|
|
8029
|
+
byLocation,
|
|
8030
|
+
filterByIsVisible
|
|
8031
|
+
)
|
|
8032
|
+
}));
|
|
8033
|
+
},
|
|
8034
|
+
[getMenuGroups, getMenuItemsByGroup]
|
|
8035
|
+
);
|
|
8036
|
+
const getMenuUngroupedItems = React.useCallback(
|
|
8037
|
+
(name, byLocation = false, filterByIsVisible = true) => {
|
|
8038
|
+
const items = byLocation ? getMenuItemsByLocation(name, filterByIsVisible) : getMenuItems(name, filterByIsVisible);
|
|
8039
|
+
return items?.filter((item) => !item.menuItemGroupId);
|
|
8040
|
+
},
|
|
8041
|
+
[getMenuItems, getMenuItemsByLocation]
|
|
8042
|
+
);
|
|
8043
|
+
const getAppInformationValue = React.useCallback(
|
|
8044
|
+
(key, type = "string") => {
|
|
8045
|
+
const appInformation = props.appInformation;
|
|
8046
|
+
const setting = appInformation.find((s) => s.key === key);
|
|
8047
|
+
let value = "";
|
|
8048
|
+
switch (type) {
|
|
8049
|
+
case "number":
|
|
8050
|
+
value = setting && parseInt(setting.value) && !isNaN(parseInt(setting.value)) ? parseInt(setting.value) : 0;
|
|
8051
|
+
break;
|
|
8052
|
+
case "boolean":
|
|
8053
|
+
value = setting && !isNaN(parseInt(setting.value)) && parseInt(setting.value) > 0;
|
|
8054
|
+
break;
|
|
8055
|
+
case "object":
|
|
8056
|
+
value = setting && setting.value ? JSON.parse(setting.value) : {};
|
|
8057
|
+
break;
|
|
8058
|
+
case "array":
|
|
8059
|
+
value = setting && setting.value ? JSON.parse(setting.value) : [];
|
|
8060
|
+
break;
|
|
8061
|
+
default:
|
|
8062
|
+
value = setting && setting.value ? setting.value : "";
|
|
8063
|
+
break;
|
|
8064
|
+
}
|
|
8065
|
+
return value;
|
|
8066
|
+
},
|
|
8067
|
+
[props.appInformation]
|
|
8068
|
+
);
|
|
8069
|
+
const appPrimaryColor = React.useMemo(() => {
|
|
8070
|
+
const primaryColor = getAppInformationValue(
|
|
8071
|
+
"primaryColor"
|
|
8072
|
+
);
|
|
8073
|
+
return primaryColor || "#005B97";
|
|
8074
|
+
}, [getAppInformationValue]);
|
|
8075
|
+
const appSecondaryColor = React.useMemo(() => {
|
|
8076
|
+
const secondaryColor = getAppInformationValue(
|
|
8077
|
+
"secondaryColor"
|
|
8078
|
+
);
|
|
8079
|
+
return secondaryColor || "#1E9CD7";
|
|
8080
|
+
}, [getAppInformationValue]);
|
|
8081
|
+
const appAccentColor = React.useMemo(() => {
|
|
8082
|
+
const accentColor = getAppInformationValue("accentColor");
|
|
8083
|
+
return accentColor || "#FF6501";
|
|
8084
|
+
}, [getAppInformationValue]);
|
|
8085
|
+
const icon = React.useMemo(() => {
|
|
8086
|
+
const icon2 = getAppInformationValue("icon");
|
|
8087
|
+
return fileUrl(icon2) || "";
|
|
8088
|
+
}, [getAppInformationValue, fileUrl]);
|
|
8089
|
+
const logo = React.useMemo(() => {
|
|
8090
|
+
const logo2 = getAppInformationValue("logo");
|
|
8091
|
+
return fileUrl(logo2) || "";
|
|
8092
|
+
}, [getAppInformationValue, fileUrl]);
|
|
8093
|
+
return {
|
|
8094
|
+
logo,
|
|
8095
|
+
icon,
|
|
8096
|
+
page,
|
|
8097
|
+
pageData,
|
|
8098
|
+
newsArticle,
|
|
8099
|
+
newsCategory,
|
|
8100
|
+
newsTag,
|
|
8101
|
+
contentModelItem,
|
|
8102
|
+
getMenu,
|
|
8103
|
+
getMenuByLocation,
|
|
8104
|
+
getMenuItems,
|
|
8105
|
+
getMenuItemById,
|
|
8106
|
+
getMenuItemsByLocation,
|
|
8107
|
+
getMenuGroups,
|
|
8108
|
+
getMenuItemsByGroup,
|
|
8109
|
+
getMenuGroupedItems,
|
|
8110
|
+
getMenuUngroupedItems,
|
|
8111
|
+
getSectionData,
|
|
8112
|
+
getSectionSettings,
|
|
8113
|
+
getSectionSettingsGroup,
|
|
8114
|
+
getSectionSetting,
|
|
8115
|
+
getAnySectionData,
|
|
8116
|
+
getSectionRootData,
|
|
8117
|
+
getContentModel,
|
|
8118
|
+
getContentModelItems,
|
|
8119
|
+
getPaginatedContentModelItems,
|
|
8120
|
+
getAppInformationValue,
|
|
8121
|
+
appAccentColor,
|
|
8122
|
+
appPrimaryColor,
|
|
8123
|
+
appSecondaryColor
|
|
8124
|
+
};
|
|
8125
|
+
};
|
|
7784
8126
|
exports.ConfigContext = ConfigContext;
|
|
7785
8127
|
exports.PropsContext = PropsContext;
|
|
7786
8128
|
exports.ResolveSectionsContext = ResolveSectionsContext;
|
|
@@ -7789,4 +8131,6 @@ exports.cloneDeep = cloneDeep;
|
|
|
7789
8131
|
exports.slideToId = slideToId;
|
|
7790
8132
|
exports.useApi = useApi;
|
|
7791
8133
|
exports.useConfig = useConfig;
|
|
8134
|
+
exports.useContent = useContent;
|
|
7792
8135
|
exports.useHelper = useHelper;
|
|
8136
|
+
exports.useProps = useProps;
|