@edifice.io/react 2.4.2-develop-b2school-actualites.20251124104623 → 2.4.2-develop-pedago.20251125153705
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/components/AppIcon/index.d.ts +0 -1
- package/dist/components/Flex/Flex.js +1 -1
- package/dist/components/Menu/components/MenuButton.d.ts +0 -2
- package/dist/components/Menu/components/MenuButton.js +4 -13
- package/dist/components/Select/Select.d.ts +2 -6
- package/dist/components/Select/Select.js +4 -10
- package/dist/components/index.d.ts +0 -2
- package/dist/editor.js +36 -40
- package/dist/hooks/index.d.ts +0 -1
- package/dist/icons.js +292 -294
- package/dist/index.js +74 -84
- package/dist/modals.js +6 -8
- package/dist/modules/comments/components/Comment.js +3 -5
- package/dist/modules/comments/components/CommentList.js +1 -1
- package/dist/modules/comments/constants.d.ts +0 -4
- package/dist/modules/comments/constants.js +1 -2
- package/dist/modules/comments/hooks/useProfileQueries.js +2 -1
- package/dist/modules/comments/provider/CommentProvider.js +1 -2
- package/dist/modules/comments/types.d.ts +0 -4
- package/dist/modules/editor/components/Editor/index.d.ts +0 -2
- package/dist/modules/icons/components/index.d.ts +0 -1
- package/dist/modules/modals/ShareModal/ShareModal.d.ts +11 -1
- package/dist/modules/modals/ShareModal/ShareModal.js +104 -11
- package/dist/modules/modals/ShareModal/hooks/useSearch.d.ts +1 -2
- package/dist/modules/modals/ShareModal/hooks/useSearch.js +2 -3
- package/dist/modules/modals/ShareModal/hooks/useShare.d.ts +4 -11
- package/dist/modules/modals/ShareModal/hooks/useShare.js +10 -17
- package/dist/modules/modals/ShareModal/index.d.ts +1 -3
- package/dist/modules/multimedia/FileCard/FileCard.js +1 -1
- package/dist/modules/multimedia/FileCard/FileIcon.js +1 -1
- package/dist/modules/multimedia/Linker/InternalLinker/InternalLinker.js +4 -1
- package/dist/utilities/index.d.ts +0 -1
- package/package.json +6 -6
- package/dist/components/Divider/Divider.d.ts +0 -5
- package/dist/components/Divider/Divider.js +0 -21
- package/dist/components/Divider/index.d.ts +0 -1
- package/dist/components/SeparatedInfo/SeparatedInfo.d.ts +0 -6
- package/dist/components/SeparatedInfo/SeparatedInfo.js +0 -13
- package/dist/components/SeparatedInfo/index.d.ts +0 -1
- package/dist/hooks/useInfiniteScroll/index.d.ts +0 -1
- package/dist/hooks/useInfiniteScroll/useInfiniteScroll.d.ts +0 -33
- package/dist/hooks/useInfiniteScroll/useInfiniteScroll.js +0 -20
- package/dist/modules/editor/components/Editor/EditorPreview.d.ts +0 -14
- package/dist/modules/editor/components/Editor/EditorPreview.js +0 -56
- package/dist/modules/editor/components/Editor/EditorPreviewSkeleton.d.ts +0 -8
- package/dist/modules/editor/components/Editor/EditorPreviewSkeleton.js +0 -24
- package/dist/modules/icons/components/IconClockAlert.d.ts +0 -7
- package/dist/modules/icons/components/IconClockAlert.js +0 -17
- package/dist/modules/modals/ShareModal/ShareResources.d.ts +0 -165
- package/dist/modules/modals/ShareModal/ShareResources.js +0 -132
- package/dist/utilities/react-query/index.d.ts +0 -1
- package/dist/utilities/react-query/react-query-utils.d.ts +0 -21
- package/dist/utilities/react-query/react-query-utils.js +0 -13
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ShareRight, ShareRightAction, ShareRightActionDisplayName, ShareRightWithVisibles
|
|
2
|
-
import { ShareOptions, ShareResourceMutation } from '../
|
|
1
|
+
import { ShareRight, ShareRightAction, ShareRightActionDisplayName, ShareRightWithVisibles } from '@edifice.io/client';
|
|
2
|
+
import { ShareOptions, ShareResourceMutation } from '../ShareModal';
|
|
3
3
|
interface UseShareResourceModalProps {
|
|
4
4
|
/**
|
|
5
5
|
* Resource ID (assetId)
|
|
@@ -15,15 +15,10 @@ interface UseShareResourceModalProps {
|
|
|
15
15
|
resourceCreatorId: ShareOptions['resourceCreatorId'];
|
|
16
16
|
shareResource?: ShareResourceMutation;
|
|
17
17
|
onSuccess: () => void;
|
|
18
|
-
setIsLoading
|
|
19
|
-
resourceShareRights?: ShareRightWithVisibles;
|
|
20
|
-
resourceShareRightActions?: ShareRightAction[];
|
|
21
|
-
filteredActions?: ShareRightActionDisplayName[];
|
|
22
|
-
urls?: ShareUrls;
|
|
18
|
+
setIsLoading: (value: boolean) => void;
|
|
23
19
|
}
|
|
24
20
|
type State = {
|
|
25
21
|
isSharing: boolean;
|
|
26
|
-
isDirty?: boolean;
|
|
27
22
|
shareRights: ShareRightWithVisibles;
|
|
28
23
|
shareRightActions: ShareRightAction[];
|
|
29
24
|
};
|
|
@@ -43,10 +38,9 @@ export type ShareAction = {
|
|
|
43
38
|
type: 'isSharing';
|
|
44
39
|
payload: boolean;
|
|
45
40
|
};
|
|
46
|
-
export default function useShare({ resourceId, resourceRights, resourceCreatorId, shareResource, setIsLoading, onSuccess,
|
|
41
|
+
export default function useShare({ resourceId, resourceRights, resourceCreatorId, shareResource, setIsLoading, onSuccess, }: UseShareResourceModalProps): {
|
|
47
42
|
state: {
|
|
48
43
|
isSharing: boolean;
|
|
49
|
-
isDirty?: boolean;
|
|
50
44
|
shareRights: ShareRightWithVisibles;
|
|
51
45
|
shareRightActions: ShareRightAction[];
|
|
52
46
|
};
|
|
@@ -56,6 +50,5 @@ export default function useShare({ resourceId, resourceRights, resourceCreatorId
|
|
|
56
50
|
handleDeleteRow: (shareRight: ShareRight) => void;
|
|
57
51
|
handleShare: () => Promise<void>;
|
|
58
52
|
toggleRight: (shareRight: ShareRight, actionName: ShareRightActionDisplayName) => void;
|
|
59
|
-
isDirty: boolean;
|
|
60
53
|
};
|
|
61
54
|
export {};
|
|
@@ -6,7 +6,6 @@ import useUser from "../../../../hooks/useUser/useUser.js";
|
|
|
6
6
|
import useToast from "../../../../hooks/useToast/useToast.js";
|
|
7
7
|
const initialState = {
|
|
8
8
|
isSharing: !1,
|
|
9
|
-
isDirty: !1,
|
|
10
9
|
shareRights: {
|
|
11
10
|
rights: [],
|
|
12
11
|
visibleBookmarks: [],
|
|
@@ -25,20 +24,17 @@ function reducer(state, action) {
|
|
|
25
24
|
case "deleteRow":
|
|
26
25
|
return {
|
|
27
26
|
...state,
|
|
28
|
-
shareRights: action.payload
|
|
29
|
-
isDirty: !0
|
|
27
|
+
shareRights: action.payload
|
|
30
28
|
};
|
|
31
29
|
case "updateShareRights":
|
|
32
30
|
return {
|
|
33
31
|
...state,
|
|
34
|
-
shareRights: action.payload
|
|
35
|
-
isDirty: !0
|
|
32
|
+
shareRights: action.payload
|
|
36
33
|
};
|
|
37
34
|
case "toggleRight":
|
|
38
35
|
return {
|
|
39
36
|
...state,
|
|
40
|
-
shareRights: action.payload
|
|
41
|
-
isDirty: !0
|
|
37
|
+
shareRights: action.payload
|
|
42
38
|
};
|
|
43
39
|
case "isSharing":
|
|
44
40
|
return {
|
|
@@ -55,9 +51,7 @@ function useShare({
|
|
|
55
51
|
resourceCreatorId,
|
|
56
52
|
shareResource,
|
|
57
53
|
setIsLoading,
|
|
58
|
-
onSuccess
|
|
59
|
-
filteredActions,
|
|
60
|
-
urls
|
|
54
|
+
onSuccess
|
|
61
55
|
}) {
|
|
62
56
|
const {
|
|
63
57
|
appCode
|
|
@@ -70,18 +64,18 @@ function useShare({
|
|
|
70
64
|
useEffect(() => {
|
|
71
65
|
resourceId && (async () => {
|
|
72
66
|
try {
|
|
73
|
-
const [shareRightActions, shareRights] = await Promise.all([odeServices.share().getActionsForApp(appCode
|
|
67
|
+
const [shareRightActions, shareRights] = await Promise.all([odeServices.share().getActionsForApp(appCode), odeServices.share().getRightsForResource(appCode, resourceId)]);
|
|
74
68
|
dispatch({
|
|
75
69
|
type: "init",
|
|
76
70
|
payload: {
|
|
77
|
-
shareRightActions
|
|
71
|
+
shareRightActions,
|
|
78
72
|
shareRights
|
|
79
73
|
}
|
|
80
74
|
});
|
|
81
75
|
} catch (error) {
|
|
82
76
|
console.error(error);
|
|
83
77
|
}
|
|
84
|
-
setIsLoading
|
|
78
|
+
setIsLoading(!1);
|
|
85
79
|
})();
|
|
86
80
|
}, [resourceId]);
|
|
87
81
|
const toggleRight = (shareRight, actionName) => {
|
|
@@ -177,10 +171,10 @@ function useShare({
|
|
|
177
171
|
});
|
|
178
172
|
notifySuccess(result);
|
|
179
173
|
} else {
|
|
180
|
-
const result = await odeServices.share().saveRights(appCode, resourceId, shares
|
|
174
|
+
const result = await odeServices.share().saveRights(appCode, resourceId, shares);
|
|
181
175
|
notifySuccess(result);
|
|
182
176
|
}
|
|
183
|
-
|
|
177
|
+
onSuccess();
|
|
184
178
|
} catch (error) {
|
|
185
179
|
typeof error == "string" && toast.error(t("explorer.shared.status.error")), typeof error == "object" && toast.error(t((error == null ? void 0 : error.error) || "explorer.shared.status.error")), console.error("Failed to save share", error);
|
|
186
180
|
} finally {
|
|
@@ -190,8 +184,7 @@ function useShare({
|
|
|
190
184
|
});
|
|
191
185
|
}
|
|
192
186
|
},
|
|
193
|
-
toggleRight
|
|
194
|
-
isDirty: !!state.isDirty
|
|
187
|
+
toggleRight
|
|
195
188
|
};
|
|
196
189
|
}
|
|
197
190
|
export {
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
+
export { default as ShareModal } from './ShareModal';
|
|
1
2
|
export { default as ShareBlog } from './apps/ShareBlog';
|
|
2
3
|
export { default as useShareMutation } from './hooks/useShareMutation';
|
|
3
|
-
export { default as ShareModal } from './ShareModal';
|
|
4
|
-
export * from './ShareResources';
|
|
5
|
-
export { default as ShareResources } from './ShareResources';
|
|
@@ -82,7 +82,7 @@ const FileCard = ({
|
|
|
82
82
|
};
|
|
83
83
|
return roleMappings[type2] || roleMappings.unknown;
|
|
84
84
|
}
|
|
85
|
-
const roleMap = getRoleMap(type ?? "unknown"), file = clsx("file position-relative rounded", (roleMap == null ? void 0 : roleMap.color) ?? "bg-yellow-200"), mediaSrc = type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
|
|
85
|
+
const roleMap = getRoleMap(type ?? "unknown"), file = clsx("file position-relative rounded", (roleMap == null ? void 0 : roleMap.color) ?? "bg-yellow-200"), mediaSrc = doc.eType === "resource" ? doc.thumbnail : type === "img" || type === "video" ? odeServices.workspace().getThumbnailUrl(doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
|
|
86
86
|
ref
|
|
87
87
|
}), imageStyles = hasThumbnail && {
|
|
88
88
|
backgroundImage: `url(${mediaSrc})`,
|
|
@@ -5,7 +5,7 @@ const FileIcon = ({
|
|
|
5
5
|
type,
|
|
6
6
|
roleMap
|
|
7
7
|
}) => {
|
|
8
|
-
const hasShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown" && (roleMap == null ? void 0 : roleMap.hasShadow) !== !1, fileicon = clsx("position-absolute top-50 start-50 translate-middle", {
|
|
8
|
+
const hasShadow = typeof (roleMap == null ? void 0 : roleMap.icon) != "string" && type !== "unknown" && (roleMap == null ? void 0 : roleMap.hasShadow) !== !1, fileicon = clsx("position-absolute rounded-circle top-50 start-50 translate-middle", {
|
|
9
9
|
"p-12 rounded-circle shadow": hasShadow
|
|
10
10
|
}, roleMap == null ? void 0 : roleMap.color);
|
|
11
11
|
return /* @__PURE__ */ jsx("div", { className: fileicon, children: (roleMap == null ? void 0 : roleMap.icon) ?? /* @__PURE__ */ jsx(SvgIconPaperclip, {}) });
|
|
@@ -111,7 +111,10 @@ const InternalLinker = ({
|
|
|
111
111
|
}, [resources]), /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill overflow-hidden", children: [
|
|
112
112
|
/* @__PURE__ */ jsxs("div", { className: "search d-flex bg-light rounded-top border border-bottom-0", children: [
|
|
113
113
|
showApplicationSelector && /* @__PURE__ */ jsx("div", { className: "flex-shrink-1 px-8 py-12 border-end", children: /* @__PURE__ */ jsxs(Dropdown, { overflow: !0, children: [
|
|
114
|
-
/* @__PURE__ */ jsx(Dropdown.Trigger, { icon: /* @__PURE__ */ jsx("div", { className: "pe-8", children: (selectedApplication == null ? void 0 : selectedApplication.icon) || /* @__PURE__ */ jsx(SvgIconApplications, {}) }), label:
|
|
114
|
+
/* @__PURE__ */ jsx(Dropdown.Trigger, { icon: /* @__PURE__ */ jsx("div", { className: "pe-8", children: (selectedApplication == null ? void 0 : selectedApplication.icon) || /* @__PURE__ */ jsx(SvgIconApplications, {}) }), label: /* @__PURE__ */ jsxs("span", { className: "d-sm-none", children: [
|
|
115
|
+
" ",
|
|
116
|
+
t((selectedApplication == null ? void 0 : selectedApplication.displayName) || "bbm.linker.int.choose")
|
|
117
|
+
] }), variant: "ghost", size: "md" }),
|
|
115
118
|
/* @__PURE__ */ jsx(Dropdown.Menu, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => handleOptionClick(option), children: option.displayName }, option.application)) })
|
|
116
119
|
] }) }),
|
|
117
120
|
/* @__PURE__ */ jsx("div", { className: "flex-grow-1 align-self-center", children: /* @__PURE__ */ jsx("form", { className: "gap-16 d-flex w-100 align-items-center px-16 py-8", onSubmit: handleSubmit, children: /* @__PURE__ */ jsx(SearchBar, { isVariant: !0, placeholder: t("search"), size: "lg", className: "w-100", disabled: !selectedApplication, onChange: handleSearchChange }) }) })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edifice.io/react",
|
|
3
|
-
"version": "2.4.2-develop-
|
|
3
|
+
"version": "2.4.2-develop-pedago.20251125153705",
|
|
4
4
|
"description": "Edifice React Library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -131,9 +131,9 @@
|
|
|
131
131
|
"react-slugify": "^3.0.3",
|
|
132
132
|
"swiper": "^10.1.0",
|
|
133
133
|
"ua-parser-js": "^1.0.36",
|
|
134
|
-
"@edifice.io/bootstrap": "2.4.2-develop-
|
|
135
|
-
"@edifice.io/tiptap-extensions": "2.4.2-develop-
|
|
136
|
-
"@edifice.io/utilities": "2.4.2-develop-
|
|
134
|
+
"@edifice.io/bootstrap": "2.4.2-develop-pedago.20251125153705",
|
|
135
|
+
"@edifice.io/tiptap-extensions": "2.4.2-develop-pedago.20251125153705",
|
|
136
|
+
"@edifice.io/utilities": "2.4.2-develop-pedago.20251125153705"
|
|
137
137
|
},
|
|
138
138
|
"devDependencies": {
|
|
139
139
|
"@babel/plugin-transform-react-pure-annotations": "^7.23.3",
|
|
@@ -164,8 +164,8 @@
|
|
|
164
164
|
"vite": "^5.4.11",
|
|
165
165
|
"vite-plugin-dts": "^4.1.0",
|
|
166
166
|
"vite-tsconfig-paths": "^5.0.1",
|
|
167
|
-
"@edifice.io/client": "2.4.2-develop-
|
|
168
|
-
"@edifice.io/config": "2.4.2-develop-
|
|
167
|
+
"@edifice.io/client": "2.4.2-develop-pedago.20251125153705",
|
|
168
|
+
"@edifice.io/config": "2.4.2-develop-pedago.20251125153705"
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"@react-spring/web": "^9.7.5",
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import Flex from "../Flex/Flex.js";
|
|
3
|
-
function Divider({
|
|
4
|
-
children,
|
|
5
|
-
color = "var(--edifice-gray-400)"
|
|
6
|
-
}) {
|
|
7
|
-
return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "around", gap: "16", wrap: "nowrap", className: "flex-fill", children: [
|
|
8
|
-
/* @__PURE__ */ jsx("hr", { className: "divider m-12 ms-0 flex-fill", style: {
|
|
9
|
-
borderColor: color
|
|
10
|
-
} }),
|
|
11
|
-
/* @__PURE__ */ jsxs(Flex, { gap: "12", align: "center", justify: "around", children: [
|
|
12
|
-
...children
|
|
13
|
-
] }),
|
|
14
|
-
/* @__PURE__ */ jsx("hr", { className: "divider m-12 me-0 flex-fill", style: {
|
|
15
|
-
borderColor: color
|
|
16
|
-
} })
|
|
17
|
-
] });
|
|
18
|
-
}
|
|
19
|
-
export {
|
|
20
|
-
Divider
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Divider';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Flex from "../Flex/Flex.js";
|
|
3
|
-
function SeparatedInfo({
|
|
4
|
-
children,
|
|
5
|
-
className
|
|
6
|
-
}) {
|
|
7
|
-
return /* @__PURE__ */ jsxs(Flex, { direction: "row", className: `separated-info ${className}`, children: [
|
|
8
|
-
...children
|
|
9
|
-
] });
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
SeparatedInfo
|
|
13
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './SeparatedInfo';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as useInfiniteScroll } from './useInfiniteScroll';
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A custom React hook that provides infinite scroll functionality using the Intersection Observer API.
|
|
3
|
-
*
|
|
4
|
-
* This hook returns a ref callback that can be attached to a DOM element (typically at the bottom
|
|
5
|
-
* of a scrollable list). When that element becomes visible in the viewport, the provided callback
|
|
6
|
-
* function is executed, allowing you to load more content.
|
|
7
|
-
*
|
|
8
|
-
* @param params - Configuration object for the infinite scroll hook
|
|
9
|
-
* @param params.callback - Function to execute when the observed element intersects with the viewport
|
|
10
|
-
* @param params.options - Optional Intersection Observer configuration options (defaults to { threshold: 0.1 })
|
|
11
|
-
*
|
|
12
|
-
* @returns A ref callback function that should be attached to the target DOM element
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```typescript
|
|
16
|
-
* const loadMoreRef = useInfiniteScroll({
|
|
17
|
-
* // Load more data when the element is visible
|
|
18
|
-
* callback: loadMoreItems,
|
|
19
|
-
* options: { threshold: 0.5 } // Trigger when 50% of element is visible
|
|
20
|
-
* });
|
|
21
|
-
*
|
|
22
|
-
* return (
|
|
23
|
-
* <div>
|
|
24
|
-
* {items.map(item => <Item key={item.id} {...item} />)}
|
|
25
|
-
* <div ref={loadMoreRef}>Loading...</div>
|
|
26
|
-
* </div>
|
|
27
|
-
* );
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
|
-
export default function useInfiniteScroll({ callback, options, }: {
|
|
31
|
-
callback: () => void;
|
|
32
|
-
options?: IntersectionObserverInit;
|
|
33
|
-
}): (node: HTMLElement | null) => void;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useRef, useCallback } from "react";
|
|
2
|
-
function useInfiniteScroll({
|
|
3
|
-
callback,
|
|
4
|
-
options = {
|
|
5
|
-
threshold: 0.1
|
|
6
|
-
}
|
|
7
|
-
}) {
|
|
8
|
-
const observerRef = useRef(null);
|
|
9
|
-
return useCallback((node) => {
|
|
10
|
-
if (observerRef.current && (observerRef.current.disconnect(), observerRef.current = null), !node) return;
|
|
11
|
-
const observer = new IntersectionObserver(async (entries) => {
|
|
12
|
-
for (const entry of entries)
|
|
13
|
-
entry.isIntersecting && await callback();
|
|
14
|
-
}, options);
|
|
15
|
-
observer.observe(node), observerRef.current = observer;
|
|
16
|
-
}, [callback, options]);
|
|
17
|
-
}
|
|
18
|
-
export {
|
|
19
|
-
useInfiniteScroll as default
|
|
20
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Editor component properties
|
|
3
|
-
*/
|
|
4
|
-
export interface EditorPreviewProps {
|
|
5
|
-
/** Rich content to render. */
|
|
6
|
-
content: string;
|
|
7
|
-
/** Display with or without a border */
|
|
8
|
-
variant?: 'outline' | 'ghost';
|
|
9
|
-
onDetailClick?: () => void;
|
|
10
|
-
onMediaClick?: () => void;
|
|
11
|
-
maxMediaDisplayed?: number;
|
|
12
|
-
}
|
|
13
|
-
declare const EditorPreview: ({ content, variant, onDetailClick, onMediaClick, maxMediaDisplayed, }: EditorPreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export default EditorPreview;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useEffect } from "react";
|
|
3
|
-
import clsx from "clsx";
|
|
4
|
-
import { getThumbnail } from "@edifice.io/utilities";
|
|
5
|
-
import { useTranslation } from "react-i18next";
|
|
6
|
-
import Image from "../../../../components/Image/Image.js";
|
|
7
|
-
const EditorPreview = ({
|
|
8
|
-
content,
|
|
9
|
-
variant = "outline",
|
|
10
|
-
onDetailClick,
|
|
11
|
-
onMediaClick,
|
|
12
|
-
maxMediaDisplayed = 3
|
|
13
|
-
}) => {
|
|
14
|
-
const {
|
|
15
|
-
t
|
|
16
|
-
} = useTranslation(), [summaryContent, setSummaryContent] = useState(""), [medias, setMedias] = useState([]), borderClass = clsx(variant === "outline" && "border rounded-3 py-12 px-16"), hasMediaCallback = onDetailClick || onMediaClick, handleMediaClick = (e) => {
|
|
17
|
-
onMediaClick && (e.stopPropagation(), onMediaClick());
|
|
18
|
-
};
|
|
19
|
-
return useEffect(() => {
|
|
20
|
-
const contentHTML = content;
|
|
21
|
-
if (contentHTML) {
|
|
22
|
-
const doc = new DOMParser().parseFromString(contentHTML, "text/html"), mediaElements = Array.from(doc.querySelectorAll("img, video, iframe, audio, embed"));
|
|
23
|
-
setMedias(mediaElements.filter((el) => el.tagName.toLowerCase() === "img").map((el) => {
|
|
24
|
-
const image = el;
|
|
25
|
-
return image.src ? {
|
|
26
|
-
url: getThumbnail(image.src, 0, 300),
|
|
27
|
-
alt: image.alt
|
|
28
|
-
} : {
|
|
29
|
-
url: "",
|
|
30
|
-
alt: ""
|
|
31
|
-
};
|
|
32
|
-
})), mediaElements.forEach((el) => {
|
|
33
|
-
var _a;
|
|
34
|
-
return (_a = el.parentNode) == null ? void 0 : _a.removeChild(el);
|
|
35
|
-
}), setSummaryContent(doc.body.textContent || "");
|
|
36
|
-
}
|
|
37
|
-
}, [content]), /* @__PURE__ */ jsxs("div", { className: borderClass, "data-testid": "editor-preview", onClick: onDetailClick, tabIndex: onDetailClick ? -1 : void 0, role: onDetailClick ? "button" : void 0, children: [
|
|
38
|
-
/* @__PURE__ */ jsx("div", { className: "flex-fill text-truncate text-truncate-2 post-preview-content overflow-hidden", style: {
|
|
39
|
-
overflowWrap: "anywhere"
|
|
40
|
-
}, children: summaryContent }),
|
|
41
|
-
/* @__PURE__ */ jsx("div", { onClick: handleMediaClick, tabIndex: hasMediaCallback ? -1 : void 0, role: hasMediaCallback ? "button" : void 0, className: "d-flex align-items-center justify-content-center gap-24 px-32 pt-16", children: medias.slice(0, maxMediaDisplayed).map((media, index) => /* @__PURE__ */ jsxs("div", { className: clsx("position-relative col-12 col-md-4 ", {
|
|
42
|
-
"d-none d-md-block": index >= 1
|
|
43
|
-
}), children: [
|
|
44
|
-
/* @__PURE__ */ jsx(Image, { alt: media.alt, objectFit: "cover", ratio: "16", className: "rounded", loading: "lazy", src: media.url, sizes: "" }),
|
|
45
|
-
(index === 0 || index === 2) && medias.length - (index + 1) > 0 && /* @__PURE__ */ jsx("div", { className: clsx("position-absolute top-0 bottom-0 start-0 end-0 d-flex justify-content-center align-items-center rounded text-light bg-dark bg-opacity-50", {
|
|
46
|
-
"d-flex d-md-none": index === 0,
|
|
47
|
-
"d-none d-md-flex": index === 2
|
|
48
|
-
}), children: t("editor.preview.moreMedia", {
|
|
49
|
-
mediaCount: medias.length - (index + 1)
|
|
50
|
-
}) })
|
|
51
|
-
] }, media.url)) })
|
|
52
|
-
] });
|
|
53
|
-
};
|
|
54
|
-
export {
|
|
55
|
-
EditorPreview as default
|
|
56
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Editor component properties
|
|
3
|
-
*/
|
|
4
|
-
export interface EditorPreviewSkeletonProps {
|
|
5
|
-
variant?: 'outline' | 'ghost';
|
|
6
|
-
}
|
|
7
|
-
declare const EditorPreview: ({ variant }: EditorPreviewSkeletonProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export default EditorPreview;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
|
|
4
|
-
import Image from "../../../../components/Image/Image.js";
|
|
5
|
-
const EditorPreview = ({
|
|
6
|
-
variant = "outline"
|
|
7
|
-
}) => {
|
|
8
|
-
const borderClass = clsx(variant === "outline" && "border rounded-3"), contentClass = clsx("mt-16", variant === "outline" && "my-12 mx-16");
|
|
9
|
-
return /* @__PURE__ */ jsx("div", { className: borderClass, "data-testid": "editor-preview", children: /* @__PURE__ */ jsxs("div", { className: contentClass, children: [
|
|
10
|
-
/* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
|
|
11
|
-
/* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
|
|
12
|
-
/* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-center gap-24 px-32 pt-16", children: [
|
|
13
|
-
/* @__PURE__ */ jsx("div", { style: {
|
|
14
|
-
maxWidth: "150px"
|
|
15
|
-
}, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) }),
|
|
16
|
-
/* @__PURE__ */ jsx("div", { style: {
|
|
17
|
-
maxWidth: "150px"
|
|
18
|
-
}, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) })
|
|
19
|
-
] })
|
|
20
|
-
] }) });
|
|
21
|
-
};
|
|
22
|
-
export {
|
|
23
|
-
EditorPreview as default
|
|
24
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { SVGProps } from 'react';
|
|
2
|
-
interface SVGRProps {
|
|
3
|
-
title?: string;
|
|
4
|
-
titleId?: string;
|
|
5
|
-
}
|
|
6
|
-
declare const SvgIconClockAlert: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export default SvgIconClockAlert;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
const SvgIconClockAlert = ({
|
|
3
|
-
title,
|
|
4
|
-
titleId,
|
|
5
|
-
...props
|
|
6
|
-
}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
|
|
7
|
-
title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
|
|
8
|
-
/* @__PURE__ */ jsxs("g", { fill: "currentColor", clipPath: "url(#icon-clock-alert_svg__a)", children: [
|
|
9
|
-
/* @__PURE__ */ jsx("path", { d: "M0 10.075C0 4.51 4.51 0 10.075 0c4.573 0 8.431 3.046 9.663 7.217a1 1 0 0 1-1.918.566A8.075 8.075 0 1 0 7.783 17.82a1 1 0 0 1-.566 1.918C3.046 18.506 0 14.648 0 10.075" }),
|
|
10
|
-
/* @__PURE__ */ jsx("path", { d: "M10.075 4.108a1 1 0 0 1 1 1v5.43a1 1 0 0 1-.357.767L7.83 13.728a1 1 0 1 1-1.286-1.532l2.53-2.123V5.108a1 1 0 0 1 1-1M17 13.3a1 1 0 0 1 1 1v2.2a1 1 0 1 1-2 0v-2.2a1 1 0 0 1 1-1M17 18.4a1 1 0 1 0 0 2h.006a1 1 0 1 0 0-2z" }),
|
|
11
|
-
/* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M17 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-5 7a5 5 0 1 1 10 0 5 5 0 0 1-10 0", clipRule: "evenodd" })
|
|
12
|
-
] }),
|
|
13
|
-
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "icon-clock-alert_svg__a", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
|
|
14
|
-
] });
|
|
15
|
-
export {
|
|
16
|
-
SvgIconClockAlert as default
|
|
17
|
-
};
|
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
import { ID, PutShareResponse, RightStringified, ShareRight, ShareRightActionDisplayName, ShareUrls } from '@edifice.io/client';
|
|
2
|
-
import { UseMutationResult } from '../../../node_modules/@tanstack/react-query';
|
|
3
|
-
/**
|
|
4
|
-
* Configuration options for sharing a resource
|
|
5
|
-
*
|
|
6
|
-
* @typedef {Object} ShareOptions
|
|
7
|
-
* @property {ID} resourceId - Unique identifier of the resource to share
|
|
8
|
-
* @property {RightStringified[]} resourceRights - Current rights assigned to the resource
|
|
9
|
-
* @property {string} resourceCreatorId - User ID of the resource creator
|
|
10
|
-
* @property {ShareRightActionDisplayName[]} [filteredActions] - Optional list of allowed actions to display
|
|
11
|
-
* @property {ShareUrls} [urls] - Optional custom URLs for API endpoints related to sharing operations
|
|
12
|
-
*
|
|
13
|
-
* @example Example related to sharing thread resources:
|
|
14
|
-
* ```ts
|
|
15
|
-
* const shareOptions: ShareOptions = {
|
|
16
|
-
* resourceId: '12345',
|
|
17
|
-
* resourceRights: [],
|
|
18
|
-
* resourceCreatorId: 'user-67890',
|
|
19
|
-
* filteredActions: ['read', 'contrib'],
|
|
20
|
-
* urls: {
|
|
21
|
-
* getResourceRights: '/api/V1/thread/shares', (get endpoint)
|
|
22
|
-
* saveResourceRights: '/api/V1/thread/shares', (put endpoint)
|
|
23
|
-
* getShareMapping: '/api/V1/rights/sharing'
|
|
24
|
-
* }
|
|
25
|
-
* };
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* @example Example related to sharing info resources:
|
|
29
|
-
* ```ts
|
|
30
|
-
* const shareOptions: ShareOptions = {
|
|
31
|
-
* resourceId: '12345',
|
|
32
|
-
* resourceRights: [],
|
|
33
|
-
* resourceCreatorId: 'user-67890',
|
|
34
|
-
* filteredActions: ['read', 'contrib'],
|
|
35
|
-
* urls: {
|
|
36
|
-
* getResourceRights: '/api/V1/info/shares', (get endpoint)
|
|
37
|
-
* saveResourceRights: '/api/V1/info/shares', (put endpoint)
|
|
38
|
-
* getShareMapping: '/api/V1/rights/sharing'
|
|
39
|
-
* }
|
|
40
|
-
* };
|
|
41
|
-
* ```
|
|
42
|
-
*/
|
|
43
|
-
export type ShareOptions = {
|
|
44
|
-
resourceId: ID;
|
|
45
|
-
resourceRights: RightStringified[];
|
|
46
|
-
resourceCreatorId: string;
|
|
47
|
-
filteredActions?: ShareRightActionDisplayName[];
|
|
48
|
-
urls?: ShareUrls;
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* React Query mutation result for share operations
|
|
52
|
-
*
|
|
53
|
-
* @typedef {UseMutationResult<PutShareResponse, unknown, {resourceId: string; rights: ShareRight[]}, unknown>} ShareResourceMutation
|
|
54
|
-
*/
|
|
55
|
-
export type ShareResourceMutation = UseMutationResult<PutShareResponse, unknown, {
|
|
56
|
-
resourceId: string;
|
|
57
|
-
rights: ShareRight[];
|
|
58
|
-
}, unknown>;
|
|
59
|
-
/**
|
|
60
|
-
* Props for the ShareResources component
|
|
61
|
-
*
|
|
62
|
-
* @interface ShareResourceProps
|
|
63
|
-
* @property {ShareOptions} shareOptions - Configuration for the resource being shared
|
|
64
|
-
* @property {ShareResourceMutation} [shareResource] - Optional React Query mutation for optimistic UI updates
|
|
65
|
-
* @property {() => void} [onSuccess] - Callback fired after successful share operation
|
|
66
|
-
* @property {(shareRights: ShareRight[], isDirty: boolean) => void} [onChange] - Callback fired when share rights change
|
|
67
|
-
* @property {string} [classNameSearchInput] - Optional CSS class for the search input wrapper (default: 'col-6')
|
|
68
|
-
*/
|
|
69
|
-
interface ShareResourceProps {
|
|
70
|
-
/**
|
|
71
|
-
* Expect resourceId,
|
|
72
|
-
* new rights array (replace shared array),
|
|
73
|
-
* creatorId
|
|
74
|
-
* of a resource */
|
|
75
|
-
shareOptions: ShareOptions;
|
|
76
|
-
/**
|
|
77
|
-
* Use the `shareResource` props when you need to do Optimistic UI
|
|
78
|
-
* otherwise ShareModal handles everything
|
|
79
|
-
* Must use React Query */
|
|
80
|
-
shareResource?: ShareResourceMutation;
|
|
81
|
-
/**
|
|
82
|
-
* onSuccess callback when a resource is successfully shared
|
|
83
|
-
*/
|
|
84
|
-
onSuccess?: () => void;
|
|
85
|
-
/**
|
|
86
|
-
* Callback when share rights change
|
|
87
|
-
*/
|
|
88
|
-
onChange?: (shareRights: ShareRight[], isDirty: boolean) => void;
|
|
89
|
-
/**
|
|
90
|
-
* Optional className for the search input
|
|
91
|
-
*/
|
|
92
|
-
classNameSearchInput?: string;
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Ref interface exposed by ShareResources component
|
|
96
|
-
*
|
|
97
|
-
* @interface ShareResourcesRef
|
|
98
|
-
* @property {() => void} handleShare - Method to trigger the share operation
|
|
99
|
-
* @property {() => boolean} isSharing - Method to check if sharing is in progress
|
|
100
|
-
*
|
|
101
|
-
* @example
|
|
102
|
-
* ```tsx
|
|
103
|
-
* const ref = useRef<ShareResourcesRef>(null);
|
|
104
|
-
*
|
|
105
|
-
* // Trigger share programmatically
|
|
106
|
-
* ref.current?.handleShare();
|
|
107
|
-
*
|
|
108
|
-
* // Check sharing status
|
|
109
|
-
* const sharing = ref.current?.isSharing();
|
|
110
|
-
* ```
|
|
111
|
-
*/
|
|
112
|
-
export interface ShareResourcesRef {
|
|
113
|
-
handleShare: () => void;
|
|
114
|
-
isSharing: () => boolean;
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* ShareResources Component
|
|
118
|
-
*
|
|
119
|
-
* A component for managing resource sharing permissions with users and groups.
|
|
120
|
-
* Provides search functionality, bookmark management, and granular rights control.
|
|
121
|
-
*
|
|
122
|
-
* @example
|
|
123
|
-
* ```tsx
|
|
124
|
-
* import { useRef } from 'react';
|
|
125
|
-
* import ShareResources, { ShareResourcesRef, ShareOptions } from './ShareResources';
|
|
126
|
-
*
|
|
127
|
-
* function MyComponent() {
|
|
128
|
-
* const shareRef = useRef<ShareResourcesRef>(null);
|
|
129
|
-
*
|
|
130
|
-
* const shareOptions: ShareOptions = {
|
|
131
|
-
* resourceId: '123',
|
|
132
|
-
* resourceRights: [],
|
|
133
|
-
* resourceCreatorId: 'user-456',
|
|
134
|
-
* filteredActions: ['read', 'contrib'],
|
|
135
|
-
* urls: {
|
|
136
|
-
* getResourceRights: '/api/share/rights',
|
|
137
|
-
* putResourceRights: '/api/share/update'
|
|
138
|
-
* }
|
|
139
|
-
* };
|
|
140
|
-
*
|
|
141
|
-
* const handleSave = () => {
|
|
142
|
-
* if (shareRef.current) {
|
|
143
|
-
* shareRef.current.handleShare();
|
|
144
|
-
* }
|
|
145
|
-
* };
|
|
146
|
-
*
|
|
147
|
-
* return (
|
|
148
|
-
* <>
|
|
149
|
-
* <ShareResources
|
|
150
|
-
* ref={shareRef}
|
|
151
|
-
* shareOptions={shareOptions}
|
|
152
|
-
* onSuccess={() => console.log('Shared successfully')}
|
|
153
|
-
* onChange={(rights, isDirty) => console.log('Rights changed:', isDirty)}
|
|
154
|
-
* />
|
|
155
|
-
* <button onClick={handleSave}>Save Changes</button>
|
|
156
|
-
* </>
|
|
157
|
-
* );
|
|
158
|
-
* }
|
|
159
|
-
* ```
|
|
160
|
-
*
|
|
161
|
-
* @component
|
|
162
|
-
* @forwardRef
|
|
163
|
-
*/
|
|
164
|
-
declare const ShareResources: import('react').ForwardRefExoticComponent<ShareResourceProps & import('react').RefAttributes<ShareResourcesRef>>;
|
|
165
|
-
export default ShareResources;
|