@sb1/ffe-collapse-react 4.0.3 → 4.0.5

package/es/Collapse.js

@@ -23,47 +23,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useRef, useEffect, useState, } from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from './mergeRefs';
+import { usePreviousIsOpen } from './usePreviousIsOpen';
 export var Collapse = React.forwardRef(function (_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
     var internalRef = useRef(null);
     var _b = useState(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
     var _c = useState(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
+    var previousIsOpen = usePreviousIsOpen(isOpen);
     useEffect(function () {
-        var handleTransition = function (startOrEnd) { return function (e) {
+        if (typeof previousIsOpen === 'boolean' &&
+            isOpen !== previousIsOpen) {
+            setIsHidden(!isOpen);
+            setOverflowVisible(false);
+        }
+    }, [previousIsOpen, isOpen]);
+    return (React.createElement("div", __assign({}, rest, { ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
+            'ffe-collapse--open': isOpen,
+            'ffe-collapse--hidden': isHidden,
+        }), onTransitionEnd: function (e) {
             if (e.target === internalRef.current &&
                 e.propertyName === 'grid-template-rows') {
                 setIsHidden(!isOpen);
-                if (startOrEnd === 'start') {
-                    setOverflowVisible(false);
-                }
-                else {
-                    if (isOpen) {
-                        setOverflowVisible(true);
-                    }
-                    if (onRest) {
-                        onRest();
-                    }
+                if (isOpen) {
+                    setOverflowVisible(true);
                 }
+                onRest === null || onRest === void 0 ? void 0 : onRest();
             }
-        }; };
-        var handleTransitionStart = handleTransition('start');
-        var handleTransitionEnd = handleTransition('end');
-        var collapse = internalRef.current;
-        if (collapse) {
-            collapse.addEventListener('transitionstart', handleTransitionStart);
-            collapse.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return function () {
-            if (collapse) {
-                collapse.removeEventListener('transitionstart', handleTransitionStart);
-                collapse.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [isOpen, onRest]);
-    return (React.createElement("div", __assign({}, rest, { ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
-            'ffe-collapse--open': isOpen,
-            'ffe-collapse--hidden': isHidden,
-        }) }),
+        } }),
         React.createElement("div", { className: classNames('ffe-collapse__inner', {
                 'ffe-collapse__inner--visible': overflowVisible,
             }) }, children)));

package/es/usePreviousIsOpen.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export var usePreviousIsOpen = function (isOpen) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = isOpen;
+    });
+    return ref.current;
+};

package/lib/Collapse.js

@@ -52,47 +52,33 @@ exports.Collapse = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var mergeRefs_1 = require("./mergeRefs");
+var usePreviousIsOpen_1 = require("./usePreviousIsOpen");
 exports.Collapse = react_1.default.forwardRef(function (_a, ref) {
     var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
     var internalRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
     var _c = (0, react_1.useState)(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
+    var previousIsOpen = (0, usePreviousIsOpen_1.usePreviousIsOpen)(isOpen);
     (0, react_1.useEffect)(function () {
-        var handleTransition = function (startOrEnd) { return function (e) {
+        if (typeof previousIsOpen === 'boolean' &&
+            isOpen !== previousIsOpen) {
+            setIsHidden(!isOpen);
+            setOverflowVisible(false);
+        }
+    }, [previousIsOpen, isOpen]);
+    return (react_1.default.createElement("div", __assign({}, rest, { ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
+            'ffe-collapse--open': isOpen,
+            'ffe-collapse--hidden': isHidden,
+        }), onTransitionEnd: function (e) {
             if (e.target === internalRef.current &&
                 e.propertyName === 'grid-template-rows') {
                 setIsHidden(!isOpen);
-                if (startOrEnd === 'start') {
-                    setOverflowVisible(false);
-                }
-                else {
-                    if (isOpen) {
-                        setOverflowVisible(true);
-                    }
-                    if (onRest) {
-                        onRest();
-                    }
+                if (isOpen) {
+                    setOverflowVisible(true);
                 }
+                onRest === null || onRest === void 0 ? void 0 : onRest();
             }
-        }; };
-        var handleTransitionStart = handleTransition('start');
-        var handleTransitionEnd = handleTransition('end');
-        var collapse = internalRef.current;
-        if (collapse) {
-            collapse.addEventListener('transitionstart', handleTransitionStart);
-            collapse.addEventListener('transitionend', handleTransitionEnd);
-        }
-        return function () {
-            if (collapse) {
-                collapse.removeEventListener('transitionstart', handleTransitionStart);
-                collapse.removeEventListener('transitionend', handleTransitionEnd);
-            }
-        };
-    }, [isOpen, onRest]);
-    return (react_1.default.createElement("div", __assign({}, rest, { ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
-            'ffe-collapse--open': isOpen,
-            'ffe-collapse--hidden': isHidden,
-        }) }),
+        } }),
         react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-collapse__inner', {
                 'ffe-collapse__inner--visible': overflowVisible,
             }) }, children)));

package/lib/usePreviousIsOpen.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreviousIsOpen = void 0;
+var react_1 = require("react");
+var usePreviousIsOpen = function (isOpen) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = isOpen;
+    });
+    return ref.current;
+};
+exports.usePreviousIsOpen = usePreviousIsOpen;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-collapse-react",
-    "version": "4.0.3",
+    "version": "4.0.5",
     "description": "React component for expand/collapse",
     "keywords": [
         "ffe"
@@ -30,11 +30,11 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-core": "^27.4.0",
+        "@sb1/ffe-core": "^27.4.1",
         "classnames": "^2.3.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^0.6.1",
+        "@sb1/ffe-buildtool": "^0.6.2",
         "eslint": "^8.57.0",
         "react": "^16.9.0",
         "react-dom": "^16.9.0"
@@ -45,5 +45,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8f14fe9d40314d64c62a4622e7d35b33b9e5484d"
+    "gitHead": "9ac84c1d8650f7626876a864cc0dc73a67fa241b"
 }

package/types/usePreviousIsOpen.d.ts

@@ -0,0 +1 @@
+export declare const usePreviousIsOpen: (isOpen: boolean) => boolean | undefined;