collapsible-react-component - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.d.ts

@@ -5,4 +5,7 @@ import * as React from 'react';
     type?: 'revealTopFirst' | 'revealBottomFirst';
+    onTransitionEnd?: (newState: Extract<CollapsibleState, 'open' | 'closed'>) => void;
     children?: React.ReactNode;
 };
+declare type CollapsibleState = 'closed' | 'before-open-transition' | 'open-transition' | 'open' | 'before-closed-transition' | 'closed-transition';
 export declare const Collapsible: React.FunctionComponent<CollapsibleProps>;
+export {};

dist/index.js

 var React = require('react');
 
-var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_close":"_3OHvW","is_state_before-open-transition":"_3U8bo","is_state_close-transition":"_3FGzA","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-close-transition":"_fzKDc","content":"_2jwZj"};
+var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_closed":"_1L6Gs","is_state_before-open-transition":"_3U8bo","is_state_closed-transition":"_3EVaT","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-closed-transition":"_2jajZ","content":"_2jwZj"};
 
@@ -20,6 +20,7 @@ var assertNever = function assertNever(_) {
       open = _ref.open,
+      onTransitionEnd = _ref.onTransitionEnd,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
 
-  var _useState = React.useState(open ? 'open' : 'close'),
+  var _useState = React.useState(open ? 'open' : 'closed'),
       state = _useState[0],
@@ -41,9 +42,14 @@ setState = _useState[1];
   }, []);
-  var onTransitionEnd = React.useCallback(function (event) {
+  var handleTransitionEnd = React.useCallback(function (event) {
     if (event.propertyName === 'visibility') {
-      setState(open ? 'open' : 'close');
+      var newState = open ? 'open' : 'closed';
+      setState(newState);
+
+      if (onTransitionEnd) {
+        onTransitionEnd(newState);
+      }
     }
-  }, [open]);
+  }, [open, onTransitionEnd]);
   React.useEffect(function () {
-    if (state === 'close') {
+    if (state === 'closed') {
       if (open) {
@@ -60,3 +66,3 @@ updateContentHeight();
       if (!open) {
-        setState('close');
+        setState('closed');
       }
@@ -66,10 +72,10 @@ } else if (state === 'open') {
         updateContentHeight();
-        setState('before-close-transition');
+        setState('before-closed-transition');
       }
-    } else if (state === 'before-close-transition') {
+    } else if (state === 'before-closed-transition') {
       if (!open) {
         forceReflow(contentRef.current);
-        setState('close-transition');
+        setState('closed-transition');
       }
-    } else if (state === 'close-transition') {
+    } else if (state === 'closed-transition') {
       if (open) {
@@ -87,3 +93,3 @@ setState('open');
     },
-    onTransitionEnd: onTransitionEnd,
+    onTransitionEnd: handleTransitionEnd,
     "aria-hidden": !open
@@ -90,0 +96,0 @@ }, React.createElement("div", {

dist/index.modern.js

 import { useState, useRef, useCallback, useEffect, createElement } from 'react';
 
-var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_close":"_3OHvW","is_state_before-open-transition":"_3U8bo","is_state_close-transition":"_3FGzA","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-close-transition":"_fzKDc","content":"_2jwZj"};
+var style = {"wrapper":"_1I_qj","is_type_revealTopFirst":"_2L9NA","is_type_revealBottomFirst":"_1HWL6","is_state_closed":"_1L6Gs","is_state_before-open-transition":"_3U8bo","is_state_closed-transition":"_3EVaT","is_state_open-transition":"_RKZOX","is_state_open":"_2mqKm","is_state_before-closed-transition":"_2jajZ","content":"_2jwZj"};
 
@@ -20,6 +20,7 @@ var assertNever = function assertNever(_) {
       open = _ref.open,
+      onTransitionEnd = _ref.onTransitionEnd,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
 
-  var _useState = useState(open ? 'open' : 'close'),
+  var _useState = useState(open ? 'open' : 'closed'),
       state = _useState[0],
@@ -41,9 +42,14 @@ setState = _useState[1];
   }, []);
-  var onTransitionEnd = useCallback(function (event) {
+  var handleTransitionEnd = useCallback(function (event) {
     if (event.propertyName === 'visibility') {
-      setState(open ? 'open' : 'close');
+      var newState = open ? 'open' : 'closed';
+      setState(newState);
+
+      if (onTransitionEnd) {
+        onTransitionEnd(newState);
+      }
     }
-  }, [open]);
+  }, [open, onTransitionEnd]);
   useEffect(function () {
-    if (state === 'close') {
+    if (state === 'closed') {
       if (open) {
@@ -60,3 +66,3 @@ updateContentHeight();
       if (!open) {
-        setState('close');
+        setState('closed');
       }
@@ -66,10 +72,10 @@ } else if (state === 'open') {
         updateContentHeight();
-        setState('before-close-transition');
+        setState('before-closed-transition');
       }
-    } else if (state === 'before-close-transition') {
+    } else if (state === 'before-closed-transition') {
       if (!open) {
         forceReflow(contentRef.current);
-        setState('close-transition');
+        setState('closed-transition');
       }
-    } else if (state === 'close-transition') {
+    } else if (state === 'closed-transition') {
       if (open) {
@@ -87,3 +93,3 @@ setState('open');
     },
-    onTransitionEnd: onTransitionEnd,
+    onTransitionEnd: handleTransitionEnd,
     "aria-hidden": !open
@@ -90,0 +96,0 @@ }, createElement("div", {

package.json

 {
   "name": "collapsible-react-component",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Collapses and expands content with an animation.",
@@ -17,2 +17,3 @@ "author": "FilipChalupa",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "dev": "npm start",
     "prepare": "run-s build",
@@ -19,0 +20,0 @@ "test": "run-s test:unit test:lint test:build",

README.md

@@ -48,1 +48,18 @@ # Collapsible react component
 ```
+
+## Development
+
+Run
+
+```sh
+npm ci
+npm run dev
+```
+
+and
+
+```sh
+cd example
+npm ci
+npm run dev
+```

No alert changes

Improved metrics

Total package byte prevSize

23348

7.29%

Lines of code

232

5.94%

Number of lines in readme file

65

35.42%

No dependency changes