@chayns-components/core 5.0.0-beta.1308 → 5.0.0-beta.1310
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/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js +6 -5
- package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js.map +1 -1
- package/lib/cjs/components/file-select/FileSelect.js +2 -1
- package/lib/cjs/components/file-select/FileSelect.js.map +1 -1
- package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js +6 -5
- package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js.map +1 -1
- package/lib/esm/components/file-select/FileSelect.js +2 -1
- package/lib/esm/components/file-select/FileSelect.js.map +1 -1
- package/package.json +2 -2
package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js
CHANGED
|
@@ -24,7 +24,7 @@ const DelayedDropdownContent = ({
|
|
|
24
24
|
transform
|
|
25
25
|
}) => {
|
|
26
26
|
const [animationState, setAnimationState] = (0, _react.useState)(AnimationType.None);
|
|
27
|
-
const ref = (0, _react.useRef)(
|
|
27
|
+
const ref = (0, _react.useRef)();
|
|
28
28
|
const timeoutRef = (0, _react.useRef)();
|
|
29
29
|
const measureElement = (0, _react.useCallback)(() => {
|
|
30
30
|
if (ref.current) {
|
|
@@ -66,9 +66,6 @@ const DelayedDropdownContent = ({
|
|
|
66
66
|
(0, _react.useEffect)(() => {
|
|
67
67
|
if (shouldShowContent) {
|
|
68
68
|
setAnimationState(AnimationType.Hidden);
|
|
69
|
-
window.setTimeout(() => {
|
|
70
|
-
measureElement();
|
|
71
|
-
}, 1);
|
|
72
69
|
} else {
|
|
73
70
|
clearTimeout(timeoutRef.current);
|
|
74
71
|
setAnimationState(prevState => {
|
|
@@ -82,11 +79,15 @@ const DelayedDropdownContent = ({
|
|
|
82
79
|
}, ANIMATION_DELAY_MS);
|
|
83
80
|
}
|
|
84
81
|
}, [measureElement, shouldShowContent]);
|
|
82
|
+
const refCallback = (0, _react.useCallback)(reference => {
|
|
83
|
+
ref.current = reference ?? undefined;
|
|
84
|
+
measureElement();
|
|
85
|
+
}, [measureElement]);
|
|
85
86
|
if (animationState === AnimationType.None) {
|
|
86
87
|
return null;
|
|
87
88
|
}
|
|
88
89
|
return /*#__PURE__*/_react.default.createElement(_DelayedDropdownContent.StyledMotionDelayedDropdownContent, {
|
|
89
|
-
ref:
|
|
90
|
+
ref: refCallback,
|
|
90
91
|
$coordinates: coordinates,
|
|
91
92
|
$transform: transform,
|
|
92
93
|
$shouldHideContent: animationState === AnimationType.Hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DelayedDropdownContent.js","names":["_react","_interopRequireWildcard","require","_DelayedDropdownContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","useState","None","ref","useRef","timeoutRef","measureElement","useCallback","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","useEffect","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","createElement","StyledMotionDelayedDropdownContent","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName","_default","exports"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>(
|
|
1
|
+
{"version":3,"file":"DelayedDropdownContent.js","names":["_react","_interopRequireWildcard","require","_DelayedDropdownContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","useState","None","ref","useRef","timeoutRef","measureElement","useCallback","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","useEffect","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","StyledMotionDelayedDropdownContent","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName","_default","exports"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>();\n const timeoutRef = useRef<number>();\n\n const measureElement = useCallback(() => {\n if (ref.current) {\n const { height, width, x, y } = ref.current.getBoundingClientRect();\n const { scrollHeight } = ref.current;\n\n if (typeof onMeasure === 'function') {\n onMeasure({\n x,\n y,\n height,\n scrollHeight,\n width,\n element: ref.current,\n });\n }\n\n setAnimationState(AnimationType.FadeIn);\n\n timeoutRef.current = window.setTimeout(() => {\n setAnimationState(AnimationType.Visible);\n }, ANIMATION_DELAY_MS);\n }\n }, [onMeasure]);\n\n useEffect(() => {\n if (!shouldShowContent) return () => {};\n\n const observer = new ResizeObserver(() => {\n measureElement();\n });\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => observer.disconnect();\n }, [measureElement, shouldShowContent]);\n\n useEffect(() => {\n if (shouldShowContent) {\n setAnimationState(AnimationType.Hidden);\n } else {\n clearTimeout(timeoutRef.current);\n\n setAnimationState((prevState) => {\n if (prevState === AnimationType.None) {\n return prevState;\n }\n\n return AnimationType.FadeOut;\n });\n\n window.setTimeout(() => {\n setAnimationState(AnimationType.None);\n }, ANIMATION_DELAY_MS);\n }\n }, [measureElement, shouldShowContent]);\n\n const refCallback = useCallback(\n (reference: HTMLDivElement | null) => {\n ref.current = reference ?? undefined;\n measureElement();\n },\n [measureElement],\n );\n\n if (animationState === AnimationType.None) {\n return null;\n }\n\n return (\n <StyledMotionDelayedDropdownContent\n ref={refCallback}\n $coordinates={coordinates}\n $transform={transform}\n $shouldHideContent={animationState === AnimationType.Hidden}\n animate={{\n opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState)\n ? 1\n : 0,\n }}\n transition={{ duration: ANIMATION_DELAY_MS / 1000, type: 'tween' }}\n >\n {children}\n </StyledMotionDelayedDropdownContent>\n );\n};\n\nDelayedDropdownContent.displayName = 'DelayedDropdownContent';\n\nexport default DelayedDropdownContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleImageSelectionClick","buttonType","result","createDialog","dialogInput","upload","type","DialogType","MODULE","system","url","scope","module","buttons","open","handleFileSelectionClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","file","isValidFileType","types","size","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","onClick","onDragOver","onDrop","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\ntype DialogInput = {\n upload: boolean;\n};\n\nexport type FileSelectProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: string[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n if (maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024) {\n return false;\n }\n return true;\n });\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileSelect.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_FileSelect","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","useCallback","images","handleAddFiles","newFiles","handleImageSelectionClick","buttonType","result","createDialog","dialogInput","upload","initialView","type","DialogType","MODULE","system","url","scope","module","buttons","open","handleFileSelectionClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","file","isValidFileType","types","size","useMemo","createElement","StyledFileSelect","StyledFileSelectWrapper","$isDisabled","StyledFileSelectContainer","onClick","onDragOver","onDrop","icons","StyledFileSelectText","$isImageSelection","displayName","_default","exports"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\ntype DialogInput = {\n upload: boolean;\n initialView: string;\n};\n\nexport type FileSelectProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: string[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true, initialView: 'pixabay' },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n if (maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024) {\n return false;\n }\n return true;\n });\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js
CHANGED
|
@@ -17,7 +17,7 @@ const DelayedDropdownContent = ({
|
|
|
17
17
|
transform
|
|
18
18
|
}) => {
|
|
19
19
|
const [animationState, setAnimationState] = useState(AnimationType.None);
|
|
20
|
-
const ref = useRef(
|
|
20
|
+
const ref = useRef();
|
|
21
21
|
const timeoutRef = useRef();
|
|
22
22
|
const measureElement = useCallback(() => {
|
|
23
23
|
if (ref.current) {
|
|
@@ -59,9 +59,6 @@ const DelayedDropdownContent = ({
|
|
|
59
59
|
useEffect(() => {
|
|
60
60
|
if (shouldShowContent) {
|
|
61
61
|
setAnimationState(AnimationType.Hidden);
|
|
62
|
-
window.setTimeout(() => {
|
|
63
|
-
measureElement();
|
|
64
|
-
}, 1);
|
|
65
62
|
} else {
|
|
66
63
|
clearTimeout(timeoutRef.current);
|
|
67
64
|
setAnimationState(prevState => {
|
|
@@ -75,11 +72,15 @@ const DelayedDropdownContent = ({
|
|
|
75
72
|
}, ANIMATION_DELAY_MS);
|
|
76
73
|
}
|
|
77
74
|
}, [measureElement, shouldShowContent]);
|
|
75
|
+
const refCallback = useCallback(reference => {
|
|
76
|
+
ref.current = reference ?? undefined;
|
|
77
|
+
measureElement();
|
|
78
|
+
}, [measureElement]);
|
|
78
79
|
if (animationState === AnimationType.None) {
|
|
79
80
|
return null;
|
|
80
81
|
}
|
|
81
82
|
return /*#__PURE__*/React.createElement(StyledMotionDelayedDropdownContent, {
|
|
82
|
-
ref:
|
|
83
|
+
ref: refCallback,
|
|
83
84
|
$coordinates: coordinates,
|
|
84
85
|
$transform: transform,
|
|
85
86
|
$shouldHideContent: animationState === AnimationType.Hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DelayedDropdownContent.js","names":["React","useCallback","useEffect","useRef","useState","StyledMotionDelayedDropdownContent","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","None","ref","timeoutRef","measureElement","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","createElement","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>(
|
|
1
|
+
{"version":3,"file":"DelayedDropdownContent.js","names":["React","useCallback","useEffect","useRef","useState","StyledMotionDelayedDropdownContent","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","None","ref","timeoutRef","measureElement","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>();\n const timeoutRef = useRef<number>();\n\n const measureElement = useCallback(() => {\n if (ref.current) {\n const { height, width, x, y } = ref.current.getBoundingClientRect();\n const { scrollHeight } = ref.current;\n\n if (typeof onMeasure === 'function') {\n onMeasure({\n x,\n y,\n height,\n scrollHeight,\n width,\n element: ref.current,\n });\n }\n\n setAnimationState(AnimationType.FadeIn);\n\n timeoutRef.current = window.setTimeout(() => {\n setAnimationState(AnimationType.Visible);\n }, ANIMATION_DELAY_MS);\n }\n }, [onMeasure]);\n\n useEffect(() => {\n if (!shouldShowContent) return () => {};\n\n const observer = new ResizeObserver(() => {\n measureElement();\n });\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => observer.disconnect();\n }, [measureElement, shouldShowContent]);\n\n useEffect(() => {\n if (shouldShowContent) {\n setAnimationState(AnimationType.Hidden);\n } else {\n clearTimeout(timeoutRef.current);\n\n setAnimationState((prevState) => {\n if (prevState === AnimationType.None) {\n return prevState;\n }\n\n return AnimationType.FadeOut;\n });\n\n window.setTimeout(() => {\n setAnimationState(AnimationType.None);\n }, ANIMATION_DELAY_MS);\n }\n }, [measureElement, shouldShowContent]);\n\n const refCallback = useCallback(\n (reference: HTMLDivElement | null) => {\n ref.current = reference ?? undefined;\n measureElement();\n },\n [measureElement],\n );\n\n if (animationState === AnimationType.None) {\n return null;\n }\n\n return (\n <StyledMotionDelayedDropdownContent\n ref={refCallback}\n $coordinates={coordinates}\n $transform={transform}\n $shouldHideContent={animationState === AnimationType.Hidden}\n animate={{\n opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState)\n ? 1\n : 0,\n }}\n transition={{ duration: ANIMATION_DELAY_MS / 1000, type: 'tween' }}\n >\n {children}\n </StyledMotionDelayedDropdownContent>\n );\n};\n\nDelayedDropdownContent.displayName = 'DelayedDropdownContent';\n\nexport default DelayedDropdownContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","images","handleAddFiles","newFiles","handleImageSelectionClick","buttonType","result","dialogInput","upload","type","MODULE","system","url","scope","module","buttons","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","file","types","size","createElement","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\ntype DialogInput = {\n upload: boolean;\n};\n\nexport type FileSelectProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: string[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n if (maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024) {\n return false;\n }\n return true;\n });\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,YAAY;AACrD,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAElE,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,WAAW,QAAQ,wBAAwB;AACpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,yBAAyB,EACzBC,oBAAoB,EACpBC,uBAAuB,QACpB,qBAAqB;
|
|
1
|
+
{"version":3,"file":"FileSelect.js","names":["createDialog","DialogType","React","useCallback","useMemo","isValidFileType","selectFiles","Icon","StyledFileSelect","StyledFileSelectContainer","StyledFileSelectText","StyledFileSelectWrapper","FileSelect","fileSelectionIcons","imageSelectIcons","fileTypes","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","handleAddImages","images","handleAddFiles","newFiles","handleImageSelectionClick","buttonType","result","dialogInput","upload","initialView","type","MODULE","system","url","scope","module","buttons","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","files","filter","file","types","size","createElement","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","displayName"],"sources":["../../../../src/components/file-select/FileSelect.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { DragEvent, FC, useCallback, useMemo } from 'react';\nimport type { ImageDialogResult } from '../../types/fileInput';\nimport { isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport {\n StyledFileSelect,\n StyledFileSelectContainer,\n StyledFileSelectText,\n StyledFileSelectWrapper,\n} from './FileSelect.styles';\n\ntype DialogInput = {\n upload: boolean;\n initialView: string;\n};\n\nexport type FileSelectProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n fileSelectionIcons?: string[];\n /**\n * The text that should be displayed inside the FileInput.\n */\n fileSelectionPlaceholder?: string;\n /**\n * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.\n */\n fileTypes?: string;\n /**\n * The icon of the image selection.\n */\n imageSelectIcons?: string[];\n /**\n * If set, pictures can be select via Pixabay.\n */\n imageSelectPlaceholder?: string;\n /**\n * Whether the FileInput is disabled.\n */\n isDisabled?: boolean;\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * The maximum size of a file in MB.\n */\n maxFileSizeInMB?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[] | string[]) => void;\n};\n\nconst FileSelect: FC<FileSelectProps> = ({\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n}) => {\n const handleAddImages = useCallback(\n (images: string[]) => {\n if (typeof onAdd === 'function') {\n onAdd(images);\n }\n },\n [onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n if (typeof onAdd === 'function') {\n onAdd(newFiles);\n }\n },\n [onAdd],\n );\n\n const handleImageSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: { upload: true, initialView: 'pixabay' },\n type: DialogType.MODULE,\n system: {\n url: 'https://tapp.chayns-static.space/api/dialog-image-editor/v1/remoteEntry.js',\n scope: 'dialog_image_editor',\n module: './ImageEditorEntry',\n },\n buttons: [],\n }).open()) as ImageDialogResult;\n\n if (buttonType === 1 && result?.url) handleAddImages([result.url]);\n }, [handleAddImages, isDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (isDisabled) return;\n\n const newFiles = await selectFiles({ multiple: true, type: fileTypes, maxFileSizeInMB });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, isDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n const draggedFiles = Array.from(e.dataTransfer.files).filter((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return false;\n }\n\n if (maxFileSizeInMB && file.size > maxFileSizeInMB * 1024 * 1024) {\n return false;\n }\n return true;\n });\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles, fileTypes, maxFileSizeInMB],\n );\n\n return useMemo(\n () => (\n <StyledFileSelect>\n <StyledFileSelectWrapper $isDisabled={isDisabled}>\n <StyledFileSelectContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e) => e.preventDefault()}\n onDrop={handleDrop}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileSelectText>{fileSelectionPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n {imageSelectPlaceholder && (\n <StyledFileSelectContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileSelectText>{imageSelectPlaceholder}</StyledFileSelectText>\n </StyledFileSelectContainer>\n )}\n </StyledFileSelectWrapper>\n </StyledFileSelect>\n ),\n [\n isDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n};\n\nFileSelect.displayName = 'FileSelect';\n\nexport default FileSelect;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1310",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "8ec65939cdce7962e8503da53fd71ba75fefefcf"
|
|
90
90
|
}
|