@chayns-components/core 5.0.0-beta.531 → 5.0.0-beta.533
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/components/file-input/FileInput.js +8 -4
- package/lib/components/file-input/FileInput.js.map +1 -1
- package/lib/components/search-box/SearchBox.js +4 -4
- package/lib/components/search-box/SearchBox.js.map +1 -1
- package/lib/components/search-box/SearchBox.styles.d.ts +0 -1
- package/lib/components/search-box/SearchBox.styles.js +0 -4
- package/lib/components/search-box/SearchBox.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -26,11 +26,15 @@ const FileInput = _ref => {
|
|
|
26
26
|
newFileItems.push(file);
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
let tmp = newFileItems;
|
|
30
|
+
if (maxFiles) {
|
|
31
|
+
tmp = newFileItems.slice(0, maxFiles - internalFiles.length);
|
|
32
|
+
}
|
|
33
|
+
if (tmp.length > 0 && typeof onAdd === 'function') {
|
|
34
|
+
onAdd(tmp);
|
|
31
35
|
}
|
|
32
|
-
setInternalFiles(prevState => [...prevState, ...
|
|
33
|
-
}, [internalFiles, onAdd]);
|
|
36
|
+
setInternalFiles(prevState => [...prevState, ...tmp]);
|
|
37
|
+
}, [internalFiles, maxFiles, onAdd]);
|
|
34
38
|
const handleDeleteFile = useCallback(fileName => {
|
|
35
39
|
let fileToDelete;
|
|
36
40
|
const filteredFiles = internalFiles.filter(file => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledMotionFileInputList","FileInput","_ref","icons","onMaxFilesReached","maxFiles","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","handleAddFiles","files","newFileItems","forEach","file","newFile","push","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","isDisabled","handleClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","items","map","createElement","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","$isDisabled","onClick","onDragOver","onDrop","initial","displayName"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } 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 StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n icons?: string[];\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[]) => 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) => void;\n /**\n * The text that should be displayed inside the FileInput\n */\n placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n icons = ['fa fa-upload'],\n onMaxFilesReached,\n maxFiles,\n onRemove,\n onAdd,\n placeholder = 'Dateien hinzufügen',\n}) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n const handleAddFiles = useCallback(\n (files: File[]) => {\n const newFileItems: File[] = [];\n\n files.forEach((file) => {\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n if (newFileItems.length > 0 && typeof onAdd === 'function') {\n onAdd(newFileItems);\n }\n\n setInternalFiles((prevState) => [...prevState, ...newFileItems]);\n },\n [internalFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | 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 || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [internalFiles, onRemove],\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, maxFiles, onMaxFilesReached]);\n\n const handleClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const files = await selectFiles({\n multiple: true,\n });\n\n handleAddFiles(files);\n }, [handleAddFiles, isDisabled]);\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 items: ReactElement[] = internalFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={file.type}\n fileName={file.name}\n fileSize={file.size}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputContainer\n $isDisabled={isDisabled}\n onClick={() => void handleClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={icons} />\n <StyledFileInputText>{placeholder}</StyledFileInputText>\n </StyledFileInputContainer>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n </StyledFileInput>\n ),\n [content, handleClick, handleDrop, icons, isDisabled, placeholder],\n );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["AnimatePresence","React","useCallback","useMemo","useState","filterDuplicateFile","selectFiles","Icon","List","FileListItem","StyledFileInput","StyledFileInputContainer","StyledFileInputText","StyledMotionFileInputList","FileInput","_ref","icons","onMaxFilesReached","maxFiles","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","handleAddFiles","files","newFileItems","forEach","file","newFile","push","tmp","slice","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","isDisabled","handleClick","multiple","handleDrop","e","preventDefault","draggedFiles","Array","from","dataTransfer","content","items","map","createElement","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","$isDisabled","onClick","onDragOver","onDrop","initial","displayName"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } 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 StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n icons?: string[];\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[]) => 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) => void;\n /**\n * The text that should be displayed inside the FileInput\n */\n placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n icons = ['fa fa-upload'],\n onMaxFilesReached,\n maxFiles,\n onRemove,\n onAdd,\n placeholder = 'Dateien hinzufügen',\n}) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n const handleAddFiles = useCallback(\n (files: File[]) => {\n const newFileItems: File[] = [];\n\n files.forEach((file) => {\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(0, maxFiles - internalFiles.length);\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [internalFiles, maxFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | 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 || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [internalFiles, onRemove],\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, maxFiles, onMaxFilesReached]);\n\n const handleClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const files = await selectFiles({\n multiple: true,\n });\n\n handleAddFiles(files);\n }, [handleAddFiles, isDisabled]);\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 items: ReactElement[] = internalFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={file.type}\n fileName={file.name}\n fileSize={file.size}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputContainer\n $isDisabled={isDisabled}\n onClick={() => void handleClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={icons} />\n <StyledFileInputText>{placeholder}</StyledFileInputText>\n </StyledFileInputContainer>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n </StyledFileInput>\n ),\n [content, handleClick, handleDrop, icons, isDisabled, placeholder],\n );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { calculateContentHeight } from '../../utils/calculate';
|
|
|
5
5
|
import { searchList } from '../../utils/searchBox';
|
|
6
6
|
import Input from '../input/Input';
|
|
7
7
|
import SearchBoxItem from './search-box-item/SearchBoxItem';
|
|
8
|
-
import { StyledMotionSearchBoxBody, StyledSearchBox
|
|
8
|
+
import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
|
|
9
9
|
const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
10
10
|
let {
|
|
11
11
|
placeholder,
|
|
@@ -47,6 +47,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
47
47
|
window.addEventListener('blur', () => setIsAnimating(false));
|
|
48
48
|
return () => {
|
|
49
49
|
document.removeEventListener('click', handleOutsideClick);
|
|
50
|
+
window.addEventListener('blur', () => setIsAnimating(false));
|
|
50
51
|
};
|
|
51
52
|
}, [handleOutsideClick, boxRef]);
|
|
52
53
|
|
|
@@ -270,11 +271,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
270
271
|
transition: {
|
|
271
272
|
duration: 0.2,
|
|
272
273
|
type: 'tween'
|
|
273
|
-
}
|
|
274
|
-
}, /*#__PURE__*/React.createElement(StyledSearchBoxContent, {
|
|
274
|
+
},
|
|
275
275
|
ref: contentRef,
|
|
276
276
|
tabIndex: 0
|
|
277
|
-
}, content)))
|
|
277
|
+
}, content))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
|
|
278
278
|
});
|
|
279
279
|
SearchBox.displayName = 'SearchBox';
|
|
280
280
|
export default SearchBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","StyledSearchBoxContent","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport {\n StyledMotionSearchBoxBody,\n StyledSearchBox,\n StyledSearchBoxContent,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * A list of items that can be searched.\n */\n list: ISearchBoxItem[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n list,\n onChange,\n onBlur,\n onSelect,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n },\n ref,\n ) => {\n const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLAnchorElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n };\n }, [handleOutsideClick, boxRef]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n }, [list, placeholder]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n const selectedItem = list.find(({ id }) => id === selectedId);\n\n if (selectedItem) {\n setValue(selectedItem.text);\n }\n }\n }, [list, selectedId]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n setMatchingItems(newMatchingItems);\n setIsAnimating(true);\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n useEffect(() => {\n if (list) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n if (shouldShowContentOnEmptyInput || value !== '') {\n setMatchingItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n if (\n (!shouldShowContentOnEmptyInput && !event.target.value) ||\n (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n ) {\n setMatchingItems([]);\n } else {\n setMatchingItems(searchedItems);\n setIsAnimating(searchedItems.length !== 0);\n }\n\n setValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [list, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n setValue(item.text);\n setIsAnimating(false);\n setMatchingItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(item);\n }\n },\n [onSelect],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n matchingItems.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={id}\n text={text}\n imageUrl={imageUrl}\n id={id}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n />,\n );\n });\n\n return items;\n }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n >\n <StyledSearchBoxContent ref={contentRef} tabIndex={0}>\n {content}\n </StyledSearchBoxContent>\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n placeholder,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * A list of items that can be searched.\n */\n list: ISearchBoxItem[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n list,\n onChange,\n onBlur,\n onSelect,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n },\n ref,\n ) => {\n const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n };\n }, [handleOutsideClick, boxRef]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n }, [list, placeholder]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n const selectedItem = list.find(({ id }) => id === selectedId);\n\n if (selectedItem) {\n setValue(selectedItem.text);\n }\n }\n }, [list, selectedId]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n setMatchingItems(newMatchingItems);\n setIsAnimating(true);\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n useEffect(() => {\n if (list) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n if (shouldShowContentOnEmptyInput || value !== '') {\n setMatchingItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n if (\n (!shouldShowContentOnEmptyInput && !event.target.value) ||\n (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n ) {\n setMatchingItems([]);\n } else {\n setMatchingItems(searchedItems);\n setIsAnimating(searchedItems.length !== 0);\n }\n\n setValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [list, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n setValue(item.text);\n setIsAnimating(false);\n setMatchingItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(item);\n }\n },\n [onSelect],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n matchingItems.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={id}\n text={text}\n imageUrl={imageUrl}\n id={id}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n />,\n );\n });\n\n return items;\n }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n ref={contentRef}\n tabIndex={0}\n >\n {content}\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n placeholder,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
|
|
@@ -271,5 +271,4 @@ export declare const StyledMotionSearchBoxBody: import("styled-components").ISty
|
|
|
271
271
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
272
272
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
273
273
|
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionSearchBoxBodyProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
274
|
-
export declare const StyledSearchBoxContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
|
|
275
274
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser"
|
|
1
|
+
{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $height: number;\n $width: number;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['001']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n width: ${({ $width }) => $width}px;\n max-height: 300px;\n overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAI,EAAC;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC5F,kBAAkBE,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACxE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAI;AAClB,0CAA0CK,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDL,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.533",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "7ea216ad48608d0b5e53af582522c178af6c1610"
|
|
77
77
|
}
|