@instructure/ui-motion 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-motion
 

package/es/Transition/BaseTransition/index.js

@@ -40,40 +40,84 @@ private: true
 **/
 
 class BaseTransition extends React.Component {
-  constructor() {
-    var _this;
-
-    super(...arguments);
-    _this = this;
-    this._timeouts = [];
-    this._unmounted = false;
-    this.state = {
-      transitioning: false
-    };
-    this.ref = null;
+  static displayName = "BaseTransition";
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    in: false,
+    unmountOnExit: false,
+    transitionOnMount: false,
+    transitionEnter: true,
+    transitionExit: true,
+    enterDelay: 300,
+    exitDelay: 300
+  };
+  static states = STATES;
+  _timeouts = [];
+  _unmounted = false;
+  state = {
+    transitioning: false
+  };
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
+  componentDidMount() {
+    this.startTransition(this.props.in, this.props.transitionOnMount);
+  }
 
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    if (this.props.in !== prevProps.in && prevState.transitioning) {
+      // direction changed before previous transition finished
+      return true;
+    }
 
-    this.startTransition = (transitionIn, transitionOnStart) => {
-      const _this$props = this.props,
-            transitionEnter = _this$props.transitionEnter,
-            transitionExit = _this$props.transitionExit;
+    return null;
+  }
 
-      if (transitionIn) {
-        this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
-      } else {
-        this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
-      }
-    };
+  componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
+    if (cancelPrematurely) {
+      this.clearTransition(prevProps.transitionClassName);
+    }
+
+    if (this.props.transitionClassName !== prevProps.transitionClassName) {
+      this.clearTransition(prevProps.transitionClassName);
+    }
+
+    if (prevProps.in !== this.props.in) {
+      this.startTransition(this.props.in, true);
+    }
+  }
+
+  componentWillUnmount() {
+    this._timeouts.forEach(timeout => {
+      clearTimeout(timeout);
+    });
+
+    this._unmounted = true;
+  }
+
+  startTransition = (transitionIn, transitionOnStart) => {
+    const _this$props = this.props,
+          transitionEnter = _this$props.transitionEnter,
+          transitionExit = _this$props.transitionExit;
+
+    if (transitionIn) {
+      this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
+    } else {
+      this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
+    }
+  };
+  transition = (() => {
+    var _this = this;
 
-    this.transition = function (toState, fromState, transitionCallback) {
+    return function (toState, fromState, transitionCallback) {
       let transitionDuration = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
       if (_this._unmounted) return;
       const onTransition = _this.props.onTransition;
@@ -111,140 +155,7 @@ class BaseTransition extends React.Component {
         }
       }, transitionDuration));
     };
-
-    this.enter = initialState => {
-      if (this.state.transitioning || this._unmounted) return;
-      const props = this.props;
-
-      if (typeof props.onEnter === 'function') {
-        props.onEnter();
-      }
-
-      if (props.transitionEnter) {
-        this.setState({
-          transitioning: true
-        }, () => {
-          const enter = () => {
-            if (typeof props.onEntering === 'function') {
-              props.onEntering();
-            }
-
-            this.transition(STATES.ENTERED, STATES.ENTERING, () => {
-              this.setState({
-                transitioning: false
-              }, () => {
-                if (typeof props.onEntered === 'function') {
-                  props.onEntered();
-                }
-              });
-            });
-          };
-
-          if (initialState) {
-            this.transition(initialState, null, () => {
-              this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
-            });
-          } else {
-            enter();
-          }
-        });
-      } else {
-        this.setState({
-          transitioning: false
-        }, () => {
-          this.transition(STATES.ENTERED, STATES.EXITED);
-
-          if (typeof props.onEntered === 'function') {
-            props.onEntered();
-          }
-        });
-      }
-    };
-
-    this.exit = initialState => {
-      if (this.state.transitioning) return;
-      const props = this.props;
-
-      if (typeof props.onExit === 'function') {
-        props.onExit();
-      }
-
-      if (props.transitionExit) {
-        this.setState({
-          transitioning: true
-        }, () => {
-          const exit = () => {
-            if (typeof props.onExiting === 'function') {
-              props.onExiting();
-            }
-
-            this.transition(STATES.EXITED, STATES.EXITING, () => {
-              this.setState({
-                transitioning: false
-              }, () => {
-                if (typeof props.onExited === 'function') {
-                  props.onExited();
-                }
-              });
-            });
-          };
-
-          if (initialState) {
-            this.transition(initialState, null, () => {
-              this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
-            });
-          } else {
-            exit();
-          }
-        });
-      } else {
-        this.setState({
-          transitioning: false
-        }, () => {
-          this.transition(STATES.EXITED, STATES.ENTERED);
-
-          if (typeof props.onExited === 'function') {
-            props.onExited();
-          }
-        });
-      }
-    };
-  }
-
-  componentDidMount() {
-    this.startTransition(this.props.in, this.props.transitionOnMount);
-  }
-
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (this.props.in !== prevProps.in && prevState.transitioning) {
-      // direction changed before previous transition finished
-      return true;
-    }
-
-    return null;
-  }
-
-  componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
-    if (cancelPrematurely) {
-      this.clearTransition(prevProps.transitionClassName);
-    }
-
-    if (this.props.transitionClassName !== prevProps.transitionClassName) {
-      this.clearTransition(prevProps.transitionClassName);
-    }
-
-    if (prevProps.in !== this.props.in) {
-      this.startTransition(this.props.in, true);
-    }
-  }
-
-  componentWillUnmount() {
-    this._timeouts.forEach(timeout => {
-      clearTimeout(timeout);
-    });
-
-    this._unmounted = true;
-  }
+  })();
 
   clearTransition(transitionClassName) {
     if (this._unmounted) return;
@@ -264,6 +175,103 @@ class BaseTransition extends React.Component {
     });
   }
 
+  enter = initialState => {
+    if (this.state.transitioning || this._unmounted) return;
+    const props = this.props;
+
+    if (typeof props.onEnter === 'function') {
+      props.onEnter();
+    }
+
+    if (props.transitionEnter) {
+      this.setState({
+        transitioning: true
+      }, () => {
+        const enter = () => {
+          if (typeof props.onEntering === 'function') {
+            props.onEntering();
+          }
+
+          this.transition(STATES.ENTERED, STATES.ENTERING, () => {
+            this.setState({
+              transitioning: false
+            }, () => {
+              if (typeof props.onEntered === 'function') {
+                props.onEntered();
+              }
+            });
+          });
+        };
+
+        if (initialState) {
+          this.transition(initialState, null, () => {
+            this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
+          });
+        } else {
+          enter();
+        }
+      });
+    } else {
+      this.setState({
+        transitioning: false
+      }, () => {
+        this.transition(STATES.ENTERED, STATES.EXITED);
+
+        if (typeof props.onEntered === 'function') {
+          props.onEntered();
+        }
+      });
+    }
+  };
+  exit = initialState => {
+    if (this.state.transitioning) return;
+    const props = this.props;
+
+    if (typeof props.onExit === 'function') {
+      props.onExit();
+    }
+
+    if (props.transitionExit) {
+      this.setState({
+        transitioning: true
+      }, () => {
+        const exit = () => {
+          if (typeof props.onExiting === 'function') {
+            props.onExiting();
+          }
+
+          this.transition(STATES.EXITED, STATES.EXITING, () => {
+            this.setState({
+              transitioning: false
+            }, () => {
+              if (typeof props.onExited === 'function') {
+                props.onExited();
+              }
+            });
+          });
+        };
+
+        if (initialState) {
+          this.transition(initialState, null, () => {
+            this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
+          });
+        } else {
+          exit();
+        }
+      });
+    } else {
+      this.setState({
+        transitioning: false
+      }, () => {
+        this.transition(STATES.EXITED, STATES.ENTERED);
+
+        if (typeof props.onExited === 'function') {
+          props.onExited();
+        }
+      });
+    }
+  };
+
   transitionEnabled(toState) {
     const props = this.props;
 
@@ -322,18 +330,5 @@ class BaseTransition extends React.Component {
 
 }
 
-BaseTransition.displayName = "BaseTransition";
-BaseTransition.propTypes = propTypes;
-BaseTransition.allowedProps = allowedProps;
-BaseTransition.defaultProps = {
-  in: false,
-  unmountOnExit: false,
-  transitionOnMount: false,
-  transitionEnter: true,
-  transitionExit: true,
-  enterDelay: 300,
-  exitDelay: 300
-};
-BaseTransition.states = STATES;
 export default BaseTransition;
 export { BaseTransition };

package/es/Transition/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["type", "children", "styles"];
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -48,39 +48,29 @@ category: components/utilities
 @module Transition
 @tsProps
 **/
-let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Transition extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.handleExited = () => {
-      if (typeof this.props.onExited === 'function') {
-        this.props.onExited(this.props.type);
-      }
-    };
-
-    this.handleEntered = () => {
-      if (typeof this.props.onEntered === 'function') {
-        this.props.onEntered(this.props.type);
-      }
-    };
-
-    this.renderTransitionHelper = () => {
-      const styles = this.props.styles;
-      return jsx(Global, {
-        styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
-      });
-    };
-  }
+let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Transition extends Component {
+  static displayName = "Transition";
+  static componentId = 'Transition';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    type: 'fade',
+    in: false,
+    unmountOnExit: false,
+    transitionOnMount: false,
+    transitionEnter: true,
+    transitionExit: true
+  };
+  static states = BaseTransition.states;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -94,6 +84,28 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  handleExited = () => {
+    if (typeof this.props.onExited === 'function') {
+      this.props.onExited(this.props.type);
+    }
+  };
+  handleEntered = () => {
+    if (typeof this.props.onEntered === 'function') {
+      this.props.onEntered(this.props.type);
+    }
+  }; // Transition helper:
+  // After emotion migration the only way to keep
+  // the old BaseTransition functionality with adding and removing
+  // classes was to add the `Global` helper of `emotion`
+  // Todo: try to refactor or replace Transition/BaseTransition component in v9.0.0. so that it is not class based
+
+  renderTransitionHelper = () => {
+    const styles = this.props.styles;
+    return jsx(Global, {
+      styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
+    });
+  };
+
   render() {
     const _this$props3 = this.props,
           type = _this$props3.type,
@@ -116,13 +128,6 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     }), children));
   }
 
-}, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  type: 'fade',
-  in: false,
-  unmountOnExit: false,
-  transitionOnMount: false,
-  transitionEnter: true,
-  transitionExit: true
-}, _class2.states = BaseTransition.states, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default Transition;
 export { Transition };