{"version":3,"file":"uploadImageStep.mjs","sources":["../../../../src/upload/steps/uploadImageStep/uploadImageStep.tsx"],"sourcesContent":["import { Upload as UploadIcon } from '@transferwise/icons';\nimport { createRef, PureComponent } from 'react';\nimport StatusIcon from '../../../statusIcon';\nimport { Sentiment, Size } from '../../../common';\nimport { InlinePrompt } from '../../../prompt/InlinePrompt/InlinePrompt';\n\nexport interface UploadImageStepProps {\n  fileDropped: (file: File) => void;\n  isComplete: boolean;\n  usAccept: string;\n  usButtonText: string;\n  usDisabled: boolean;\n  usHelpImage: React.ReactNode;\n  usLabel: string;\n  usPlaceholder: string;\n  errorMessage?: string | string[];\n  errorIconLabel?: string;\n}\n\nexport default class UploadImageStep extends PureComponent<UploadImageStepProps> {\n  uploadInputRef = createRef<HTMLInputElement>();\n\n  onManualUpload = () => {\n    const { fileDropped } = this.props;\n    const file = this.uploadInputRef.current?.files?.[0];\n    if (file != null) {\n      fileDropped(file);\n    }\n  };\n\n  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.uploadInputRef.current?.click();\n    }\n  };\n\n  getImage = () => {\n    const { usHelpImage, usLabel } = this.props;\n    const { errorMessage } = this.props;\n\n    if (errorMessage) {\n      return (\n        <div className=\"d-flex flex-column align-items-center\">\n          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />\n        </div>\n      );\n    }\n\n    if (!usHelpImage) {\n      return (\n        <div className=\"circle circle-sm circle-inverse p-t-1\">\n          <UploadIcon size={24} />\n        </div>\n      );\n    }\n\n    if (typeof usHelpImage === 'string') {\n      return <img src={usHelpImage} alt={usLabel} className=\"thumbnail text-xs-center\" />;\n    }\n\n    return usHelpImage;\n  };\n\n  render() {\n    const {\n      errorMessage,\n      isComplete,\n      errorIconLabel,\n      usAccept,\n      usButtonText,\n      usDisabled,\n      usLabel,\n      usPlaceholder,\n    } = this.props;\n\n    return (\n      <div className=\"droppable-default-card\" aria-hidden={isComplete}>\n        <div className=\"droppable-card-content\">\n          <div className=\"m-b-3\">{this.getImage()}</div>\n          {usLabel && <h4 className=\"np-text-title-body m-b-1\">{usLabel}</h4>}\n          {usPlaceholder && <p className=\"np-text-body-large m-b-3\">{String(usPlaceholder)}</p>}\n          <label\n            className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}\n            role=\"button\"\n            aria-disabled={usDisabled}\n            tabIndex={0}\n            onKeyDown={this.onKeyDown}\n          >\n            {usButtonText ? (\n              <span>{usButtonText}</span>\n            ) : (\n              <UploadIcon size={24} className=\"m-r-0\" />\n            )}\n            <input\n              ref={this.uploadInputRef}\n              type=\"file\"\n              accept={usAccept === '*' ? undefined : usAccept}\n              className=\"tw-droppable-input hidden\"\n              disabled={usDisabled}\n              name=\"file-upload\"\n              onChange={() => this.onManualUpload()}\n            />\n          </label>\n          {errorMessage && (\n            <div className=\"upload-error-message\">\n              <div className=\"m-t-3 has-error\">\n                <InlinePrompt\n                  sentiment={Sentiment.NEGATIVE}\n                  mediaLabel={errorIconLabel}\n                  width=\"full\"\n                >\n                  {errorMessage}\n                </InlinePrompt>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["UploadImageStep","PureComponent","uploadInputRef","createRef","onManualUpload","fileDropped","props","file","current","files","onKeyDown","event","key","preventDefault","click","getImage","usHelpImage","usLabel","errorMessage","_jsx","className","children","StatusIcon","size","Size","LARGE","sentiment","Sentiment","NEGATIVE","iconLabel","UploadIcon","src","alt","render","isComplete","errorIconLabel","usAccept","usButtonText","usDisabled","usPlaceholder","_jsxs","String","role","tabIndex","ref","type","accept","undefined","disabled","name","onChange","InlinePrompt","mediaLabel","width"],"mappings":"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"}