@edifice.io/react 2.5.9 → 2.5.10
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/README.md +5 -0
- package/dist/_virtual/isSameOrAfter.js +4 -0
- package/dist/_virtual/isToday.js +4 -0
- package/dist/components/Badge/Badge.d.ts +7 -1
- package/dist/components/Badge/Badge.js +13 -1
- package/dist/components/DatePicker/DatePicker.d.ts +57 -0
- package/dist/components/DatePicker/DatePicker.js +6 -3
- package/dist/components/Layout/components/WidgetApps.js +2 -2
- package/dist/components/MediaViewer/MediaViewer.d.ts +17 -0
- package/dist/components/MediaViewer/MediaViewer.js +36 -0
- package/dist/components/MediaViewer/MediaWrapper.d.ts +7 -0
- package/dist/components/MediaViewer/MediaWrapper.js +72 -0
- package/dist/components/MediaViewer/PdfViewer.d.ts +4 -0
- package/dist/components/MediaViewer/PdfViewer.js +26 -0
- package/dist/components/MediaViewer/ToolbarViewer.d.ts +7 -0
- package/dist/components/MediaViewer/ToolbarViewer.js +41 -0
- package/dist/components/MediaViewer/ToolbarZoom.d.ts +4 -0
- package/dist/components/MediaViewer/ToolbarZoom.js +19 -0
- package/dist/components/MediaViewer/index.d.ts +2 -0
- package/dist/components/Modal/Modal.d.ts +4 -0
- package/dist/components/Modal/Modal.js +13 -12
- package/dist/components/PromotionCard/PromotionCard.d.ts +74 -0
- package/dist/components/PromotionCard/PromotionCard.js +31 -0
- package/dist/components/PromotionCard/PromotionCardBody.d.ts +10 -0
- package/dist/components/PromotionCard/PromotionCardBody.js +15 -0
- package/dist/components/PromotionCard/PromotionCardDescription.d.ts +9 -0
- package/dist/components/PromotionCard/PromotionCardDescription.js +12 -0
- package/dist/components/PromotionCard/PromotionCardFooter.d.ts +9 -0
- package/dist/components/PromotionCard/PromotionCardFooter.js +12 -0
- package/dist/components/PromotionCard/PromotionCardHeader.d.ts +11 -0
- package/dist/components/PromotionCard/PromotionCardHeader.js +17 -0
- package/dist/components/PromotionCard/PromotionCardIcon.d.ts +10 -0
- package/dist/components/PromotionCard/PromotionCardIcon.js +15 -0
- package/dist/components/PromotionCard/PromotionCardTitle.d.ts +9 -0
- package/dist/components/PromotionCard/PromotionCardTitle.js +12 -0
- package/dist/components/PromotionCard/index.d.ts +2 -0
- package/dist/components/SmartEllipsis/SmartEllipsis.d.ts +5 -0
- package/dist/components/SmartEllipsis/SmartEllipsis.js +21 -0
- package/dist/components/SmartEllipsis/index.d.ts +2 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/hooks/useConversation/useConversation.js +3 -1
- package/dist/hooks/useDate/useDate.d.ts +5 -1
- package/dist/hooks/useDate/useDate.js +18 -2
- package/dist/hooks/useDropzone/useDropzone.js +21 -16
- package/dist/hooks/useEdificeIcons/useEdificeIcons.d.ts +1 -0
- package/dist/hooks/useEdificeIcons/useEdificeIcons.js +5 -0
- package/dist/hooks/useZoom/index.d.ts +1 -0
- package/dist/hooks/useZoom/useZoom.d.ts +7 -0
- package/dist/hooks/useZoom/useZoom.js +14 -0
- package/dist/icons.js +362 -350
- package/dist/index.js +145 -140
- package/dist/modules/audience/ViewsCounter.d.ts +3 -17
- package/dist/modules/audience/ViewsCounter.js +9 -7
- package/dist/modules/comments/components/Comment.js +4 -4
- package/dist/modules/comments/components/CommentDate.js +7 -10
- package/dist/modules/comments/components/CommentDeleted.js +1 -1
- package/dist/modules/comments/components/CommentForm.d.ts +1 -1
- package/dist/modules/comments/components/CommentForm.js +6 -6
- package/dist/modules/comments/components/CommentTitle.js +1 -1
- package/dist/modules/comments/provider/CommentProvider.js +4 -4
- package/dist/modules/comments/types.d.ts +3 -1
- package/dist/modules/icons/components/IconAdjustSettings.d.ts +7 -0
- package/dist/modules/icons/components/IconAdjustSettings.js +12 -0
- package/dist/modules/icons/components/IconAiFill.d.ts +7 -0
- package/dist/modules/icons/components/IconAiFill.js +12 -0
- package/dist/modules/icons/components/IconCalendarEdit.d.ts +7 -0
- package/dist/modules/icons/components/IconCalendarEdit.js +12 -0
- package/dist/modules/icons/components/IconExercizerAi.d.ts +7 -0
- package/dist/modules/icons/components/IconExercizerAi.js +14 -0
- package/dist/modules/icons/components/IconLabel.d.ts +7 -0
- package/dist/modules/icons/components/IconLabel.js +12 -0
- package/dist/modules/icons/components/IconTeacher.d.ts +7 -0
- package/dist/modules/icons/components/IconTeacher.js +12 -0
- package/dist/modules/icons/components/index.d.ts +6 -0
- package/dist/modules/modals/OnboardingModal/OnboardingModal.js +5 -5
- package/dist/modules/modals/ShareModal/ShareResources.d.ts +3 -0
- package/dist/modules/modals/ShareModal/ShareResources.js +9 -5
- package/dist/modules/multimedia/FileCard/FileCard.js +1 -1
- package/dist/node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isSameOrAfter.js +18 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isToday.js +19 -0
- package/dist/utilities/mime-types/index.d.ts +1 -0
- package/dist/utilities/mime-types/mime-types-utils.d.ts +1 -0
- package/dist/utilities/mime-types/mime-types-utils.js +4 -0
- package/package.json +7 -6
- package/dist/modules/comments/components/CommentHeader.d.ts +0 -3
- package/dist/modules/comments/components/CommentHeader.js +0 -8
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface PromotionCardFooterProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
className?: string;
|
|
4
|
+
}
|
|
5
|
+
declare const PromotionCardFooter: {
|
|
6
|
+
({ children, className, }: PromotionCardFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
export default PromotionCardFooter;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
const PromotionCardFooter = ({
|
|
4
|
+
children,
|
|
5
|
+
className
|
|
6
|
+
}) => {
|
|
7
|
+
const classNames = clsx("promotion-card-footer", className);
|
|
8
|
+
return /* @__PURE__ */ jsx("div", { className: classNames, children });
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
PromotionCardFooter as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface PromotionCardHeaderProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
backgroundColor?: string;
|
|
4
|
+
textColor?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const PromotionCardHeader: {
|
|
8
|
+
({ backgroundColor, textColor, children, className, }: PromotionCardHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
11
|
+
export default PromotionCardHeader;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
const PromotionCardHeader = ({
|
|
4
|
+
backgroundColor,
|
|
5
|
+
textColor,
|
|
6
|
+
children,
|
|
7
|
+
className
|
|
8
|
+
}) => {
|
|
9
|
+
const classNames = clsx("promotion-card-header", className);
|
|
10
|
+
return /* @__PURE__ */ jsx("div", { className: classNames, style: {
|
|
11
|
+
backgroundColor,
|
|
12
|
+
color: textColor
|
|
13
|
+
}, children });
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
PromotionCardHeader as default
|
|
17
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface PromotionCardIconProps {
|
|
2
|
+
icon: React.ReactNode;
|
|
3
|
+
backgroundColor?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
declare const PromotionCardIcon: {
|
|
7
|
+
({ icon, backgroundColor, className, }: PromotionCardIconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
export default PromotionCardIcon;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
const PromotionCardIcon = ({
|
|
4
|
+
icon,
|
|
5
|
+
backgroundColor,
|
|
6
|
+
className
|
|
7
|
+
}) => {
|
|
8
|
+
const classNames = clsx("promotion-card-icon", className);
|
|
9
|
+
return /* @__PURE__ */ jsx("div", { className: classNames, style: {
|
|
10
|
+
backgroundColor
|
|
11
|
+
}, children: icon });
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
PromotionCardIcon as default
|
|
15
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface PromotionCardTitleProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
className?: string;
|
|
4
|
+
}
|
|
5
|
+
declare const PromotionCardTitle: {
|
|
6
|
+
({ children, className, }: PromotionCardTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
export default PromotionCardTitle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
const PromotionCardTitle = ({
|
|
4
|
+
children,
|
|
5
|
+
className
|
|
6
|
+
}) => {
|
|
7
|
+
const classNames = clsx("promotion-card-title", className);
|
|
8
|
+
return /* @__PURE__ */ jsx("h3", { className: classNames, children });
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
PromotionCardTitle as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useEffect } from "react";
|
|
3
|
+
function SmartEllipsis({
|
|
4
|
+
text
|
|
5
|
+
}) {
|
|
6
|
+
const ref = useRef(null), [displayText, setDisplayText] = useState(text), updateText = () => {
|
|
7
|
+
const el = ref.current;
|
|
8
|
+
if (el)
|
|
9
|
+
if (el.textContent = text, el.scrollWidth > el.clientWidth) {
|
|
10
|
+
let startText = text.slice(0, Math.ceil(text.length / 2)), endText = text.slice(Math.ceil(text.length / 2));
|
|
11
|
+
for (; startText.length > 1 && endText.length > 1 && el.scrollWidth > el.clientWidth; )
|
|
12
|
+
startText = startText.slice(0, -1), endText = endText.slice(1), el.textContent = `${startText}…${endText}`;
|
|
13
|
+
setDisplayText(el.textContent);
|
|
14
|
+
} else
|
|
15
|
+
setDisplayText(text);
|
|
16
|
+
};
|
|
17
|
+
return useEffect(() => (updateText(), window.addEventListener("resize", updateText), () => window.removeEventListener("resize", updateText)), [text]), /* @__PURE__ */ jsx("span", { ref, className: "smart-ellipsis", children: displayText });
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
SmartEllipsis as default
|
|
21
|
+
};
|
|
@@ -29,10 +29,12 @@ export * from './List';
|
|
|
29
29
|
export * from './Loading';
|
|
30
30
|
export * from './LoadingScreen';
|
|
31
31
|
export * from './Logo';
|
|
32
|
+
export * from './MediaViewer';
|
|
32
33
|
export * from './Menu';
|
|
33
34
|
export * from './Modal';
|
|
34
35
|
export * from './Popover';
|
|
35
36
|
export * from './PreventPropagation';
|
|
37
|
+
export * from './PromotionCard';
|
|
36
38
|
export * from './Radio';
|
|
37
39
|
export * from './RadioCard';
|
|
38
40
|
export * from './SearchBar';
|
|
@@ -6,7 +6,9 @@ const useConversation = () => {
|
|
|
6
6
|
const zimbraWorkflow = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|view"), zimbraPreauth = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|preauth"), [msgLink, setMsgLink] = useState(""), queryParams = {
|
|
7
7
|
unread: !0,
|
|
8
8
|
_: (/* @__PURE__ */ new Date()).getTime()
|
|
9
|
-
}
|
|
9
|
+
};
|
|
10
|
+
zimbraWorkflow || (queryParams.queryparam_token = (/* @__PURE__ */ new Date()).getTime());
|
|
11
|
+
const {
|
|
10
12
|
data: messages
|
|
11
13
|
} = useQuery({
|
|
12
14
|
queryKey: ["folder", "count", "inbox"],
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { OpUnitType } from 'dayjs';
|
|
1
2
|
export type MongoDate = {
|
|
2
3
|
$date: number | string;
|
|
3
4
|
};
|
|
4
5
|
export type IsoDate = string;
|
|
5
6
|
export type NumberDate = number;
|
|
6
7
|
/** Date formats we are going to deal with. */
|
|
7
|
-
export type CoreDate = IsoDate | MongoDate | NumberDate;
|
|
8
|
+
export type CoreDate = IsoDate | MongoDate | NumberDate | Date;
|
|
8
9
|
/**
|
|
9
10
|
* Custom React hook for date parsing, formatting, and localization.
|
|
10
11
|
*
|
|
@@ -25,4 +26,7 @@ export default function useDate(): {
|
|
|
25
26
|
fromNow: (date: CoreDate) => string;
|
|
26
27
|
formatDate: (date: CoreDate, format?: string) => string;
|
|
27
28
|
formatTimeAgo: (date: CoreDate) => string;
|
|
29
|
+
dateIsSame: (date: CoreDate, date2: CoreDate, unit?: OpUnitType) => boolean;
|
|
30
|
+
dateIsSameOrAfter: (date: CoreDate, date2: CoreDate, unit?: OpUnitType) => boolean;
|
|
31
|
+
dateIsToday: (date: CoreDate) => boolean;
|
|
28
32
|
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
2
|
import dayjs from "dayjs";
|
|
3
|
+
import isSameOrAfter from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isSameOrAfter.js";
|
|
4
|
+
import isToday from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isToday.js";
|
|
3
5
|
import customParseFormat from "dayjs/plugin/customParseFormat.js";
|
|
4
6
|
import localizedFormat from "dayjs/plugin/localizedFormat.js";
|
|
5
7
|
import relativeTime from "dayjs/plugin/relativeTime.js";
|
|
@@ -13,6 +15,8 @@ import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeC
|
|
|
13
15
|
dayjs.extend(relativeTime);
|
|
14
16
|
dayjs.extend(customParseFormat);
|
|
15
17
|
dayjs.extend(localizedFormat);
|
|
18
|
+
dayjs.extend(isSameOrAfter);
|
|
19
|
+
dayjs.extend(isToday);
|
|
16
20
|
function useDate() {
|
|
17
21
|
const {
|
|
18
22
|
currentLanguage
|
|
@@ -29,7 +33,7 @@ function useDate() {
|
|
|
29
33
|
}, [currentLanguage]), toComputedDate = useCallback((date) => {
|
|
30
34
|
let computedDate = dayjs();
|
|
31
35
|
try {
|
|
32
|
-
return typeof date > "u" ? void 0 : (typeof date == "string" ? computedDate = parseDate(date) : typeof date == "number" ? computedDate = dayjs(date).locale(currentLanguage) : typeof date.$date == "number" ? computedDate = dayjs(new Date(date.$date)).locale(currentLanguage) : typeof date.$date == "string" && (computedDate = parseDate(date.$date)), computedDate);
|
|
36
|
+
return typeof date > "u" ? void 0 : (typeof date == "string" ? computedDate = parseDate(date) : date instanceof Date ? computedDate = dayjs(date).locale(currentLanguage) : typeof date == "number" ? computedDate = dayjs(date).locale(currentLanguage) : typeof date.$date == "number" ? computedDate = dayjs(new Date(date.$date)).locale(currentLanguage) : typeof date.$date == "string" && (computedDate = parseDate(date.$date)), computedDate);
|
|
33
37
|
} catch (error) {
|
|
34
38
|
console.error(error);
|
|
35
39
|
}
|
|
@@ -59,11 +63,23 @@ function useDate() {
|
|
|
59
63
|
dayjsFormat = format;
|
|
60
64
|
}
|
|
61
65
|
return computedDate != null && computedDate.isValid() ? computedDate.locale(currentLanguage).format(dayjsFormat) : "";
|
|
66
|
+
}, [currentLanguage, parseDate]), dateIsSame = useCallback((date, date2, unit = "day") => {
|
|
67
|
+
const computedDate = toComputedDate(date), computedDate2 = toComputedDate(date2);
|
|
68
|
+
return (computedDate == null ? void 0 : computedDate.isSame(computedDate2, unit)) ?? !1;
|
|
69
|
+
}, [currentLanguage, parseDate]), dateIsSameOrAfter = useCallback((date, date2, unit = "day") => {
|
|
70
|
+
const computedDate = toComputedDate(date), computedDate2 = toComputedDate(date2);
|
|
71
|
+
return (computedDate == null ? void 0 : computedDate.isSameOrAfter(computedDate2, unit)) ?? !1;
|
|
72
|
+
}, [currentLanguage, parseDate]), dateIsToday = useCallback((date) => {
|
|
73
|
+
const computedDate = toComputedDate(date);
|
|
74
|
+
return (computedDate == null ? void 0 : computedDate.isToday()) ?? !1;
|
|
62
75
|
}, [currentLanguage, parseDate]);
|
|
63
76
|
return {
|
|
64
77
|
fromNow,
|
|
65
78
|
formatDate,
|
|
66
|
-
formatTimeAgo
|
|
79
|
+
formatTimeAgo,
|
|
80
|
+
dateIsSame,
|
|
81
|
+
dateIsSameOrAfter,
|
|
82
|
+
dateIsToday
|
|
67
83
|
};
|
|
68
84
|
}
|
|
69
85
|
export {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useRef } from "react";
|
|
2
|
-
import
|
|
2
|
+
import { HEIC_MIME_TYPES } from "../../utilities/mime-types/mime-types-utils.js";
|
|
3
3
|
const useDropzone = (props) => {
|
|
4
4
|
const [dragging, setDragging] = useState(!1), [files, setFiles] = useState([]), inputRef = useRef(null), addFile = (file) => {
|
|
5
5
|
addFiles([file]);
|
|
@@ -32,21 +32,26 @@ const useDropzone = (props) => {
|
|
|
32
32
|
})
|
|
33
33
|
));
|
|
34
34
|
filesToAdd.reverse(), props != null && props.forceFilters ? (filesToAdd = applyInputFiltersOn(filesToAdd), filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd])) : setFiles((prevFiles) => [...prevFiles, ...files2]);
|
|
35
|
-
}, convertHEICImages = async (files2) =>
|
|
36
|
-
if (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
35
|
+
}, convertHEICImages = async (files2) => {
|
|
36
|
+
if (files2 === null || files2.length === 0)
|
|
37
|
+
return [];
|
|
38
|
+
let heic2any;
|
|
39
|
+
return files2.some((file) => HEIC_MIME_TYPES.includes(file.type)) && (heic2any = (await import("heic2any")).default), Promise.all(files2.map(async (file) => {
|
|
40
|
+
if (HEIC_MIME_TYPES.includes(file.type) && heic2any)
|
|
41
|
+
try {
|
|
42
|
+
const converted = await heic2any({
|
|
43
|
+
blob: file,
|
|
44
|
+
toType: "image/jpeg"
|
|
45
|
+
});
|
|
46
|
+
return new File([converted], file.name.replace(/\.(heic|heif)$/i, ".jpeg"), {
|
|
47
|
+
type: "image/jpeg"
|
|
48
|
+
});
|
|
49
|
+
} catch (error) {
|
|
50
|
+
return console.error(`Failed to convert HEIC image: ${file.name}`, error), file;
|
|
51
|
+
}
|
|
52
|
+
return file;
|
|
53
|
+
}));
|
|
54
|
+
}, cleanFiles = () => {
|
|
50
55
|
setFiles([]);
|
|
51
56
|
}, handleOnChange = (event) => {
|
|
52
57
|
const files2 = event.target.files;
|
|
@@ -3,6 +3,7 @@ export default function useEdificeIcons(): {
|
|
|
3
3
|
getIconClass: (app: IWebApp | string) => string;
|
|
4
4
|
getBackgroundIconClass: (app: IWebApp | string) => string;
|
|
5
5
|
getBackgroundLightIconClass: (app: IWebApp | string) => string;
|
|
6
|
+
getBorderIconClass: (app: IWebApp | string) => string;
|
|
6
7
|
getIconCode: (app: IWebApp | string | undefined) => string;
|
|
7
8
|
getWidgetIconClass: (widget: IWidget) => string;
|
|
8
9
|
isIconUrl: (icon: string) => string | boolean;
|
|
@@ -78,6 +78,10 @@ function useEdificeIcons() {
|
|
|
78
78
|
const appCode = getIconCode(app);
|
|
79
79
|
return appCode ? `bg-light-${appCode}` : "bg-light-placeholder";
|
|
80
80
|
}
|
|
81
|
+
function getBorderIconClass(app) {
|
|
82
|
+
const appCode = getIconCode(app);
|
|
83
|
+
return appCode ? `border-app-${appCode}` : "border-app-placeholder";
|
|
84
|
+
}
|
|
81
85
|
function getWidgetIconClass(widget) {
|
|
82
86
|
return iconOfWidget[widget.platformConf.name];
|
|
83
87
|
}
|
|
@@ -85,6 +89,7 @@ function useEdificeIcons() {
|
|
|
85
89
|
getIconClass,
|
|
86
90
|
getBackgroundIconClass,
|
|
87
91
|
getBackgroundLightIconClass,
|
|
92
|
+
getBorderIconClass,
|
|
88
93
|
getIconCode,
|
|
89
94
|
getWidgetIconClass,
|
|
90
95
|
isIconUrl
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as useZoom } from './useZoom';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export default function useZoom(initialScale?: number, maxScale?: number, minScale?: number, step?: number): {
|
|
2
|
+
scale: number;
|
|
3
|
+
zoomIn: () => void;
|
|
4
|
+
zoomOut: () => void;
|
|
5
|
+
resetZoom: () => void;
|
|
6
|
+
setScale: import('react').Dispatch<import('react').SetStateAction<number>>;
|
|
7
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
function useZoom(initialScale = 1, maxScale = 2, minScale = 0.5, step = 0.5) {
|
|
3
|
+
const [scale, setScale] = useState(initialScale);
|
|
4
|
+
return {
|
|
5
|
+
scale,
|
|
6
|
+
zoomIn: () => setScale((prev) => Math.min(prev + step, maxScale)),
|
|
7
|
+
zoomOut: () => setScale((prev) => Math.max(prev - step, minScale)),
|
|
8
|
+
resetZoom: () => setScale(initialScale),
|
|
9
|
+
setScale
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
useZoom as default
|
|
14
|
+
};
|