@transferwise/components 39.2.4 → 39.5.0
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.
- package/CHANGELOG.md +41 -0
- package/build/es/no-polyfill/decision/Decision.js +5 -5
- package/build/es/no-polyfill/section/Section.js +1 -1
- package/build/es/no-polyfill/section/Section.story.js +1 -1
- package/build/es/no-polyfill/upload/Upload.js +5 -2
- package/build/es/no-polyfill/upload/utils/postData/postData.js +1 -1
- package/build/es/polyfill/decision/Decision.js +5 -5
- package/build/es/polyfill/section/Section.js +1 -1
- package/build/es/polyfill/section/Section.story.js +1 -1
- package/build/es/polyfill/upload/Upload.js +5 -2
- package/build/es/polyfill/upload/utils/postData/postData.js +1 -1
- package/build/main.css +1 -1
- package/build/styles/accordion/Accordion.css +1 -1
- package/build/styles/card/Card.css +1 -1
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/header/Header.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/section/Section.css +1 -1
- package/build/types/decision/Decision.d.ts +4 -0
- package/build/types/section/Section.d.ts +4 -2
- package/build/types/section/Section.story.d.ts +3 -2
- package/build/types/upload/Upload.d.ts +5 -0
- package/build/types/upload/utils/postData/postData.d.ts +1 -1
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,47 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [39.5.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.4.0...@transferwise/components@39.5.0) (2022-01-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **components:** Add an optional fetcher prop to Upload ([#1295](https://github.com/transferwise/neptune-web/issues/1295)) ([863f085](https://github.com/transferwise/neptune-web/commit/863f0850547eace8be513fd8d2adc8956ab28f37))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [39.4.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.3.1...@transferwise/components@39.4.0) (2022-01-19)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* add ability to not show media in a circle in Decision ([#1291](https://github.com/transferwise/neptune-web/issues/1291)) ([0c9e111](https://github.com/transferwise/neptune-web/commit/0c9e111cb063108a6f699f6b61f36eb577773502))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [39.3.1](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.3.0...@transferwise/components@39.3.1) (2022-01-17)
|
|
29
|
+
|
|
30
|
+
**Note:** Version bump only for package @transferwise/components
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
# [39.3.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.2.4...@transferwise/components@39.3.0) (2022-01-13)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Features
|
|
40
|
+
|
|
41
|
+
* remove embedded paddings from Header and Option components ([#1254](https://github.com/transferwise/neptune-web/issues/1254)) ([eca1019](https://github.com/transferwise/neptune-web/commit/eca1019a3c917962018d128ecd03f5ad33f19f4a))
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
6
47
|
## [39.2.4](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.2.3...@transferwise/components@39.2.4) (2022-01-12)
|
|
7
48
|
|
|
8
49
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{Size,Breakpoint}from"../common";import NavigationOption from"../navigationOption";import SizeSwapper from"../sizeSwapper";import Tile from"../tile";import{Presentation,Type}from"./decisionEnums";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Decision=function(a){var b=a.options,c=a.presentation,d=a.type,e=a.size;if(d===Type.NAVIGATION){var
|
|
2
|
-
,{complex:!1,content:c,disabled:d,href:
|
|
3
|
-
,{className:classNames("np-decision__tile".concat(
|
|
4
|
-
return b.map(function(a,b){var c=a.title,d=a.description,
|
|
5
|
-
,{complex:!1,content:d,disabled:
|
|
1
|
+
import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{Size,Breakpoint}from"../common";import NavigationOption from"../navigationOption";import SizeSwapper from"../sizeSwapper";import Tile from"../tile";import{Presentation,Type}from"./decisionEnums";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Decision=function(a){var b=a.options,c=a.presentation,d=a.type,e=a.showMediaCircleInList,f=a.size;if(d===Type.NAVIGATION){var g=Presentation.LIST_BLOCK,h=Presentation.LIST_BLOCK_GRID;if(c===g||c===h){var i=f===Size.SMALL,j=c===h,k=[{items:[],layout:SizeSwapper.Layout.COLUMN},{items:[],breakpoint:i?Breakpoint.EXTRA_SMALL:Breakpoint.SMALL,wrap:j}];return b.forEach(function(a,b){var c=a.description,d=a.disabled,f=a.href,g=a.target,h=a.media,l=h.block,m=h.list,n=a.onClick,o=a.title;k[0].items.push(/*#__PURE__*/_jsx(NavigationOption// eslint-disable-next-line react/no-array-index-key
|
|
2
|
+
,{complex:!1,content:c,disabled:d,href:f,target:g,media:m,showMediaAtAllSizes:!0,showMediaCircle:e,title:o,onClick:n},"nav-".concat(b))),k[1].items.push(/*#__PURE__*/_jsx(Tile// eslint-disable-next-line react/no-array-index-key
|
|
3
|
+
,{className:classNames("np-decision__tile".concat(i?"--small":""),{"np-decision__tile--fixed-width":j}),description:c,disabled:d,href:f,target:g,media:l,size:i?Size.SMALL:Size.MEDIUM,title:o,onClick:n},"tile-".concat(b)))}),/*#__PURE__*/_jsx("div",{className:classNames("np-decision",{"np-decision--small":i,"np-decision--grid":j}),children:/*#__PURE__*/_jsx(SizeSwapper,{items:k})})}// LIST
|
|
4
|
+
return b.map(function(a,b){var c=a.title,d=a.description,f=a.disabled,g=a.href,h=a.target,i=a.media.list,j=a.onClick;return/*#__PURE__*/_jsx(NavigationOption// eslint-disable-next-line react/no-array-index-key
|
|
5
|
+
,{complex:!1,content:d,disabled:f,href:g,target:h,media:i,showMediaAtAllSizes:!0,showMediaCircle:e,title:c,onClick:j},"nav-".concat(b))})}return/*#__PURE__*/_jsx(_Fragment,{})};Decision.propTypes={/** A list of elements to be rendered */options:PropTypes.arrayOf(PropTypes.shape({description:PropTypes.node,disabled:PropTypes.bool,href:requiredIf(PropTypes.string,function(a){return a.type===Type.NAVIGATION}),target:PropTypes.oneOf(["_self","_blank","_parent","_top"]),media:PropTypes.shape({block:PropTypes.node.isRequired,list:PropTypes.node.isRequired}),onClick:PropTypes.func.isRequired,title:PropTypes.node.isRequired})).isRequired,/** Handles the display mode of the component */presentation:PropTypes.oneOf(["LIST","LIST_BLOCK","LIST_BLOCK_GRID"]),/** Size currently affects only Tile dimension */size:PropTypes.oneOf(["sm","md"]),/** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */type:PropTypes.oneOf(["NAVIGATION"]),/** Display media in a circle in list presentation */showMediaCircleInList:PropTypes.bool},Decision.defaultProps={presentation:Presentation.LIST,size:Size.MEDIUM,type:Type.NAVIGATION,showMediaCircleInList:!0};export default Decision;
|
|
@@ -2,4 +2,4 @@ import classNames from"classnames";import{jsx as _jsx}from"react/jsx-runtime";/*
|
|
|
2
2
|
*
|
|
3
3
|
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
4
4
|
*
|
|
5
|
-
*/var Section=function(a){var b=a.children,c=a.className;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c),children:b})};export default Section;
|
|
5
|
+
*/var Section=function(a){var b=a.children,c=a.className,d=a.withHorizontalPadding;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c,{"np-section--with-horizontal-padding":void 0!==d&&d}),children:b})};export default Section;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Section,title:"Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=function(a){return c===a?d(null):void d(a)};return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:0===c,onClick:function onClick(){return e(0)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:1===c,onClick:function onClick(){return e(1)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props.httpOptions,
|
|
1
|
+
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props,c=b.httpOptions,e=b.fetcher,f=c||{},g=f.fileInputName,h=void 0===g?a.name:g,i=f.data,j=void 0===i?{}:i,k=new FormData;return k.append(h,a),Object.keys(j).forEach(function(a){return k.append(a,j[a])}),postData(d.prepareHttpOptions(c),k,e)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j,k,l,m;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,j=d.state.isProcessing,!(h||j)){a.next=4;break}return a.abrupt("return",!1);case 4:if(b){a.next=6;break}throw new Error("Could not retrieve file");case 6:return d.setState({fileName:b.name,isDroppable:!1,isProcessing:!0}),g&&g(b),k=null,a.prev=9,a.next=12,asyncFileRead(b);case 12:k=a.sent,a.next=18;break;case 15:a.prev=15,a.t0=a["catch"](9),d.asyncResponse(a.t0,PROCESS_STATE[0]);case 18:if(k){a.next=20;break}return a.abrupt("return",!1);case 20:if(d.setState({isImage:getFileType(b,k).includes("image")}),isTypeValid(b,i,k)){a.next=25;break}return l={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(l,PROCESS_STATE[0]),a.abrupt("return",!1);case 25:if(isSizeValid(b,f)){a.next=29;break}return m={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(m,PROCESS_STATE[0]),a.abrupt("return",!1);case 29:if(!e){a.next=33;break}return a.next=32,d.asyncPost(b).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(k),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 32:return a.abrupt("return",a.sent);case 33:return d.showDataImage(k),d.asyncResponse(k,"success"),a.abrupt("return",!0);case 36:case"end":return a.stop();}},a,null,[[9,15]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled,c=this.state.isProcessing;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){var b=this.state.isProcessing;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.csButtonText,m=b.csSuccessText,n=b.size,o=b.uploadStep,p=b.intl,q=this.state,r=q.response,s=q.fileName,t=q.isComplete,u=q.isDroppable,v=q.isError,w=q.isImage,x=q.isProcessing,y=q.isSuccess,z=q.uploadedImage,A=UPLOAD_STEP_COMPONENTS[o]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames({droppable:!0,"tw-droppable-sm droppable-sm":"sm"===n,"tw-droppable-md droppable-md":"md"===n||!n,"tw-droppable-lg droppable-lg":"lg"===n,"droppable-dropping":u,"droppable-processing":x,"droppable-complete":t}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!x&&!t&&/*#__PURE__*/_jsx(A,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:t,usAccept:d,usButtonText:e||p.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||p.formatMessage(messages.usPlaceholder)}),x&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:t,isError:v,isSuccess:y,psButtonText:j||p.formatMessage(messages.psButtonText),psProcessingText:k||p.formatMessage(messages.psProcessingText),onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(y||v||t)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:s,isComplete:t,isError:v,isImage:w,csButtonText:l||p.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===r||void 0===r?void 0:r.status),csSuccessText:m||p.formatMessage(messages.csSuccessText),uploadedImage:z,onClear:function onClear(b){return a.handleOnClear(b)}}),!x&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm p-t-1 text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{})}),/*#__PURE__*/_jsx("h4",{className:"m-t-3",children:c||p.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
|
|
2
2
|
* This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
|
|
3
3
|
* rendered first and then updated with the right status.
|
|
4
|
-
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object})
|
|
4
|
+
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),/**
|
|
5
|
+
* You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
|
|
6
|
+
* function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
|
|
7
|
+
*/fetcher:PropTypes.func,maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**
|
|
5
8
|
* You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
|
|
6
9
|
* Using "*" will allow every file type to be uploaded.
|
|
7
10
|
*/usAccept:PropTypes.string,usButtonText:PropTypes.string,usDisabled:PropTypes.bool,usDropMessage:PropTypes.string,usHelpImage:PropTypes.node,usLabel:PropTypes.string,usPlaceholder:PropTypes.string,uploadStep:PropTypes.oneOf(["uploadImageStep","mediaUploadStep"])},Upload.defaultProps={animationDelay:700,csButtonText:void 0,csFailureText:void 0,csSuccessText:void 0,csTooLargeMessage:void 0,csWrongTypeMessage:void 0,httpOptions:null,maxSize:MAX_SIZE_DEFAULT,onCancel:null,onFailure:null,onStart:null,onSuccess:null,psButtonText:void 0,psProcessingText:void 0,size:"md",usAccept:"image/*",usButtonText:void 0,usDisabled:!1,usDropMessage:void 0,usHelpImage:"",usLabel:"",usPlaceholder:void 0,uploadStep:UploadStep.UPLOAD_IMAGE_STEP};// this export is necessary for react-to-typescript-definitions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}export var postData=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{};return
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}export var postData=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:fetch;return c("".concat(a.url),_objectSpread({method:"POST",body:b},a)).then(function(a){if(!a.ok){var b=new Error(a.statusText);throw b.status=a.status,b.response=a,b}return a}).catch(function(a){throw a})};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.array.map.js";import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{Size,Breakpoint}from"../common";import NavigationOption from"../navigationOption";import SizeSwapper from"../sizeSwapper";import Tile from"../tile";import{Presentation,Type}from"./decisionEnums";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Decision=function(a){var b=a.options,c=a.presentation,d=a.type,e=a.size;if(d===Type.NAVIGATION){var
|
|
2
|
-
,{complex:!1,content:c,disabled:d,href:
|
|
3
|
-
,{className:classNames("np-decision__tile".concat(
|
|
4
|
-
return b.map(function(a,b){var c=a.title,d=a.description,
|
|
5
|
-
,{complex:!1,content:d,disabled:
|
|
1
|
+
import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.array.map.js";import classNames from"classnames";import PropTypes from"prop-types";import requiredIf from"react-required-if";import{Size,Breakpoint}from"../common";import NavigationOption from"../navigationOption";import SizeSwapper from"../sizeSwapper";import Tile from"../tile";import{Presentation,Type}from"./decisionEnums";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Decision=function(a){var b=a.options,c=a.presentation,d=a.type,e=a.showMediaCircleInList,f=a.size;if(d===Type.NAVIGATION){var g=Presentation.LIST_BLOCK,h=Presentation.LIST_BLOCK_GRID;if(c===g||c===h){var i=f===Size.SMALL,j=c===h,k=[{items:[],layout:SizeSwapper.Layout.COLUMN},{items:[],breakpoint:i?Breakpoint.EXTRA_SMALL:Breakpoint.SMALL,wrap:j}];return b.forEach(function(a,b){var c=a.description,d=a.disabled,f=a.href,g=a.target,h=a.media,l=h.block,m=h.list,n=a.onClick,o=a.title;k[0].items.push(/*#__PURE__*/_jsx(NavigationOption// eslint-disable-next-line react/no-array-index-key
|
|
2
|
+
,{complex:!1,content:c,disabled:d,href:f,target:g,media:m,showMediaAtAllSizes:!0,showMediaCircle:e,title:o,onClick:n},"nav-".concat(b))),k[1].items.push(/*#__PURE__*/_jsx(Tile// eslint-disable-next-line react/no-array-index-key
|
|
3
|
+
,{className:classNames("np-decision__tile".concat(i?"--small":""),{"np-decision__tile--fixed-width":j}),description:c,disabled:d,href:f,target:g,media:l,size:i?Size.SMALL:Size.MEDIUM,title:o,onClick:n},"tile-".concat(b)))}),/*#__PURE__*/_jsx("div",{className:classNames("np-decision",{"np-decision--small":i,"np-decision--grid":j}),children:/*#__PURE__*/_jsx(SizeSwapper,{items:k})})}// LIST
|
|
4
|
+
return b.map(function(a,b){var c=a.title,d=a.description,f=a.disabled,g=a.href,h=a.target,i=a.media.list,j=a.onClick;return/*#__PURE__*/_jsx(NavigationOption// eslint-disable-next-line react/no-array-index-key
|
|
5
|
+
,{complex:!1,content:d,disabled:f,href:g,target:h,media:i,showMediaAtAllSizes:!0,showMediaCircle:e,title:c,onClick:j},"nav-".concat(b))})}return/*#__PURE__*/_jsx(_Fragment,{})};Decision.propTypes={/** A list of elements to be rendered */options:PropTypes.arrayOf(PropTypes.shape({description:PropTypes.node,disabled:PropTypes.bool,href:requiredIf(PropTypes.string,function(a){return a.type===Type.NAVIGATION}),target:PropTypes.oneOf(["_self","_blank","_parent","_top"]),media:PropTypes.shape({block:PropTypes.node.isRequired,list:PropTypes.node.isRequired}),onClick:PropTypes.func.isRequired,title:PropTypes.node.isRequired})).isRequired,/** Handles the display mode of the component */presentation:PropTypes.oneOf(["LIST","LIST_BLOCK","LIST_BLOCK_GRID"]),/** Size currently affects only Tile dimension */size:PropTypes.oneOf(["sm","md"]),/** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */type:PropTypes.oneOf(["NAVIGATION"]),/** Display media in a circle in list presentation */showMediaCircleInList:PropTypes.bool},Decision.defaultProps={presentation:Presentation.LIST,size:Size.MEDIUM,type:Type.NAVIGATION,showMediaCircleInList:!0};export default Decision;
|
|
@@ -2,4 +2,4 @@ import classNames from"classnames";import{jsx as _jsx}from"react/jsx-runtime";/*
|
|
|
2
2
|
*
|
|
3
3
|
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
4
4
|
*
|
|
5
|
-
*/var Section=function(a){var b=a.children,c=a.className;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c),children:b})};export default Section;
|
|
5
|
+
*/var Section=function(a){var b=a.children,c=a.className,d=a.withHorizontalPadding;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c,{"np-section--with-horizontal-padding":void 0!==d&&d}),children:b})};export default Section;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Section,title:"Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(null),b=_slicedToArray(a,2),c=b[0],d=b[1],e=function(a){return c===a?d(null):void d(a)};return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:0===c,onClick:function onClick(){return e(0)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:1===c,onClick:function onClick(){return e(1)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.function.name.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props.httpOptions,
|
|
1
|
+
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.function.name.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props,c=b.httpOptions,e=b.fetcher,f=c||{},g=f.fileInputName,h=void 0===g?a.name:g,i=f.data,j=void 0===i?{}:i,k=new FormData;return k.append(h,a),Object.keys(j).forEach(function(a){return k.append(a,j[a])}),postData(d.prepareHttpOptions(c),k,e)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j,k,l,m;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,j=d.state.isProcessing,!(h||j)){a.next=4;break}return a.abrupt("return",!1);case 4:if(b){a.next=6;break}throw new Error("Could not retrieve file");case 6:return d.setState({fileName:b.name,isDroppable:!1,isProcessing:!0}),g&&g(b),k=null,a.prev=9,a.next=12,asyncFileRead(b);case 12:k=a.sent,a.next=18;break;case 15:a.prev=15,a.t0=a["catch"](9),d.asyncResponse(a.t0,PROCESS_STATE[0]);case 18:if(k){a.next=20;break}return a.abrupt("return",!1);case 20:if(d.setState({isImage:getFileType(b,k).includes("image")}),isTypeValid(b,i,k)){a.next=25;break}return l={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(l,PROCESS_STATE[0]),a.abrupt("return",!1);case 25:if(isSizeValid(b,f)){a.next=29;break}return m={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(m,PROCESS_STATE[0]),a.abrupt("return",!1);case 29:if(!e){a.next=33;break}return a.next=32,d.asyncPost(b).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(k),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 32:return a.abrupt("return",a.sent);case 33:return d.showDataImage(k),d.asyncResponse(k,"success"),a.abrupt("return",!0);case 36:case"end":return a.stop();}},a,null,[[9,15]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled,c=this.state.isProcessing;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){var b=this.state.isProcessing;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.csButtonText,m=b.csSuccessText,n=b.size,o=b.uploadStep,p=b.intl,q=this.state,r=q.response,s=q.fileName,t=q.isComplete,u=q.isDroppable,v=q.isError,w=q.isImage,x=q.isProcessing,y=q.isSuccess,z=q.uploadedImage,A=UPLOAD_STEP_COMPONENTS[o]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames({droppable:!0,"tw-droppable-sm droppable-sm":"sm"===n,"tw-droppable-md droppable-md":"md"===n||!n,"tw-droppable-lg droppable-lg":"lg"===n,"droppable-dropping":u,"droppable-processing":x,"droppable-complete":t}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!x&&!t&&/*#__PURE__*/_jsx(A,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:t,usAccept:d,usButtonText:e||p.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||p.formatMessage(messages.usPlaceholder)}),x&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:t,isError:v,isSuccess:y,psButtonText:j||p.formatMessage(messages.psButtonText),psProcessingText:k||p.formatMessage(messages.psProcessingText),onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(y||v||t)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:s,isComplete:t,isError:v,isImage:w,csButtonText:l||p.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===r||void 0===r?void 0:r.status),csSuccessText:m||p.formatMessage(messages.csSuccessText),uploadedImage:z,onClear:function onClear(b){return a.handleOnClear(b)}}),!x&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm p-t-1 text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{})}),/*#__PURE__*/_jsx("h4",{className:"m-t-3",children:c||p.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
|
|
2
2
|
* This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
|
|
3
3
|
* rendered first and then updated with the right status.
|
|
4
|
-
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object})
|
|
4
|
+
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),/**
|
|
5
|
+
* You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
|
|
6
|
+
* function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
|
|
7
|
+
*/fetcher:PropTypes.func,maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**
|
|
5
8
|
* You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
|
|
6
9
|
* Using "*" will allow every file type to be uploaded.
|
|
7
10
|
*/usAccept:PropTypes.string,usButtonText:PropTypes.string,usDisabled:PropTypes.bool,usDropMessage:PropTypes.string,usHelpImage:PropTypes.node,usLabel:PropTypes.string,usPlaceholder:PropTypes.string,uploadStep:PropTypes.oneOf(["uploadImageStep","mediaUploadStep"])},Upload.defaultProps={animationDelay:700,csButtonText:void 0,csFailureText:void 0,csSuccessText:void 0,csTooLargeMessage:void 0,csWrongTypeMessage:void 0,httpOptions:null,maxSize:MAX_SIZE_DEFAULT,onCancel:null,onFailure:null,onStart:null,onSuccess:null,psButtonText:void 0,psProcessingText:void 0,size:"md",usAccept:"image/*",usButtonText:void 0,usDisabled:!1,usDropMessage:void 0,usHelpImage:"",usLabel:"",usPlaceholder:void 0,uploadStep:UploadStep.UPLOAD_IMAGE_STEP};// this export is necessary for react-to-typescript-definitions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";export var postData=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{};return
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";export var postData=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:fetch;return c("".concat(a.url),_objectSpread({method:"POST",body:b},a)).then(function(a){if(!a.ok){var b=new Error(a.statusText);throw b.status=a.status,b.response=a,b}return a}).catch(function(a){throw a})};
|