@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-alpha.11 to 2.0.0-alpha.12

es/Collapse.js

@@ -34,2 +34,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     leaveDuration: 200,
+    disabled: false,
 };
@@ -62,2 +63,3 @@ Collapse.defaultProps = defaultProps;
             onCollapsed: PropTypes.func,
+            disabled: PropTypes.bool,
         };
@@ -64,0 +66,0 @@ }

es/useCollapseTransition.js

@@ -121,6 +121,6 @@ var __assign = (this && this.__assign) || function () {
     var _a;
-    var collapsed = options.collapsed, style = options.style, className = options.className, isEmptyCollapsed = options.isEmptyCollapsed, _b = options.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = options.minPaddingTop, minPaddingTop = _c === void 0 ? 0 : _c, _d = options.minPaddingBottom, minPaddingBottom = _d === void 0 ? 0 : _d, _e = options.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = options.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, onExpanded = options.onExpanded, onCollapsed = options.onCollapsed;
+    var collapsed = options.collapsed, style = options.style, className = options.className, isEmptyCollapsed = options.isEmptyCollapsed, _b = options.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = options.minPaddingTop, minPaddingTop = _c === void 0 ? 0 : _c, _d = options.minPaddingBottom, minPaddingBottom = _d === void 0 ? 0 : _d, _e = options.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = options.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, onExpanded = options.onExpanded, onCollapsed = options.onCollapsed, _g = options.disabled, disabled = _g === void 0 ? false : _g;
     var ref = useRef(null);
     var collapsedRef = useRef(collapsed);
-    var _g = useState({
+    var _h = useState({
         entering: false,
@@ -131,3 +131,3 @@ leaving: false,
         paddingBottom: collapsed ? minPaddingBottom : undefined,
-    }), state = _g[0], setState = _g[1];
+    }), state = _h[0], setState = _h[1];
     var entering = state.entering, leaving = state.leaving, maxHeight = state.maxHeight, paddingTop = state.paddingTop, paddingBottom = state.paddingBottom;
@@ -144,9 +144,12 @@ var rendered = isRendered({
     if (collapsedRef.current !== collapsed) {
-        var maxHeight_1 = minHeight;
-        var paddingTop_1 = minPaddingTop;
-        var paddingBottom_1 = minPaddingBottom;
+        collapsedRef.current = collapsed;
+        var defaults = {
+            maxHeight: disabled ? undefined : minHeight,
+            paddingTop: disabled ? undefined : minPaddingTop,
+            paddingBottom: disabled ? undefined : minPaddingBottom,
+        };
+        var maxHeight_1 = defaults.maxHeight, paddingTop_1 = defaults.paddingTop, paddingBottom_1 = defaults.paddingBottom;
         if (collapsed) {
             (_a = getElementSizing(ref.current), maxHeight_1 = _a.maxHeight, paddingTop_1 = _a.paddingTop, paddingBottom_1 = _a.paddingBottom);
         }
-        collapsedRef.current = collapsed;
         setState({
@@ -156,4 +159,4 @@ maxHeight: maxHeight_1,
             paddingBottom: paddingBottom_1,
-            entering: !collapsed,
-            leaving: collapsed,
+            entering: disabled ? false : !collapsed,
+            leaving: disabled ? false : collapsed,
         });
@@ -203,5 +206,6 @@ }
             style: mergedStyle,
-            className: cn("rmd-collapse", {
-                "rmd-collapse--enter": entering,
-                "rmd-collapse--leave": leaving,
+            className: cn({
+                "rmd-collapse": !disabled,
+                "rmd-collapse--enter": !disabled && entering,
+                "rmd-collapse--leave": !disabled && leaving,
                 "rmd-collapse--no-overflow": collapsed || entering || leaving,
@@ -208,0 +212,0 @@ }, className),

lib/Collapse.js

@@ -36,2 +36,3 @@ "use strict";
     leaveDuration: 200,
+    disabled: false,
 };
@@ -64,2 +65,3 @@ Collapse.defaultProps = defaultProps;
             onCollapsed: PropTypes.func,
+            disabled: PropTypes.bool,
         };
@@ -66,0 +68,0 @@ }

lib/useCollapseTransition.js

@@ -131,6 +131,6 @@ "use strict";
     var _a;
-    var collapsed = options.collapsed, style = options.style, className = options.className, isEmptyCollapsed = options.isEmptyCollapsed, _b = options.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = options.minPaddingTop, minPaddingTop = _c === void 0 ? 0 : _c, _d = options.minPaddingBottom, minPaddingBottom = _d === void 0 ? 0 : _d, _e = options.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = options.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, onExpanded = options.onExpanded, onCollapsed = options.onCollapsed;
+    var collapsed = options.collapsed, style = options.style, className = options.className, isEmptyCollapsed = options.isEmptyCollapsed, _b = options.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = options.minPaddingTop, minPaddingTop = _c === void 0 ? 0 : _c, _d = options.minPaddingBottom, minPaddingBottom = _d === void 0 ? 0 : _d, _e = options.enterDuration, enterDuration = _e === void 0 ? 250 : _e, _f = options.leaveDuration, leaveDuration = _f === void 0 ? 200 : _f, onExpanded = options.onExpanded, onCollapsed = options.onCollapsed, _g = options.disabled, disabled = _g === void 0 ? false : _g;
     var ref = react_1.useRef(null);
     var collapsedRef = react_1.useRef(collapsed);
-    var _g = react_1.useState({
+    var _h = react_1.useState({
         entering: false,
@@ -141,3 +141,3 @@ leaving: false,
         paddingBottom: collapsed ? minPaddingBottom : undefined,
-    }), state = _g[0], setState = _g[1];
+    }), state = _h[0], setState = _h[1];
     var entering = state.entering, leaving = state.leaving, maxHeight = state.maxHeight, paddingTop = state.paddingTop, paddingBottom = state.paddingBottom;
@@ -154,9 +154,12 @@ var rendered = isRendered({
     if (collapsedRef.current !== collapsed) {
-        var maxHeight_1 = minHeight;
-        var paddingTop_1 = minPaddingTop;
-        var paddingBottom_1 = minPaddingBottom;
+        collapsedRef.current = collapsed;
+        var defaults = {
+            maxHeight: disabled ? undefined : minHeight,
+            paddingTop: disabled ? undefined : minPaddingTop,
+            paddingBottom: disabled ? undefined : minPaddingBottom,
+        };
+        var maxHeight_1 = defaults.maxHeight, paddingTop_1 = defaults.paddingTop, paddingBottom_1 = defaults.paddingBottom;
         if (collapsed) {
             (_a = getElementSizing(ref.current), maxHeight_1 = _a.maxHeight, paddingTop_1 = _a.paddingTop, paddingBottom_1 = _a.paddingBottom);
         }
-        collapsedRef.current = collapsed;
         setState({
@@ -166,4 +169,4 @@ maxHeight: maxHeight_1,
             paddingBottom: paddingBottom_1,
-            entering: !collapsed,
-            leaving: collapsed,
+            entering: disabled ? false : !collapsed,
+            leaving: disabled ? false : collapsed,
         });
@@ -213,5 +216,6 @@ }
             style: mergedStyle,
-            className: classnames_1.default("rmd-collapse", {
-                "rmd-collapse--enter": entering,
-                "rmd-collapse--leave": leaving,
+            className: classnames_1.default({
+                "rmd-collapse": !disabled,
+                "rmd-collapse--enter": !disabled && entering,
+                "rmd-collapse--leave": !disabled && leaving,
                 "rmd-collapse--no-overflow": collapsed || entering || leaving,
@@ -218,0 +222,0 @@ }, className),

package.json

 {
   "name": "@react-md/transition",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "description": "A package for working with react-md to use some simple transitions.",
@@ -39,5 +39,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/portal": "^2.0.0-alpha.11",
-    "@react-md/theme": "^2.0.0-alpha.11",
-    "@react-md/utils": "^2.0.0-alpha.11",
+    "@react-md/portal": "^2.0.0-alpha.12",
+    "@react-md/theme": "^2.0.0-alpha.12",
+    "@react-md/utils": "^2.0.0-alpha.12",
     "@types/react-transition-group": "^4.2.3",
@@ -56,3 +56,3 @@ "classnames": "^2.2.6",
   },
-  "gitHead": "740017d534dece692a4520df98de74df4d2e55c7"
+  "gitHead": "b31afe8dc076cf0647ac3e99dc0b61f8f4b7b0e2"
 }

src/useCollapseTransition.ts

@@ -92,2 +92,8 @@ import {
   onCollapsed?: () => void;
+
+  /**
+   * Boolean if the transition should be disabled and just immediately switch to the collapsed
+   * or full size.
+   */
+  disabled?: boolean;
 }
@@ -122,2 +128,7 @@
 
+type SizingDefaults = Pick<
+  CollapseState,
+  "maxHeight" | "paddingTop" | "paddingBottom"
+>;
+
 interface CollapseStateWithSetter extends CollapseState {
@@ -314,2 +325,3 @@ setState: Dispatch<SetStateAction<CollapseState>>;
     onCollapsed,
+    disabled = false,
   } = options;
@@ -339,5 +351,10 @@
   if (collapsedRef.current !== collapsed) {
-    let maxHeight: string | number | undefined = minHeight;
-    let paddingTop: string | number | undefined = minPaddingTop;
-    let paddingBottom: string | number | undefined = minPaddingBottom;
+    collapsedRef.current = collapsed;
+    const defaults: SizingDefaults = {
+      maxHeight: disabled ? undefined : minHeight,
+      paddingTop: disabled ? undefined : minPaddingTop,
+      paddingBottom: disabled ? undefined : minPaddingBottom,
+    };
+
+    let { maxHeight, paddingTop, paddingBottom } = defaults;
     if (collapsed) {
@@ -349,3 +366,2 @@ ({ maxHeight, paddingTop, paddingBottom } = getElementSizing(
 
-    collapsedRef.current = collapsed;
     setState({
@@ -355,4 +371,4 @@ maxHeight,
       paddingBottom,
-      entering: !collapsed,
-      leaving: collapsed,
+      entering: disabled ? false : !collapsed,
+      leaving: disabled ? false : collapsed,
     });
@@ -425,6 +441,6 @@ }
       className: cn(
-        "rmd-collapse",
         {
-          "rmd-collapse--enter": entering,
-          "rmd-collapse--leave": leaving,
+          "rmd-collapse": !disabled,
+          "rmd-collapse--enter": !disabled && entering,
+          "rmd-collapse--leave": !disabled && leaving,
           "rmd-collapse--no-overflow": collapsed || entering || leaving,
@@ -431,0 +447,0 @@ },

types/useCollapseTransition.d.ts

@@ -68,2 +68,7 @@ import { CSSProperties, Dispatch, ReactElement, SetStateAction, MutableRefObject } from "react";
     onCollapsed?: () => void;
+    /**
+     * Boolean if the transition should be disabled and just immediately switch to the collapsed
+     * or full size.
+     */
+    disabled?: boolean;
 }
@@ -70,0 +75,0 @@ declare type CollapseOptionsWithDefaults = CollapseOptions & Required<Pick<CollapseOptions, "minHeight" | "minPaddingTop" | "minPaddingBottom" | "enterDuration" | "leaveDuration">>;

No alert changes

Improved metrics

Total package byte prevSize

522196

increased by0.45%

Lines of code

3067

increased by1.09%

Dependency changes

• Updated@react-md/portal@^2.0.0-alpha.12

• Updated@react-md/theme@^2.0.0-alpha.12

• Updated@react-md/utils@^2.0.0-alpha.12