@transferwise/components 0.0.0-experimental-4b040f3 → 0.0.0-experimental-2bd073b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/build/types/upload/Upload.d.ts +1 -2
  2. package/build/types/upload/Upload.d.ts.map +1 -1
  3. package/build/types/upload/steps/processingStep/processingStep.d.ts +1 -3
  4. package/build/types/upload/steps/processingStep/processingStep.d.ts.map +1 -1
  5. package/build/upload/Upload.js +27 -43
  6. package/build/upload/Upload.js.map +1 -1
  7. package/build/upload/Upload.mjs +27 -43
  8. package/build/upload/Upload.mjs.map +1 -1
  9. package/build/upload/steps/processingStep/processingStep.js +1 -3
  10. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  11. package/build/upload/steps/processingStep/processingStep.mjs +1 -3
  12. package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
  13. package/package.json +5 -5
  14. package/src/upload/Upload.spec.tsx +63 -0
  15. package/src/upload/Upload.story.tsx +0 -51
  16. package/src/upload/Upload.tests.story.tsx +93 -0
  17. package/src/upload/Upload.tsx +28 -49
  18. package/src/upload/steps/processingStep/processingStep.tsx +2 -7
package/build/types/upload/Upload.d.ts CHANGED
@@ -2,7 +2,6 @@ import { Component } from 'react';
2
2
  import { WrappedComponentProps } from 'react-intl';
3
3
  import { Size } from '../common';
4
4
  import { PostDataFetcher, PostDataHTTPOptions } from './utils/postData/postData';
5
- import { ProcessIndicatorStatus } from '../processIndicator';
6
5
  export declare const MAX_SIZE_DEFAULT = 5000000;
