collapsible-react-component - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

dist/index.d.ts

@@ -1,11 +0,2 @@
-import * as React from 'react';
-export declare type Type = 'revealTopFirst' | 'revealBottomFirst';
-export declare type CollapsibleProps = {
-    open: boolean;
-    type?: Type;
-    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 {};
+export * from './Collapsible';
+export * from './RevealType';

dist/index.js

 var React = require('react');
 
-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"};
+var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
 
-var assertNever = function assertNever(_) {
-  throw new Error(JSON.stringify(_));
-};
-
-var forceReflow = function forceReflow(element) {
-  if (!element) {
-    return;
-  }
-
-  element.getBoundingClientRect();
-};
-
 var Collapsible = function Collapsible(_ref) {
@@ -21,76 +9,46 @@ var children = _ref.children,
       onTransitionEnd = _ref.onTransitionEnd,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
+      onTransitionStart = _ref.onTransitionStart,
+      _ref$revealType = _ref.revealType,
+      revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
 
-  var _useState = React.useState(open ? 'open' : 'closed'),
-      state = _useState[0],
-      setState = _useState[1];
+  var _React$useState = React.useState(false),
+      isTransitioning = _React$useState[0],
+      setIsTransitioning = _React$useState[1];
 
-  var _useState2 = React.useState('auto'),
-      contentHeight = _useState2[0],
-      setContentHeight = _useState2[1];
+  React.useLayoutEffect(function () {
+    return function () {
+      if (onTransitionStart) {
+        onTransitionStart(open);
+      }
 
-  var contentRef = React.useRef(null);
-  var updateContentHeight = React.useCallback(function () {
-    if (!contentRef.current) {
-      return;
-    }
-
-    var contentHeight = contentRef.current.getBoundingClientRect().height + "px";
-    setContentHeight(contentHeight);
-  }, []);
+      setIsTransitioning(true);
+    };
+  }, [open]);
   var handleTransitionEnd = React.useCallback(function (event) {
-    if (event.propertyName === 'visibility') {
-      var newState = open ? 'open' : 'closed';
-      setState(newState);
-
+    if (event.propertyName === 'grid-template-rows') {
       if (onTransitionEnd) {
-        onTransitionEnd(newState);
+        onTransitionEnd(open);
       }
+
+      setIsTransitioning(false);
     }
   }, [open, onTransitionEnd]);
-  React.useEffect(function () {
-    if (state === 'closed') {
-      if (open) {
-        updateContentHeight();
-        setState('before-open-transition');
-      }
-    } else if (state === 'before-open-transition') {
-      if (open) {
-        forceReflow(contentRef.current);
-        setState('open-transition');
-      }
-    } else if (state === 'open-transition') {
-      if (!open) {
-        setState('closed');
-      }
-    } else if (state === 'open') {
-      if (!open) {
-        updateContentHeight();
-        setState('before-closed-transition');
-      }
-    } else if (state === 'before-closed-transition') {
-      if (!open) {
-        forceReflow(contentRef.current);
-        setState('closed-transition');
-      }
-    } else if (state === 'closed-transition') {
-      if (open) {
-        setState('open');
-      }
-    } else {
-      assertNever(state);
+  var className = React.useMemo(function () {
+    var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
+
+    if (isTransitioning) {
+      classNames.push(styles.is_transitioning);
     }
-  }, [open, state, updateContentHeight]);
+
+    return classNames.join(' ');
+  }, [isTransitioning, open]);
   return React.createElement("div", {
-    className: style.wrapper + " " + style["is_state_" + state] + " " + style["is_type_" + type],
-    style: {
-      '--Collapsible-content-height': contentHeight
-    },
-    onTransitionEnd: handleTransitionEnd,
-    "aria-hidden": !open
+    className: className,
+    "aria-hidden": !open,
+    onTransitionEnd: handleTransitionEnd
   }, React.createElement("div", {
-    className: style.content,
-    ref: contentRef
-  }, children));
+    className: styles["in"]
+  }, React.createElement("div", {
+    className: styles.content
+  }, children)));
 };
@@ -97,0 +55,0 @@

dist/index.modern.js

@@ -1,17 +0,5 @@
-import { useState, useRef, useCallback, useEffect, createElement } from 'react';
+import { useState, useLayoutEffect, useCallback, useMemo, createElement } from 'react';
 
-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"};
+var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
 
