@transferwise/components 43.13.28 → 43.13.29-beta-b92523b4b0.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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";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}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{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return d?a||"":
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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";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}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{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return"number"==typeof a?d?a||"":formatAmount(a,b,c):""},parseNumber=function(a,b,c,d){return d?d&&a.length>d?0:0<a.length?+a:null:parseAmount(a,b,c)},inputKeyCodeAllowlist=new Set([keyCodes.BACKSPACE,keyCodes.DELETE,keyCodes.COMMA,keyCodes.PERIOD,keyCodes.DOWN,keyCodes.UP,keyCodes.LEFT,keyCodes.RIGHT,keyCodes.ENTER,keyCodes.ESCAPE,keyCodes.TAB]),inputKeyAllowlist=new Set([keyValues.PERIOD,keyValues.COMMA]),MoneyInput=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"isInputAllowedForKeyEvent",function(a){var b=a.keyCode,c=a.metaKey,d=a.key,e=a.ctrlKey,f=isNumber(parseInt(d,10));return f||c||e||inputKeyCodeAllowlist.has(b)||inputKeyAllowlist.has(d)}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){d.isInputAllowedForKeyEvent(a)||a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handlePaste",function(a){var b=(a.clipboardData||window.clipboardData).getData("text"),c=d.state.locale,e=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride)}),d.props.onAmountChange(e)),a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"onAmountChange",function(a){var b=a.target.value;d.setState({formattedAmount:b});var c=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,d.state.locale,d.props.maxLengthOverride);isNumberOrNull(c)&&d.props.onAmountChange(c)}),_defineProperty(_assertThisInitialized(d),"onAmountBlur",function(){d.amountFocused=!1,d.setAmount()}),_defineProperty(_assertThisInitialized(d),"onAmountFocus",function(){d.amountFocused=!0}),_defineProperty(_assertThisInitialized(d),"handleSelectChange",function(a){d.handleSearchChange(""),d.props.onCustomAction&&a.value===CUSTOM_ACTION?d.props.onCustomAction():d.props.onCurrencyChange(a)}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({searchQuery:a}),d.props.onSearchChange&&d.props.onSearchChange({searchQuery:a,filteredOptions:filterOptionsForQuery(d.props.currencies,a)})}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a});var e=d.props.intl.locale;return d.formatMessage=d.props.intl.formatMessage,d.state={searchQuery:"",formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,e,a.maxLengthOverride),locale:e},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){var b;if(this.setState({locale:null===a||void 0===a||null===(b=a.intl)||void 0===b?void 0:b.locale}),!this.amountFocused){var c;this.setState({formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,null===a||void 0===a||null===(c=a.intl)||void 0===c?void 0:c.locale,a.maxLengthOverride)})}}},{key:"getSelectOptions",value:function getSelectOptions(){var a=_toConsumableArray(filterOptionsForQuery(this.props.currencies,this.state.searchQuery));return this.props.onCustomAction&&a.push({value:CUSTOM_ACTION,label:this.props.customActionLabel}),a}},{key:"setAmount",value:function setAmount(){var a=this;this.setState(function(b){var c=parseNumber(b.formattedAmount,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride)}:{formattedAmount:b.formattedAmount}})}},{key:"render",value:function render(){var a=this.props,b=a.selectedCurrency,c=a.onCurrencyChange,d=a.size,e=a.addon,f=a.id,g=a.selectProps,h=a.maxLengthOverride,i=this.getSelectOptions(),j=!this.state.searchQuery&&(1===i.length&&i[0].currency===b.currency||!c),k=!this.props.onAmountChange;return/*#__PURE__*/_jsxs("div",{className:classNames(this.style("tw-money-input"),this.style("input-group"),this.style("input-group-".concat(d))),children:[/*#__PURE__*/_jsx("input",{id:f,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:k,maxLength:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale,this.props.maxLengthOverride),autoComplete:"off",onKeyDown:this.handleKeyDown,onChange:this.onAmountChange,onFocus:this.onAmountFocus,onBlur:this.onAmountBlur,onPaste:this.handlePaste}),e&&/*#__PURE__*/_jsx("span",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),k?this.style("disabled"):""),children:e}),j?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),k?this.style("disabled"):""),children:[("lg"===d||"md"===d)&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("i",{className:classNames(this.style("tw-money-input__keyline"))}),/*#__PURE__*/_jsx("i",{className:classNames(this.style("currency-flag"),this.style("currency-flag-".concat(b.currency.toLowerCase())),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"lg"===d?this.style("m-r-1"):"",children:b.currency.toUpperCase()})]}):/*#__PURE__*/_jsx("div",{className:classNames(this.style("input-group-btn"),this.style("amount-currency-select-btn")),children:/*#__PURE__*/_jsx(Select,_objectSpread({id:f?"".concat(f,"-select"):void 0,classNames:this.props.classNames,options:i,selected:_objectSpread(_objectSpread({},b),{},{label:/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"tw-money-input__text",children:b.label}),note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange},g))})]})}}]),b}(Component);function filterOptionsForQuery(a,b){if(!b)return a;var c=removeDuplicateValueOptions(a).filter(function(a){return isCurrencyOptionAndFitsQuery(a,b)});return sortOptionsLabelsToFirst(c,b)}function removeDuplicateValueOptions(a){var b=[],c=[];return a.forEach(function(a){a.value&&!c.includes(a.value)&&(b.push(a),c.push(a.value))}),b}function isCurrencyOptionAndFitsQuery(a,b){return!!a.value&&(contains(a.label,b)||contains(a.searchable,b)||contains(a.note,b))}function contains(a,b){return a&&a.toLowerCase().includes(b.toLowerCase())}function sortOptionsLabelsToFirst(a,b){return a.sort(function(a,c){var d=contains(a.label,b),e=contains(c.label,b);return d&&e?0:d?-1:e?1:0})}MoneyInput.propTypes={id:PropTypes.string,currencies:PropTypes.arrayOf(Currency).isRequired,selectedCurrency:Currency.isRequired,onCurrencyChange:PropTypes.func,placeholder:PropTypes.number,amount:PropTypes.number,size:PropTypes.oneOf(["sm","md","lg"]),onAmountChange:PropTypes.func,addon:PropTypes.node,searchPlaceholder:PropTypes.string,/**
|
|
2
2
|
* Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
|
|
3
3
|
*/onSearchChange:PropTypes.func,customActionLabel:PropTypes.node,onCustomAction:PropTypes.func,classNames:PropTypes.objectOf(PropTypes.string),selectProps:PropTypes.object,maxLengthOverride:PropTypes.number},MoneyInput.defaultProps={id:null,size:Size.LARGE,addon:null,searchPlaceholder:"",onSearchChange:void 0,onCurrencyChange:null,placeholder:null,amount:null,onAmountChange:null,customActionLabel:"",onCustomAction:null,classNames:{},selectProps:{},maxLengthOverride:null};// this export is necessary for react-to-typescript-definitions
|
|
4
4
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/es.object.get-own-property-descriptors.js";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}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"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.parse-int.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.array.sort.js";import{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return d?a||"":"number"==typeof a?formatAmount(a,b,c):""},parseNumber=function(a,b,c,d){return d?d&&a.length>d?0:+a:parseAmount(a,b,c)},inputKeyCodeAllowlist=new Set([keyCodes.BACKSPACE,keyCodes.DELETE,keyCodes.COMMA,keyCodes.PERIOD,keyCodes.DOWN,keyCodes.UP,keyCodes.LEFT,keyCodes.RIGHT,keyCodes.ENTER,keyCodes.ESCAPE,keyCodes.TAB]),inputKeyAllowlist=new Set([keyValues.PERIOD,keyValues.COMMA]),MoneyInput=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"isInputAllowedForKeyEvent",function(a){var b=a.keyCode,c=a.metaKey,d=a.key,e=a.ctrlKey,f=isNumber(parseInt(d,10));return f||c||e||inputKeyCodeAllowlist.has(b)||inputKeyAllowlist.has(d)}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){d.isInputAllowedForKeyEvent(a)||a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handlePaste",function(a){var b=(a.clipboardData||window.clipboardData).getData("text"),c=d.state.locale,e=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride)}),d.props.onAmountChange(e)),a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"onAmountChange",function(a){var b=a.target.value;d.setState({formattedAmount:b});var c=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,d.state.locale,d.props.maxLengthOverride);isNumberOrNull(c)&&d.props.onAmountChange(c)}),_defineProperty(_assertThisInitialized(d),"onAmountBlur",function(){d.amountFocused=!1,d.setAmount()}),_defineProperty(_assertThisInitialized(d),"onAmountFocus",function(){d.amountFocused=!0}),_defineProperty(_assertThisInitialized(d),"handleSelectChange",function(a){d.handleSearchChange(""),d.props.onCustomAction&&a.value===CUSTOM_ACTION?d.props.onCustomAction():d.props.onCurrencyChange(a)}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({searchQuery:a}),d.props.onSearchChange&&d.props.onSearchChange({searchQuery:a,filteredOptions:filterOptionsForQuery(d.props.currencies,a)})}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a});var e=d.props.intl.locale;return d.formatMessage=d.props.intl.formatMessage,d.state={searchQuery:"",formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,e,a.maxLengthOverride),locale:e},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){var b;if(this.setState({locale:null===a||void 0===a||null===(b=a.intl)||void 0===b?void 0:b.locale}),!this.amountFocused){var c;this.setState({formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,null===a||void 0===a||null===(c=a.intl)||void 0===c?void 0:c.locale,a.maxLengthOverride)})}}},{key:"getSelectOptions",value:function getSelectOptions(){var a=_toConsumableArray(filterOptionsForQuery(this.props.currencies,this.state.searchQuery));return this.props.onCustomAction&&a.push({value:CUSTOM_ACTION,label:this.props.customActionLabel}),a}},{key:"setAmount",value:function setAmount(){var a=this;this.setState(function(b){var c=parseNumber(b.formattedAmount,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride)}:{formattedAmount:b.formattedAmount}})}},{key:"render",value:function render(){var a=this.props,b=a.selectedCurrency,c=a.onCurrencyChange,d=a.size,e=a.addon,f=a.id,g=a.selectProps,h=a.maxLengthOverride,i=this.getSelectOptions(),j=!this.state.searchQuery&&(1===i.length&&i[0].currency===b.currency||!c),k=!this.props.onAmountChange;return/*#__PURE__*/_jsxs("div",{className:classNames(this.style("tw-money-input"),this.style("input-group"),this.style("input-group-".concat(d))),children:[/*#__PURE__*/_jsx("input",{id:f,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:k,maxLength:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale,this.props.maxLengthOverride),autoComplete:"off",onKeyDown:this.handleKeyDown,onChange:this.onAmountChange,onFocus:this.onAmountFocus,onBlur:this.onAmountBlur,onPaste:this.handlePaste}),e&&/*#__PURE__*/_jsx("span",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),k?this.style("disabled"):""),children:e}),j?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),k?this.style("disabled"):""),children:[("lg"===d||"md"===d)&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("i",{className:classNames(this.style("tw-money-input__keyline"))}),/*#__PURE__*/_jsx("i",{className:classNames(this.style("currency-flag"),this.style("currency-flag-".concat(b.currency.toLowerCase())),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"lg"===d?this.style("m-r-1"):"",children:b.currency.toUpperCase()})]}):/*#__PURE__*/_jsx("div",{className:classNames(this.style("input-group-btn"),this.style("amount-currency-select-btn")),children:/*#__PURE__*/_jsx(Select,_objectSpread({id:f?"".concat(f,"-select"):void 0,classNames:this.props.classNames,options:i,selected:_objectSpread(_objectSpread({},b),{},{label:/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"tw-money-input__text",children:b.label}),note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange},g))})]})}}]),b}(Component);function filterOptionsForQuery(a,b){if(!b)return a;var c=removeDuplicateValueOptions(a).filter(function(a){return isCurrencyOptionAndFitsQuery(a,b)});return sortOptionsLabelsToFirst(c,b)}function removeDuplicateValueOptions(a){var b=[],c=[];return a.forEach(function(a){a.value&&!c.includes(a.value)&&(b.push(a),c.push(a.value))}),b}function isCurrencyOptionAndFitsQuery(a,b){return!!a.value&&(contains(a.label,b)||contains(a.searchable,b)||contains(a.note,b))}function contains(a,b){return a&&a.toLowerCase().includes(b.toLowerCase())}function sortOptionsLabelsToFirst(a,b){return a.sort(function(a,c){var d=contains(a.label,b),e=contains(c.label,b);return d&&e?0:d?-1:e?1:0})}MoneyInput.propTypes={id:PropTypes.string,currencies:PropTypes.arrayOf(Currency).isRequired,selectedCurrency:Currency.isRequired,onCurrencyChange:PropTypes.func,placeholder:PropTypes.number,amount:PropTypes.number,size:PropTypes.oneOf(["sm","md","lg"]),onAmountChange:PropTypes.func,addon:PropTypes.node,searchPlaceholder:PropTypes.string,/**
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/es.object.get-own-property-descriptors.js";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}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"core-js/modules/es.number.constructor.js";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.parse-int.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.array.sort.js";import{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return"number"==typeof a?d?a||"":formatAmount(a,b,c):""},parseNumber=function(a,b,c,d){return d?d&&a.length>d?0:0<a.length?+a:null:parseAmount(a,b,c)},inputKeyCodeAllowlist=new Set([keyCodes.BACKSPACE,keyCodes.DELETE,keyCodes.COMMA,keyCodes.PERIOD,keyCodes.DOWN,keyCodes.UP,keyCodes.LEFT,keyCodes.RIGHT,keyCodes.ENTER,keyCodes.ESCAPE,keyCodes.TAB]),inputKeyAllowlist=new Set([keyValues.PERIOD,keyValues.COMMA]),MoneyInput=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"isInputAllowedForKeyEvent",function(a){var b=a.keyCode,c=a.metaKey,d=a.key,e=a.ctrlKey,f=isNumber(parseInt(d,10));return f||c||e||inputKeyCodeAllowlist.has(b)||inputKeyAllowlist.has(d)}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){d.isInputAllowedForKeyEvent(a)||a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handlePaste",function(a){var b=(a.clipboardData||window.clipboardData).getData("text"),c=d.state.locale,e=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride)}),d.props.onAmountChange(e)),a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"onAmountChange",function(a){var b=a.target.value;d.setState({formattedAmount:b});var c=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,d.state.locale,d.props.maxLengthOverride);isNumberOrNull(c)&&d.props.onAmountChange(c)}),_defineProperty(_assertThisInitialized(d),"onAmountBlur",function(){d.amountFocused=!1,d.setAmount()}),_defineProperty(_assertThisInitialized(d),"onAmountFocus",function(){d.amountFocused=!0}),_defineProperty(_assertThisInitialized(d),"handleSelectChange",function(a){d.handleSearchChange(""),d.props.onCustomAction&&a.value===CUSTOM_ACTION?d.props.onCustomAction():d.props.onCurrencyChange(a)}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({searchQuery:a}),d.props.onSearchChange&&d.props.onSearchChange({searchQuery:a,filteredOptions:filterOptionsForQuery(d.props.currencies,a)})}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a});var e=d.props.intl.locale;return d.formatMessage=d.props.intl.formatMessage,d.state={searchQuery:"",formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,e,a.maxLengthOverride),locale:e},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){var b;if(this.setState({locale:null===a||void 0===a||null===(b=a.intl)||void 0===b?void 0:b.locale}),!this.amountFocused){var c;this.setState({formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,null===a||void 0===a||null===(c=a.intl)||void 0===c?void 0:c.locale,a.maxLengthOverride)})}}},{key:"getSelectOptions",value:function getSelectOptions(){var a=_toConsumableArray(filterOptionsForQuery(this.props.currencies,this.state.searchQuery));return this.props.onCustomAction&&a.push({value:CUSTOM_ACTION,label:this.props.customActionLabel}),a}},{key:"setAmount",value:function setAmount(){var a=this;this.setState(function(b){var c=parseNumber(b.formattedAmount,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride)}:{formattedAmount:b.formattedAmount}})}},{key:"render",value:function render(){var a=this.props,b=a.selectedCurrency,c=a.onCurrencyChange,d=a.size,e=a.addon,f=a.id,g=a.selectProps,h=a.maxLengthOverride,i=this.getSelectOptions(),j=!this.state.searchQuery&&(1===i.length&&i[0].currency===b.currency||!c),k=!this.props.onAmountChange;return/*#__PURE__*/_jsxs("div",{className:classNames(this.style("tw-money-input"),this.style("input-group"),this.style("input-group-".concat(d))),children:[/*#__PURE__*/_jsx("input",{id:f,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:k,maxLength:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale,this.props.maxLengthOverride),autoComplete:"off",onKeyDown:this.handleKeyDown,onChange:this.onAmountChange,onFocus:this.onAmountFocus,onBlur:this.onAmountBlur,onPaste:this.handlePaste}),e&&/*#__PURE__*/_jsx("span",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),k?this.style("disabled"):""),children:e}),j?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),k?this.style("disabled"):""),children:[("lg"===d||"md"===d)&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("i",{className:classNames(this.style("tw-money-input__keyline"))}),/*#__PURE__*/_jsx("i",{className:classNames(this.style("currency-flag"),this.style("currency-flag-".concat(b.currency.toLowerCase())),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"lg"===d?this.style("m-r-1"):"",children:b.currency.toUpperCase()})]}):/*#__PURE__*/_jsx("div",{className:classNames(this.style("input-group-btn"),this.style("amount-currency-select-btn")),children:/*#__PURE__*/_jsx(Select,_objectSpread({id:f?"".concat(f,"-select"):void 0,classNames:this.props.classNames,options:i,selected:_objectSpread(_objectSpread({},b),{},{label:/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"tw-money-input__text",children:b.label}),note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange},g))})]})}}]),b}(Component);function filterOptionsForQuery(a,b){if(!b)return a;var c=removeDuplicateValueOptions(a).filter(function(a){return isCurrencyOptionAndFitsQuery(a,b)});return sortOptionsLabelsToFirst(c,b)}function removeDuplicateValueOptions(a){var b=[],c=[];return a.forEach(function(a){a.value&&!c.includes(a.value)&&(b.push(a),c.push(a.value))}),b}function isCurrencyOptionAndFitsQuery(a,b){return!!a.value&&(contains(a.label,b)||contains(a.searchable,b)||contains(a.note,b))}function contains(a,b){return a&&a.toLowerCase().includes(b.toLowerCase())}function sortOptionsLabelsToFirst(a,b){return a.sort(function(a,c){var d=contains(a.label,b),e=contains(c.label,b);return d&&e?0:d?-1:e?1:0})}MoneyInput.propTypes={id:PropTypes.string,currencies:PropTypes.arrayOf(Currency).isRequired,selectedCurrency:Currency.isRequired,onCurrencyChange:PropTypes.func,placeholder:PropTypes.number,amount:PropTypes.number,size:PropTypes.oneOf(["sm","md","lg"]),onAmountChange:PropTypes.func,addon:PropTypes.node,searchPlaceholder:PropTypes.string,/**
|
|
2
2
|
* Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
|
|
3
3
|
*/onSearchChange:PropTypes.func,customActionLabel:PropTypes.node,onCustomAction:PropTypes.func,classNames:PropTypes.objectOf(PropTypes.string),selectProps:PropTypes.object,maxLengthOverride:PropTypes.number},MoneyInput.defaultProps={id:null,size:Size.LARGE,addon:null,searchPlaceholder:"",onSearchChange:void 0,onCurrencyChange:null,placeholder:null,amount:null,onAmountChange:null,customActionLabel:"",onCustomAction:null,classNames:{},selectProps:{},maxLengthOverride:null};// this export is necessary for react-to-typescript-definitions
|
|
4
4
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|