7
6
  export declare enum UploadStep {
8
7
  UPLOAD_IMAGE_STEP = "uploadImageStep"
@@ -81,8 +80,8 @@ export declare class Upload extends Component<UploadProps, UploadState> {
81
80
  onDragLeave(event: React.DragEvent<HTMLDivElement>): void;
82
81
  onDragEnter(event: React.DragEvent<HTMLDivElement>): void;
83
82
  onDrop(event: React.DragEvent<HTMLDivElement>): Promise<void>;
84
- onAnimationCompleted: (status: ProcessIndicatorStatus) => Promise<void>;
85
83
  asyncPost: (file: File) => Promise<Response>;
84
+ handleUploadComplete: (type: "success" | "error", response: unknown) => void;
86
85
  asyncResponse: (response: unknown, type: "success" | "error") => void;
87
86
  handleOnClear: React.MouseEventHandler<HTMLButtonElement>;
88
87
  reset: () => void;
package/build/types/upload/Upload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Upload.d.ts","sourceRoot":"","sources":["../../../src/upload/Upload.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Upload.d.ts","sourceRoot":"","sources":["../../../src/upload/Upload.tsx"],"names":[],"mappings":"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"}
package/build/types/upload/steps/processingStep/processingStep.d.ts CHANGED
@@ -1,13 +1,11 @@
1
- import { ProcessIndicatorStatus } from '../../../processIndicator';
2
1
  export interface ProcessingStepProps {
3
2
  isComplete: boolean;
4
3
  isError: boolean;
5
4
  isSuccess: boolean;
6
- onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
7
5
  onClear: React.MouseEventHandler<HTMLButtonElement>;
8
6
  psButtonText: string;
9
7
  psProcessingText: string;
10
8
  psButtonDisabled: boolean;
11
9
  }
12
- export default function ProcessingStep({ isComplete, isError, isSuccess, onAnimationCompleted, onClear, psButtonText, psProcessingText, psButtonDisabled, }: ProcessingStepProps): import("react").JSX.Element;
10
+ export default function ProcessingStep({ isComplete, isError, isSuccess, onClear, psButtonText, psProcessingText, psButtonDisabled, }: ProcessingStepProps): import("react").JSX.Element;
13
11
  //# sourceMappingURL=processingStep.d.ts.map
package/build/types/upload/steps/processingStep/processingStep.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAGrF,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC/D,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,OAAO,EACP,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,mBAAmB,+BA2BrB"}
1
+ {"version":3,"file":"processingStep.d.ts","sourceRoot":"","sources":["../../../../../src/upload/steps/processingStep/processingStep.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,mBAAmB,+BAwBrB"}
package/build/upload/Upload.js CHANGED
@@ -38,7 +38,6 @@ var isSizeValid = require('./utils/isSizeValid/isSizeValid.js');
38
38
  var isTypeValid = require('./utils/isTypeValid/isTypeValid.js');
39
39
  var getFileType = require('./utils/getFileType/getFileType.js');
40
40
 
41
- const ANIMATION_FIX = 10;
42
41
  const MAX_SIZE_DEFAULT = 5000000;
43
42
  exports.UploadStep = void 0;
44
43
  (function (UploadStep) {
@@ -46,7 +45,7 @@ exports.UploadStep = void 0;
46
45
  })(exports.UploadStep || (exports.UploadStep = {}));
47
46
  class Upload extends React.Component {
48
47
  static defaultProps = (() => ({
49
- animationDelay: 700,
48
+ animationDelay: 300,
50
49
  maxSize: MAX_SIZE_DEFAULT,
51
50
  psButtonDisabled: false,
52
51
  size: 'md',
@@ -125,40 +124,6 @@ class Upload extends React.Component {
125
124
  await this.fileDropped(event.dataTransfer.files[0]);
126
125
  }
127
126
  }
128
- onAnimationCompleted = async status => {
129
- const {
130
- response,
131
- isProcessing,
132
- fileName
133
- } = this.state;
134
- const {
135
- animationDelay
136
- } = this.props;
137
- if (isProcessing && status === 'succeeded') {
138
- const {
139
- onSuccess
140
- } = this.props;
141
- this.timeouts = window.setTimeout(() => {
142
- this.setState({
143
- isProcessing: false,
144
- isComplete: true
145
- }, onSuccess ? () => {
146
- onSuccess(response, fileName);
147
- } : undefined);
148
- }, animationDelay);
149
- }
150
- if (isProcessing && status === 'failed') {
151
- const {
152
- onFailure
153
- } = this.props;
154
- this.timeouts = window.setTimeout(() => {
155
- this.setState({
156
- isProcessing: false,
157
- isComplete: true
158
- }, onFailure ? () => onFailure(response) : undefined);
159
- }, animationDelay);
160
- }
161
- };
162
127
  asyncPost = async file => {
163
128
  const {
164
129
  httpOptions,
@@ -176,15 +141,35 @@ class Upload extends React.Component {
176
141
  Object.keys(data).forEach(key => formData.append(key, data[key]));
177
142
  return postData.postData(httpOptions, formData, fetcher);
178
143
  };
179
- asyncResponse = (response, type) => {
180
- // Gives time to the animation callback to fire.
144
+ handleUploadComplete = (type, response) => {
145
+ const {
146
+ animationDelay,
147
+ onSuccess,
148
+ onFailure
149
+ } = this.props;
150
+ const {
151
+ fileName
152
+ } = this.state;
153
+ window.clearTimeout(this.timeouts);
181
154
  this.timeouts = window.setTimeout(() => {
182
155
  this.setState({
183
- response,
184
- isError: type === 'error',
185
- isSuccess: type === 'success'
156
+ isProcessing: false,
157
+ isComplete: true
158
+ }, () => {
159
+ if (type === 'success') {
160
+ onSuccess?.(response, fileName);
161
+ } else {
162
+ onFailure?.(response);
163
+ }
186
164
  });
187
- }, ANIMATION_FIX);
165
+ }, animationDelay);
166
+ };
167
+ asyncResponse = (response, type) => {
168
+ this.setState({
169
+ response,
170
+ isError: type === 'error',
171
+ isSuccess: type === 'success'
172
+ }, () => this.handleUploadComplete(type, response));
188
173
  };
189
174
  handleOnClear = event => {
190
175
  event.preventDefault();
@@ -369,7 +354,6 @@ class Upload extends React.Component {
369
354
  psButtonText: psButtonText || intl.formatMessage(Upload_messages.default.psButtonText),
370
355
  psProcessingText: psProcessingText || intl.formatMessage(Upload_messages.default.psProcessingText),
371
356
  psButtonDisabled: psButtonDisabled,
372
- onAnimationCompleted: async status => this.onAnimationCompleted(status),
373
357
  onClear: event => this.handleOnClear(event)
374
358
  }), !isProcessing && /*#__PURE__*/jsxRuntime.jsx("div", {
375
359
  className: "droppable-dropping-card droppable-card",
package/build/upload/Upload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Upload.js","sources":["../../src/upload/Upload.tsx"],"sourcesContent":["import { Plus as PlusIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { Component } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nimport messages from './Upload.messages';\nimport { UploadImageStep, ProcessingStep, CompleteStep } from './steps';\nimport { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';\nimport { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';\nimport { ProcessIndicatorStatus } from '../processIndicator';\n\n/*\n * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be\n * rendered first and then updated with the right status.\n */\nconst ANIMATION_FIX = 10;\nexport const MAX_SIZE_DEFAULT = 5000000;\n\nexport enum UploadStep {\n UPLOAD_IMAGE_STEP = 'uploadImageStep',\n}\n\nexport interface UploadProps extends WrappedComponentProps {\n animationDelay?: number;\n csButtonText?: string;\n csFailureText?: string;\n csSuccessText?: string;\n csTooLargeMessage?: string;\n csWrongTypeMessage?: string;\n httpOptions?: PostDataHTTPOptions & {\n fileInputName?: string;\n data?: Record<string, string | Blob>;\n };\n /**\n * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.\n * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>\n */\n fetcher?: PostDataFetcher;\n maxSize?: number;\n psButtonText?: string;\n psButtonDisabled?: boolean;\n psProcessingText?: string;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n /**\n * You can provide multiple rules separated by comma, e.g.: \"application/pdf,image/*\".\n * Using \"*\" will allow every file type to be uploaded.\n */\n usAccept?: string;\n usButtonText?: string;\n usButtonRetryText?: string;\n usDisabled?: boolean;\n usDropMessage?: string;\n usHelpImage?: React.ReactNode;\n usLabel?: string;\n usPlaceholder?: string;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n errorIconLabel?: string;\n /** @deprecated Only a single variant exists, please remove this prop. */\n uploadStep?: `${UploadStep}`;\n onCancel?: () => void;\n onFailure?: (error: unknown) => void;\n onStart?: (file: File) => void;\n onSuccess?: (response: string | Response, fileName: string) => void;\n}\n\ninterface UploadState {\n fileName: string;\n isDroppable: boolean;\n isComplete: boolean;\n isError: boolean;\n isImage: boolean;\n isProcessing: boolean;\n isSuccess: boolean;\n response: unknown;\n uploadedImage: string | undefined;\n}\n\nexport class Upload extends Component<UploadProps, UploadState> {\n declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;\n\n static defaultProps = {\n animationDelay: 700,\n maxSize: MAX_SIZE_DEFAULT,\n psButtonDisabled: false,\n size: 'md',\n usAccept: 'image/*',\n usDisabled: false,\n usLabel: '',\n } satisfies Partial<UploadProps>;\n\n dragCounter = 0;\n timeouts = 0;\n\n constructor(props: UploadProps) {\n super(props);\n\n this.state = {\n fileName: '',\n isDroppable: false,\n isComplete: false,\n isError: false,\n isImage: false,\n isProcessing: false,\n isSuccess: false,\n response: undefined,\n uploadedImage: undefined,\n };\n }\n\n getErrorMessage(status?: number) {\n const { csFailureText, csTooLargeMessage, csWrongTypeMessage, maxSize, intl } = this.props;\n switch (status) {\n case 413:\n return (\n csTooLargeMessage ||\n intl.formatMessage(messages.csTooLargeMessage, {\n maxSize: roundFileSize(maxSize),\n })\n );\n case 415:\n return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);\n default:\n return csFailureText || intl.formatMessage(messages.csFailureText);\n }\n }\n\n onDragLeave(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter -= 1;\n if (this.dragCounter === 0) {\n this.setState({ isDroppable: false });\n }\n }\n\n onDragEnter(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter += 1;\n const { usDisabled } = this.props;\n const { isProcessing } = this.state;\n if (this.dragCounter === 1 && !usDisabled && !isProcessing) {\n this.setState({ isDroppable: true });\n }\n }\n\n async onDrop(event: React.DragEvent<HTMLDivElement>) {\n const { isProcessing } = this.state;\n event.preventDefault();\n if (!isProcessing) {\n this.reset();\n }\n\n if (event.dataTransfer?.files?.[0]) {\n await this.fileDropped(event.dataTransfer.files[0]);\n }\n }\n\n onAnimationCompleted = async (status: ProcessIndicatorStatus) => {\n const { response, isProcessing, fileName } = this.state;\n const { animationDelay } = this.props;\n\n if (isProcessing && status === 'succeeded') {\n const { onSuccess } = this.props;\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n onSuccess\n ? () => {\n onSuccess(response as string | Response, fileName);\n }\n : undefined,\n );\n }, animationDelay);\n }\n\n if (isProcessing && status === 'failed') {\n const { onFailure } = this.props;\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n onFailure ? () => onFailure(response) : undefined,\n );\n }, animationDelay);\n }\n };\n\n asyncPost = async (file: File) => {\n const { httpOptions, fetcher } = this.props;\n if (httpOptions == null) {\n throw new Error('Cannot find HTTP options');\n }\n\n const { fileInputName = file.name, data = {} } = httpOptions;\n\n const formData = new FormData();\n formData.append(fileInputName, file);\n Object.keys(data).forEach((key) => formData.append(key, data[key]));\n return postData(httpOptions, formData, fetcher);\n };\n\n asyncResponse = (response: unknown, type: 'success' | 'error') => {\n // Gives time to the animation callback to fire.\n this.timeouts = window.setTimeout(() => {\n this.setState({\n response,\n isError: type === 'error',\n isSuccess: type === 'success',\n });\n }, ANIMATION_FIX);\n };\n\n handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n const { onCancel } = this.props;\n onCancel?.();\n\n this.reset();\n };\n\n reset = () => {\n this.dragCounter = 0;\n window.clearTimeout(this.timeouts);\n this.setState({\n isComplete: false,\n isError: false,\n isProcessing: false,\n isSuccess: false,\n });\n };\n\n showDataImage = (dataUrl: string) => {\n const { isImage } = this.state;\n if (isImage) {\n this.setState({\n uploadedImage: dataUrl,\n });\n }\n };\n\n fileDropped = async (file: File) => {\n const { httpOptions, maxSize, onStart, usDisabled, usAccept } = this.props;\n const { isProcessing } = this.state;\n\n if (usDisabled || isProcessing) {\n return false;\n }\n\n if (!file) {\n throw new Error('Could not retrieve file');\n }\n\n this.setState({\n fileName: file.name,\n isDroppable: false,\n isProcessing: true,\n });\n\n onStart?.(file);\n\n let file64 = null;\n\n try {\n file64 = await asyncFileRead(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n }\n\n if (!file64) {\n return false;\n }\n\n this.setState({\n isImage: getFileType(file, file64).includes('image'),\n });\n\n if (!isTypeValid(file, usAccept, file64)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 415,\n statusText: 'Unsupported Media Type',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (!isSizeValid(file, maxSize)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 413,\n statusText: 'Request Entity Too Large',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (httpOptions) {\n // Post the file to provided endpoint\n let response;\n try {\n response = await this.asyncPost(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n return false;\n }\n this.asyncResponse(response, 'success');\n this.showDataImage(file64);\n return true;\n }\n // Post on form submit. And return the encoded image.\n this.showDataImage(file64);\n this.asyncResponse(file64, 'success');\n return true;\n };\n\n render() {\n const {\n maxSize,\n usDropMessage,\n usAccept,\n usButtonText,\n usButtonRetryText,\n usDisabled,\n usHelpImage,\n usLabel,\n usPlaceholder,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n csButtonText,\n csSuccessText,\n size,\n intl,\n errorIconLabel,\n } = this.props;\n\n const {\n response,\n fileName,\n isComplete,\n isDroppable,\n isError,\n isImage,\n isProcessing,\n isSuccess,\n uploadedImage,\n } = this.state;\n\n return (\n <div\n className={clsx('droppable-area', {\n droppable: true,\n 'tw-droppable-sm droppable-sm': size === 'sm',\n 'tw-droppable-md droppable-md': size === 'md' || !size,\n 'tw-droppable-lg droppable-lg': size === 'lg',\n 'droppable-dropping': isDroppable,\n 'droppable-processing': isProcessing,\n 'droppable-complete': isComplete && !isError,\n 'droppable-negative': isError && !isProcessing,\n })}\n onDragEnter={(event) => this.onDragEnter(event)}\n onDragLeave={(event) => this.onDragLeave(event)}\n onDrop={async (event) => this.onDrop(event)}\n onDragOver={(event) => event.preventDefault()}\n >\n {!isProcessing && !isComplete && (\n <UploadImageStep\n fileDropped={async (file) => this.fileDropped(file)}\n isComplete={isComplete}\n usAccept={usAccept}\n usButtonText={usButtonText || intl.formatMessage(messages.usButtonText)}\n usDisabled={usDisabled}\n usHelpImage={usHelpImage}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n />\n )}\n\n {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in\n css transition to work properly */}\n {(isSuccess || isComplete) && !isError && (\n <CompleteStep\n fileName={fileName}\n isComplete={isComplete}\n isImage={isImage}\n csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}\n csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}\n uploadedImage={uploadedImage}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {isError && !isProcessing && (\n <UploadImageStep\n fileDropped={async (file) => {\n this.reset();\n await this.fileDropped(file);\n }}\n isComplete={!isError}\n usAccept={usAccept}\n usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}\n usDisabled={usDisabled}\n usHelpImage={null}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n errorMessage={this.getErrorMessage(\n response != null &&\n typeof response === 'object' &&\n 'status' in response &&\n typeof response.status === 'number'\n ? response.status\n : undefined,\n )}\n errorIconLabel={errorIconLabel}\n />\n )}\n {isProcessing && (\n <ProcessingStep\n isComplete={isComplete}\n isError={isError}\n isSuccess={isSuccess}\n psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}\n psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}\n psButtonDisabled={psButtonDisabled}\n onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {!isProcessing && (\n <div className=\"droppable-dropping-card droppable-card\" aria-live=\"polite\">\n <div className=\"droppable-card-content\">\n <div className=\"circle circle-sm text-primary\">\n <PlusIcon size=\"16\" />\n </div>\n <Title type={Typography.TITLE_BODY} className=\"m-t-3\">\n {usDropMessage || intl.formatMessage(messages.usDropMessage)}\n </Title>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default injectIntl(Upload);\n\nconst roundFileSize = (bytes: number) => {\n const megabytes = bytes / 1000000;\n if (megabytes >= 0.1) {\n const isRound = Math.floor(megabytes) === megabytes;\n return isRound ? `${megabytes}` : megabytes.toFixed(1);\n }\n if (megabytes >= 0.01) {\n return megabytes.toFixed(2);\n }\n return megabytes.toFixed(3);\n};\n"],"names":["ANIMATION_FIX","MAX_SIZE_DEFAULT","UploadStep","Upload","Component","defaultProps","animationDelay","maxSize","psButtonDisabled","size","usAccept","usDisabled","usLabel","dragCounter","timeouts","constructor","props","state","fileName","isDroppable","isComplete","isError","isImage","isProcessing","isSuccess","response","undefined","uploadedImage","getErrorMessage","status","csFailureText","csTooLargeMessage","csWrongTypeMessage","intl","formatMessage","messages","roundFileSize","onDragLeave","event","preventDefault","setState","onDragEnter","onDrop","reset","dataTransfer","files","fileDropped","onAnimationCompleted","onSuccess","window","setTimeout","onFailure","asyncPost","file","httpOptions","fetcher","Error","fileInputName","name","data","formData","FormData","append","Object","keys","forEach","key","postData","asyncResponse","type","handleOnClear","onCancel","clearTimeout","showDataImage","dataUrl","onStart","file64","asyncFileRead","error","getFileType","includes","isTypeValid","ResponseError","Response","statusText","isSizeValid","render","usDropMessage","usButtonText","usButtonRetryText","usHelpImage","usPlaceholder","psButtonText","psProcessingText","csButtonText","csSuccessText","errorIconLabel","_jsxs","className","clsx","droppable","onDragOver","children","_jsx","UploadImageStep","CompleteStep","onClear","retry","errorMessage","ProcessingStep","PlusIcon","Title","Typography","TITLE_BODY","injectIntl","bytes","megabytes","isRound","Math","floor","toFixed"],"mappings":"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"}
1
+ {"version":3,"file":"Upload.js","sources":["../../src/upload/Upload.tsx"],"sourcesContent":["import { Plus as PlusIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { Component } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nimport messages from './Upload.messages';\nimport { UploadImageStep, ProcessingStep, CompleteStep } from './steps';\nimport { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';\nimport { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';\nimport { ProcessIndicatorStatus } from '../processIndicator';\n\nexport const MAX_SIZE_DEFAULT = 5000000;\n\nexport enum UploadStep {\n UPLOAD_IMAGE_STEP = 'uploadImageStep',\n}\n\nexport interface UploadProps extends WrappedComponentProps {\n animationDelay?: number;\n csButtonText?: string;\n csFailureText?: string;\n csSuccessText?: string;\n csTooLargeMessage?: string;\n csWrongTypeMessage?: string;\n httpOptions?: PostDataHTTPOptions & {\n fileInputName?: string;\n data?: Record<string, string | Blob>;\n };\n /**\n * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.\n * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>\n */\n fetcher?: PostDataFetcher;\n maxSize?: number;\n psButtonText?: string;\n psButtonDisabled?: boolean;\n psProcessingText?: string;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n /**\n * You can provide multiple rules separated by comma, e.g.: \"application/pdf,image/*\".\n * Using \"*\" will allow every file type to be uploaded.\n */\n usAccept?: string;\n usButtonText?: string;\n usButtonRetryText?: string;\n usDisabled?: boolean;\n usDropMessage?: string;\n usHelpImage?: React.ReactNode;\n usLabel?: string;\n usPlaceholder?: string;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n errorIconLabel?: string;\n /** @deprecated Only a single variant exists, please remove this prop. */\n uploadStep?: `${UploadStep}`;\n onCancel?: () => void;\n onFailure?: (error: unknown) => void;\n onStart?: (file: File) => void;\n onSuccess?: (response: string | Response, fileName: string) => void;\n}\n\ninterface UploadState {\n fileName: string;\n isDroppable: boolean;\n isComplete: boolean;\n isError: boolean;\n isImage: boolean;\n isProcessing: boolean;\n isSuccess: boolean;\n response: unknown;\n uploadedImage: string | undefined;\n}\n\nexport class Upload extends Component<UploadProps, UploadState> {\n declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;\n\n static defaultProps = {\n animationDelay: 300,\n maxSize: MAX_SIZE_DEFAULT,\n psButtonDisabled: false,\n size: 'md',\n usAccept: 'image/*',\n usDisabled: false,\n usLabel: '',\n } satisfies Partial<UploadProps>;\n\n dragCounter = 0;\n timeouts = 0;\n\n constructor(props: UploadProps) {\n super(props);\n\n this.state = {\n fileName: '',\n isDroppable: false,\n isComplete: false,\n isError: false,\n isImage: false,\n isProcessing: false,\n isSuccess: false,\n response: undefined,\n uploadedImage: undefined,\n };\n }\n\n getErrorMessage(status?: number) {\n const { csFailureText, csTooLargeMessage, csWrongTypeMessage, maxSize, intl } = this.props;\n switch (status) {\n case 413:\n return (\n csTooLargeMessage ||\n intl.formatMessage(messages.csTooLargeMessage, {\n maxSize: roundFileSize(maxSize),\n })\n );\n case 415:\n return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);\n default:\n return csFailureText || intl.formatMessage(messages.csFailureText);\n }\n }\n\n onDragLeave(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter -= 1;\n if (this.dragCounter === 0) {\n this.setState({ isDroppable: false });\n }\n }\n\n onDragEnter(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter += 1;\n const { usDisabled } = this.props;\n const { isProcessing } = this.state;\n if (this.dragCounter === 1 && !usDisabled && !isProcessing) {\n this.setState({ isDroppable: true });\n }\n }\n\n async onDrop(event: React.DragEvent<HTMLDivElement>) {\n const { isProcessing } = this.state;\n event.preventDefault();\n if (!isProcessing) {\n this.reset();\n }\n\n if (event.dataTransfer?.files?.[0]) {\n await this.fileDropped(event.dataTransfer.files[0]);\n }\n }\n\n asyncPost = async (file: File) => {\n const { httpOptions, fetcher } = this.props;\n if (httpOptions == null) {\n throw new Error('Cannot find HTTP options');\n }\n\n const { fileInputName = file.name, data = {} } = httpOptions;\n\n const formData = new FormData();\n formData.append(fileInputName, file);\n Object.keys(data).forEach((key) => formData.append(key, data[key]));\n return postData(httpOptions, formData, fetcher);\n };\n\n handleUploadComplete = (type: 'success' | 'error', response: unknown) => {\n const { animationDelay, onSuccess, onFailure } = this.props;\n const { fileName } = this.state;\n\n window.clearTimeout(this.timeouts);\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n () => {\n if (type === 'success') {\n onSuccess?.(response as string | Response, fileName);\n } else {\n onFailure?.(response);\n }\n },\n );\n }, animationDelay);\n };\n\n asyncResponse = (response: unknown, type: 'success' | 'error') => {\n this.setState(\n {\n response,\n isError: type === 'error',\n isSuccess: type === 'success',\n },\n () => this.handleUploadComplete(type, response),\n );\n };\n\n handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n const { onCancel } = this.props;\n onCancel?.();\n\n this.reset();\n };\n\n reset = () => {\n this.dragCounter = 0;\n window.clearTimeout(this.timeouts);\n this.setState({\n isComplete: false,\n isError: false,\n isProcessing: false,\n isSuccess: false,\n });\n };\n\n showDataImage = (dataUrl: string) => {\n const { isImage } = this.state;\n if (isImage) {\n this.setState({\n uploadedImage: dataUrl,\n });\n }\n };\n\n fileDropped = async (file: File) => {\n const { httpOptions, maxSize, onStart, usDisabled, usAccept } = this.props;\n const { isProcessing } = this.state;\n\n if (usDisabled || isProcessing) {\n return false;\n }\n\n if (!file) {\n throw new Error('Could not retrieve file');\n }\n\n this.setState({\n fileName: file.name,\n isDroppable: false,\n isProcessing: true,\n });\n\n onStart?.(file);\n\n let file64 = null;\n\n try {\n file64 = await asyncFileRead(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n }\n\n if (!file64) {\n return false;\n }\n\n this.setState({\n isImage: getFileType(file, file64).includes('image'),\n });\n\n if (!isTypeValid(file, usAccept, file64)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 415,\n statusText: 'Unsupported Media Type',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (!isSizeValid(file, maxSize)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 413,\n statusText: 'Request Entity Too Large',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (httpOptions) {\n // Post the file to provided endpoint\n let response;\n try {\n response = await this.asyncPost(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n return false;\n }\n this.asyncResponse(response, 'success');\n this.showDataImage(file64);\n return true;\n }\n // Post on form submit. And return the encoded image.\n this.showDataImage(file64);\n this.asyncResponse(file64, 'success');\n return true;\n };\n\n render() {\n const {\n maxSize,\n usDropMessage,\n usAccept,\n usButtonText,\n usButtonRetryText,\n usDisabled,\n usHelpImage,\n usLabel,\n usPlaceholder,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n csButtonText,\n csSuccessText,\n size,\n intl,\n errorIconLabel,\n } = this.props;\n\n const {\n response,\n fileName,\n isComplete,\n isDroppable,\n isError,\n isImage,\n isProcessing,\n isSuccess,\n uploadedImage,\n } = this.state;\n\n return (\n <div\n className={clsx('droppable-area', {\n droppable: true,\n 'tw-droppable-sm droppable-sm': size === 'sm',\n 'tw-droppable-md droppable-md': size === 'md' || !size,\n 'tw-droppable-lg droppable-lg': size === 'lg',\n 'droppable-dropping': isDroppable,\n 'droppable-processing': isProcessing,\n 'droppable-complete': isComplete && !isError,\n 'droppable-negative': isError && !isProcessing,\n })}\n onDragEnter={(event) => this.onDragEnter(event)}\n onDragLeave={(event) => this.onDragLeave(event)}\n onDrop={async (event) => this.onDrop(event)}\n onDragOver={(event) => event.preventDefault()}\n >\n {!isProcessing && !isComplete && (\n <UploadImageStep\n fileDropped={async (file) => this.fileDropped(file)}\n isComplete={isComplete}\n usAccept={usAccept}\n usButtonText={usButtonText || intl.formatMessage(messages.usButtonText)}\n usDisabled={usDisabled}\n usHelpImage={usHelpImage}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n />\n )}\n\n {(isSuccess || isComplete) && !isError && (\n <CompleteStep\n fileName={fileName}\n isComplete={isComplete}\n isImage={isImage}\n csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}\n csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}\n uploadedImage={uploadedImage}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {isError && !isProcessing && (\n <UploadImageStep\n fileDropped={async (file) => {\n this.reset();\n await this.fileDropped(file);\n }}\n isComplete={!isError}\n usAccept={usAccept}\n usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}\n usDisabled={usDisabled}\n usHelpImage={null}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n errorMessage={this.getErrorMessage(\n response != null &&\n typeof response === 'object' &&\n 'status' in response &&\n typeof response.status === 'number'\n ? response.status\n : undefined,\n )}\n errorIconLabel={errorIconLabel}\n />\n )}\n {isProcessing && (\n <ProcessingStep\n isComplete={isComplete}\n isError={isError}\n isSuccess={isSuccess}\n psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}\n psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}\n psButtonDisabled={psButtonDisabled}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {!isProcessing && (\n <div className=\"droppable-dropping-card droppable-card\" aria-live=\"polite\">\n <div className=\"droppable-card-content\">\n <div className=\"circle circle-sm text-primary\">\n <PlusIcon size=\"16\" />\n </div>\n <Title type={Typography.TITLE_BODY} className=\"m-t-3\">\n {usDropMessage || intl.formatMessage(messages.usDropMessage)}\n </Title>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default injectIntl(Upload);\n\nconst roundFileSize = (bytes: number) => {\n const megabytes = bytes / 1000000;\n if (megabytes >= 0.1) {\n const isRound = Math.floor(megabytes) === megabytes;\n return isRound ? `${megabytes}` : megabytes.toFixed(1);\n }\n if (megabytes >= 0.01) {\n return megabytes.toFixed(2);\n }\n return megabytes.toFixed(3);\n};\n"],"names":["MAX_SIZE_DEFAULT","UploadStep","Upload","Component","defaultProps","animationDelay","maxSize","psButtonDisabled","size","usAccept","usDisabled","usLabel","dragCounter","timeouts","constructor","props","state","fileName","isDroppable","isComplete","isError","isImage","isProcessing","isSuccess","response","undefined","uploadedImage","getErrorMessage","status","csFailureText","csTooLargeMessage","csWrongTypeMessage","intl","formatMessage","messages","roundFileSize","onDragLeave","event","preventDefault","setState","onDragEnter","onDrop","reset","dataTransfer","files","fileDropped","asyncPost","file","httpOptions","fetcher","Error","fileInputName","name","data","formData","FormData","append","Object","keys","forEach","key","postData","handleUploadComplete","type","onSuccess","onFailure","window","clearTimeout","setTimeout","asyncResponse","handleOnClear","onCancel","showDataImage","dataUrl","onStart","file64","asyncFileRead","error","getFileType","includes","isTypeValid","ResponseError","Response","statusText","isSizeValid","render","usDropMessage","usButtonText","usButtonRetryText","usHelpImage","usPlaceholder","psButtonText","psProcessingText","csButtonText","csSuccessText","errorIconLabel","_jsxs","className","clsx","droppable","onDragOver","children","_jsx","UploadImageStep","CompleteStep","onClear","retry","errorMessage","ProcessingStep","PlusIcon","Title","Typography","TITLE_BODY","injectIntl","bytes","megabytes","isRound","Math","floor","toFixed"],"mappings":"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"}
package/build/upload/Upload.mjs CHANGED
@@ -34,7 +34,6 @@ import { isSizeValid } from './utils/isSizeValid/isSizeValid.mjs';
34
34
  import { isTypeValid } from './utils/isTypeValid/isTypeValid.mjs';
35
35
  import { getFileType } from './utils/getFileType/getFileType.mjs';
36
36
 
37
- const ANIMATION_FIX = 10;
38
37
  const MAX_SIZE_DEFAULT = 5000000;
39
38
  var UploadStep;
40
39
  (function (UploadStep) {
@@ -42,7 +41,7 @@ var UploadStep;
42
41
  })(UploadStep || (UploadStep = {}));
43
42
  class Upload extends Component {
44
43
  static defaultProps = (() => ({
45
- animationDelay: 700,
44
+ animationDelay: 300,
46
45
  maxSize: MAX_SIZE_DEFAULT,
47
46
  psButtonDisabled: false,
48
47
  size: 'md',
@@ -121,40 +120,6 @@ class Upload extends Component {
121
120
  await this.fileDropped(event.dataTransfer.files[0]);
122
121
  }
123
122
  }
124
- onAnimationCompleted = async status => {
125
- const {
126
- response,
127
- isProcessing,
128
- fileName
129
- } = this.state;
130
- const {
131
- animationDelay
132
- } = this.props;
133
- if (isProcessing && status === 'succeeded') {
134
- const {
135
- onSuccess
136
- } = this.props;
137
- this.timeouts = window.setTimeout(() => {
138
- this.setState({
139
- isProcessing: false,
140
- isComplete: true
141
- }, onSuccess ? () => {
142
- onSuccess(response, fileName);
143
- } : undefined);
144
- }, animationDelay);
145
- }
146
- if (isProcessing && status === 'failed') {
147
- const {
148
- onFailure
149
- } = this.props;
150
- this.timeouts = window.setTimeout(() => {
151
- this.setState({
152
- isProcessing: false,
153
- isComplete: true
154
- }, onFailure ? () => onFailure(response) : undefined);
155
- }, animationDelay);
156
- }
157
- };
158
123
  asyncPost = async file => {
159
124
  const {
160
125
  httpOptions,
@@ -172,15 +137,35 @@ class Upload extends Component {
172
137
  Object.keys(data).forEach(key => formData.append(key, data[key]));
173
138
  return postData(httpOptions, formData, fetcher);
174
139
  };
175
- asyncResponse = (response, type) => {
176
- // Gives time to the animation callback to fire.
140
+ handleUploadComplete = (type, response) => {
141
+ const {
142
+ animationDelay,
143
+ onSuccess,
144
+ onFailure
145
+ } = this.props;
146
+ const {
147
+ fileName
148
+ } = this.state;
149
+ window.clearTimeout(this.timeouts);
177
150
  this.timeouts = window.setTimeout(() => {
178
151
  this.setState({
179
- response,
180
- isError: type === 'error',
181
- isSuccess: type === 'success'
152
+ isProcessing: false,
153
+ isComplete: true
154
+ }, () => {
155
+ if (type === 'success') {
156
+ onSuccess?.(response, fileName);
157
+ } else {
158
+ onFailure?.(response);
159
+ }
182
160
  });
183
- }, ANIMATION_FIX);
161
+ }, animationDelay);
162
+ };
163
+ asyncResponse = (response, type) => {
164
+ this.setState({
165
+ response,
166
+ isError: type === 'error',
167
+ isSuccess: type === 'success'
168
+ }, () => this.handleUploadComplete(type, response));
184
169
  };
185
170
  handleOnClear = event => {
186
171
  event.preventDefault();
@@ -365,7 +350,6 @@ class Upload extends Component {
365
350
  psButtonText: psButtonText || intl.formatMessage(messages.psButtonText),
366
351
  psProcessingText: psProcessingText || intl.formatMessage(messages.psProcessingText),
367
352
  psButtonDisabled: psButtonDisabled,
368
- onAnimationCompleted: async status => this.onAnimationCompleted(status),
369
353
  onClear: event => this.handleOnClear(event)
370
354
  }), !isProcessing && /*#__PURE__*/jsx("div", {
371
355
  className: "droppable-dropping-card droppable-card",
package/build/upload/Upload.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Upload.mjs","sources":["../../src/upload/Upload.tsx"],"sourcesContent":["import { Plus as PlusIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { Component } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nimport messages from './Upload.messages';\nimport { UploadImageStep, ProcessingStep, CompleteStep } from './steps';\nimport { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';\nimport { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';\nimport { ProcessIndicatorStatus } from '../processIndicator';\n\n/*\n * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be\n * rendered first and then updated with the right status.\n */\nconst ANIMATION_FIX = 10;\nexport const MAX_SIZE_DEFAULT = 5000000;\n\nexport enum UploadStep {\n UPLOAD_IMAGE_STEP = 'uploadImageStep',\n}\n\nexport interface UploadProps extends WrappedComponentProps {\n animationDelay?: number;\n csButtonText?: string;\n csFailureText?: string;\n csSuccessText?: string;\n csTooLargeMessage?: string;\n csWrongTypeMessage?: string;\n httpOptions?: PostDataHTTPOptions & {\n fileInputName?: string;\n data?: Record<string, string | Blob>;\n };\n /**\n * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.\n * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>\n */\n fetcher?: PostDataFetcher;\n maxSize?: number;\n psButtonText?: string;\n psButtonDisabled?: boolean;\n psProcessingText?: string;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n /**\n * You can provide multiple rules separated by comma, e.g.: \"application/pdf,image/*\".\n * Using \"*\" will allow every file type to be uploaded.\n */\n usAccept?: string;\n usButtonText?: string;\n usButtonRetryText?: string;\n usDisabled?: boolean;\n usDropMessage?: string;\n usHelpImage?: React.ReactNode;\n usLabel?: string;\n usPlaceholder?: string;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n errorIconLabel?: string;\n /** @deprecated Only a single variant exists, please remove this prop. */\n uploadStep?: `${UploadStep}`;\n onCancel?: () => void;\n onFailure?: (error: unknown) => void;\n onStart?: (file: File) => void;\n onSuccess?: (response: string | Response, fileName: string) => void;\n}\n\ninterface UploadState {\n fileName: string;\n isDroppable: boolean;\n isComplete: boolean;\n isError: boolean;\n isImage: boolean;\n isProcessing: boolean;\n isSuccess: boolean;\n response: unknown;\n uploadedImage: string | undefined;\n}\n\nexport class Upload extends Component<UploadProps, UploadState> {\n declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;\n\n static defaultProps = {\n animationDelay: 700,\n maxSize: MAX_SIZE_DEFAULT,\n psButtonDisabled: false,\n size: 'md',\n usAccept: 'image/*',\n usDisabled: false,\n usLabel: '',\n } satisfies Partial<UploadProps>;\n\n dragCounter = 0;\n timeouts = 0;\n\n constructor(props: UploadProps) {\n super(props);\n\n this.state = {\n fileName: '',\n isDroppable: false,\n isComplete: false,\n isError: false,\n isImage: false,\n isProcessing: false,\n isSuccess: false,\n response: undefined,\n uploadedImage: undefined,\n };\n }\n\n getErrorMessage(status?: number) {\n const { csFailureText, csTooLargeMessage, csWrongTypeMessage, maxSize, intl } = this.props;\n switch (status) {\n case 413:\n return (\n csTooLargeMessage ||\n intl.formatMessage(messages.csTooLargeMessage, {\n maxSize: roundFileSize(maxSize),\n })\n );\n case 415:\n return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);\n default:\n return csFailureText || intl.formatMessage(messages.csFailureText);\n }\n }\n\n onDragLeave(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter -= 1;\n if (this.dragCounter === 0) {\n this.setState({ isDroppable: false });\n }\n }\n\n onDragEnter(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter += 1;\n const { usDisabled } = this.props;\n const { isProcessing } = this.state;\n if (this.dragCounter === 1 && !usDisabled && !isProcessing) {\n this.setState({ isDroppable: true });\n }\n }\n\n async onDrop(event: React.DragEvent<HTMLDivElement>) {\n const { isProcessing } = this.state;\n event.preventDefault();\n if (!isProcessing) {\n this.reset();\n }\n\n if (event.dataTransfer?.files?.[0]) {\n await this.fileDropped(event.dataTransfer.files[0]);\n }\n }\n\n onAnimationCompleted = async (status: ProcessIndicatorStatus) => {\n const { response, isProcessing, fileName } = this.state;\n const { animationDelay } = this.props;\n\n if (isProcessing && status === 'succeeded') {\n const { onSuccess } = this.props;\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n onSuccess\n ? () => {\n onSuccess(response as string | Response, fileName);\n }\n : undefined,\n );\n }, animationDelay);\n }\n\n if (isProcessing && status === 'failed') {\n const { onFailure } = this.props;\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n onFailure ? () => onFailure(response) : undefined,\n );\n }, animationDelay);\n }\n };\n\n asyncPost = async (file: File) => {\n const { httpOptions, fetcher } = this.props;\n if (httpOptions == null) {\n throw new Error('Cannot find HTTP options');\n }\n\n const { fileInputName = file.name, data = {} } = httpOptions;\n\n const formData = new FormData();\n formData.append(fileInputName, file);\n Object.keys(data).forEach((key) => formData.append(key, data[key]));\n return postData(httpOptions, formData, fetcher);\n };\n\n asyncResponse = (response: unknown, type: 'success' | 'error') => {\n // Gives time to the animation callback to fire.\n this.timeouts = window.setTimeout(() => {\n this.setState({\n response,\n isError: type === 'error',\n isSuccess: type === 'success',\n });\n }, ANIMATION_FIX);\n };\n\n handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n const { onCancel } = this.props;\n onCancel?.();\n\n this.reset();\n };\n\n reset = () => {\n this.dragCounter = 0;\n window.clearTimeout(this.timeouts);\n this.setState({\n isComplete: false,\n isError: false,\n isProcessing: false,\n isSuccess: false,\n });\n };\n\n showDataImage = (dataUrl: string) => {\n const { isImage } = this.state;\n if (isImage) {\n this.setState({\n uploadedImage: dataUrl,\n });\n }\n };\n\n fileDropped = async (file: File) => {\n const { httpOptions, maxSize, onStart, usDisabled, usAccept } = this.props;\n const { isProcessing } = this.state;\n\n if (usDisabled || isProcessing) {\n return false;\n }\n\n if (!file) {\n throw new Error('Could not retrieve file');\n }\n\n this.setState({\n fileName: file.name,\n isDroppable: false,\n isProcessing: true,\n });\n\n onStart?.(file);\n\n let file64 = null;\n\n try {\n file64 = await asyncFileRead(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n }\n\n if (!file64) {\n return false;\n }\n\n this.setState({\n isImage: getFileType(file, file64).includes('image'),\n });\n\n if (!isTypeValid(file, usAccept, file64)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 415,\n statusText: 'Unsupported Media Type',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (!isSizeValid(file, maxSize)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 413,\n statusText: 'Request Entity Too Large',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (httpOptions) {\n // Post the file to provided endpoint\n let response;\n try {\n response = await this.asyncPost(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n return false;\n }\n this.asyncResponse(response, 'success');\n this.showDataImage(file64);\n return true;\n }\n // Post on form submit. And return the encoded image.\n this.showDataImage(file64);\n this.asyncResponse(file64, 'success');\n return true;\n };\n\n render() {\n const {\n maxSize,\n usDropMessage,\n usAccept,\n usButtonText,\n usButtonRetryText,\n usDisabled,\n usHelpImage,\n usLabel,\n usPlaceholder,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n csButtonText,\n csSuccessText,\n size,\n intl,\n errorIconLabel,\n } = this.props;\n\n const {\n response,\n fileName,\n isComplete,\n isDroppable,\n isError,\n isImage,\n isProcessing,\n isSuccess,\n uploadedImage,\n } = this.state;\n\n return (\n <div\n className={clsx('droppable-area', {\n droppable: true,\n 'tw-droppable-sm droppable-sm': size === 'sm',\n 'tw-droppable-md droppable-md': size === 'md' || !size,\n 'tw-droppable-lg droppable-lg': size === 'lg',\n 'droppable-dropping': isDroppable,\n 'droppable-processing': isProcessing,\n 'droppable-complete': isComplete && !isError,\n 'droppable-negative': isError && !isProcessing,\n })}\n onDragEnter={(event) => this.onDragEnter(event)}\n onDragLeave={(event) => this.onDragLeave(event)}\n onDrop={async (event) => this.onDrop(event)}\n onDragOver={(event) => event.preventDefault()}\n >\n {!isProcessing && !isComplete && (\n <UploadImageStep\n fileDropped={async (file) => this.fileDropped(file)}\n isComplete={isComplete}\n usAccept={usAccept}\n usButtonText={usButtonText || intl.formatMessage(messages.usButtonText)}\n usDisabled={usDisabled}\n usHelpImage={usHelpImage}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n />\n )}\n\n {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in\n css transition to work properly */}\n {(isSuccess || isComplete) && !isError && (\n <CompleteStep\n fileName={fileName}\n isComplete={isComplete}\n isImage={isImage}\n csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}\n csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}\n uploadedImage={uploadedImage}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {isError && !isProcessing && (\n <UploadImageStep\n fileDropped={async (file) => {\n this.reset();\n await this.fileDropped(file);\n }}\n isComplete={!isError}\n usAccept={usAccept}\n usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}\n usDisabled={usDisabled}\n usHelpImage={null}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n errorMessage={this.getErrorMessage(\n response != null &&\n typeof response === 'object' &&\n 'status' in response &&\n typeof response.status === 'number'\n ? response.status\n : undefined,\n )}\n errorIconLabel={errorIconLabel}\n />\n )}\n {isProcessing && (\n <ProcessingStep\n isComplete={isComplete}\n isError={isError}\n isSuccess={isSuccess}\n psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}\n psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}\n psButtonDisabled={psButtonDisabled}\n onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {!isProcessing && (\n <div className=\"droppable-dropping-card droppable-card\" aria-live=\"polite\">\n <div className=\"droppable-card-content\">\n <div className=\"circle circle-sm text-primary\">\n <PlusIcon size=\"16\" />\n </div>\n <Title type={Typography.TITLE_BODY} className=\"m-t-3\">\n {usDropMessage || intl.formatMessage(messages.usDropMessage)}\n </Title>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default injectIntl(Upload);\n\nconst roundFileSize = (bytes: number) => {\n const megabytes = bytes / 1000000;\n if (megabytes >= 0.1) {\n const isRound = Math.floor(megabytes) === megabytes;\n return isRound ? `${megabytes}` : megabytes.toFixed(1);\n }\n if (megabytes >= 0.01) {\n return megabytes.toFixed(2);\n }\n return megabytes.toFixed(3);\n};\n"],"names":["ANIMATION_FIX","MAX_SIZE_DEFAULT","UploadStep","Upload","Component","defaultProps","animationDelay","maxSize","psButtonDisabled","size","usAccept","usDisabled","usLabel","dragCounter","timeouts","constructor","props","state","fileName","isDroppable","isComplete","isError","isImage","isProcessing","isSuccess","response","undefined","uploadedImage","getErrorMessage","status","csFailureText","csTooLargeMessage","csWrongTypeMessage","intl","formatMessage","messages","roundFileSize","onDragLeave","event","preventDefault","setState","onDragEnter","onDrop","reset","dataTransfer","files","fileDropped","onAnimationCompleted","onSuccess","window","setTimeout","onFailure","asyncPost","file","httpOptions","fetcher","Error","fileInputName","name","data","formData","FormData","append","Object","keys","forEach","key","postData","asyncResponse","type","handleOnClear","onCancel","clearTimeout","showDataImage","dataUrl","onStart","file64","asyncFileRead","error","getFileType","includes","isTypeValid","ResponseError","Response","statusText","isSizeValid","render","usDropMessage","usButtonText","usButtonRetryText","usHelpImage","usPlaceholder","psButtonText","psProcessingText","csButtonText","csSuccessText","errorIconLabel","_jsxs","className","clsx","droppable","onDragOver","children","_jsx","UploadImageStep","CompleteStep","onClear","retry","errorMessage","ProcessingStep","PlusIcon","Title","Typography","TITLE_BODY","injectIntl","bytes","megabytes","isRound","Math","floor","toFixed"],"mappings":"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"}
1
+ {"version":3,"file":"Upload.mjs","sources":["../../src/upload/Upload.tsx"],"sourcesContent":["import { Plus as PlusIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { Component } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nimport messages from './Upload.messages';\nimport { UploadImageStep, ProcessingStep, CompleteStep } from './steps';\nimport { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';\nimport { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';\nimport { ProcessIndicatorStatus } from '../processIndicator';\n\nexport const MAX_SIZE_DEFAULT = 5000000;\n\nexport enum UploadStep {\n UPLOAD_IMAGE_STEP = 'uploadImageStep',\n}\n\nexport interface UploadProps extends WrappedComponentProps {\n animationDelay?: number;\n csButtonText?: string;\n csFailureText?: string;\n csSuccessText?: string;\n csTooLargeMessage?: string;\n csWrongTypeMessage?: string;\n httpOptions?: PostDataHTTPOptions & {\n fileInputName?: string;\n data?: Record<string, string | Blob>;\n };\n /**\n * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.\n * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>\n */\n fetcher?: PostDataFetcher;\n maxSize?: number;\n psButtonText?: string;\n psButtonDisabled?: boolean;\n psProcessingText?: string;\n size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;\n /**\n * You can provide multiple rules separated by comma, e.g.: \"application/pdf,image/*\".\n * Using \"*\" will allow every file type to be uploaded.\n */\n usAccept?: string;\n usButtonText?: string;\n usButtonRetryText?: string;\n usDisabled?: boolean;\n usDropMessage?: string;\n usHelpImage?: React.ReactNode;\n usLabel?: string;\n usPlaceholder?: string;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n errorIconLabel?: string;\n /** @deprecated Only a single variant exists, please remove this prop. */\n uploadStep?: `${UploadStep}`;\n onCancel?: () => void;\n onFailure?: (error: unknown) => void;\n onStart?: (file: File) => void;\n onSuccess?: (response: string | Response, fileName: string) => void;\n}\n\ninterface UploadState {\n fileName: string;\n isDroppable: boolean;\n isComplete: boolean;\n isError: boolean;\n isImage: boolean;\n isProcessing: boolean;\n isSuccess: boolean;\n response: unknown;\n uploadedImage: string | undefined;\n}\n\nexport class Upload extends Component<UploadProps, UploadState> {\n declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;\n\n static defaultProps = {\n animationDelay: 300,\n maxSize: MAX_SIZE_DEFAULT,\n psButtonDisabled: false,\n size: 'md',\n usAccept: 'image/*',\n usDisabled: false,\n usLabel: '',\n } satisfies Partial<UploadProps>;\n\n dragCounter = 0;\n timeouts = 0;\n\n constructor(props: UploadProps) {\n super(props);\n\n this.state = {\n fileName: '',\n isDroppable: false,\n isComplete: false,\n isError: false,\n isImage: false,\n isProcessing: false,\n isSuccess: false,\n response: undefined,\n uploadedImage: undefined,\n };\n }\n\n getErrorMessage(status?: number) {\n const { csFailureText, csTooLargeMessage, csWrongTypeMessage, maxSize, intl } = this.props;\n switch (status) {\n case 413:\n return (\n csTooLargeMessage ||\n intl.formatMessage(messages.csTooLargeMessage, {\n maxSize: roundFileSize(maxSize),\n })\n );\n case 415:\n return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);\n default:\n return csFailureText || intl.formatMessage(messages.csFailureText);\n }\n }\n\n onDragLeave(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter -= 1;\n if (this.dragCounter === 0) {\n this.setState({ isDroppable: false });\n }\n }\n\n onDragEnter(event: React.DragEvent<HTMLDivElement>) {\n event.preventDefault();\n this.dragCounter += 1;\n const { usDisabled } = this.props;\n const { isProcessing } = this.state;\n if (this.dragCounter === 1 && !usDisabled && !isProcessing) {\n this.setState({ isDroppable: true });\n }\n }\n\n async onDrop(event: React.DragEvent<HTMLDivElement>) {\n const { isProcessing } = this.state;\n event.preventDefault();\n if (!isProcessing) {\n this.reset();\n }\n\n if (event.dataTransfer?.files?.[0]) {\n await this.fileDropped(event.dataTransfer.files[0]);\n }\n }\n\n asyncPost = async (file: File) => {\n const { httpOptions, fetcher } = this.props;\n if (httpOptions == null) {\n throw new Error('Cannot find HTTP options');\n }\n\n const { fileInputName = file.name, data = {} } = httpOptions;\n\n const formData = new FormData();\n formData.append(fileInputName, file);\n Object.keys(data).forEach((key) => formData.append(key, data[key]));\n return postData(httpOptions, formData, fetcher);\n };\n\n handleUploadComplete = (type: 'success' | 'error', response: unknown) => {\n const { animationDelay, onSuccess, onFailure } = this.props;\n const { fileName } = this.state;\n\n window.clearTimeout(this.timeouts);\n this.timeouts = window.setTimeout(() => {\n this.setState(\n {\n isProcessing: false,\n isComplete: true,\n },\n () => {\n if (type === 'success') {\n onSuccess?.(response as string | Response, fileName);\n } else {\n onFailure?.(response);\n }\n },\n );\n }, animationDelay);\n };\n\n asyncResponse = (response: unknown, type: 'success' | 'error') => {\n this.setState(\n {\n response,\n isError: type === 'error',\n isSuccess: type === 'success',\n },\n () => this.handleUploadComplete(type, response),\n );\n };\n\n handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n const { onCancel } = this.props;\n onCancel?.();\n\n this.reset();\n };\n\n reset = () => {\n this.dragCounter = 0;\n window.clearTimeout(this.timeouts);\n this.setState({\n isComplete: false,\n isError: false,\n isProcessing: false,\n isSuccess: false,\n });\n };\n\n showDataImage = (dataUrl: string) => {\n const { isImage } = this.state;\n if (isImage) {\n this.setState({\n uploadedImage: dataUrl,\n });\n }\n };\n\n fileDropped = async (file: File) => {\n const { httpOptions, maxSize, onStart, usDisabled, usAccept } = this.props;\n const { isProcessing } = this.state;\n\n if (usDisabled || isProcessing) {\n return false;\n }\n\n if (!file) {\n throw new Error('Could not retrieve file');\n }\n\n this.setState({\n fileName: file.name,\n isDroppable: false,\n isProcessing: true,\n });\n\n onStart?.(file);\n\n let file64 = null;\n\n try {\n file64 = await asyncFileRead(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n }\n\n if (!file64) {\n return false;\n }\n\n this.setState({\n isImage: getFileType(file, file64).includes('image'),\n });\n\n if (!isTypeValid(file, usAccept, file64)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 415,\n statusText: 'Unsupported Media Type',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (!isSizeValid(file, maxSize)) {\n this.asyncResponse(\n new ResponseError(\n new Response(null, {\n status: 413,\n statusText: 'Request Entity Too Large',\n }),\n ),\n 'error',\n );\n return false;\n }\n\n if (httpOptions) {\n // Post the file to provided endpoint\n let response;\n try {\n response = await this.asyncPost(file);\n } catch (error) {\n this.asyncResponse(error, 'error');\n return false;\n }\n this.asyncResponse(response, 'success');\n this.showDataImage(file64);\n return true;\n }\n // Post on form submit. And return the encoded image.\n this.showDataImage(file64);\n this.asyncResponse(file64, 'success');\n return true;\n };\n\n render() {\n const {\n maxSize,\n usDropMessage,\n usAccept,\n usButtonText,\n usButtonRetryText,\n usDisabled,\n usHelpImage,\n usLabel,\n usPlaceholder,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n csButtonText,\n csSuccessText,\n size,\n intl,\n errorIconLabel,\n } = this.props;\n\n const {\n response,\n fileName,\n isComplete,\n isDroppable,\n isError,\n isImage,\n isProcessing,\n isSuccess,\n uploadedImage,\n } = this.state;\n\n return (\n <div\n className={clsx('droppable-area', {\n droppable: true,\n 'tw-droppable-sm droppable-sm': size === 'sm',\n 'tw-droppable-md droppable-md': size === 'md' || !size,\n 'tw-droppable-lg droppable-lg': size === 'lg',\n 'droppable-dropping': isDroppable,\n 'droppable-processing': isProcessing,\n 'droppable-complete': isComplete && !isError,\n 'droppable-negative': isError && !isProcessing,\n })}\n onDragEnter={(event) => this.onDragEnter(event)}\n onDragLeave={(event) => this.onDragLeave(event)}\n onDrop={async (event) => this.onDrop(event)}\n onDragOver={(event) => event.preventDefault()}\n >\n {!isProcessing && !isComplete && (\n <UploadImageStep\n fileDropped={async (file) => this.fileDropped(file)}\n isComplete={isComplete}\n usAccept={usAccept}\n usButtonText={usButtonText || intl.formatMessage(messages.usButtonText)}\n usDisabled={usDisabled}\n usHelpImage={usHelpImage}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n />\n )}\n\n {(isSuccess || isComplete) && !isError && (\n <CompleteStep\n fileName={fileName}\n isComplete={isComplete}\n isImage={isImage}\n csButtonText={csButtonText || intl.formatMessage(messages.csButtonText)}\n csSuccessText={csSuccessText || intl.formatMessage(messages.csSuccessText)}\n uploadedImage={uploadedImage}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {isError && !isProcessing && (\n <UploadImageStep\n fileDropped={async (file) => {\n this.reset();\n await this.fileDropped(file);\n }}\n isComplete={!isError}\n usAccept={usAccept}\n usButtonText={usButtonRetryText || intl.formatMessage(messages.retry)}\n usDisabled={usDisabled}\n usHelpImage={null}\n usLabel={usLabel}\n usPlaceholder={\n usPlaceholder ||\n intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })\n }\n errorMessage={this.getErrorMessage(\n response != null &&\n typeof response === 'object' &&\n 'status' in response &&\n typeof response.status === 'number'\n ? response.status\n : undefined,\n )}\n errorIconLabel={errorIconLabel}\n />\n )}\n {isProcessing && (\n <ProcessingStep\n isComplete={isComplete}\n isError={isError}\n isSuccess={isSuccess}\n psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}\n psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}\n psButtonDisabled={psButtonDisabled}\n onClear={(event) => this.handleOnClear(event)}\n />\n )}\n {!isProcessing && (\n <div className=\"droppable-dropping-card droppable-card\" aria-live=\"polite\">\n <div className=\"droppable-card-content\">\n <div className=\"circle circle-sm text-primary\">\n <PlusIcon size=\"16\" />\n </div>\n <Title type={Typography.TITLE_BODY} className=\"m-t-3\">\n {usDropMessage || intl.formatMessage(messages.usDropMessage)}\n </Title>\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default injectIntl(Upload);\n\nconst roundFileSize = (bytes: number) => {\n const megabytes = bytes / 1000000;\n if (megabytes >= 0.1) {\n const isRound = Math.floor(megabytes) === megabytes;\n return isRound ? `${megabytes}` : megabytes.toFixed(1);\n }\n if (megabytes >= 0.01) {\n return megabytes.toFixed(2);\n }\n return megabytes.toFixed(3);\n};\n"],"names":["MAX_SIZE_DEFAULT","UploadStep","Upload","Component","defaultProps","animationDelay","maxSize","psButtonDisabled","size","usAccept","usDisabled","usLabel","dragCounter","timeouts","constructor","props","state","fileName","isDroppable","isComplete","isError","isImage","isProcessing","isSuccess","response","undefined","uploadedImage","getErrorMessage","status","csFailureText","csTooLargeMessage","csWrongTypeMessage","intl","formatMessage","messages","roundFileSize","onDragLeave","event","preventDefault","setState","onDragEnter","onDrop","reset","dataTransfer","files","fileDropped","asyncPost","file","httpOptions","fetcher","Error","fileInputName","name","data","formData","FormData","append","Object","keys","forEach","key","postData","handleUploadComplete","type","onSuccess","onFailure","window","clearTimeout","setTimeout","asyncResponse","handleOnClear","onCancel","showDataImage","dataUrl","onStart","file64","asyncFileRead","error","getFileType","includes","isTypeValid","ResponseError","Response","statusText","isSizeValid","render","usDropMessage","usButtonText","usButtonRetryText","usHelpImage","usPlaceholder","psButtonText","psProcessingText","csButtonText","csSuccessText","errorIconLabel","_jsxs","className","clsx","droppable","onDragOver","children","_jsx","UploadImageStep","CompleteStep","onClear","retry","errorMessage","ProcessingStep","PlusIcon","Title","Typography","TITLE_BODY","injectIntl","bytes","megabytes","isRound","Math","floor","toFixed"],"mappings":"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"}
package/build/upload/steps/processingStep/processingStep.js CHANGED
@@ -35,7 +35,6 @@ function ProcessingStep({
35
35
  isComplete,
36
36
  isError,
37
37
  isSuccess,
38
- onAnimationCompleted,
39
38
  onClear,
40
39
  psButtonText,
41
40
  psProcessingText,
@@ -54,8 +53,7 @@ function ProcessingStep({
54
53
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
55
54
  className: "droppable-card-content",
56
55
  children: [/*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
57
- status: processStatus,
58
- onAnimationCompleted: status => onAnimationCompleted(status)
56
+ status: processStatus
59
57
  }), /*#__PURE__*/jsxRuntime.jsx(Title.default, {
60
58
  className: "m-y-2",
61
59
  type: typography.Typography.TITLE_BODY,
package/build/upload/steps/processingStep/processingStep.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"processingStep.js","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n isComplete: boolean;\n isError: boolean;\n isSuccess: boolean;\n onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n onClear: React.MouseEventHandler<HTMLButtonElement>;\n psButtonText: string;\n psProcessingText: string;\n psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n isComplete,\n isError,\n isSuccess,\n onAnimationCompleted,\n onClear,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n}: ProcessingStepProps) {\n let processStatus = Status.PROCESSING;\n if (isError) {\n processStatus = Status.FAILED;\n }\n if (isSuccess) {\n processStatus = Status.SUCCEEDED;\n }\n\n return (\n <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <ProcessIndicator\n status={processStatus}\n onAnimationCompleted={(status) => onAnimationCompleted(status)}\n />\n <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n {psProcessingText}\n </Title>\n {psButtonText && (\n <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n {psButtonText}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,aAAM,CAACC,UAAU;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,aAAM,CAACE,MAAM;AAC/B;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,aAAM,CAACG,SAAS;AAClC;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,cAAA,CAACI,wBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM;AAAE,OAEjE,CAAA,eAAAL,cAAA,CAACM,aAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,cAAA,CAACU,uBAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV;AAAY,OACP,CACT;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"processingStep.js","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n isComplete: boolean;\n isError: boolean;\n isSuccess: boolean;\n onClear: React.MouseEventHandler<HTMLButtonElement>;\n psButtonText: string;\n psProcessingText: string;\n psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n isComplete,\n isError,\n isSuccess,\n onClear,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n}: ProcessingStepProps) {\n let processStatus = Status.PROCESSING;\n if (isError) {\n processStatus = Status.FAILED;\n }\n if (isSuccess) {\n processStatus = Status.SUCCEEDED;\n }\n\n return (\n <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <ProcessIndicator status={processStatus} />\n <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n {psProcessingText}\n </Title>\n {psButtonText && (\n <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n {psButtonText}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAec,SAAUA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,aAAM,CAACC,UAAU;AACrC,EAAA,IAAIR,OAAO,EAAE;IACXM,aAAa,GAAGC,aAAM,CAACE,MAAM;AAC/B;AACA,EAAA,IAAIR,SAAS,EAAE;IACbK,aAAa,GAAGC,aAAM,CAACG,SAAS;AAClC;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAab,UAAW;AAAAc,IAAAA,QAAA,eAChFC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,cAAA,CAACI,wBAAgB,EAAA;AAACC,QAAAA,MAAM,EAAEV;AAAc,OACxC,CAAA,eAAAK,cAAA,CAACM,aAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,cAAA,CAACU,uBAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV;AAAY,OACP,CACT;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
package/build/upload/steps/processingStep/processingStep.mjs CHANGED
@@ -31,7 +31,6 @@ function ProcessingStep({
31
31
  isComplete,
32
32
  isError,
33
33
  isSuccess,
34
- onAnimationCompleted,
35
34
  onClear,
36
35
  psButtonText,
37
36
  psProcessingText,
@@ -50,8 +49,7 @@ function ProcessingStep({
50
49
  children: /*#__PURE__*/jsxs("div", {
51
50
  className: "droppable-card-content",
52
51
  children: [/*#__PURE__*/jsx(ProcessIndicator, {
53
- status: processStatus,
54
- onAnimationCompleted: status => onAnimationCompleted(status)
52
+ status: processStatus
55
53
  }), /*#__PURE__*/jsx(Title, {
56
54
  className: "m-y-2",
57
55
  type: Typography.TITLE_BODY,
package/build/upload/steps/processingStep/processingStep.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"processingStep.mjs","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n isComplete: boolean;\n isError: boolean;\n isSuccess: boolean;\n onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n onClear: React.MouseEventHandler<HTMLButtonElement>;\n psButtonText: string;\n psProcessingText: string;\n psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n isComplete,\n isError,\n isSuccess,\n onAnimationCompleted,\n onClear,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n}: ProcessingStepProps) {\n let processStatus = Status.PROCESSING;\n if (isError) {\n processStatus = Status.FAILED;\n }\n if (isSuccess) {\n processStatus = Status.SUCCEEDED;\n }\n\n return (\n <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <ProcessIndicator\n status={processStatus}\n onAnimationCompleted={(status) => onAnimationCompleted(status)}\n />\n <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n {psProcessingText}\n </Title>\n {psButtonText && (\n <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n {psButtonText}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,MAAM,CAACC,UAAU;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,MAAM,CAACE,MAAM;AAC/B;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,MAAM,CAACG,SAAS;AAClC;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,GAAA,CAACI,gBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM;AAAE,OAEjE,CAAA,eAAAL,GAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,GAAA,CAACU,MAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV;AAAY,OACP,CACT;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"processingStep.mjs","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n isComplete: boolean;\n isError: boolean;\n isSuccess: boolean;\n onClear: React.MouseEventHandler<HTMLButtonElement>;\n psButtonText: string;\n psProcessingText: string;\n psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n isComplete,\n isError,\n isSuccess,\n onClear,\n psButtonText,\n psProcessingText,\n psButtonDisabled,\n}: ProcessingStepProps) {\n let processStatus = Status.PROCESSING;\n if (isError) {\n processStatus = Status.FAILED;\n }\n if (isSuccess) {\n processStatus = Status.SUCCEEDED;\n }\n\n return (\n <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n <div className=\"droppable-card-content\">\n <ProcessIndicator status={processStatus} />\n <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n {psProcessingText}\n </Title>\n {psButtonText && (\n <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n {psButtonText}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAec,SAAUA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,MAAM,CAACC,UAAU;AACrC,EAAA,IAAIR,OAAO,EAAE;IACXM,aAAa,GAAGC,MAAM,CAACE,MAAM;AAC/B;AACA,EAAA,IAAIR,SAAS,EAAE;IACbK,aAAa,GAAGC,MAAM,CAACG,SAAS;AAClC;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAab,UAAW;AAAAc,IAAAA,QAAA,eAChFC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,GAAA,CAACI,gBAAgB,EAAA;AAACC,QAAAA,MAAM,EAAEV;AAAc,OACxC,CAAA,eAAAK,GAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,GAAA,CAACU,MAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV;AAAY,OACP,CACT;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-4b040f3",
3
+ "version": "0.0.0-experimental-2bd073b",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -94,16 +94,16 @@
94
94
  "rollup": "^4.41.1",
95
95
  "rollup-preserve-directives": "^1.1.3",
96
96
  "storybook": "^8.6.14",
97
- "@transferwise/less-config": "0.0.0-experimental-4b040f3",
97
+ "@transferwise/less-config": "0.0.0-experimental-2bd073b",
98
98
  "@transferwise/neptune-css": "14.24.4",
99
- "@wise/components-theming": "0.0.0-experimental-4b040f3",
99
+ "@wise/components-theming": "0.0.0-experimental-2bd073b",
100
100
  "@wise/wds-configs": "0.0.0"
101
101
  },
102
102
  "peerDependencies": {
103
103
  "@transferwise/icons": "^3.22.0",
104
104
  "@transferwise/neptune-css": "^14.24",
105
105
  "@wise/art": "^2.21",
106
- "@wise/components-theming": "0.0.0-experimental-4b040f3",
106
+ "@wise/components-theming": "0.0.0-experimental-2bd073b",
107
107
  "react": ">=18",
108
108
  "react-dom": ">=18",
109
109
  "react-intl": "^5.10.0 || ^6"
@@ -117,7 +117,7 @@
117
117
  "@react-aria/overlays": "^3.27.1",
118
118
  "@react-spring/web": "~10.0.1",
119
119
  "@transferwise/formatting": "^2.13.1",
120
- "@transferwise/neptune-validation": "0.0.0-experimental-4b040f3",
120
+ "@transferwise/neptune-validation": "0.0.0-experimental-2bd073b",
121
121
  "clsx": "^2.1.1",
122
122
  "commonmark": "^0.31.2",
123
123
  "core-js": "^3.42.0",
package/src/upload/Upload.spec.tsx CHANGED
@@ -6,6 +6,14 @@ import { postData } from './utils/postData';
6
6
 
7
7
  jest.mock('./utils/asyncFileRead');
8
8
  jest.mock('./utils/postData');
9
+ jest.mock('commonmark', () => ({
10
+ Parser: jest.fn().mockImplementation(() => ({
11
+ parse: jest.fn(() => ({})),
12
+ })),
13
+ HtmlRenderer: jest.fn().mockImplementation(() => ({
14
+ render: jest.fn(() => ''),
15
+ })),
16
+ }));
9
17
 
10
18
  const TEST_FILE = new File(['test content'], 'test.png', { type: 'image/png' });
11
19
  const INVALID_FILE = new File(['invalid content'], 'invalid.txt', { type: 'text/plain' });
@@ -76,6 +84,11 @@ describe('Upload Component', () => {
76
84
  dispatchEvent: jest.fn(),
77
85
  })),
78
86
  });
87
+ props.onStart.mockReset();
88
+ props.onSuccess.mockReset();
89
+ props.onFailure.mockReset();
90
+ props.onCancel.mockReset();
91
+ props.onChange.mockReset();
79
92
  });
80
93
 
81
94
  afterEach(async () => {
@@ -292,4 +305,54 @@ describe('Upload Component', () => {
292
305
  const errorIcon = await screen.findByLabelText(/Custom error label/i);
293
306
  expect(errorIcon).toBeInTheDocument();
294
307
  });
308
+
309
+ function runAnimationDelayTest(label: string, delay: number) {
310
+ test(`should respect a ${label} animationDelay`, async () => {
311
+ (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
312
+ (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
313
+
314
+ const { container, unmount } = render(<Upload {...props} animationDelay={delay} />);
315
+
316
+ await act(async () => {
317
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
318
+ const dataTransfer = new DataTransfer();
319
+ dataTransfer.items.add(TEST_FILE);
320
+ fireEvent.drop(droppableElement!, { dataTransfer });
321
+ });
322
+
323
+ // Advance half the delay, should still be processing
324
+ await act(async () => {
325
+ jest.advanceTimersByTime(delay / 2);
326
+ });
327
+ expect(container.querySelector('.droppable-processing')).toBeInTheDocument();
328
+ expect(container.querySelector('.droppable-complete')).not.toBeInTheDocument();
329
+
330
+ // Advance the rest of the delay
331
+ await act(async () => {
332
+ jest.advanceTimersByTime(delay / 2 + 10);
333
+ });
334
+ expect(container.querySelector('.droppable-complete')).toBeInTheDocument();
335
+ expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
336
+
337
+ unmount();
338
+ });
339
+ }
340
+
341
+ runAnimationDelayTest('short', 50);
342
+ runAnimationDelayTest('long', 500);
343
+
344
+ test('should handle disabled state correctly', async () => {
345
+ const { container } = render(<Upload {...props} usDisabled />);
346
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
347
+
348
+ const dataTransfer = new DataTransfer();
349
+ dataTransfer.items.add(TEST_FILE);
350
+
351
+ await act(async () => {
352
+ fireEvent.drop(droppableElement!, { dataTransfer });
353
+ });
354
+
355
+ expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
356
+ expect(props.onStart).not.toHaveBeenCalled();
357
+ });
295
358
  });
package/src/upload/Upload.story.tsx CHANGED
@@ -38,54 +38,3 @@ export const Basic: Story = {
38
38
  onCancel: fn(),
39
39
  },
40
40
  } satisfies Story;
41
-
42
- export const MaxSizes = () => {
43
- const bKB = 1024;
44
- const bMB = 1024 * bKB;
45
-
46
- const dKB = 1000;
47
- const dMB = 1000 * dKB;
48
-
49
- const binarySizes = [
50
- 10 * bMB,
51
- 5 * bMB,
52
- 1 * bMB,
53
- 500 * bKB,
54
- 100 * bKB,
55
- 50 * bKB,
56
- 10 * bKB,
57
- 5 * bKB,
58
- 1 * bKB,
59
- ];
60
-
61
- const decimalSizes = [
62
- 10 * dMB,
63
- 5 * dMB,
64
- 1 * dMB,
65
- 500 * dKB,
66
- 100 * dKB,
67
- 50 * dKB,
68
- 10 * dKB,
69
- 5 * dKB,
70
- 1 * dKB,
71
- ];
72
-
73
- return (
74
- <div style={{ display: 'flex', gap: '1rem' }}>
75
- <div style={{ flex: 1 }}>
76
- {binarySizes.map((maxSize) => (
77
- <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
78
- <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
79
- </Field>
80
- ))}
81
- </div>
82
- <div style={{ flex: 1 }}>
83
- {decimalSizes.map((maxSize) => (
84
- <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
85
- <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
86
- </Field>
87
- ))}
88
- </div>
89
- </div>
90
- );
91
- };
package/src/upload/Upload.tests.story.tsx ADDED
@@ -0,0 +1,93 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { fn } from '@storybook/test';
3
+
4
+ import Upload from '.';
5
+ import { MAX_SIZE_DEFAULT } from './Upload';
6
+ import { Field } from '../field/Field';
7
+
8
+ const meta = {
9
+ component: Upload,
10
+ title: 'Forms/Upload/Tests',
11
+ argTypes: {
12
+ maxSize: {
13
+ control: {
14
+ type: 'number',
15
+ min: 0,
16
+ },
17
+ },
18
+ },
19
+ } satisfies Meta<typeof Upload>;
20
+
21
+ export default meta;
22
+
23
+ export const MaxSizes = () => {
24
+ const bKB = 1024;
25
+ const bMB = 1024 * bKB;
26
+
27
+ const dKB = 1000;
28
+ const dMB = 1000 * dKB;
29
+
30
+ const binarySizes = [
31
+ 10 * bMB,
32
+ 5 * bMB,
33
+ 1 * bMB,
34
+ 500 * bKB,
35
+ 100 * bKB,
36
+ 50 * bKB,
37
+ 10 * bKB,
38
+ 5 * bKB,
39
+ 1 * bKB,
40
+ ];
41
+
42
+ const decimalSizes = [
43
+ 10 * dMB,
44
+ 5 * dMB,
45
+ 1 * dMB,
46
+ 500 * dKB,
47
+ 100 * dKB,
48
+ 50 * dKB,
49
+ 10 * dKB,
50
+ 5 * dKB,
51
+ 1 * dKB,
52
+ ];
53
+
54
+ return (
55
+ <div style={{ display: 'flex', gap: '1rem' }}>
56
+ <div style={{ flex: 1 }}>
57
+ {binarySizes.map((maxSize) => (
58
+ <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
59
+ <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
60
+ </Field>
61
+ ))}
62
+ </div>
63
+ <div style={{ flex: 1 }}>
64
+ {decimalSizes.map((maxSize) => (
65
+ <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
66
+ <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
67
+ </Field>
68
+ ))}
69
+ </div>
70
+ </div>
71
+ );
72
+ };
73
+
74
+ export const AllVariants = () => {
75
+ return (
76
+ <div style={{ display: 'flex', gap: '1rem' }}>
77
+ <div style={{ flex: 1 }}>
78
+ <Field key="small" label="Small Upload">
79
+ <Upload usLabel="Pick a file, any file" size="sm" />
80
+ </Field>
81
+ <Field key="medium" label="Medium Upload">
82
+ <Upload usLabel="Pick a file, any file" size="md" />
83
+ </Field>
84
+ <Field key="large" label="Large Upload">
85
+ <Upload usLabel="Pick a file, any file" size="lg" />
86
+ </Field>
87
+ <Field key="disabled" label="Disabled Upload">
88
+ <Upload usLabel="Pick a file, any file" usDisabled />
89
+ </Field>
90
+ </div>
91
+ </div>
92
+ );
93
+ };
package/src/upload/Upload.tsx CHANGED
@@ -12,11 +12,6 @@ import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from '
12
12
  import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
13
13
  import { ProcessIndicatorStatus } from '../processIndicator';
14
14
 
15
- /*
16
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
17
- * rendered first and then updated with the right status.
18
- */
19
- const ANIMATION_FIX = 10;
20
15
  export const MAX_SIZE_DEFAULT = 5000000;
21
16
 
22
17
  export enum UploadStep {
@@ -85,7 +80,7 @@ export class Upload extends Component<UploadProps, UploadState> {
85
80
  declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;
86
81
 
87
82
  static defaultProps = {
88
- animationDelay: 700,
83
+ animationDelay: 300,
89
84
  maxSize: MAX_SIZE_DEFAULT,
90
85
  psButtonDisabled: false,
91
86
  size: 'md',
@@ -160,41 +155,6 @@ export class Upload extends Component<UploadProps, UploadState> {
160
155
  }
161
156
  }
162
157
 
163
- onAnimationCompleted = async (status: ProcessIndicatorStatus) => {
164
- const { response, isProcessing, fileName } = this.state;
165
- const { animationDelay } = this.props;
166
-
167
- if (isProcessing && status === 'succeeded') {
168
- const { onSuccess } = this.props;
169
- this.timeouts = window.setTimeout(() => {
170
- this.setState(
171
- {
172
- isProcessing: false,
173
- isComplete: true,
174
- },
175
- onSuccess
176
- ? () => {
177
- onSuccess(response as string | Response, fileName);
178
- }
179
- : undefined,
180
- );
181
- }, animationDelay);
182
- }
183
-
184
- if (isProcessing && status === 'failed') {
185
- const { onFailure } = this.props;
186
- this.timeouts = window.setTimeout(() => {
187
- this.setState(
188
- {
189
- isProcessing: false,
190
- isComplete: true,
191
- },
192
- onFailure ? () => onFailure(response) : undefined,
193
- );
194
- }, animationDelay);
195
- }
196
- };
197
-
198
158
  asyncPost = async (file: File) => {
199
159
  const { httpOptions, fetcher } = this.props;
200
160
  if (httpOptions == null) {
@@ -209,15 +169,37 @@ export class Upload extends Component<UploadProps, UploadState> {
209
169
  return postData(httpOptions, formData, fetcher);
210
170
  };
211
171
 
212
- asyncResponse = (response: unknown, type: 'success' | 'error') => {
213
- // Gives time to the animation callback to fire.
172
+ handleUploadComplete = (type: 'success' | 'error', response: unknown) => {
173
+ const { animationDelay, onSuccess, onFailure } = this.props;
174
+ const { fileName } = this.state;
175
+
176
+ window.clearTimeout(this.timeouts);
214
177
  this.timeouts = window.setTimeout(() => {
215
- this.setState({
178
+ this.setState(
179
+ {
180
+ isProcessing: false,
181
+ isComplete: true,
182
+ },
183
+ () => {
184
+ if (type === 'success') {
185
+ onSuccess?.(response as string | Response, fileName);
186
+ } else {
187
+ onFailure?.(response);
188
+ }
189
+ },
190
+ );
191
+ }, animationDelay);
192
+ };
193
+
194
+ asyncResponse = (response: unknown, type: 'success' | 'error') => {
195
+ this.setState(
196
+ {
216
197
  response,
217
198
  isError: type === 'error',
218
199
  isSuccess: type === 'success',
219
- });
220
- }, ANIMATION_FIX);
200
+ },
201
+ () => this.handleUploadComplete(type, response),
202
+ );
221
203
  };
222
204
 
223
205
  handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -395,8 +377,6 @@ export class Upload extends Component<UploadProps, UploadState> {
395
377
  />
396
378
  )}
397
379
 
398
- {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
399
- css transition to work properly */}
400
380
  {(isSuccess || isComplete) && !isError && (
401
381
  <CompleteStep
402
382
  fileName={fileName}
@@ -443,7 +423,6 @@ export class Upload extends Component<UploadProps, UploadState> {
443
423
  psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
444
424
  psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
445
425
  psButtonDisabled={psButtonDisabled}
446
- onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
447
426
  onClear={(event) => this.handleOnClear(event)}
448
427
  />
449
428
  )}
package/src/upload/steps/processingStep/processingStep.tsx CHANGED
@@ -1,13 +1,12 @@
1
1
  import Button from '../../../button';
2
2
  import { Status, Typography } from '../../../common';
3
- import ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';
3
+ import ProcessIndicator from '../../../processIndicator';
4
4
  import Title from '../../../title';
5
5
 
6
6
  export interface ProcessingStepProps {
7
7
  isComplete: boolean;
8
8
  isError: boolean;
9
9
  isSuccess: boolean;
10
- onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
11
10
  onClear: React.MouseEventHandler<HTMLButtonElement>;
12
11
  psButtonText: string;
13
12
  psProcessingText: string;
@@ -18,7 +17,6 @@ export default function ProcessingStep({
18
17
  isComplete,
19
18
  isError,
20
19
  isSuccess,
21
- onAnimationCompleted,
22
20
  onClear,
23
21
  psButtonText,
24
22
  psProcessingText,
@@ -35,10 +33,7 @@ export default function ProcessingStep({
35
33
  return (
36
34
  <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
37
35
  <div className="droppable-card-content">
38
- <ProcessIndicator
39
- status={processStatus}
40
- onAnimationCompleted={(status) => onAnimationCompleted(status)}
41
- />
36
+ <ProcessIndicator status={processStatus} />
42
37
  <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
43
38
  {psProcessingText}
44
39
  </Title>