@chayns-components/core 5.0.0-beta.1003 → 5.0.0-beta.1005
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/accordion/Accordion.js +30 -30
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/Accordion.styles.js +22 -21
- package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +2 -2
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +16 -16
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +26 -26
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +11 -11
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.js +31 -31
- package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js +2 -2
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.js +12 -12
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/button/Button.styles.js +4 -4
- package/lib/cjs/components/button/Button.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.js +48 -48
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +2 -2
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.js +23 -23
- package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js +2 -2
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.js +4 -4
- package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +2 -2
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.js +27 -27
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.styles.js +2 -2
- package/lib/cjs/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +2 -2
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +4 -4
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +11 -11
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +17 -17
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.styles.js +2 -2
- package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js +2 -2
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +5 -5
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +8 -0
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +24 -1
- package/lib/cjs/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.js +17 -17
- package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js +2 -2
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +34 -34
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +2 -2
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +2 -2
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +17 -17
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +2 -2
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.js +64 -64
- package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.styles.js +2 -2
- package/lib/cjs/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js +2 -2
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +16 -16
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.styles.js +3 -3
- package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +2 -2
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +44 -44
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.styles.js +2 -2
- package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +2 -2
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/utils/sliderButton.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.js +1 -1
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.styles.js +21 -20
- package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.js +2 -2
- package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/button/Button.js +1 -1
- package/lib/esm/components/button/Button.js.map +1 -1
- package/lib/esm/components/button/Button.styles.js +1 -1
- package/lib/esm/components/button/Button.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +1 -1
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +1 -1
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +1 -1
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +1 -1
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +9 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +26 -0
- package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +1 -1
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +2 -2
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.js +1 -1
- package/lib/esm/components/search-box/SearchBox.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +1 -1
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +1 -1
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/utils/sliderButton.js.map +1 -1
- package/lib/types/components/accordion/Accordion.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +20 -2660
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +2 -273
- package/lib/types/components/button/Button.styles.d.ts +6 -799
- package/lib/types/components/combobox/ComboBox.styles.d.ts +2 -263
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -263
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -263
- package/lib/types/components/file-input/FileInput.styles.d.ts +2 -263
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +2 -263
- package/lib/types/components/input/Input.styles.d.ts +6 -791
- package/lib/types/components/list/list-item/ListItem.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +8 -1052
- package/lib/types/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +5 -0
- package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +2 -263
- package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -263
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +2 -263
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +3 -264
- package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -263
- package/lib/types/components/search-box/search-box-body/SearchBoxBody.styles.d.ts +2 -263
- package/lib/types/components/search-input/SearchInput.styles.d.ts +4 -526
- package/lib/types/components/slider/Slider.styles.d.ts +3 -585
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +2 -263
- package/lib/types/components/truncation/Truncation.styles.d.ts +2 -263
- package/lib/types/utils/sliderButton.d.ts +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","internalIsDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n DragEvent,\n forwardRef,\n ReactElement,\n useCallback,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledFileInputWrapper,\n StyledMotionFileInputList,\n StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: FileInputFileItem[];\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 * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n upload: boolean;\n buttons: {\n text: string;\n buttonType: number;\n }[];\n initialView: string;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | FileInputFileItem | string | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === fileName) {\n fileToDelete = image;\n }\n\n return image !== fileName;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.url === fileName || file.name === fileName) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const handleImageSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n buttons: [\n { text: 'hello', buttonType: 1 },\n { text: 'can', buttonType: -1 },\n ],\n initialView: 'pixabay',\n },\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) {\n handleAddImages([result.url]);\n }\n }, [handleAddImages, internalIsDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const newFiles = await selectFiles({\n multiple: true,\n type: fileTypes,\n maxFileSizeInMB,\n });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const combinedFiles = [...internalImages, ...internalFiles];\n\n const items: ReactElement[] = combinedFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={typeof file === 'string' ? file : file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={typeof file !== 'string' ? file.type : undefined}\n fileName={typeof file !== 'string' ? file.name : undefined}\n fileSize={typeof file !== 'string' ? file.size : undefined}\n url={typeof file === 'string' ? file : undefined}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles, internalImages]);\n\n const uploadedFiles = useMemo(() => {\n const items: ReactElement[] = [];\n\n const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n cutFiles?.forEach(({ url, id, name }) => {\n items.push(\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={id}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n </StyledMotionFileInputList>,\n );\n });\n\n return items;\n }, [files, handleDeleteFile, maxFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputWrapper $isDisabled={internalIsDisabled}>\n <StyledFileInputContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n {imageSelectPlaceholder && (\n <StyledFileInputContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n )}\n </StyledFileInputWrapper>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n {uploadedFiles.length > 0 && (\n <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n <List>\n <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n </List>\n </StyledUploadedFilesList>\n )}\n </StyledFileInput>\n ),\n [\n internalIsDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n content,\n uploadedFiles,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledFileInputWrapper","StyledMotionFileInputList","StyledUploadedFilesList","FileInput","_ref","ref","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","filteredImages","url","internalIsDisabled","handleImageSelectionClick","buttonType","result","dialogInput","upload","buttons","text","initialView","type","MODULE","system","scope","module","open","handleFileSelectionClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","combinedFiles","items","map","createElement","animate","height","opacity","exit","key","transition","duration","fileType","undefined","fileSize","size","uploadedFiles","cutFiles","splice","_ref2","id","$isDisabled","onClick","onDragOver","onDrop","icons","$isImageSelection","initial","$shouldShowBorder","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n DragEvent,\n forwardRef,\n ReactElement,\n useCallback,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport type { FileInputFileItem, ImageDialogResult } from '../../types/fileInput';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledFileInputWrapper,\n StyledMotionFileInputList,\n StyledUploadedFilesList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * Already uploaded files to display.\n */\n files?: FileInputFileItem[];\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 * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File | FileInputFileItem | string) => void;\n};\n\ntype DialogInput = {\n upload: boolean;\n buttons: {\n text: string;\n buttonType: number;\n }[];\n initialView: string;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<string[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: string[]) => {\n const newImages: string[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, internalImages.length, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | FileInputFileItem | string | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image === fileName) {\n fileToDelete = image;\n }\n\n return image !== fileName;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.url === fileName || file.name === fileName) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const handleImageSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const { buttonType, result } = (await createDialog<DialogInput>({\n dialogInput: {\n upload: true,\n buttons: [\n { text: 'hello', buttonType: 1 },\n { text: 'can', buttonType: -1 },\n ],\n initialView: 'pixabay',\n },\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) {\n handleAddImages([result.url]);\n }\n }, [handleAddImages, internalIsDisabled]);\n\n const handleFileSelectionClick = useCallback(async () => {\n if (internalIsDisabled) {\n return;\n }\n\n const newFiles = await selectFiles({\n multiple: true,\n type: fileTypes,\n maxFileSizeInMB,\n });\n\n handleAddFiles(newFiles);\n }, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const combinedFiles = [...internalImages, ...internalFiles];\n\n const items: ReactElement[] = combinedFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={typeof file === 'string' ? file : file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={typeof file !== 'string' ? file.type : undefined}\n fileName={typeof file !== 'string' ? file.name : undefined}\n fileSize={typeof file !== 'string' ? file.size : undefined}\n url={typeof file === 'string' ? file : undefined}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles, internalImages]);\n\n const uploadedFiles = useMemo(() => {\n const items: ReactElement[] = [];\n\n const cutFiles = maxFiles ? files?.splice(0, maxFiles) : files;\n\n cutFiles?.forEach(({ url, id, name }) => {\n items.push(\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={id}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem url={url} onRemove={handleDeleteFile} fileName={name} />\n </StyledMotionFileInputList>,\n );\n });\n\n return items;\n }, [files, handleDeleteFile, maxFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputWrapper $isDisabled={internalIsDisabled}>\n <StyledFileInputContainer\n onClick={() => void handleFileSelectionClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={fileSelectionIcons} />\n <StyledFileInputText>{fileSelectionPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n {imageSelectPlaceholder && (\n <StyledFileInputContainer\n $isImageSelection\n onClick={() => void handleImageSelectionClick()}\n >\n <Icon icons={imageSelectIcons} />\n <StyledFileInputText>{imageSelectPlaceholder}</StyledFileInputText>\n </StyledFileInputContainer>\n )}\n </StyledFileInputWrapper>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n {uploadedFiles.length > 0 && (\n <StyledUploadedFilesList $shouldShowBorder={content.length > 0}>\n <List>\n <AnimatePresence initial={false}>{uploadedFiles}</AnimatePresence>\n </List>\n </StyledUploadedFilesList>\n )}\n </StyledFileInput>\n ),\n [\n internalIsDisabled,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectPlaceholder,\n imageSelectIcons,\n content,\n uploadedFiles,\n handleFileSelectionClick,\n handleDrop,\n handleImageSelectionClick,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledUploadedFilesList","_ref3","$shouldShowBorder","theme","headline","StyledFileInputContainer","_ref4","text","_ref5","$isImageSelection","StyledFileInputText","p","_ref6","StyledMotionFileInputList"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"FileInput.styles.js","names":["motion","styled","css","StyledFileInput","div","StyledFileInputWrapper","_ref","$isDisabled","_ref2","StyledUploadedFilesList","_ref3","$shouldShowBorder","theme","headline","StyledFileInputContainer","_ref4","text","_ref5","$isImageSelection","StyledFileInputText","p","_ref6","StyledMotionFileInputList"],"sources":["../../../../src/components/file-input/FileInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFileInput = styled.div``;\n\ntype StyledFileInputWrapperProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledFileInputWrapper = styled.div<StyledFileInputWrapperProps>`\n display: flex;\n\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledFileInputContainerProps = WithTheme<{\n $isImageSelection?: boolean;\n}>;\n\ntype StyledUploadedFilesListProps = WithTheme<{ $shouldShowBorder: boolean }>;\n\nexport const StyledUploadedFilesList = styled.div<StyledUploadedFilesListProps>`\n ${({ $shouldShowBorder, theme }: StyledUploadedFilesListProps) =>\n $shouldShowBorder &&\n css`\n border-top: 1px solid ${theme.headline};\n `}\n`;\n\nexport const StyledFileInputContainer = styled.div<StyledFileInputContainerProps>`\n border: ${({ theme }: StyledFileInputContainerProps) => theme.text} 1px dotted;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 15px;\n justify-content: center;\n width: 100%;\n\n ${({ $isImageSelection }) =>\n $isImageSelection &&\n css`\n border-left: none;\n `}\n`;\n\ntype StyledFileInputTextProps = WithTheme<unknown>;\n\nexport const StyledFileInputText = styled.p<StyledFileInputTextProps>`\n color: ${({ theme }: StyledFileInputTextProps) => theme.text};\n`;\n\nexport const StyledMotionFileInputList = styled(motion.div)<FramerMotionBugFix>``;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAM3C,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAY,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D,CAAC;AAQD,OAAO,MAAME,uBAAuB,GAAGR,MAAM,CAACG,GAAiC;AAC/E,MAAMM,KAAA;EAAA,IAAC;IAAEC,iBAAiB;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OACzDC,iBAAiB,IACjBT,GAAG;AACX,oCAAoCU,KAAK,CAACC,QAAQ;AAClD,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGb,MAAM,CAACG,GAAkC;AACjF,cAAcW,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACpBC,iBAAiB,IACjBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMiB,mBAAmB,GAAGlB,MAAM,CAACmB,CAA2B;AACrE,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAgC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACI,IAAI;AAAA;AAChE,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGrB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAqB,EAAE","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { motion } from '
|
|
1
|
+
import { motion } from 'motion/react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
|
|
4
4
|
export const StyledFilterButtonItem = styled.div`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","_ref2","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemLabelCount","_ref4","StyledFilterButtonItemBorder","_ref5","$shape","Round","_ref6","$color","headline","StyledMotionFilterButtonItemBackground","_ref7","_ref8","_ref9"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","_ref2","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemLabelCount","_ref4","StyledFilterButtonItemBorder","_ref5","$shape","Round","_ref6","$color","headline","StyledMotionFilterButtonItemBackground","_ref7","_ref8","_ref9"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{ $size: FilterButtonSize; $isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: pointer;\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n &:hover > div:last-child {\n ${({ $isSelected }) =>\n !$isSelected &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAKtF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAgC;AAC7E;AACA;AACA;AACA;AACA,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAKJ,gBAAgB,CAACK,MAAM,GAAG,UAAU,GAAG,SAAS;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACd,CAACC,WAAW,IACZT,GAAG;AACf;AACA,aAAa;AAAA;AACb;AACA,CAAC;AAED,OAAO,MAAMU,2BAA2B,GAAGX,MAAM,CAACK,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,+BAA+B,GAAGZ,MAAM,CAACa,CAAuC;AAC7F,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGjB,MAAM,CAACa,CAAwC;AAC/F,aAAaK,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,4BAA4B,GAAGnB,MAAM,CAACK,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBe,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAET,KAAK;IAAEL;EAA+C,CAAC,GAAAa,KAAA;EAAA,OAChE,CAACb,WAAW,IACZT,GAAG;AACX;AACA;AACA,4BAA4BuB,MAAM,IAAIT,KAAK,CAACU,QAAQ;AACpD,SAAS;AAAA;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAG1B,MAAM,CACxDD,MAAM,CAACM,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAesB,KAAA;EAAA,IAAC;IAAEjB;EAAY,CAAC,GAAAiB,KAAA;EAAA,OAAMjB,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,qBAAqBkB,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAMP,MAAM,KAAKnB,qBAAqB,CAACoB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF,wBAAwBO,KAAA;EAAA,IAAC;IAAEL,MAAM;IAAET;EAA6C,CAAC,GAAAc,KAAA;EAAA,OACzEL,MAAM,IAAIT,KAAK,CAACU,QAAQ;AAAA;AAChC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $shouldChangeColor: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $isInvalid?: boolean;\n $shouldShowCenteredContent: boolean;\n $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAqB;AACvD,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACG,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAmD,CAAC,GAAAF,KAAA;EAAA,OAC9EC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF;AACA,UAAUG,KAAA;EAAA,IAAC;IAAEH,KAAK;IAAEI;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpDC,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,0BAA0B;AAAA;AACjE,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAAC,KAAK,CAAC;AAAA;AACxE;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACRC,KAAK,KAAK,OAAO,IACjBf,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMgB,KAAA;EAAA,IAAC;IAAEC,2BAA2B;IAAEF;EAAM,CAAC,GAAAC,KAAA;EAAA,OACrC,CAACC,2BAA2B,IAC5BjB,GAAG;AACX,0BAA0Be,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAC9D,SAAS;AAAA;AACT;AACA,MAAMG,KAAA,IAAsE;EAAA,IAArE;IAAEC,wBAAwB;IAAEF,2BAA2B;IAAEV;EAAM,CAAC,GAAAW,KAAA;EAC/D,IAAID,2BAA2B,EAAE;IAC7B,OAAOjB,GAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCO,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,IAAIY,wBAAwB,EAAE;IAC1B,OAAOnB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,MAAMoB,kBAAkB,GAAGrB,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA,cAAcmB,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OACtC,CAACJ,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAAA;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMK,gBAAgB,GAAGvB,MAAM,CAACwB,KAA4B;AACnE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEjB,KAAK;IAAEI;EAAkC,CAAC,GAAAa,KAAA;EAAA,OAClDb,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACkB,IAAI;AAAA;AAC7C;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAkB,CAAC,GAAAD,MAAA;EAAA,OAAK,eAAeC,iBAAiB,KAAK;AAAA;AAC7E;AACA;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,MAAA;EAAA,OAC7BC,0BAA0B,IAC1B7B,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAM8B,6BAA6B,GAAG/B,MAAM,CAACD,MAAM,CAACiC,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGjC,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC1D;AACA,CAAC;AAID,OAAO,MAAM+B,gBAAgB,GAAGlC,MAAM,CAACgC,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,MAAA;EAAA,IAAC;IAAE3B,KAAK;IAAEI;EAAkC,CAAC,GAAAuB,MAAA;EAAA,OAClDvB,UAAU,GAAGJ,KAAK,CAACK,KAAK,GAAG,QAAQL,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAAA;AAC3E,CAAC;AAOD,OAAO,MAAM4B,0BAA0B,GAAGpC,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,mBAAmBkC,MAAA;EAAA,IAAC;IAAEnB;EAA4B,CAAC,GAAAmB,MAAA;EAAA,OAC3CnB,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA;AACnF;AACA;AACA;AACA,cAAcoB,MAAA;EAAA,IAAC;IAAEtB;EAAM,CAAC,GAAAsB,MAAA;EAAA,OAAMtB,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACnE;AACA,aAAauB,MAAA;EAAA,IAAC;IAAEvB;EAAM,CAAC,GAAAuB,MAAA;EAAA,OAAMvB,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClE,CAAC;AAED,OAAO,MAAMwB,sBAAsB,GAAGxC,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsC,uBAAuB,GAAGzC,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnimatePresence, MotionConfig } from '
|
|
1
|
+
import { AnimatePresence, MotionConfig } from 'motion/react';
|
|
2
2
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
3
3
|
export const ListContext = /*#__PURE__*/React.createContext({
|
|
4
4
|
incrementExpandableItemCount: () => () => {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from '
|
|
1
|
+
{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n incrementExpandableItemCount: () => () => void;\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n incrementExpandableItemCount: () => () => {},\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const incrementExpandableItemCount = useCallback(() => {\n setExpandableItemCount((count) => count + 1);\n\n return () => {\n setExpandableItemCount((count) => count - 1);\n };\n }, [setExpandableItemCount]);\n\n const providerValue = useMemo<IListContext>(\n () => ({\n incrementExpandableItemCount,\n isAnyItemExpandable: expandableItemCount > 0,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [\n expandableItemCount,\n incrementExpandableItemCount,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n ],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,cAAc;AAC5D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEP,SAAS,GAAG;EAAM,CAAC,GAAAM,IAAA;EACxD,MAAM,CAACL,YAAY,EAAEO,eAAe,CAAC,GAAGb,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGf,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,UAACkB,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAX,SAAA,GAAAW,SAAA,MAAG,CAAC,CAAC;IAC1BL,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOV,SAAS;MACpB;MAEA,OAAOS,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMV,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDiB,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTN,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACN,sBAAsB,CAAC,CAAC;EAE5B,MAAMO,aAAa,GAAGvB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAEU,mBAAmB,GAAG,CAAC;IAC5CT,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIM,mBAAmB,EACnBX,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAA0B,aAAA,CAACtB,WAAW,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCzB,KAAA,CAAA0B,aAAA,CAAC3B,YAAY;IAAC8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC9B,KAAA,CAAA0B,aAAA,CAAC5B,eAAe;IAACiC,OAAO,EAAE;EAAM,GAAEhB,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDF,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnimatePresence } from '
|
|
1
|
+
import { AnimatePresence } from 'motion/react';
|
|
2
2
|
import React, { useCallback, useContext, useEffect, useRef } from 'react';
|
|
3
3
|
import { useUuid } from '../../../hooks/uuid';
|
|
4
4
|
import { AccordionContext } from '../../accordion/Accordion';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * The background of the image. This is only used if images are passed.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Whether the ListItem locks disabled but has full functionality.\n */\n isTitleGreyed?: boolean;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is opened.\n */\n onOpen?: VoidFunction;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image should be opened on click.\n */\n shouldOpenImageOnClick?: boolean;\n /**\n * Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n */\n shouldPreventLayoutAnimation?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldForceBackground = false,\n shouldHideBottomLine = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldOpenImageOnClick = false,\n shouldPreventLayoutAnimation = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const isInitialRenderRef = useRef(true);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable && !shouldHideIndicator) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n $isClickable={isClickable}\n $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * The background of the image. This is only used if images are passed.\n */\n imageBackground?: CSSProperties['background'];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Whether the ListItem locks disabled but has full functionality.\n */\n isTitleGreyed?: boolean;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: ListItemElements;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the ListItem is opened.\n */\n onOpen?: VoidFunction;\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: IListItemRightElements;\n /**\n * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image should be opened on click.\n */\n shouldOpenImageOnClick?: boolean;\n /**\n * Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n */\n shouldPreventLayoutAnimation?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldForceBackground = false,\n shouldHideBottomLine = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldOpenImageOnClick = false,\n shouldPreventLayoutAnimation = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const isInitialRenderRef = useRef(true);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable && !shouldHideIndicator) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' || isExpandable;\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n $isClickable={isClickable}\n $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isInAccordion","$shouldHideIndicator","_ref2","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","$shouldHideBottomLine","accordionLines","_ref5"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isInAccordion","$shouldHideIndicator","_ref2","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","$shouldHideBottomLine","accordionLines","_ref5"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isInAccordion: boolean;\n $isWrapped: boolean;\n $shouldHideIndicator: boolean;\n $shouldForceBackground?: boolean;\n $shouldShowSeparatorBelow: boolean;\n $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n $isInAccordion &&\n css`\n padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n `}\n\n ${({ $isInAccordion, $isOpen, $shouldForceBackground, theme }) =>\n ((!$isInAccordion && $isOpen) || $shouldForceBackground) &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n ${({ $isClickable, $isInAccordion, theme }) =>\n $isClickable &&\n !$isInAccordion &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({\n $isOpen,\n $isInAccordion,\n $isWrapped,\n $shouldShowSeparatorBelow,\n $shouldHideBottomLine,\n theme,\n }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow ||\n ((!$isOpen || $isWrapped || $isInAccordion) &&\n theme.accordionLines &&\n !$shouldHideBottomLine)) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC,cAAc;IAAEC;EAA0C,CAAC,GAAAF,IAAA;EAAA,OAC5DC,cAAc,IACdJ,GAAG;AACX,4BAA4BK,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,cAAc;IAAEG,OAAO;IAAEC,sBAAsB;IAAEC;EAAM,CAAC,GAAAH,KAAA;EAAA,OACzD,CAAE,CAACF,cAAc,IAAIG,OAAO,IAAKC,sBAAsB,KACvDR,GAAG;AACX,qCAAqCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAER,cAAc;IAAEK;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtCC,YAAY,IACZ,CAACR,cAAc,IACfJ,GAAG;AACX;AACA,yCAAyCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IACCN,OAAO;IACPH,cAAc;IACdU,UAAU;IACVC,yBAAyB;IACzBC,qBAAqB;IACrBP;EACiB,CAAC,GAAAI,KAAA;EAAA,OAClB,CAACE,yBAAyB,IACrB,CAAC,CAACR,OAAO,IAAIO,UAAU,IAAIV,cAAc,KACtCK,KAAK,CAACQ,cAAc,IACpB,CAACD,qBAAsB,KAC/BhB,GAAG;AACX;AACA,iCAAiCe,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEJ;EAAW,CAAC,GAAAI,KAAA;EAAA,OACbJ,UAAU,IACVd,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBody.styles.js","names":["motion","styled","StyledMotionListItemBody","div"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"ListItemBody.styles.js","names":["motion","styled","StyledMotionListItemBody","div"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMotionListItemBody = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC9E;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","_ref6","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","_ref9","$width","StyledListItemHeadTitleTextPseudo","_ref10","_ref11","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref12","_ref13","StyledListItemHeadSubtitleTextPseudo","_ref14","_ref15","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from '
|
|
1
|
+
{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","_ref6","$marginTop","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","span","_ref7","_ref8","_ref9","$width","StyledListItemHeadTitleTextPseudo","_ref10","_ref11","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref12","_ref13","StyledListItemHeadSubtitleTextPseudo","_ref14","_ref15","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled(motion.div)<StyledListItemHeadProps>`\n //align-items: center;\n overflow: hidden;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n min-height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledListItemHeadLeftWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0;\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n $marginTop: number;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: start;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n margin-top: ${({ $marginTop }) => $marginTop}px;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n position: relative;\n`;\n\nexport const StyledListItemHeadTitleElement = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean; $width: number }>;\n\nexport const StyledListItemHeadTitleText = styled(motion.span)<StyledListItemHeadTitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n min-width: ${({ $isOpen, $width }) => ($isOpen ? `${$width}px` : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\ntype StyledListItemHeadTitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleTextPseudo = styled.span<StyledListItemHeadTitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n position: absolute;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextPseudoProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleTextPseudo = styled.span<StyledListItemHeadSubtitleTextPseudoProps>`\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n overflow: hidden;\n text-overflow: ellipsis;\n\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n\n opacity: 0;\n pointer-events: none;\n user-select: none;\n\n position: absolute;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n flex-shrink: 0;\n margin: auto 0;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MediaType, openMedia } from 'chayns-api';
|
|
2
2
|
import React, { useCallback, useState } from 'react';
|
|
3
3
|
import GridImage from '../../../../grid-image/GridImage';
|
|
4
|
-
import { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
|
|
4
|
+
import { StyledListImageWrapper, StyledListImageWrapperImage, StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';
|
|
5
5
|
const ListItemImage = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
imageBackground,
|
|
@@ -42,6 +42,14 @@ const ListItemImage = _ref => {
|
|
|
42
42
|
onClick: handleImageClick
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
|
+
if (images && images[0] && images[1]) {
|
|
46
|
+
return /*#__PURE__*/React.createElement(StyledListImageWrapper, null, /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
|
|
47
|
+
src: images[0]
|
|
48
|
+
}), /*#__PURE__*/React.createElement(StyledListImageWrapperImage, {
|
|
49
|
+
src: images[1],
|
|
50
|
+
$isSecondImage: true
|
|
51
|
+
}));
|
|
52
|
+
}
|
|
45
53
|
if (images && images[0]) {
|
|
46
54
|
return /*#__PURE__*/React.createElement(StyledListItemHeadImageWrapper, {
|
|
47
55
|
onClick: handleImageClick,
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","$background","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["MediaType","openMedia","React","useCallback","useState","GridImage","StyledListImageWrapper","StyledListImageWrapperImage","StyledListItemHeadImage","StyledListItemHeadImageWrapper","ListItemImage","_ref","imageBackground","images","shouldHideBackground","shouldShowRoundImage","shouldOpenImageOnClick","hasLoadedImage","setHasLoadedImage","handleImageLoaded","handleImageClick","event","preventDefault","stopPropagation","items","map","image","url","mediaType","IMAGE","startIndex","gridImages","createElement","background","size","onClick","src","$isSecondImage","$background","$shouldHideBackground","$shouldShowRoundImage","$isHidden","onLoad","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import { MediaType, openMedia, OpenMediaItem } from 'chayns-api';\nimport React, { CSSProperties, MouseEventHandler, useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport {\n StyledListImageWrapper,\n StyledListImageWrapperImage,\n StyledListItemHeadImage,\n StyledListItemHeadImageWrapper,\n} from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n imageBackground?: CSSProperties['background'];\n images: string[];\n shouldHideBackground: boolean;\n shouldShowRoundImage: boolean;\n shouldOpenImageOnClick: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({\n imageBackground,\n images,\n shouldHideBackground,\n shouldShowRoundImage,\n shouldOpenImageOnClick,\n}) => {\n const [hasLoadedImage, setHasLoadedImage] = useState(false);\n const handleImageLoaded = useCallback(() => {\n setHasLoadedImage(true);\n }, []);\n\n const handleImageClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (!shouldOpenImageOnClick) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const items: OpenMediaItem[] = images.map((image) => ({\n url: image,\n mediaType: MediaType.IMAGE,\n }));\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n void openMedia({ items, startIndex: 0 });\n },\n [images, shouldOpenImageOnClick],\n );\n\n if (images && images[0] && images[1] && images[2]) {\n const gridImages = [images[0], images[1], images[2]];\n\n return (\n <GridImage\n background={imageBackground}\n images={gridImages}\n shouldShowRoundImage={shouldShowRoundImage}\n size={40}\n onClick={handleImageClick}\n />\n );\n }\n\n if (images && images[0] && images[1]) {\n return (\n <StyledListImageWrapper>\n <StyledListImageWrapperImage src={images[0]} />\n <StyledListImageWrapperImage src={images[1]} $isSecondImage />\n </StyledListImageWrapper>\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper\n onClick={handleImageClick}\n $background={imageBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldShowRoundImage={shouldShowRoundImage}\n >\n <StyledListItemHeadImage\n $isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n src={images[0]}\n />\n </StyledListItemHeadImageWrapper>\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js
CHANGED
|
@@ -51,4 +51,30 @@ export const StyledListItemHeadImage = styled.img`
|
|
|
51
51
|
transition: opacity 0.4s ease;
|
|
52
52
|
width: 100%;
|
|
53
53
|
`;
|
|
54
|
+
export const StyledListImageWrapper = styled.div`
|
|
55
|
+
position: relative;
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
width: 40px;
|
|
59
|
+
height: 40px;
|
|
60
|
+
`;
|
|
61
|
+
export const StyledListImageWrapperImage = styled.img`
|
|
62
|
+
border-radius: 100px;
|
|
63
|
+
height: calc(80%);
|
|
64
|
+
aspect-ratio: 1;
|
|
65
|
+
position: absolute;
|
|
66
|
+
|
|
67
|
+
${_ref6 => {
|
|
68
|
+
let {
|
|
69
|
+
$isSecondImage
|
|
70
|
+
} = _ref6;
|
|
71
|
+
return $isSecondImage ? css`
|
|
72
|
+
bottom: 0;
|
|
73
|
+
right: 0;
|
|
74
|
+
` : css`
|
|
75
|
+
top: 0;
|
|
76
|
+
left: 0;
|
|
77
|
+
`;
|
|
78
|
+
}}
|
|
79
|
+
`;
|
|
54
80
|
//# sourceMappingURL=ListItemImage.styles.js.map
|
package/lib/esm/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","$background","theme","_ref4","StyledListItemHeadImage","img","_ref5","$isHidden"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition:\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n width: 40px;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n ${({ $shouldHideBackground }) =>\n !$shouldHideBackground &&\n css`\n background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n inset;\n `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: 100%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEC,WAAW;MAAEC;IAA2C,CAAC,GAAAF,KAAA;IAAA,OACtEC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;EAAA;AAC3E;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA2C,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC3F;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemImage.styles.js","names":["styled","css","StyledListItemHeadImageWrapper","div","_ref","$shouldShowRoundImage","undefined","_ref2","$shouldHideBackground","_ref3","$background","theme","_ref4","StyledListItemHeadImage","img","_ref5","$isHidden","StyledListImageWrapper","StyledListImageWrapperImage","_ref6","$isSecondImage"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldHideBackground?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition:\n background-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease;\n width: 40px;\n\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n\n ${({ $shouldHideBackground }) =>\n !$shouldHideBackground &&\n css`\n background: ${({ $background, theme }: StyledListItemHeadImageWrapperProps) =>\n $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08)\n inset;\n `}\n`;\n\ntype StyledListItemHeadImageProps = WithTheme<{\n $isHidden: boolean;\n}>;\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: 100%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n\nexport const StyledListImageWrapper = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n width: 40px;\n height: 40px;\n`;\n\nexport type StyledListImageWrapperImageProps = {\n $isSecondImage?: boolean;\n};\n\nexport const StyledListImageWrapperImage = styled.img<StyledListImageWrapperImageProps>`\n border-radius: 100px;\n height: calc(80%);\n aspect-ratio: 1;\n position: absolute;\n\n ${({ $isSecondImage }) =>\n $isSecondImage\n ? css`\n bottom: 0;\n right: 0;\n `\n : css`\n top: 0;\n left: 0;\n `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,8BAA8B,GAAGF,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OAAMC,qBAAqB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAC;AAC/F;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxB,CAACC,qBAAqB,IACtBP,GAAG;AACX,0BAA0BQ,KAAA;IAAA,IAAC;MAAEC,WAAW;MAAEC;IAA2C,CAAC,GAAAF,KAAA;IAAA,OACtEC,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;EAAA;AAC3E;AACA,uBAAuBC,KAAA;IAAA,IAAC;MAAED;IAA2C,CAAC,GAAAC,KAAA;IAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;EAAA;AAC3F;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAME,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AACrD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,2BAA2B,GAAGlB,MAAM,CAACc,GAAqC;AACvF;AACA;AACA;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OACjBC,cAAc,GACRnB,GAAG;AACjB;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnimatePresence } from '
|
|
1
|
+
import { AnimatePresence } from 'motion/react';
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import MentionFinderItem from './mention-finder-item/MentionFinderItem';
|
|
4
4
|
import { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
|