@chayns-components/core 5.0.0-beta.1069 → 5.0.0-beta.1071
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 +1 -1
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +4 -2
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.js +4 -4
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.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/list/list-item/ListItem.js +4 -2
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js +5 -5
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js.map +1 -1
- package/lib/types/components/list/list-item/ListItem.d.ts +4 -0
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.d.ts +1 -0
- package/package.json +2 -2
|
@@ -151,7 +151,7 @@ const Accordion = ({
|
|
|
151
151
|
},
|
|
152
152
|
$isOpen: isOpen,
|
|
153
153
|
$shouldShowLines: !isLastAccordion || !isWrapped,
|
|
154
|
-
$isParentWrapped: isParentWrapped
|
|
154
|
+
$isParentWrapped: isParentWrapped,
|
|
155
155
|
$isWrapped: isWrapped,
|
|
156
156
|
$shouldForceBackground: shouldForceBackground,
|
|
157
157
|
$shouldHideBackground: shouldHideBackground,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledMotionAccordion","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped || groupIsWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledMotionAccordion","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -41,6 +41,7 @@ const ListItem = ({
|
|
|
41
41
|
shouldShowRoundImageOrIcon,
|
|
42
42
|
shouldShowSeparatorBelow = false,
|
|
43
43
|
shouldForceHover = false,
|
|
44
|
+
shouldRenderClosed = false,
|
|
44
45
|
subtitle,
|
|
45
46
|
title,
|
|
46
47
|
titleElement
|
|
@@ -148,9 +149,10 @@ const ListItem = ({
|
|
|
148
149
|
titleElement: titleElement
|
|
149
150
|
}), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
150
151
|
initial: false
|
|
151
|
-
}, isExpandable && isItemOpen && /*#__PURE__*/_react2.default.createElement(_ListItemBody.default, {
|
|
152
|
+
}, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/_react2.default.createElement(_ListItemBody.default, {
|
|
152
153
|
id: uuid,
|
|
153
|
-
key: `listItemBody-${uuid}
|
|
154
|
+
key: `listItemBody-${uuid}`,
|
|
155
|
+
shouldHideBody: shouldRenderClosed && !isItemOpen
|
|
154
156
|
}, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, null, children))));
|
|
155
157
|
};
|
|
156
158
|
ListItem.displayName = 'ListItem';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","isInitialRenderRef","useRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"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 locationId of the care-of site.\n */\n careOfLocationId?: number;\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 hover item should be forced.\n */\n shouldForceHover?: 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 careOfLocationId,\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 shouldForceHover = 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 careOfLocationId={careOfLocationId}\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 shouldForceHover={shouldForceHover}\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} key={`listItemBody-${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":["_react","require","_react2","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","shouldRenderClosed","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","isInitialRenderRef","useRef","uuid","useUuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","event","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","AnimatePresence","id","shouldHideBody","displayName","_default","exports"],"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 locationId of the care-of site.\n */\n careOfLocationId?: number;\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 hover item should be forced.\n */\n shouldForceHover?: 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 * This will render the ListItem closed on the first render.\n */\n shouldRenderClosed?: 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 careOfLocationId,\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 shouldForceHover = false,\n shouldRenderClosed = 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 careOfLocationId={careOfLocationId}\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 shouldForceHover={shouldForceHover}\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 || shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\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":[]}
|
|
@@ -10,15 +10,15 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
11
|
const ListItemBody = ({
|
|
12
12
|
children,
|
|
13
|
-
id
|
|
13
|
+
id,
|
|
14
|
+
shouldHideBody
|
|
14
15
|
}) => {
|
|
15
16
|
const containerRef = (0, _react.useRef)(null);
|
|
16
|
-
const [height] = (0, _react.useState)('auto');
|
|
17
17
|
return /*#__PURE__*/_react.default.createElement(_ListItemBody.StyledMotionListItemBody, {
|
|
18
18
|
key: id,
|
|
19
19
|
animate: {
|
|
20
|
-
height,
|
|
21
|
-
opacity: 1
|
|
20
|
+
height: shouldHideBody ? '0' : 'auto',
|
|
21
|
+
opacity: shouldHideBody ? 0 : 1
|
|
22
22
|
},
|
|
23
23
|
className: "beta-chayns-list-item-body",
|
|
24
24
|
exit: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBody.js","names":["_react","_interopRequireWildcard","require","_ListItemBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemBody","children","id","
|
|
1
|
+
{"version":3,"file":"ListItemBody.js","names":["_react","_interopRequireWildcard","require","_ListItemBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemBody","children","id","shouldHideBody","containerRef","useRef","createElement","StyledMotionListItemBody","key","animate","height","opacity","className","exit","initial","transition","type","ref","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n children?: ReactNode;\n id: string;\n shouldHideBody: boolean;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id, shouldHideBody }) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n return (\n <StyledMotionListItemBody\n key={id}\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-list-item-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n transition={{ type: 'tween' }}\n >\n <div ref={containerRef}>{children}</div>\n </StyledMotionListItemBody>\n );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAiE,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQjE,MAAMW,YAAmC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAe,CAAC,KAAK;EAC9E,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAExD,oBACI7B,MAAA,CAAAU,OAAA,CAAAoB,aAAA,CAAC3B,aAAA,CAAA4B,wBAAwB;IACrBC,GAAG,EAAEN,EAAG;IACRO,OAAO,EAAE;MAAEC,MAAM,EAAEP,cAAc,GAAG,GAAG,GAAG,MAAM;MAAEQ,OAAO,EAAER,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFS,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BxC,MAAA,CAAAU,OAAA,CAAAoB,aAAA;IAAKW,GAAG,EAAEb;EAAa,GAAEH,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDD,YAAY,CAACkB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAE3Bc,YAAY","ignoreList":[]}
|
|
@@ -143,7 +143,7 @@ const Accordion = _ref => {
|
|
|
143
143
|
},
|
|
144
144
|
$isOpen: isOpen,
|
|
145
145
|
$shouldShowLines: !isLastAccordion || !isWrapped,
|
|
146
|
-
$isParentWrapped: isParentWrapped
|
|
146
|
+
$isParentWrapped: isParentWrapped,
|
|
147
147
|
$isWrapped: isWrapped,
|
|
148
148
|
$shouldForceBackground: shouldForceBackground,
|
|
149
149
|
$shouldHideBackground: shouldHideBackground,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","undefined","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped || groupIsWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","undefined","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -33,6 +33,7 @@ const ListItem = _ref => {
|
|
|
33
33
|
shouldShowRoundImageOrIcon,
|
|
34
34
|
shouldShowSeparatorBelow = false,
|
|
35
35
|
shouldForceHover = false,
|
|
36
|
+
shouldRenderClosed = false,
|
|
36
37
|
subtitle,
|
|
37
38
|
title,
|
|
38
39
|
titleElement
|
|
@@ -140,9 +141,10 @@ const ListItem = _ref => {
|
|
|
140
141
|
titleElement: titleElement
|
|
141
142
|
}), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
142
143
|
initial: false
|
|
143
|
-
}, isExpandable && isItemOpen && /*#__PURE__*/React.createElement(ListItemBody, {
|
|
144
|
+
}, isExpandable && (isItemOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(ListItemBody, {
|
|
144
145
|
id: uuid,
|
|
145
|
-
key: `listItemBody-${uuid}
|
|
146
|
+
key: `listItemBody-${uuid}`,
|
|
147
|
+
shouldHideBody: shouldRenderClosed && !isItemOpen
|
|
146
148
|
}, /*#__PURE__*/React.createElement(AreaContextProvider, null, children))));
|
|
147
149
|
};
|
|
148
150
|
ListItem.displayName = 'ListItem';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","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 locationId of the care-of site.\n */\n careOfLocationId?: number;\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 hover item should be forced.\n */\n shouldForceHover?: 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 careOfLocationId,\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 shouldForceHover = 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 careOfLocationId={careOfLocationId}\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 shouldForceHover={shouldForceHover}\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} key={`listItemBody-${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","careOfLocationId","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","shouldForceHover","shouldRenderClosed","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","shouldHideBody","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 locationId of the care-of site.\n */\n careOfLocationId?: number;\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 hover item should be forced.\n */\n shouldForceHover?: 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 * This will render the ListItem closed on the first render.\n */\n shouldRenderClosed?: 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 careOfLocationId,\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 shouldForceHover = false,\n shouldRenderClosed = 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 careOfLocationId={careOfLocationId}\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 shouldForceHover={shouldForceHover}\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 || shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\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,17 +1,17 @@
|
|
|
1
|
-
import React, { useRef
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import { StyledMotionListItemBody } from './ListItemBody.styles';
|
|
3
3
|
const ListItemBody = _ref => {
|
|
4
4
|
let {
|
|
5
5
|
children,
|
|
6
|
-
id
|
|
6
|
+
id,
|
|
7
|
+
shouldHideBody
|
|
7
8
|
} = _ref;
|
|
8
9
|
const containerRef = useRef(null);
|
|
9
|
-
const [height] = useState('auto');
|
|
10
10
|
return /*#__PURE__*/React.createElement(StyledMotionListItemBody, {
|
|
11
11
|
key: id,
|
|
12
12
|
animate: {
|
|
13
|
-
height,
|
|
14
|
-
opacity: 1
|
|
13
|
+
height: shouldHideBody ? '0' : 'auto',
|
|
14
|
+
opacity: shouldHideBody ? 0 : 1
|
|
15
15
|
},
|
|
16
16
|
className: "beta-chayns-list-item-body",
|
|
17
17
|
exit: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBody.js","names":["React","useRef","
|
|
1
|
+
{"version":3,"file":"ListItemBody.js","names":["React","useRef","StyledMotionListItemBody","ListItemBody","_ref","children","id","shouldHideBody","containerRef","createElement","key","animate","height","opacity","className","exit","initial","transition","type","ref","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n children?: ReactNode;\n id: string;\n shouldHideBody: boolean;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id, shouldHideBody }) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n return (\n <StyledMotionListItemBody\n key={id}\n animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n className=\"beta-chayns-list-item-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n transition={{ type: 'tween' }}\n >\n <div ref={containerRef}>{children}</div>\n </StyledMotionListItemBody>\n );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,MAAM,QAAkB,OAAO;AAC9D,SAASC,wBAAwB,QAAQ,uBAAuB;AAQhE,MAAMC,YAAmC,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,QAAQ;IAAEC,EAAE;IAAEC;EAAe,CAAC,GAAAH,IAAA;EACzE,MAAMI,YAAY,GAAGP,MAAM,CAAwB,IAAI,CAAC;EAExD,oBACID,KAAA,CAAAS,aAAA,CAACP,wBAAwB;IACrBQ,GAAG,EAAEJ,EAAG;IACRK,OAAO,EAAE;MAAEC,MAAM,EAAEL,cAAc,GAAG,GAAG,GAAG,MAAM;MAAEM,OAAO,EAAEN,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFO,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BlB,KAAA,CAAAS,aAAA;IAAKU,GAAG,EAAEX;EAAa,GAAEH,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDF,YAAY,CAACiB,WAAW,GAAG,cAAc;AAEzC,eAAejB,YAAY","ignoreList":[]}
|
|
@@ -104,6 +104,10 @@ export type ListItemProps = {
|
|
|
104
104
|
* is not desired.
|
|
105
105
|
*/
|
|
106
106
|
shouldPreventLayoutAnimation?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* This will render the ListItem closed on the first render.
|
|
109
|
+
*/
|
|
110
|
+
shouldRenderClosed?: boolean;
|
|
107
111
|
/**
|
|
108
112
|
* Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.
|
|
109
113
|
*/
|
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.1071",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "ff681651c1bb051ab3e5e7f9c91177f7f07775f4"
|
|
90
90
|
}
|