@transferwise/components 0.0.0-experimental-0df7ed4 → 0.0.0-experimental-75135c1

package/build/types/upload/Upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.d.ts","sourceRoot":"","sources":["../../../src/upload/Upload.js"],"names":[],"mappings":";;;;AA2BA;IACE,wBAeC;IAbC,oBAAoB;IACpB,gCAAoB;IAEpB;;;;;;;;;MASC;IAGH,kCAiBC;IAED,8BAMC;IAED,8BAQC;IAED,yBAUC;IAED,qDA6BE;IAEF,4CAQE;IAEF,kDASE;IAEF,8CAKE;IAEF,oCAQE;IAEF,kBASE;IAEF,sCAOE;IAEF,6CAyEE;IAEF,sCA2GC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAzVD,wCAAiC"}
+{"version":3,"file":"Upload.d.ts","sourceRoot":"","sources":["../../../src/upload/Upload.js"],"names":[],"mappings":";;;;AA2BA;IACE,wBAeC;IAbC,oBAAoB;IACpB,gCAAoB;IAEpB;;;;;;;;;MASC;IAGH,kCAiBC;IAED,8BAMC;IAED,8BAQC;IAED,yBAUC;IAED,qDAwBE;IAEF,4CAQE;IAEF,kDASE;IAEF,8CAKE;IAEF,oCAQE;IAEF,kBASE;IAEF,sCAOE;IAEF,6CAyEE;IAEF,sCA2GC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApVD,wCAAiC"}

package/build/types/upload/steps/processingStep/processingStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.js"],"names":[],"mappings":";AASA,yEAkDC"}
+{"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.js"],"names":[],"mappings":";AAQA,yEAyCC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-0df7ed4",
+  "version": "0.0.0-experimental-75135c1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/upload/Upload.js

@@ -95,31 +95,26 @@ class Upload extends Component {
   onAnimationCompleted = async (status) => {
     const { response, isProcessing, fileName } = this.state;
     // Success.
-    const { animationDelay } = this.props;
     if (isProcessing && status === Status.SUCCEEDED) {
       const { onSuccess } = this.props;
-      this.timeouts = setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          () => (onSuccess ? onSuccess(response, fileName) : {}),
-        );
-      }, animationDelay);
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => (onSuccess ? onSuccess(response, fileName) : {}),
+      );
     }
     // Failure.
     if (isProcessing && status === Status.FAILED) {
       const { onFailure } = this.props;
-      this.timeouts = setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          () => (onFailure ? onFailure(response) : {}),
-        );
-      }, animationDelay);
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => (onFailure ? onFailure(response) : {}),
+      );
     }
   };
 
@@ -409,7 +404,7 @@ Upload.propTypes = {
 };
 
 Upload.defaultProps = {
-  animationDelay: 700,
+  animationDelay: 0,
   csButtonText: undefined,
   csFailureText: undefined,
   csSuccessText: undefined,

package/src/upload/steps/processingStep/processingStep.js

@@ -1,6 +1,5 @@
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useEffect } from 'react';
 
 import Button from '../../../button';
 import { Status, Size, Typography } from '../../../common';
@@ -19,8 +18,6 @@ const ProcessingStep = (props) => {
     psButtonDisabled,
   } = props;
 
-  const { isModern } = useTheme();
-
   let processStatus = Status.PROCESSING;
   if (isError) {
     processStatus = Status.FAILED;
@@ -29,24 +26,17 @@ const ProcessingStep = (props) => {
     processStatus = Status.SUCCEEDED;
   }
 
+  useEffect(() => {
+    if (processStatus !== Status.PROCESSING) {
+      onAnimationCompleted(processStatus);
+    }
+  }, [processStatus, onAnimationCompleted]);
+
   return (
     <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
       <div className="droppable-card-content">
-        <ProcessIndicator
-          size={Size.Small}
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
-        <Title
-          className={classNames({
-            'm-t-3': !isModern,
-            'm-b-3': !isModern,
-            'm-t-2': isModern,
-            'm-b-2': isModern,
-          })}
-          type={Typography.TITLE_BODY}
-          aria-live="polite"
-        >
+        <ProcessIndicator size={Size.SMALL} status={processStatus} />
+        <Title className="m-t-2 m-b-2" type={Typography.TITLE_BODY} aria-live="polite">
           {psProcessingText}
         </Title>
         {psButtonText && (