@chayns-components/core 5.0.0-beta.314 → 5.0.0-beta.320

package/lib/components/truncation/Truncation.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _truncation = require("../../utils/truncation");
+var _Truncation = require("./Truncation.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Truncation = _ref => {
+  let {
+    collapsedHeight = 150,
+    moreLabel = 'Mehr',
+    lessLabel = 'Weniger',
+    onChange,
+    children
+  } = _ref;
+  const childrenContainerRef = (0, _react.useRef)(null);
+  const truncatedContentRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const [childrenContainerHeight, setChildrenContainerHeight] = (0, _react.useState)();
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [showClamp, setShowClamp] = (0, _react.useState)(true);
+
+  // updates the content of the children container on animation completion
+  const handleAnimationComplete = (0, _react.useCallback)(() => {
+    if (childrenContainerRef.current) {
+      childrenContainerRef.current.innerHTML = isOpen ? contentRef.current?.innerHTML ?? '' : truncatedContentRef.current?.innerHTML ?? '';
+    }
+  }, [isOpen]);
+
+  // changes the state of the truncation
+  const handleClampClick = (0, _react.useCallback)(event => {
+    setIsOpen(current => {
+      onChange?.(event, !current);
+      return !current;
+    });
+  }, [onChange]);
+
+  // initialization logic
+  // set the height of the children container to the collapsed height
+  (0, _react.useEffect)(() => {
+    if (isOpen || !!truncatedContentRef.current || !childrenContainerRef.current) {
+      return;
+    }
+    setChildrenContainerHeight(childrenContainerRef.current.scrollHeight);
+    contentRef.current = childrenContainerRef.current.cloneNode(true);
+    (0, _truncation.truncateElement)(childrenContainerRef.current, collapsedHeight);
+    truncatedContentRef.current = childrenContainerRef.current.cloneNode(true);
+  }, [collapsedHeight, isOpen]);
+
+  // If truncated content is the same as the content, don't show the clamp because it's not needed
+  (0, _react.useEffect)(() => {
+    setShowClamp(contentRef.current?.innerHTML !== truncatedContentRef.current?.innerHTML);
+  }, []);
+  const height = isOpen ? childrenContainerHeight ?? 'auto' : `${collapsedHeight}px`;
+  return /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
+    className: "beta-chayns-truncation"
+  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledMotionTruncationContent, {
+    animate: {
+      height
+    },
+    initial: false,
+    onAnimationComplete: handleAnimationComplete,
+    ref: childrenContainerRef,
+    transition: {
+      type: 'tween'
+    }
+  }, children), showClamp && /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
+    onClick: handleClampClick
+  }, isOpen ? lessLabel : moreLabel));
+};
+var _default = exports.default = Truncation;
+//# sourceMappingURL=Truncation.js.map

package/lib/components/truncation/Truncation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Truncation","_ref","collapsedHeight","moreLabel","lessLabel","onChange","children","childrenContainerRef","useRef","truncatedContentRef","contentRef","childrenContainerHeight","setChildrenContainerHeight","useState","isOpen","setIsOpen","showClamp","setShowClamp","handleAnimationComplete","useCallback","current","innerHTML","handleClampClick","event","useEffect","scrollHeight","cloneNode","truncateElement","height","createElement","StyledTruncation","className","StyledMotionTruncationContent","animate","initial","onAnimationComplete","ref","transition","type","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\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 height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\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    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const childrenContainerRef = useRef<HTMLDivElement | null>(null);\n    const truncatedContentRef = useRef<HTMLElement | null>(null);\n    const contentRef = useRef<HTMLElement | null>(null);\n\n    const [childrenContainerHeight, setChildrenContainerHeight] = useState<number>();\n    const [isOpen, setIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n\n    // updates the content of the children container on animation completion\n    const handleAnimationComplete = useCallback(() => {\n        if (childrenContainerRef.current) {\n            childrenContainerRef.current.innerHTML = isOpen\n                ? contentRef.current?.innerHTML ?? ''\n                : truncatedContentRef.current?.innerHTML ?? '';\n        }\n    }, [isOpen]);\n\n    // changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setIsOpen((current) => {\n                onChange?.(event, !current);\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    // initialization logic\n    // set the height of the children container to the collapsed height\n    useEffect(() => {\n        if (isOpen || !!truncatedContentRef.current || !childrenContainerRef.current) {\n            return;\n        }\n\n        setChildrenContainerHeight(childrenContainerRef.current.scrollHeight);\n\n        contentRef.current = childrenContainerRef.current.cloneNode(true) as HTMLElement;\n\n        truncateElement(childrenContainerRef.current, collapsedHeight);\n\n        truncatedContentRef.current = childrenContainerRef.current.cloneNode(true) as HTMLElement;\n    }, [collapsedHeight, isOpen]);\n\n    // If truncated content is the same as the content, don't show the clamp because it's not needed\n    useEffect(() => {\n        setShowClamp(contentRef.current?.innerHTML !== truncatedContentRef.current?.innerHTML);\n    }, []);\n\n    const height = isOpen ? childrenContainerHeight ?? 'auto' : `${collapsedHeight}px`;\n\n    return (\n        <StyledTruncation className=\"beta-chayns-truncation\">\n            <StyledMotionTruncationContent\n                animate={{ height }}\n                initial={false}\n                onAnimationComplete={handleAnimationComplete}\n                ref={childrenContainerRef}\n                transition={{ type: 'tween' }}\n            >\n                {children}\n            </StyledMotionTruncationContent>\n            {showClamp && (\n                <StyledTruncationClamp onClick={handleClampClick}>\n                    {isOpen ? lessLabel : moreLabel}\n                </StyledTruncationClamp>\n            )}\n        </StyledTruncation>\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}