@chayns-components/core 5.0.0-beta.541 → 5.0.0-beta.543
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') || document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n // setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n if (shouldShowOnHover) {\n if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n handleHide();\n }\n\n if (\n event.relatedTarget &&\n (event.relatedTarget === popupContentRef.current ||\n popupContentRef.current?.contains(event.relatedTarget as Node))\n ) {\n return;\n }\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') || document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n if (shouldShowOnHover) {\n if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n handleHide();\n }\n\n if (\n event.relatedTarget &&\n (event.relatedTarget === popupContentRef.current ||\n popupContentRef.current?.contains(event.relatedTarget as Node))\n ) {\n return;\n }\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEventHandler, FC, FocusEventHandler } from 'react';
|
|
1
|
+
import { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
|
|
2
2
|
import type { ISearchBoxItem } from '../../types/searchBox';
|
|
3
3
|
export type SearchBoxRef = {
|
|
4
4
|
clear: VoidFunction;
|
|
@@ -20,6 +20,10 @@ export type SearchBoxProps = {
|
|
|
20
20
|
* Function to be executed when the input is changed.
|
|
21
21
|
*/
|
|
22
22
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Function that is executed when a letter is pressed
|
|
25
|
+
*/
|
|
26
|
+
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
23
27
|
/**
|
|
24
28
|
* Function to be executed when an item is selected.
|
|
25
29
|
*/
|
|
@@ -13,6 +13,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
13
13
|
onChange,
|
|
14
14
|
onBlur,
|
|
15
15
|
onSelect,
|
|
16
|
+
onKeyDown,
|
|
16
17
|
selectedId,
|
|
17
18
|
shouldShowRoundImage,
|
|
18
19
|
shouldShowContentOnEmptyInput = true
|
|
@@ -249,6 +250,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
249
250
|
onBlur: handleBlur,
|
|
250
251
|
onFocus: handleFocus,
|
|
251
252
|
placeholder: placeholder,
|
|
253
|
+
onKeyDown: onKeyDown,
|
|
252
254
|
value: value
|
|
253
255
|
})), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
254
256
|
initial: false
|
|
@@ -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","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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"}
|
|
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","onKeyDown","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 KeyboardEventHandler,\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 that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<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 onKeyDown,\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 onKeyDown={onKeyDown}\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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"}
|
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.543",
|
|
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": "c5e99e007c5a86f400b6ce318684638bd1165bb4"
|
|
77
77
|
}
|