@chayns-components/core 5.0.0-beta.551 → 5.0.0-beta.552

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.
Files changed (3) hide show
  1. package/lib/components/truncation/Truncation.js +16 -2
  2. package/lib/components/truncation/Truncation.js.map +1 -1
  3. package/package.json +2 -2
package/lib/components/truncation/Truncation.js CHANGED
@@ -27,6 +27,8 @@ const Truncation = _ref => {
27
27
  const pseudoChildrenRef = useRef(null);
28
28
  const childrenRef = useRef(null);
29
29
  const originalChildrenRef = useRef(null);
30
+ const hasCollapsed = useRef(false);
31
+ const isAnimating = useRef(false);
30
32
  useEffect(() => {
31
33
  if (typeof isOpen === 'boolean') {
32
34
  setInternalIsOpen(isOpen);
@@ -45,7 +47,12 @@ const Truncation = _ref => {
45
47
  }, [onChange]);
46
48
  const handleAnimationEnd = useCallback(() => {
47
49
  setHasSizeChanged(false);
50
+ hasCollapsed.current = true;
51
+ isAnimating.current = false;
48
52
  setShouldShowCollapsedElement(!internalIsOpen);
53
+ window.setTimeout(() => {
54
+ hasCollapsed.current = false;
55
+ }, 30);
49
56
  }, [internalIsOpen]);
50
57
  useEffect(() => {
51
58
  if (!pseudoChildrenRef.current) {
@@ -79,7 +86,9 @@ const Truncation = _ref => {
79
86
  if (entries && entries[0]) {
80
87
  const observedHeight = entries[0].contentRect.height;
81
88
  setOriginalHeight(observedHeight < originalBigHeight ? originalBigHeight : observedHeight);
82
- setHasSizeChanged(true);
89
+ if (!hasCollapsed.current && !isAnimating.current) {
90
+ setHasSizeChanged(true);
91
+ }
83
92
  }
84
93
  });
85
94
  resizeObserver.observe(originalChildrenRef.current);
@@ -95,7 +104,9 @@ const Truncation = _ref => {
95
104
  if (entries && entries[0]) {
96
105
  const observedHeight = entries[0].contentRect.height;
97
106
  setNewCollapsedHeight(observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight);
98
- setHasSizeChanged(true);
107
+ if (!hasCollapsed.current && !isAnimating.current) {
108
+ setHasSizeChanged(true);
109
+ }
99
110
  }
100
111
  });
101
112
  resizeObserver.observe(pseudoChildrenRef.current);
@@ -121,6 +132,9 @@ const Truncation = _ref => {
121
132
  duration: hasSizeChanged ? 0 : 0.2
122
133
  },
123
134
  onAnimationComplete: handleAnimationEnd,
135
+ onAnimationStart: () => {
136
+ isAnimating.current = true;
137
+ },
124
138
  ref: childrenRef
125
139
  }), showClamp && /*#__PURE__*/React.createElement(StyledTruncationClampWrapper, {
126
140
  $position: clampPosition
package/lib/components/truncation/Truncation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","ClampPosition","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","pseudoChildrenRef","childrenRef","originalChildrenRef","handleClampClick","event","current","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","$position","onClick"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children Element in it`s collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel = 'Mehr',\n lessLabel = 'Weniger',\n onChange,\n children,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n const handleAnimationEnd = useCallback(() => {\n setHasSizeChanged(false);\n setShouldShowCollapsedElement(!internalIsOpen);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n setHasSizeChanged(true);\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight]);\n\n useEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n setHasSizeChanged(true);\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight]);\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <StyledTruncationClamp onClick={handleClampClick}>\n {internalIsOpen ? lessLabel : moreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","ClampPosition","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","handleClampClick","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","onClick"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children Element in it`s collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel = 'Mehr',\n lessLabel = 'Weniger',\n onChange,\n children,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n const handleAnimationEnd = useCallback(() => {\n setHasSizeChanged(false);\n hasCollapsed.current = true;\n isAnimating.current = false;\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (!hasCollapsed.current && !isAnimating.current) {\n setHasSizeChanged(true);\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight]);\n\n useEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (!hasCollapsed.current && !isAnimating.current) {\n setHasSizeChanged(true);\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight]);\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <StyledTruncationClamp onClick={handleClampClick}>\n {internalIsOpen ? lessLabel : moreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.551",
3
+ "version": "5.0.0-beta.552",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "2882d3c8b44f891c605c1165cabb0849bcb73ce5"
76
+ "gitHead": "5cb607bc45fb77381099c941231284c00218b462"
77
77
  }