@chayns-components/core 5.0.0-beta.1234 → 5.0.0-beta.1237
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-head/AccordionHead.js +27 -14
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +0 -4
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +27 -14
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +0 -4
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -148,20 +148,20 @@ const AccordionHead = ({
|
|
|
148
148
|
onChange: onTitleInputChange
|
|
149
149
|
}))) : /*#__PURE__*/_react2.default.createElement(_react.LayoutGroup, {
|
|
150
150
|
key: `accordionHeadLayoutGroup--${uuid}`
|
|
151
|
-
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitleWrapper, {
|
|
152
|
-
key: `accordionHeadTitleWrapperWrapper--${uuid}`
|
|
153
151
|
}, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
154
152
|
initial: false,
|
|
155
153
|
mode: "sync",
|
|
156
154
|
key: `accordionHeadTitleWrapper--${uuid}`
|
|
157
|
-
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
opacity: 1
|
|
155
|
+
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitleWrapper, {
|
|
156
|
+
key: `accordionHeadTitleWrapperWrapper--${uuid}`,
|
|
157
|
+
style: {
|
|
158
|
+
display: 'flex',
|
|
159
|
+
alignItems: 'center',
|
|
160
|
+
gap: '8px'
|
|
164
161
|
},
|
|
162
|
+
initial: !shouldSkipAnimation ? {
|
|
163
|
+
scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3
|
|
164
|
+
} : false,
|
|
165
165
|
exit: shouldSkipAnimation ? {
|
|
166
166
|
opacity: 0,
|
|
167
167
|
transition: {
|
|
@@ -171,24 +171,37 @@ const AccordionHead = ({
|
|
|
171
171
|
display: 'none'
|
|
172
172
|
}
|
|
173
173
|
} : {
|
|
174
|
+
scale: 1,
|
|
174
175
|
opacity: 0
|
|
175
176
|
},
|
|
177
|
+
animate: {
|
|
178
|
+
scale: 1,
|
|
179
|
+
opacity: 1
|
|
180
|
+
},
|
|
176
181
|
transition: {
|
|
177
182
|
duration: shouldSkipAnimation ? 0 : 0.25,
|
|
178
183
|
opacity: {
|
|
179
184
|
duration: 0
|
|
180
185
|
}
|
|
181
|
-
}
|
|
186
|
+
}
|
|
187
|
+
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitle, {
|
|
182
188
|
$isOpen: isOpen,
|
|
183
189
|
$isWrapped: isWrapped,
|
|
184
190
|
$color: titleColor,
|
|
185
191
|
$hasSearch: typeof onSearchChange === 'function',
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
192
|
+
animate: {
|
|
193
|
+
fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem'
|
|
194
|
+
},
|
|
195
|
+
initial: shouldSkipAnimation ? false : {
|
|
196
|
+
fontSize: '1rem'
|
|
197
|
+
},
|
|
198
|
+
transition: {
|
|
199
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
200
|
+
}
|
|
201
|
+
}, title), titleElement && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitleElementWrapper, {
|
|
189
202
|
key: `accordionTitleElement--${uuid}`,
|
|
190
203
|
ref: titleElementWrapperRef
|
|
191
|
-
}, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledRightWrapper, {
|
|
204
|
+
}, titleElement))))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledRightWrapper, {
|
|
192
205
|
$isSearchActive: isSearchActive
|
|
193
206
|
}, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
194
207
|
initial: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","transition","duration","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","mode","StyledMotionTitle","scale","exit","transitionEnd","display","$isOpen","$color","$hasSearch","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n {/* I don't know why, but it fixes a glitch while animating the title.\n I guess it's the mode=\"sync\" */}\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n initial={\n shouldSkipAnimation\n ? false\n : { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n }\n animate={{ scale: 1, opacity: 1 }}\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { opacity: 0 }\n }\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","transition","duration","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","AnimatePresence","mode","StyledMotionTitleWrapper","style","display","alignItems","gap","scale","exit","transitionEnd","StyledMotionTitle","$isOpen","$color","$hasSearch","StyledMotionTitleElementWrapper","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitleWrapper\n key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\n initial={\n !shouldSkipAnimation\n ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n : false\n }\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { scale: 1, opacity: 0 }\n }\n animate={{ scale: 1, opacity: 1 }}\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n >\n <StyledMotionTitle\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n animate={{ fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem' }}\n initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {title}\n </StyledMotionTitle>\n\n {titleElement && (\n <StyledMotionTitleElementWrapper\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </StyledMotionTitleWrapper>\n </AnimatePresence>\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -114,10 +114,6 @@ const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.defaul
|
|
|
114
114
|
margin-right: 5px;
|
|
115
115
|
overflow: hidden;
|
|
116
116
|
position: relative;
|
|
117
|
-
|
|
118
|
-
width: ${({
|
|
119
|
-
$isSearchActive
|
|
120
|
-
}) => $isSearchActive ? '40%' : undefined};
|
|
121
117
|
`;
|
|
122
118
|
const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
123
119
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -139,20 +139,20 @@ const AccordionHead = ({
|
|
|
139
139
|
onChange: onTitleInputChange
|
|
140
140
|
}))) : /*#__PURE__*/React.createElement(LayoutGroup, {
|
|
141
141
|
key: `accordionHeadLayoutGroup--${uuid}`
|
|
142
|
-
}, /*#__PURE__*/React.createElement(StyledMotionTitleWrapper, {
|
|
143
|
-
key: `accordionHeadTitleWrapperWrapper--${uuid}`
|
|
144
142
|
}, /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
145
143
|
initial: false,
|
|
146
144
|
mode: "sync",
|
|
147
145
|
key: `accordionHeadTitleWrapper--${uuid}`
|
|
148
|
-
}, /*#__PURE__*/React.createElement(
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
opacity: 1
|
|
146
|
+
}, /*#__PURE__*/React.createElement(StyledMotionTitleWrapper, {
|
|
147
|
+
key: `accordionHeadTitleWrapperWrapper--${uuid}`,
|
|
148
|
+
style: {
|
|
149
|
+
display: 'flex',
|
|
150
|
+
alignItems: 'center',
|
|
151
|
+
gap: '8px'
|
|
155
152
|
},
|
|
153
|
+
initial: !shouldSkipAnimation ? {
|
|
154
|
+
scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3
|
|
155
|
+
} : false,
|
|
156
156
|
exit: shouldSkipAnimation ? {
|
|
157
157
|
opacity: 0,
|
|
158
158
|
transition: {
|
|
@@ -162,24 +162,37 @@ const AccordionHead = ({
|
|
|
162
162
|
display: 'none'
|
|
163
163
|
}
|
|
164
164
|
} : {
|
|
165
|
+
scale: 1,
|
|
165
166
|
opacity: 0
|
|
166
167
|
},
|
|
168
|
+
animate: {
|
|
169
|
+
scale: 1,
|
|
170
|
+
opacity: 1
|
|
171
|
+
},
|
|
167
172
|
transition: {
|
|
168
173
|
duration: shouldSkipAnimation ? 0 : 0.25,
|
|
169
174
|
opacity: {
|
|
170
175
|
duration: 0
|
|
171
176
|
}
|
|
172
|
-
}
|
|
177
|
+
}
|
|
178
|
+
}, /*#__PURE__*/React.createElement(StyledMotionTitle, {
|
|
173
179
|
$isOpen: isOpen,
|
|
174
180
|
$isWrapped: isWrapped,
|
|
175
181
|
$color: titleColor,
|
|
176
182
|
$hasSearch: typeof onSearchChange === 'function',
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
183
|
+
animate: {
|
|
184
|
+
fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem'
|
|
185
|
+
},
|
|
186
|
+
initial: shouldSkipAnimation ? false : {
|
|
187
|
+
fontSize: '1rem'
|
|
188
|
+
},
|
|
189
|
+
transition: {
|
|
190
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
191
|
+
}
|
|
192
|
+
}, title), titleElement && /*#__PURE__*/React.createElement(StyledMotionTitleElementWrapper, {
|
|
180
193
|
key: `accordionTitleElement--${uuid}`,
|
|
181
194
|
ref: titleElementWrapperRef
|
|
182
|
-
}, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/React.createElement(StyledRightWrapper, {
|
|
195
|
+
}, titleElement))))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/React.createElement(StyledRightWrapper, {
|
|
183
196
|
$isSearchActive: isSearchActive
|
|
184
197
|
}, /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
185
198
|
initial: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","scale","exit","transitionEnd","display","$isOpen","$color","$hasSearch","layout","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n {/* I don't know why, but it fixes a glitch while animating the title.\n I guess it's the mode=\"sync\" */}\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n initial={\n shouldSkipAnimation\n ? false\n : { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n }\n animate={{ scale: 1, opacity: 1 }}\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { opacity: 0 }\n }\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","style","display","alignItems","gap","scale","exit","transitionEnd","$isOpen","$color","$hasSearch","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitleWrapper\n key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\n initial={\n !shouldSkipAnimation\n ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n : false\n }\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { scale: 1, opacity: 0 }\n }\n animate={{ scale: 1, opacity: 1 }}\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n >\n <StyledMotionTitle\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n animate={{ fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem' }}\n initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {title}\n </StyledMotionTitle>\n\n {titleElement && (\n <StyledMotionTitleElementWrapper\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </StyledMotionTitleWrapper>\n </AnimatePresence>\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -107,10 +107,6 @@ export const StyledRightWrapper = styled.div`
|
|
|
107
107
|
margin-right: 5px;
|
|
108
108
|
overflow: hidden;
|
|
109
109
|
position: relative;
|
|
110
|
-
|
|
111
|
-
width: ${({
|
|
112
|
-
$isSearchActive
|
|
113
|
-
}) => $isSearchActive ? '40%' : undefined};
|
|
114
110
|
`;
|
|
115
111
|
export const StyledMotionSearchWrapper = styled(motion.div)`
|
|
116
112
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","i","headline","$icon","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","i","headline","$icon","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
|
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.1237",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "8f14f402fbf3eda863fc95aa86be613c49d12e8c"
|
|
89
89
|
}
|