-var assertNever = function assertNever(_) {
-  throw new Error(JSON.stringify(_));
-};
-
-var forceReflow = function forceReflow(element) {
-  if (!element) {
-    return;
-  }
-
-  element.getBoundingClientRect();
-};
-
 var Collapsible = function Collapsible(_ref) {
@@ -21,76 +9,46 @@ var children = _ref.children,
       onTransitionEnd = _ref.onTransitionEnd,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'revealBottomFirst' : _ref$type;
+      onTransitionStart = _ref.onTransitionStart,
+      _ref$revealType = _ref.revealType,
+      revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
 
-  var _useState = useState(open ? 'open' : 'closed'),
-      state = _useState[0],
-      setState = _useState[1];
+  var _React$useState = useState(false),
+      isTransitioning = _React$useState[0],
+      setIsTransitioning = _React$useState[1];
 
-  var _useState2 = useState('auto'),
-      contentHeight = _useState2[0],
-      setContentHeight = _useState2[1];
+  useLayoutEffect(function () {
+    return function () {
+      if (onTransitionStart) {
+        onTransitionStart(open);
+      }
 
-  var contentRef = useRef(null);
-  var updateContentHeight = useCallback(function () {
-    if (!contentRef.current) {
-      return;
-    }
-
-    var contentHeight = contentRef.current.getBoundingClientRect().height + "px";
-    setContentHeight(contentHeight);
-  }, []);
+      setIsTransitioning(true);
+    };
+  }, [open]);
   var handleTransitionEnd = useCallback(function (event) {
-    if (event.propertyName === 'visibility') {
-      var newState = open ? 'open' : 'closed';
-      setState(newState);
-
+    if (event.propertyName === 'grid-template-rows') {
       if (onTransitionEnd) {
-        onTransitionEnd(newState);
+        onTransitionEnd(open);
       }
+
+      setIsTransitioning(false);
     }
   }, [open, onTransitionEnd]);
-  useEffect(function () {
-    if (state === 'closed') {
-      if (open) {
-        updateContentHeight();
-        setState('before-open-transition');
-      }
-    } else if (state === 'before-open-transition') {
-      if (open) {
-        forceReflow(contentRef.current);
-        setState('open-transition');
-      }
-    } else if (state === 'open-transition') {
-      if (!open) {
-        setState('closed');
-      }
-    } else if (state === 'open') {
-      if (!open) {
-        updateContentHeight();
-        setState('before-closed-transition');
-      }
-    } else if (state === 'before-closed-transition') {
-      if (!open) {
-        forceReflow(contentRef.current);
-        setState('closed-transition');
-      }
-    } else if (state === 'closed-transition') {
-      if (open) {
-        setState('open');
-      }
-    } else {
-      assertNever(state);
+  var className = useMemo(function () {
+    var classNames = [styles.wrapper, open ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
+
+    if (isTransitioning) {
+      classNames.push(styles.is_transitioning);
     }
-  }, [open, state, updateContentHeight]);
+
+    return classNames.join(' ');
+  }, [isTransitioning, open]);
   return createElement("div", {
-    className: style.wrapper + " " + style["is_state_" + state] + " " + style["is_type_" + type],
-    style: {
-      '--Collapsible-content-height': contentHeight
-    },
-    onTransitionEnd: handleTransitionEnd,
-    "aria-hidden": !open
+    className: className,
+    "aria-hidden": !open,
+    onTransitionEnd: handleTransitionEnd
   }, createElement("div", {
-    className: style.content,
-    ref: contentRef
-  }, children));
+    className: styles["in"]
+  }, createElement("div", {
+    className: styles.content
+  }, children)));
 };
@@ -97,0 +55,0 @@

package.json

 {
   "name": "collapsible-react-component",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Collapses and expands content with an animation.",
@@ -12,3 +12,3 @@ "author": "FilipChalupa",
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
@@ -15,0 +15,0 @@ "scripts": {

README.md

@@ -40,6 +40,9 @@ # Collapsible react component
         open={open}
-        onTransitionEnd={(newState) => {
-          console.log('Collapsible box is now', newState)
+        onTransitionStart={(open) => {
+          console.log('Collapsible box used to be', open ? 'open' : 'closed')
         }}
-        type='revealBottomFirst'
+        onTransitionEnd={(open) => {
+          console.log('Collapsible box is now', open ? 'open' : 'closed')
+        }}
+        revealType='bottomFirst'
       >
@@ -58,8 +61,9 @@ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, sed
 
-| Name              | Required | Default                                 | Description                                               |
-| ----------------- | -------- | --------------------------------------- | --------------------------------------------------------- |
-| `open`            | ✅       | `false`                                 | Determines wheter the children content should be visible. |
-| `children`        | ✅       | none                                    | Collapsible content.                                      |
-| `onTransitionEnd` |          | noop                                    | Callback after content is fully expanded or fully closed. |
-| `type`            |          | `revealBottomFirst` or `revealTopFirst` | Type of transition animation.                             |
+| Name                | Required | Default       | Type                      | Description                                                                          |
+| ------------------- | -------- | ------------- | ------------------------- | ------------------------------------------------------------------------------------ |
+| `open`              | ✅       | none          | `boolean`                 | Determines wheter the children content should be visible.                            |
+| `children`          | ✅       | none          | `ReactNode`               | Collapsible content.                                                                 |
+| `onTransitionStart` |          | noop          | `(open: boolean) => void` | Callback invoked when transition starts. `open` is the starting state.               |
+| `onTransitionEnd`   |          | noop          | `(open: boolean) => void` | Callback after content is fully expanded or fully closed. `open` is the final state. |
+| `revealType`        |          | `bottomFirst` | `bottomFirst \| topFirst` | Type of transition animation.                                                        |
 
@@ -66,0 +70,0 @@ ## Development

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

13

18.18%

Number of lines in readme file

84

5%

Worsened metrics

Total package byte prevSize

17025

-30.28%

Lines of code

150

-35.62%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes