@shopify/react-utilities - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

animation/TransitionChild.d.ts

@@ -16,2 +16,7 @@ /// <reference types="react" />
 }
+export interface State extends Transitionable {
+    nextStatus?: TransitionStatus;
+    nextResolve?(arg: any): void;
+    nextReject?(error: any): void;
+}
 export interface Props {
@@ -24,7 +29,6 @@ skipLeaving?: boolean;
 }
-export default class TransitionChild extends React.Component<Props, Transitionable> {
-    state: {
-        transitionStatus: TransitionStatus;
-    };
-    private timeoutId;
+export default class TransitionChild extends React.Component<Props, State> {
+    state: State;
+    private hasUnMounted;
+    componentDidUpdate(): void;
     componentWillAppear(callback: Function): any;
@@ -36,4 +40,5 @@ componentDidAppear(): void;
     componentDidLeave(): void;
+    componentWillUnmount(): void;
     render(): React.ReactElement<any>;
     private transitionBetweenStates(startStatus, activeStatus);
 }

animation/TransitionChild.js

@@ -16,3 +16,3 @@ "use strict";
 var events_1 = require("@shopify/javascript-utilities/events");
-var TICK = 20;
+var dom_1 = require("@shopify/javascript-utilities/dom");
 var DEV_TIMEOUT = 2000;
@@ -37,4 +37,41 @@ var TransitionStatus;
         };
+        _this.hasUnMounted = false;
         return _this;
     }
+    TransitionChild.prototype.componentDidUpdate = function () {
+        var _this = this;
+        var _a = this.state, nextResolve = _a.nextResolve, nextReject = _a.nextReject, nextStatus = _a.nextStatus;
+        if (nextResolve == null || nextReject == null || nextStatus == null) {
+            return;
+        }
+        var node = ReactDOM.findDOMNode(this);
+        var callback = function (event) {
+            var target = event.target;
+            var selector = _this.props.selector;
+            if (event.elapsedTime === 0) {
+                return;
+            }
+            if (target !== node && !targetMatchesSelector(target, selector)) {
+                return;
+            }
+            events_1.removeEventListener(node, 'animationend', callback);
+            events_1.removeEventListener(node, 'transitionend', callback);
+            nextResolve(event);
+        };
+        events_1.addEventListener(node, 'transitionend', callback);
+        events_1.addEventListener(node, 'animationend', callback);
+        if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+            setTimeout(function () {
+                events_1.removeEventListener(node, 'animationend', callback);
+                events_1.removeEventListener(node, 'transitionend', callback);
+                return nextReject(new Error('Timeout ended without an animation or transition finishing.'));
+            }, DEV_TIMEOUT);
+        }
+        this.setState({
+            nextResolve: undefined,
+            nextReject: undefined,
+            nextStatus: undefined,
+            transitionStatus: nextStatus,
+        });
+    };
     TransitionChild.prototype.componentWillAppear = function (callback) {
@@ -67,2 +104,5 @@ if (this.props.skipAppearing) {
     };
+    TransitionChild.prototype.componentWillUnmount = function () {
+        this.hasUnMounted = true;
+    };
     TransitionChild.prototype.render = function () {
@@ -76,26 +116,7 @@ var render = this.props.render;
         return new Promise(function (resolve, reject) {
-            _this.setState({ transitionStatus: startStatus }, function () {
-                var node = ReactDOM.findDOMNode(_this);
-                var callback = function (event) {
-                    var target = event.target;
-                    var selector = _this.props.selector;
-                    if (target !== node && !targetMatchesSelector(target, selector)) {
-                        return;
-                    }
-                    events_1.removeEventListener(node, 'animationend', callback);
-                    events_1.removeEventListener(node, 'transitionend', callback);
-                    resolve(event);
-                };
-                events_1.addEventListener(node, 'transitionend', callback);
-                events_1.addEventListener(node, 'animationend', callback);
-                if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
-                    setTimeout(function () {
-                        events_1.removeEventListener(node, 'animationend', callback);
-                        events_1.removeEventListener(node, 'transitionend', callback);
-                        return reject(new Error('Timeout ended without an animation or transition finishing.'));
-                    }, DEV_TIMEOUT);
-                }
-                clearTimeout(_this.timeoutId);
-                // if we don't have this timeout React will batch renders based on the two setState calls
-                _this.timeoutId = window.setTimeout(function () { return _this.setState({ transitionStatus: activeStatus }); }, TICK);
+            _this.setState({
+                transitionStatus: startStatus,
+                nextResolve: resolve,
+                nextReject: reject,
+                nextStatus: activeStatus,
             });
@@ -108,3 +129,3 @@ });
 function targetMatchesSelector(target, selector) {
-    return selector && target.matches(selector);
+    return selector && dom_1.matches(target, selector);
 }

animation/TransitionGroup.d.ts

@@ -13,5 +13,5 @@ /// <reference types="react" />
 }
-export default class TransitionGroup extends React.Component<Props, {}> {
+export default class TransitionGroup extends React.Component<Props, never> {
     static TransitionChild: typeof TransitionChild;
     render(): JSX.Element;
 }

animation/TransitionGroup.js

@@ -22,3 +22,3 @@ "use strict";
 var React = require("react");
-var ReactCSSTransitionGroup = require("react-addons-transition-group"); // tslint:disable-line no-require-imports
+var react_addons_transition_group_1 = require("react-addons-transition-group");
 var components_1 = require("../components");
@@ -51,3 +51,3 @@ var TransitionChild_1 = require("./TransitionChild");
         });
-        return (React.createElement(ReactCSSTransitionGroup, { component: wrapperComponent }, wrappedChildren));
+        return (React.createElement(react_addons_transition_group_1.default, { component: wrapperComponent }, wrappedChildren));
     };
@@ -54,0 +54,0 @@ return TransitionGroup;

components.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
 export declare function getDisplayName(Component: ReactComponent<any>): string;
-export declare function wrapWithComponent<P>(element: React.ReactNode | null | undefined, Component: ReactComponent<P>, props?: P): React.ReactNode;
+export declare function wrapWithComponent<P>(element: React.ReactNode | null | undefined, Component: ReactComponent<P>, props?: Partial<P>): React.ReactNode;
 export declare function isElementOfType(element: React.ReactNode | null | undefined, Component: ReactComponent<{}> | ReactComponent<{}>[]): boolean;
@@ -11,0 +11,0 @@ export declare function elementChildren<T extends React.ReactElement<{}>>(children: React.ReactNode, predicate?: ((element: T) => boolean)): T[];

components.js

@@ -94,5 +94,5 @@ "use strict";
 function layeredComponent(_a) {
-    var _b = (_a === void 0 ? {} : _a).idPrefix, idPrefix = _b === void 0 ? 'Layer' : _b;
+    var _b = (_a === void 0 ? {} : _a).idPrefix, idPrefix = _b === void 0 ? '' : _b;
     function uniqueID() {
-        return "" + idPrefix + layerIndex++;
+        return idPrefix + "Layer" + layerIndex++;
     }
@@ -133,3 +133,3 @@ return function createLayeredComponent(Component) {
                 // tslint:disable-next-line no-invalid-this
-                react_dom_1.render(layerOutput || React.createElement("span", null), this.layerNode);
+                react_dom_1.unstable_renderSubtreeIntoContainer(this, layerOutput || React.createElement("span", null), this.layerNode);
             },
@@ -136,0 +136,0 @@ componentWillUnmount: function () {

package.json

 {
   "name": "@shopify/react-utilities",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A set of utilities for React projects at Shopify.",
@@ -19,3 +19,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@shopify/javascript-utilities": "^1.0.1",
+    "@shopify/javascript-utilities": "^1.1.0",
     "@types/classnames": "^0.0.32",
@@ -22,0 +22,0 @@ "@types/node": "^7.0.12",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39032

increased by2.68%

Lines of code

797

increased by6.41%

Dependency changes

• Updated@shopify/javascript-utilities@^1.1.0