@chayns-components/core 5.0.0-beta.1066 → 5.0.0-beta.1069
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/filter-buttons/FilterButtons.js +4 -2
- package/lib/cjs/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js +7 -2
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +10 -3
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/types/filterButtons.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/filter-buttons/FilterButtons.js +4 -2
- package/lib/esm/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js +7 -2
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +34 -21
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/types/filterButtons.js.map +1 -1
- package/lib/types/components/filter-buttons/filter-button/FilterButton.d.ts +1 -0
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +1 -0
- package/lib/types/types/filterButtons.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 || groupIsWrapped,
|
|
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}\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 || 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":[]}
|
|
@@ -71,7 +71,8 @@ const FilterButtons = ({
|
|
|
71
71
|
text,
|
|
72
72
|
color,
|
|
73
73
|
count,
|
|
74
|
-
id
|
|
74
|
+
id,
|
|
75
|
+
isDisabled
|
|
75
76
|
}) => {
|
|
76
77
|
array.push(/*#__PURE__*/_react.default.createElement(_FilterButton.default, {
|
|
77
78
|
color: color,
|
|
@@ -83,7 +84,8 @@ const FilterButtons = ({
|
|
|
83
84
|
isSelected: selectedIds.includes(id),
|
|
84
85
|
shape: _filterButtons.FilterButtonItemShape.Round,
|
|
85
86
|
size: size,
|
|
86
|
-
text: text
|
|
87
|
+
text: text,
|
|
88
|
+
isDisabled: isDisabled
|
|
87
89
|
}));
|
|
88
90
|
});
|
|
89
91
|
return array;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButtons.js","names":["_react","_interopRequireWildcard","require","_filterButtons","_FilterButton","_interopRequireDefault","_FilterButtons","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","FilterButtonSize","Normal","selectedIds","setSelectedIds","useState","useEffect","handleSelect","useCallback","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","useMemo","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","FilterButtonItemShape","Rectangular","text","forEach","icons","color","push","Round","StyledFilterButton","displayName","_default","exports"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <FilterButton\n count={allButtonCount}\n id=\"all\"\n key=\"all\"\n onSelect={handleSelect}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n shape={FilterButtonItemShape.Rectangular}\n size={size}\n text=\"Alle\"\n />,\n ];\n\n items.forEach(({ icons, text, color, count, id }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n />,\n );\n });\n\n return array;\n }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"FilterButtons.js","names":["_react","_interopRequireWildcard","require","_filterButtons","_FilterButton","_interopRequireDefault","_FilterButtons","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","FilterButtonSize","Normal","selectedIds","setSelectedIds","useState","useEffect","handleSelect","useCallback","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","useMemo","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","FilterButtonItemShape","Rectangular","text","forEach","icons","color","isDisabled","push","Round","StyledFilterButton","displayName","_default","exports"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <FilterButton\n count={allButtonCount}\n id=\"all\"\n key=\"all\"\n onSelect={handleSelect}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n shape={FilterButtonItemShape.Rectangular}\n size={size}\n text=\"Alle\"\n />,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n />,\n );\n });\n\n return array;\n }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAA4D,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AA6B5D,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,KAAK;EACLC,qBAAqB,GAAG,KAAK;EAC7BC,IAAI,GAAGC,+BAAgB,CAACC;AAC5B,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAW,CAAC,KAAK,CAAC,CAAC;;EAEjE;AACJ;AACA;EACI,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIV,eAAe,EAAE;MACjBQ,cAAc,CAACR,eAAe,CAAC;IACnC;EACJ,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;;EAErB;AACJ;AACA;EACI,MAAMW,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,EAAU,IAAK;IACZ,IAAIC,MAAgB;IAEpB,IAAID,EAAE,KAAK,KAAK,EAAE;MACdC,MAAM,GAAGP,WAAW,CAACQ,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE;IACvD,CAAC,MAAM;MACHD,MAAM,GAAGP,WAAW,CAACQ,QAAQ,CAACF,EAAE,CAAC,GAC3BN,WAAW,CAACS,MAAM,CAAEC,UAAU,IAAKA,UAAU,KAAKJ,EAAE,CAAC,GACrD,CAAC,GAAGN,WAAW,CAACS,MAAM,CAAEC,UAAU,IAAKA,UAAU,KAAK,KAAK,CAAC,EAAEJ,EAAE,CAAC;IAC3E;IAEA,IAAIC,MAAM,CAACI,MAAM,KAAK,CAAC,EAAE;MACrBJ,MAAM,GAAG,CAAC,KAAK,CAAC;IACpB;IAEAN,cAAc,CAACM,MAAM,CAAC;IAEtB,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACa,MAAM,CAACE,MAAM,CAAEG,UAAU,IAAKA,UAAU,KAAK,KAAK,CAAC,CAAC;IACjE;EACJ,CAAC,EACD,CAAClB,QAAQ,EAAEM,WAAW,CAC1B,CAAC;EAED,MAAMa,UAAU,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC7B,IAAInB,KAAK,CAACgB,MAAM,KAAK,CAAC,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAII,cAAc,GAAGvB,QAAQ;IAE7B,IAAI,OAAOuB,cAAc,KAAK,QAAQ,IAAInB,qBAAqB,EAAE;MAC7DmB,cAAc,GAAGpB,KAAK,CAACqB,MAAM,CAAC,CAACC,GAAG,EAAEC,IAAI,KAAKD,GAAG,IAAIC,IAAI,CAACC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5E;IAEA,MAAMC,KAAqB,GAAG,cAC1BxD,MAAA,CAAAS,OAAA,CAAAgD,aAAA,CAACrD,aAAA,CAAAK,OAAY;MACT8C,KAAK,EAAEJ,cAAe;MACtBT,EAAE,EAAC,KAAK;MACRgB,GAAG,EAAC,KAAK;MACT5B,QAAQ,EAAEU,YAAa;MACvBmB,UAAU,EACNvB,WAAW,CAACQ,QAAQ,CAAC,KAAK,CAAC,IAC1BgB,KAAK,CAACC,OAAO,CAACzB,WAAW,CAAC,IAAIA,WAAW,CAACW,MAAM,KAAK,CACzD;MACDe,KAAK,EAAEC,oCAAqB,CAACC,WAAY;MACzC/B,IAAI,EAAEA,IAAK;MACXgC,IAAI,EAAC;IAAM,CACd,CAAC,CACL;IAEDlC,KAAK,CAACmC,OAAO,CAAC,CAAC;MAAEC,KAAK;MAAEF,IAAI;MAAEG,KAAK;MAAEb,KAAK;MAAEb,EAAE;MAAE2B;IAAW,CAAC,KAAK;MAC7Db,KAAK,CAACc,IAAI,cACNtE,MAAA,CAAAS,OAAA,CAAAgD,aAAA,CAACrD,aAAA,CAAAK,OAAY;QACT2D,KAAK,EAAEA,KAAM;QACbD,KAAK,EAAEA,KAAM;QACbzB,EAAE,EAAEA,EAAG;QACPgB,GAAG,EAAEhB,EAAG;QACRa,KAAK,EAAEA,KAAM;QACbzB,QAAQ,EAAEU,YAAa;QACvBmB,UAAU,EAAEvB,WAAW,CAACQ,QAAQ,CAACF,EAAE,CAAE;QACrCoB,KAAK,EAAEC,oCAAqB,CAACQ,KAAM;QACnCtC,IAAI,EAAEA,IAAK;QACXgC,IAAI,EAAEA,IAAK;QACXI,UAAU,EAAEA;MAAW,CAC1B,CACL,CAAC;IACL,CAAC,CAAC;IAEF,OAAOb,KAAK;EAChB,CAAC,EAAE,CAAC5B,QAAQ,EAAEY,YAAY,EAAET,KAAK,EAAEK,WAAW,EAAEJ,qBAAqB,EAAEC,IAAI,CAAC,CAAC;EAE7E,OAAO,IAAAiB,cAAO,EAAC,mBAAMlD,MAAA,CAAAS,OAAA,CAAAgD,aAAA,CAACnD,cAAA,CAAAkE,kBAAkB,QAAEvB,UAA+B,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;AAC7F,CAAC;AAEDtB,aAAa,CAAC8C,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlE,OAAA,GAE7BkB,aAAa","ignoreList":[]}
|
|
@@ -19,13 +19,18 @@ const FilterButton = ({
|
|
|
19
19
|
count,
|
|
20
20
|
isSelected,
|
|
21
21
|
id,
|
|
22
|
+
isDisabled,
|
|
22
23
|
onSelect
|
|
23
24
|
}) => {
|
|
24
25
|
const handleClick = (0, _react.useCallback)(() => {
|
|
26
|
+
if (isDisabled) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
25
29
|
onSelect(id);
|
|
26
|
-
}, [id, onSelect]);
|
|
30
|
+
}, [id, isDisabled, onSelect]);
|
|
27
31
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItem, {
|
|
28
32
|
$isSelected: isSelected,
|
|
33
|
+
$isDisabled: isDisabled,
|
|
29
34
|
$size: size,
|
|
30
35
|
onClick: handleClick
|
|
31
36
|
}, /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
@@ -39,7 +44,7 @@ const FilterButton = ({
|
|
|
39
44
|
$isSelected: isSelected,
|
|
40
45
|
$shape: shape,
|
|
41
46
|
$color: color
|
|
42
|
-
})), [color, count, handleClick, icons, isSelected, shape, size, text]);
|
|
47
|
+
})), [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text]);
|
|
43
48
|
};
|
|
44
49
|
FilterButton.displayName = 'FilterButton';
|
|
45
50
|
var _default = exports.default = FilterButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_FilterButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FilterButton","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","$isSelected","$size","onClick","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","StyledFilterButtonItemLabelCount","toLocaleString","StyledFilterButtonItemBorder","$shape","$color","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n onSelect(id);\n }, [id, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem
|
|
1
|
+
{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_FilterButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FilterButton","icons","size","shape","text","color","count","isSelected","id","isDisabled","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","$isSelected","$isDisabled","$size","onClick","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","StyledFilterButtonItemLabelCount","toLocaleString","StyledFilterButtonItemBorder","$shape","$color","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n isDisabled?: boolean;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n isDisabled,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n onSelect(id);\n }, [id, isDisabled, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem\n $isSelected={isSelected}\n $isDisabled={isDisabled}\n $size={size}\n onClick={handleClick}\n >\n <StyledFilterButtonItemLabel>\n {icons && <Icon icons={icons} size={15} />}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {typeof count === 'number' && (\n <StyledFilterButtonItemLabelCount>\n {count.toLocaleString()}\n </StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,7 +12,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
12
12
|
const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
|
|
13
13
|
position: relative;
|
|
14
14
|
line-height: 1;
|
|
15
|
-
cursor:
|
|
15
|
+
cursor: ${({
|
|
16
|
+
$isDisabled
|
|
17
|
+
}) => $isDisabled ? 'default' : 'pointer'};
|
|
16
18
|
user-select: none;
|
|
17
19
|
padding: ${({
|
|
18
20
|
$size
|
|
@@ -21,10 +23,15 @@ const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponent
|
|
|
21
23
|
display: flex;
|
|
22
24
|
align-items: center;
|
|
23
25
|
|
|
26
|
+
opacity: ${({
|
|
27
|
+
$isDisabled
|
|
28
|
+
}) => $isDisabled ? '.6' : '1'};
|
|
29
|
+
|
|
24
30
|
&:hover > div:last-child {
|
|
25
31
|
${({
|
|
26
|
-
$isSelected
|
|
27
|
-
|
|
32
|
+
$isSelected,
|
|
33
|
+
$isDisabled
|
|
34
|
+
}) => !$isSelected && !$isDisabled && (0, _styledComponents.css)`
|
|
28
35
|
opacity: 0.2;
|
|
29
36
|
`}
|
|
30
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","$size","FilterButtonSize","Normal","$isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$shape","FilterButtonItemShape","Round","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{
|
|
1
|
+
{"version":3,"file":"FilterButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_filterButtons","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","$isDisabled","$size","FilterButtonSize","Normal","$isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","theme","text","StyledFilterButtonItemLabelCount","StyledFilterButtonItemBorder","$shape","FilterButtonItemShape","Round","$color","headline","StyledMotionFilterButtonItemBackground","motion"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $isSelected: boolean;\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filterButtons.js","names":["FilterButtonItemShape","exports","FilterButtonSize"],"sources":["../../../src/types/filterButtons.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum FilterButtonItemShape {\n Round,\n Rectangular,\n}\nexport enum FilterButtonSize {\n Small,\n Normal,\n}\n\nexport interface IFilterButtonItem {\n id: string;\n text: string;\n color?: CSSProperties['color'];\n icons?: string[];\n count?: number;\n}\n"],"mappings":";;;;;;IAEYA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"filterButtons.js","names":["FilterButtonItemShape","exports","FilterButtonSize"],"sources":["../../../src/types/filterButtons.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum FilterButtonItemShape {\n Round,\n Rectangular,\n}\n\nexport enum FilterButtonSize {\n Small,\n Normal,\n}\n\nexport interface IFilterButtonItem {\n id: string;\n text: string;\n color?: CSSProperties['color'];\n icons?: string[];\n count?: number;\n isDisabled?: boolean;\n}\n"],"mappings":";;;;;;IAEYA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAAA,IAKrBE,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,0BAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","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 || groupIsWrapped,
|
|
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}\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 || 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":[]}
|
|
@@ -64,7 +64,8 @@ const FilterButtons = _ref => {
|
|
|
64
64
|
text,
|
|
65
65
|
color,
|
|
66
66
|
count,
|
|
67
|
-
id
|
|
67
|
+
id,
|
|
68
|
+
isDisabled
|
|
68
69
|
} = _ref2;
|
|
69
70
|
array.push(/*#__PURE__*/React.createElement(FilterButton, {
|
|
70
71
|
color: color,
|
|
@@ -76,7 +77,8 @@ const FilterButtons = _ref => {
|
|
|
76
77
|
isSelected: selectedIds.includes(id),
|
|
77
78
|
shape: FilterButtonItemShape.Round,
|
|
78
79
|
size: size,
|
|
79
|
-
text: text
|
|
80
|
+
text: text,
|
|
81
|
+
isDisabled: isDisabled
|
|
80
82
|
}));
|
|
81
83
|
});
|
|
82
84
|
return array;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","FilterButtons","_ref","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","selectedIds","setSelectedIds","handleSelect","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","Rectangular","text","forEach","_ref2","icons","color","push","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <FilterButton\n count={allButtonCount}\n id=\"all\"\n key=\"all\"\n onSelect={handleSelect}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n shape={FilterButtonItemShape.Rectangular}\n size={size}\n text=\"Alle\"\n />,\n ];\n\n items.forEach(({ icons, text, color, count, id }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n />,\n );\n });\n\n return array;\n }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAsBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC1F,SACIC,qBAAqB,EACrBC,gBAAgB,QAEb,2BAA2B;AAClC,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,kBAAkB,QAAQ,wBAAwB;AA6B3D,MAAMC,aAAqC,GAAGC,IAAA,IAOxC;EAAA,IAPyC;IAC3CC,QAAQ;IACRC,eAAe;IACfC,QAAQ;IACRC,KAAK;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,IAAI,GAAGV,gBAAgB,CAACW;EAC5B,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGf,QAAQ,CAAW,CAAC,KAAK,CAAC,CAAC;;EAEjE;AACJ;AACA;EACIF,SAAS,CAAC,MAAM;IACZ,IAAIU,eAAe,EAAE;MACjBO,cAAc,CAACP,eAAe,CAAC;IACnC;EACJ,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;;EAErB;AACJ;AACA;EACI,MAAMQ,YAAY,GAAGnB,WAAW,CAC3BoB,EAAU,IAAK;IACZ,IAAIC,MAAgB;IAEpB,IAAID,EAAE,KAAK,KAAK,EAAE;MACdC,MAAM,GAAGJ,WAAW,CAACK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE;IACvD,CAAC,MAAM;MACHD,MAAM,GAAGJ,WAAW,CAACK,QAAQ,CAACF,EAAE,CAAC,GAC3BH,WAAW,CAACM,MAAM,CAAEC,UAAU,IAAKA,UAAU,KAAKJ,EAAE,CAAC,GACrD,CAAC,GAAGH,WAAW,CAACM,MAAM,CAAEC,UAAU,IAAKA,UAAU,KAAK,KAAK,CAAC,EAAEJ,EAAE,CAAC;IAC3E;IAEA,IAAIC,MAAM,CAACI,MAAM,KAAK,CAAC,EAAE;MACrBJ,MAAM,GAAG,CAAC,KAAK,CAAC;IACpB;IAEAH,cAAc,CAACG,MAAM,CAAC;IAEtB,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACS,MAAM,CAACE,MAAM,CAAEG,UAAU,IAAKA,UAAU,KAAK,KAAK,CAAC,CAAC;IACjE;EACJ,CAAC,EACD,CAACd,QAAQ,EAAEK,WAAW,CAC1B,CAAC;EAED,MAAMU,UAAU,GAAGzB,OAAO,CAAC,MAAM;IAC7B,IAAIW,KAAK,CAACY,MAAM,KAAK,CAAC,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAIG,cAAc,GAAGlB,QAAQ;IAE7B,IAAI,OAAOkB,cAAc,KAAK,QAAQ,IAAId,qBAAqB,EAAE;MAC7Dc,cAAc,GAAGf,KAAK,CAACgB,MAAM,CAAC,CAACC,GAAG,EAAEC,IAAI,KAAKD,GAAG,IAAIC,IAAI,CAACC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5E;IAEA,MAAMC,KAAqB,GAAG,cAC1BlC,KAAA,CAAAmC,aAAA,CAAC5B,YAAY;MACT0B,KAAK,EAAEJ,cAAe;MACtBR,EAAE,EAAC,KAAK;MACRe,GAAG,EAAC,KAAK;MACTvB,QAAQ,EAAEO,YAAa;MACvBiB,UAAU,EACNnB,WAAW,CAACK,QAAQ,CAAC,KAAK,CAAC,IAC1Be,KAAK,CAACC,OAAO,CAACrB,WAAW,CAAC,IAAIA,WAAW,CAACQ,MAAM,KAAK,CACzD;MACDc,KAAK,EAAEnC,qBAAqB,CAACoC,WAAY;MACzCzB,IAAI,EAAEA,IAAK;MACX0B,IAAI,EAAC;IAAM,CACd,CAAC,CACL;IAED5B,KAAK,CAAC6B,OAAO,CAACC,KAAA,
|
|
1
|
+
{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","FilterButtons","_ref","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","selectedIds","setSelectedIds","handleSelect","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","key","isSelected","Array","isArray","shape","Rectangular","text","forEach","_ref2","icons","color","isDisabled","push","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <FilterButton\n count={allButtonCount}\n id=\"all\"\n key=\"all\"\n onSelect={handleSelect}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n shape={FilterButtonItemShape.Rectangular}\n size={size}\n text=\"Alle\"\n />,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n />,\n );\n });\n\n return array;\n }, [allCount, handleSelect, items, selectedIds, shouldCalcCountForAll, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,13 +11,18 @@ const FilterButton = _ref => {
|
|
|
11
11
|
count,
|
|
12
12
|
isSelected,
|
|
13
13
|
id,
|
|
14
|
+
isDisabled,
|
|
14
15
|
onSelect
|
|
15
16
|
} = _ref;
|
|
16
17
|
const handleClick = useCallback(() => {
|
|
18
|
+
if (isDisabled) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
17
21
|
onSelect(id);
|
|
18
|
-
}, [id, onSelect]);
|
|
22
|
+
}, [id, isDisabled, onSelect]);
|
|
19
23
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledFilterButtonItem, {
|
|
20
24
|
$isSelected: isSelected,
|
|
25
|
+
$isDisabled: isDisabled,
|
|
21
26
|
$size: size,
|
|
22
27
|
onClick: handleClick
|
|
23
28
|
}, /*#__PURE__*/React.createElement(StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -31,7 +36,7 @@ const FilterButton = _ref => {
|
|
|
31
36
|
$isSelected: isSelected,
|
|
32
37
|
$shape: shape,
|
|
33
38
|
$color: color
|
|
34
|
-
})), [color, count, handleClick, icons, isSelected, shape, size, text]);
|
|
39
|
+
})), [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text]);
|
|
35
40
|
};
|
|
36
41
|
FilterButton.displayName = 'FilterButton';
|
|
37
42
|
export default FilterButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","_ref","icons","size","shape","text","color","count","isSelected","id","onSelect","handleClick","createElement","$isSelected","$size","onClick","toLocaleString","$shape","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n onSelect(id);\n }, [id, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem
|
|
1
|
+
{"version":3,"file":"FilterButton.js","names":["React","useCallback","useMemo","Icon","StyledFilterButtonItem","StyledFilterButtonItemBorder","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelCount","StyledFilterButtonItemLabelText","StyledMotionFilterButtonItemBackground","FilterButton","_ref","icons","size","shape","text","color","count","isSelected","id","isDisabled","onSelect","handleClick","createElement","$isSelected","$isDisabled","$size","onClick","toLocaleString","$shape","$color","displayName"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport Icon from '../../icon/Icon';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelCount,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n count?: number;\n text: string;\n id: string;\n isDisabled?: boolean;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n count,\n isSelected,\n id,\n isDisabled,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n onSelect(id);\n }, [id, isDisabled, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem\n $isSelected={isSelected}\n $isDisabled={isDisabled}\n $size={size}\n onClick={handleClick}\n >\n <StyledFilterButtonItemLabel>\n {icons && <Icon icons={icons} size={15} />}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n {typeof count === 'number' && (\n <StyledFilterButtonItemLabelCount>\n {count.toLocaleString()}\n </StyledFilterButtonItemLabelCount>\n )}\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n <StyledMotionFilterButtonItemBackground\n $isSelected={isSelected}\n $shape={shape}\n $color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, count, handleClick, icons, isDisabled, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEtE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,sBAAsB,EACtBC,4BAA4B,EAC5BC,2BAA2B,EAC3BC,gCAAgC,EAChCC,+BAA+B,EAC/BC,sCAAsC,QACnC,uBAAuB;AAe9B,MAAMC,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,EAAE;IACFC,UAAU;IACVC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAMW,WAAW,GAAGrB,WAAW,CAAC,MAAM;IAClC,IAAImB,UAAU,EAAE;MACZ;IACJ;IAEAC,QAAQ,CAACF,EAAE,CAAC;EAChB,CAAC,EAAE,CAACA,EAAE,EAAEC,UAAU,EAAEC,QAAQ,CAAC,CAAC;EAE9B,OAAOnB,OAAO,CACV,mBACIF,KAAA,CAAAuB,aAAA,CAACnB,sBAAsB;IACnBoB,WAAW,EAAEN,UAAW;IACxBO,WAAW,EAAEL,UAAW;IACxBM,KAAK,EAAEb,IAAK;IACZc,OAAO,EAAEL;EAAY,gBAErBtB,KAAA,CAAAuB,aAAA,CAACjB,2BAA2B,QACvBM,KAAK,iBAAIZ,KAAA,CAAAuB,aAAA,CAACpB,IAAI;IAACS,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,eAC1Cb,KAAA,CAAAuB,aAAA,CAACf,+BAA+B,QAAEO,IAAsC,CAAC,EACxE,OAAOE,KAAK,KAAK,QAAQ,iBACtBjB,KAAA,CAAAuB,aAAA,CAAChB,gCAAgC,QAC5BU,KAAK,CAACW,cAAc,CAAC,CACQ,CAEb,CAAC,eAC9B5B,KAAA,CAAAuB,aAAA,CAAClB,4BAA4B;IACzBmB,WAAW,EAAEN,UAAW;IACxBW,MAAM,EAAEf,KAAM;IACdgB,MAAM,EAAEd;EAAM,CACjB,CAAC,eACFhB,KAAA,CAAAuB,aAAA,CAACd,sCAAsC;IACnCe,WAAW,EAAEN,UAAW;IACxBW,MAAM,EAAEf,KAAM;IACdgB,MAAM,EAAEd;EAAM,CACjB,CACmB,CAC3B,EACD,CAACA,KAAK,EAAEC,KAAK,EAAEK,WAAW,EAAEV,KAAK,EAAEQ,UAAU,EAAEF,UAAU,EAAEJ,KAAK,EAAED,IAAI,EAAEE,IAAI,CAChF,CAAC;AACL,CAAC;AAEDL,YAAY,CAACqB,WAAW,GAAG,cAAc;AAEzC,eAAerB,YAAY","ignoreList":[]}
|
|
@@ -4,24 +4,37 @@ import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterBu
|
|
|
4
4
|
export const StyledFilterButtonItem = styled.div`
|
|
5
5
|
position: relative;
|
|
6
6
|
line-height: 1;
|
|
7
|
-
cursor:
|
|
7
|
+
cursor: ${_ref => {
|
|
8
|
+
let {
|
|
9
|
+
$isDisabled
|
|
10
|
+
} = _ref;
|
|
11
|
+
return $isDisabled ? 'default' : 'pointer';
|
|
12
|
+
}};
|
|
8
13
|
user-select: none;
|
|
9
|
-
padding: ${
|
|
14
|
+
padding: ${_ref2 => {
|
|
10
15
|
let {
|
|
11
16
|
$size
|
|
12
|
-
} =
|
|
17
|
+
} = _ref2;
|
|
13
18
|
return $size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px';
|
|
14
19
|
}};
|
|
15
20
|
|
|
16
21
|
display: flex;
|
|
17
22
|
align-items: center;
|
|
18
23
|
|
|
24
|
+
opacity: ${_ref3 => {
|
|
25
|
+
let {
|
|
26
|
+
$isDisabled
|
|
27
|
+
} = _ref3;
|
|
28
|
+
return $isDisabled ? '.6' : '1';
|
|
29
|
+
}};
|
|
30
|
+
|
|
19
31
|
&:hover > div:last-child {
|
|
20
|
-
${
|
|
32
|
+
${_ref4 => {
|
|
21
33
|
let {
|
|
22
|
-
$isSelected
|
|
23
|
-
|
|
24
|
-
|
|
34
|
+
$isSelected,
|
|
35
|
+
$isDisabled
|
|
36
|
+
} = _ref4;
|
|
37
|
+
return !$isSelected && !$isDisabled && css`
|
|
25
38
|
opacity: 0.2;
|
|
26
39
|
`;
|
|
27
40
|
}}
|
|
@@ -35,20 +48,20 @@ export const StyledFilterButtonItemLabel = styled.div`
|
|
|
35
48
|
z-index: 1;
|
|
36
49
|
`;
|
|
37
50
|
export const StyledFilterButtonItemLabelText = styled.p`
|
|
38
|
-
color: ${
|
|
51
|
+
color: ${_ref5 => {
|
|
39
52
|
let {
|
|
40
53
|
theme
|
|
41
|
-
} =
|
|
54
|
+
} = _ref5;
|
|
42
55
|
return theme.text;
|
|
43
56
|
}};
|
|
44
57
|
margin: 0;
|
|
45
58
|
line-height: 1;
|
|
46
59
|
`;
|
|
47
60
|
export const StyledFilterButtonItemLabelCount = styled.p`
|
|
48
|
-
color: ${
|
|
61
|
+
color: ${_ref6 => {
|
|
49
62
|
let {
|
|
50
63
|
theme
|
|
51
|
-
} =
|
|
64
|
+
} = _ref6;
|
|
52
65
|
return theme.text;
|
|
53
66
|
}};
|
|
54
67
|
margin: 0;
|
|
@@ -63,19 +76,19 @@ export const StyledFilterButtonItemBorder = styled.div`
|
|
|
63
76
|
width: 100%;
|
|
64
77
|
opacity: 0.4;
|
|
65
78
|
z-index: 0;
|
|
66
|
-
border-radius: ${
|
|
79
|
+
border-radius: ${_ref7 => {
|
|
67
80
|
let {
|
|
68
81
|
$shape
|
|
69
|
-
} =
|
|
82
|
+
} = _ref7;
|
|
70
83
|
return $shape === FilterButtonItemShape.Round ? 100 : 3;
|
|
71
84
|
}}px;
|
|
72
85
|
|
|
73
|
-
${
|
|
86
|
+
${_ref8 => {
|
|
74
87
|
let {
|
|
75
88
|
$color,
|
|
76
89
|
theme,
|
|
77
90
|
$isSelected
|
|
78
|
-
} =
|
|
91
|
+
} = _ref8;
|
|
79
92
|
return !$isSelected && css`
|
|
80
93
|
border-width: 1px;
|
|
81
94
|
border-style: solid;
|
|
@@ -90,24 +103,24 @@ export const StyledMotionFilterButtonItemBackground = styled(motion.div)`
|
|
|
90
103
|
height: 100%;
|
|
91
104
|
width: 100%;
|
|
92
105
|
z-index: 0;
|
|
93
|
-
opacity: ${
|
|
106
|
+
opacity: ${_ref9 => {
|
|
94
107
|
let {
|
|
95
108
|
$isSelected
|
|
96
|
-
} =
|
|
109
|
+
} = _ref9;
|
|
97
110
|
return $isSelected ? 0.4 : 0;
|
|
98
111
|
}};
|
|
99
112
|
transition: opacity 0.5s ease;
|
|
100
|
-
border-radius: ${
|
|
113
|
+
border-radius: ${_ref10 => {
|
|
101
114
|
let {
|
|
102
115
|
$shape
|
|
103
|
-
} =
|
|
116
|
+
} = _ref10;
|
|
104
117
|
return $shape === FilterButtonItemShape.Round ? 100 : 3;
|
|
105
118
|
}}px;
|
|
106
|
-
background-color: ${
|
|
119
|
+
background-color: ${_ref11 => {
|
|
107
120
|
let {
|
|
108
121
|
$color,
|
|
109
122
|
theme
|
|
110
|
-
} =
|
|
123
|
+
} = _ref11;
|
|
111
124
|
return $color ?? theme.headline;
|
|
112
125
|
}};
|
|
113
126
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$size","Normal","
|
|
1
|
+
{"version":3,"file":"FilterButton.styles.js","names":["motion","styled","css","FilterButtonItemShape","FilterButtonSize","StyledFilterButtonItem","div","_ref","$isDisabled","_ref2","$size","Normal","_ref3","_ref4","$isSelected","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref5","theme","text","StyledFilterButtonItemLabelCount","_ref6","StyledFilterButtonItemBorder","_ref7","$shape","Round","_ref8","$color","headline","StyledMotionFilterButtonItemBackground","_ref9","_ref10","_ref11"],"sources":["../../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterButtonItemProps = WithTheme<{\n $size: FilterButtonSize;\n $isSelected: boolean;\n $isDisabled?: boolean;\n}>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n line-height: 1;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n user-select: none;\n padding: ${({ $size }) => ($size === FilterButtonSize.Normal ? '8px 14px' : '4px 8px')};\n\n display: flex;\n align-items: center;\n\n opacity: ${({ $isDisabled }) => ($isDisabled ? '.6' : '1')};\n\n &:hover > div:last-child {\n ${({ $isSelected, $isDisabled }) =>\n !$isSelected &&\n !$isDisabled &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: baseline;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n`;\n\ntype StyledFilterButtonItemLabelCountProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelCount = styled.p<StyledFilterButtonItemLabelCountProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin: 0;\n line-height: 1;\n font-weight: bold;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n\n ${({ $color, theme, $isSelected }: StyledFilterButtonItemBorderProps) =>\n !$isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${$color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n $shape: FilterButtonItemShape;\n $color: CSSProperties['color'];\n $isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ $isSelected }) => ($isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ $shape }) => ($shape === FilterButtonItemShape.Round ? 100 : 3)}px;\n background-color: ${({ $color, theme }: StyledFilterButtonItemBackgroundProps) =>\n $color ?? theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,8BAA8B;AAStF,OAAO,MAAMC,sBAAsB,GAAGJ,MAAM,CAACK,GAAgC;AAC7E;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACxE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAMC,KAAK,KAAKN,gBAAgB,CAACO,MAAM,GAAG,UAAU,GAAG,SAAS;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAY,CAAC,GAAAI,KAAA;EAAA,OAAMJ,WAAW,GAAG,IAAI,GAAG,GAAG;AAAA,CAAC;AAC9D;AACA;AACA,UAAUK,KAAA;EAAA,IAAC;IAAEC,WAAW;IAAEN;EAAY,CAAC,GAAAK,KAAA;EAAA,OAC3B,CAACC,WAAW,IACZ,CAACN,WAAW,IACZN,GAAG;AACf;AACA,aAAa;AAAA;AACb;AACA,CAAC;AAED,OAAO,MAAMa,2BAA2B,GAAGd,MAAM,CAACK,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMU,+BAA+B,GAAGf,MAAM,CAACgB,CAAuC;AAC7F,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGpB,MAAM,CAACgB,CAAwC;AAC/F,aAAaK,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACC,IAAI;AAAA;AAC5E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,4BAA4B,GAAGtB,MAAM,CAACK,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBkB,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,KAAKtB,qBAAqB,CAACuB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,MAAM;IAAET,KAAK;IAAEL;EAA+C,CAAC,GAAAa,KAAA;EAAA,OAChE,CAACb,WAAW,IACZZ,GAAG;AACX;AACA;AACA,4BAA4B0B,MAAM,IAAIT,KAAK,CAACU,QAAQ;AACpD,SAAS;AAAA;AACT,CAAC;AAQD,OAAO,MAAMC,sCAAsC,GAAG7B,MAAM,CACxDD,MAAM,CAACM,GACX,CAAwC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,eAAeyB,KAAA;EAAA,IAAC;IAAEjB;EAAY,CAAC,GAAAiB,KAAA;EAAA,OAAMjB,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA,qBAAqBkB,MAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,MAAA;EAAA,OAAMP,MAAM,KAAKtB,qBAAqB,CAACuB,KAAK,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AACvF,wBAAwBO,MAAA;EAAA,IAAC;IAAEL,MAAM;IAAET;EAA6C,CAAC,GAAAc,MAAA;EAAA,OACzEL,MAAM,IAAIT,KAAK,CAACU,QAAQ;AAAA;AAChC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filterButtons.js","names":["FilterButtonItemShape","FilterButtonSize"],"sources":["../../../src/types/filterButtons.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum FilterButtonItemShape {\n Round,\n Rectangular,\n}\nexport enum FilterButtonSize {\n Small,\n Normal,\n}\n\nexport interface IFilterButtonItem {\n id: string;\n text: string;\n color?: CSSProperties['color'];\n icons?: string[];\n count?: number;\n}\n"],"mappings":"AAEA,WAAYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;
|
|
1
|
+
{"version":3,"file":"filterButtons.js","names":["FilterButtonItemShape","FilterButtonSize"],"sources":["../../../src/types/filterButtons.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum FilterButtonItemShape {\n Round,\n Rectangular,\n}\n\nexport enum FilterButtonSize {\n Small,\n Normal,\n}\n\nexport interface IFilterButtonItem {\n id: string;\n text: string;\n color?: CSSProperties['color'];\n icons?: string[];\n count?: number;\n isDisabled?: boolean;\n}\n"],"mappings":"AAEA,WAAYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAKjC,WAAYC,gBAAgB,0BAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAhBA,gBAAgB,CAAhBA,gBAAgB;EAAA,OAAhBA,gBAAgB;AAAA","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
|
|
|
4
4
|
type StyledFilterButtonItemProps = WithTheme<{
|
|
5
5
|
$size: FilterButtonSize;
|
|
6
6
|
$isSelected: boolean;
|
|
7
|
+
$isDisabled?: boolean;
|
|
7
8
|
}>;
|
|
8
9
|
export declare const StyledFilterButtonItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFilterButtonItemProps>> & string;
|
|
9
10
|
export declare const StyledFilterButtonItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
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.1069",
|
|
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": "d1a170d7a9b001ad4ef3edb843a04fdf39bb5a73"
|
|
90
90
|
}
|