@transferwise/components 40.9.0 → 40.9.1-beta-85fea4b90e.2
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/build/es/no-polyfill/common/bottomSheet/BottomSheet.js +2 -2
- package/build/es/no-polyfill/common/domHelpers/index.js +1 -1
- package/build/es/no-polyfill/common/index.js +1 -1
- package/build/es/no-polyfill/common/panel/Panel.js +8 -6
- package/build/es/no-polyfill/common/responsivePanel/ResponsivePanel.js +1 -1
- package/build/es/no-polyfill/i18n/en.json +1 -0
- package/build/es/no-polyfill/index.js +1 -1
- package/build/es/no-polyfill/moneyInput/MoneyInput.js +2 -1
- package/build/es/no-polyfill/select/Select.js +10 -4
- package/build/es/no-polyfill/select/Select.messages.js +1 -0
- package/build/es/no-polyfill/select/option/Option.js +1 -1
- package/build/es/no-polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/no-polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/es/polyfill/common/bottomSheet/BottomSheet.js +2 -2
- package/build/es/polyfill/common/domHelpers/index.js +1 -1
- package/build/es/polyfill/common/index.js +1 -1
- package/build/es/polyfill/common/panel/Panel.js +8 -6
- package/build/es/polyfill/common/responsivePanel/ResponsivePanel.js +1 -1
- package/build/es/polyfill/i18n/en.json +1 -0
- package/build/es/polyfill/index.js +1 -1
- package/build/es/polyfill/moneyInput/MoneyInput.js +2 -1
- package/build/es/polyfill/select/Select.js +10 -4
- package/build/es/polyfill/select/Select.messages.js +1 -0
- package/build/es/polyfill/select/option/Option.js +1 -1
- package/build/es/polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/i18n/en.json +1 -0
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/moneyInput/MoneyInput.css +1 -1
- package/build/styles/select/Select.css +1 -0
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -1
- package/build/types/common/bottomSheet/BottomSheet.d.ts +2 -2
- package/build/types/common/domHelpers/index.d.ts +2 -0
- package/build/types/common/index.d.ts +1 -1
- package/build/types/common/panel/Panel.d.ts +9 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts +10 -34
- package/build/types/index.d.ts +1 -0
- package/build/types/select/Select.d.ts +26 -3
- package/build/types/select/Select.messages.d.ts +7 -0
- package/build/types/select/option/Option.d.ts +12 -37
- package/build/types/select/option/index.d.ts +1 -1
- package/build/types/select/searchBox/SearchBox.d.ts +9 -1
- package/build/types/test-utils/index.d.ts +2 -0
- package/build/types/tooltip/Tooltip.story.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/build/es/no-polyfill/select/domHelpers/domHelpers.js +0 -1
- package/build/es/no-polyfill/select/domHelpers/index.js +0 -1
- package/build/es/polyfill/select/domHelpers/domHelpers.js +0 -1
- package/build/es/polyfill/select/domHelpers/index.js +0 -1
- package/build/types/select/domHelpers/domHelpers.d.ts +0 -2
- package/build/types/select/domHelpers/index.d.ts +0 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSide}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose()}function d(){// stop moving component
|
|
2
|
-
cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c():b(INITIAL_Y_POSITION),o.current=INITIAL_Y_POSITION}function e(){var a;return(null===i||void 0===i||null===(a=i.current)||void 0===a?void 0:a.scrollTop)!==void 0&&i.current.scrollTop<=CONTENT_SCROLL_THRESHOLD}/**
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSide}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(b){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose(b)}function d(a){// stop moving component
|
|
2
|
+
cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c(a):b(INITIAL_Y_POSITION),o.current=INITIAL_Y_POSITION}function e(){var a;return(null===i||void 0===i||null===(a=i.current)||void 0===a?void 0:a.scrollTop)!==void 0&&i.current.scrollTop<=CONTENT_SCROLL_THRESHOLD}/**
|
|
3
3
|
* Calculates how hard user moves component,
|
|
4
4
|
* result value used to determine whether to hide component or re-position to default state
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function isServerSide(){return"undefined"==typeof window}export function isBrowser(){return!isServerSide()}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
|
|
1
|
+
export function isServerSide(){return"undefined"==typeof window}export function isBrowser(){return!isServerSide()}export function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as HistoryNavigator}from"./historyNavigator";export
|
|
1
|
+
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
|
|
2
2
|
export{Priority,ControlType}from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _fallbackPlacements;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 classnames from"classnames";import
|
|
2
|
-
}}}),
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _fallbackPlacements,_excluded=["arrow","children","open","onClose","position","anchorRef"];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 classnames from"classnames";import{useState,forwardRef,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"..";import Dimmer from"../../dimmer";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var POPOVER_OFFSET=[0,16],fallbackPlacements=(_fallbackPlacements={},_defineProperty(_fallbackPlacements,Position.TOP,[Position.BOTTOM,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.BOTTOM,[Position.TOP,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.LEFT,[Position.RIGHT,Position.TOP,Position.BOTTOM]),_defineProperty(_fallbackPlacements,Position.RIGHT,[Position.LEFT,Position.TOP,Position.BOTTOM]),_fallbackPlacements),Panel=/*#__PURE__*/forwardRef(function(a,b){var c=a.arrow,d=void 0!==c&&c,e=a.children,f=a.open,g=void 0!==f&&f,h=a.onClose,i=a.position,j=void 0===i?Position.TOP:i,k=a.anchorRef,l=_objectWithoutProperties(a,_excluded),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=[];d&&(u.push({name:"arrow",options:{element:o,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),u.push({name:"offset",options:{offset:POPOVER_OFFSET}})),fallbackPlacements[j]&&u.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[j]}});var v=usePopper(k.current,s,{placement:j,modifiers:u}),w=v.styles,x=v.attributes,y=v.forceUpdate;// If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
|
|
3
3
|
// it is most simple just to always position before opening
|
|
4
|
-
return useEffect(function(){
|
|
4
|
+
return useEffect(function(){g&&y&&y()},[g]),/*#__PURE__*/_jsx(Dimmer,{open:g,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:h,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({// @ts-expect-error Popper requirement
|
|
5
|
+
ref:t// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:_objectSpread({},w.popper)},x.popper),{},{className:classnames("np-panel",{"np-panel--open":g},l.className)},l),{},{children:/*#__PURE__*/_jsxs("div",{ref:b,className:classnames("np-panel__content"),children:[e,d&&/*#__PURE__*/_jsx("div",{// @ts-expect-error Popper requirement
|
|
7
|
+
ref:p,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
8
|
+
,style:w.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
5
9
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
6
10
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
7
|
-
|
|
8
|
-
// https://github.com/facebook/prop-types/issues/240
|
|
9
|
-
anchorRef:PropTypes.shape({current:PropTypes.any}).isRequired};export default Panel;
|
|
11
|
+
export default Panel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Position}from"..";import BottomSheet from"../bottomSheet";import{useLayout}from"../hooks";import Panel from"../panel";import{jsx as _jsx}from"react/jsx-runtime";var ResponsivePanel=function(a){var b=a.anchorRef,c=a.arrow,d=a.children,e=a.className,f=void 0===e?void 0:e,g=a.onClose,h=a.open,i=void 0!==h&&h,j=a.position,k=void 0===j?Position.TOP:j,l=useLayout(),m=l.isMobile;return m?/*#__PURE__*/_jsx(BottomSheet,{open:i,className:f,onClose:g,children:d},"bottomSheet"):/*#__PURE__*/_jsx(Panel,{arrow:void 0!==c&&c,open:i,position:k,anchorRef:b,className:f,onClose:g,children:d},"panel")};export default ResponsivePanel;
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"neptune.Pagination.ariaLabel": "Pagination navigation",
|
|
10
10
|
"neptune.PaginationLink.ariaLabel.active": "Go to page {pageNumber}",
|
|
11
11
|
"neptune.PaginationLink.ariaLabel.inactive": "Current page, page {pageNumber}",
|
|
12
|
+
"neptune.Select.searchPlaceholder": "Search...",
|
|
12
13
|
"neptune.Summary.statusDone": "Item done",
|
|
13
14
|
"neptune.Summary.statusNotDone": "Item to do",
|
|
14
15
|
"neptune.Summary.statusPending": "Item pending",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Types
|
|
3
3
|
*/ /**
|
|
4
4
|
* Components
|
|
5
|
-
*/export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
|
|
5
|
+
*/export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as PesponsivePanel}from"./common/responsivePanel";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
|
|
6
6
|
* Hooks
|
|
7
7
|
*/export{default as useSnackbar}from"./snackbar/useSnackbar";export{useDirection,useLayout}from"./common/hooks";/**
|
|
8
8
|
* Enums
|
|
@@ -1,4 +1,5 @@
|
|
|
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{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";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){return"number"==typeof a?formatAmount(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:parseAmount(b,d.props.selectedCurrency.currency,c);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c)}),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:parseAmount(b,d.props.selectedCurrency.currency,d.state.locale);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),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)})}}},{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=parseAmount(b.formattedAmount,a.props.selectedCurrency.currency,a.state.locale);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale)}:{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=this.getSelectOptions(),g=!this.state.searchQuery&&(1===f.length&&f[0].currency===b.currency||!c),h=!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:this.props.id,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale),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)),h?this.style("disabled"):""),children:e}),g?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),h?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("hidden-xs"),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx("span",{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,{classNames:this.props.classNames,options:f,selected:_objectSpread(_objectSpread({},b),{},{note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0
|
|
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{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";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){return"number"==typeof a?formatAmount(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:parseAmount(b,d.props.selectedCurrency.currency,c);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c)}),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:parseAmount(b,d.props.selectedCurrency.currency,d.state.locale);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),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)})}}},{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=parseAmount(b.formattedAmount,a.props.selectedCurrency.currency,a.state.locale);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale)}:{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=this.getSelectOptions(),g=!this.state.searchQuery&&(1===f.length&&f[0].currency===b.currency||!c),h=!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:this.props.id,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale),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)),h?this.style("disabled"):""),children:e}),g?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),h?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("hidden-xs"),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx("span",{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,{classNames:this.props.classNames,options:f,selected:_objectSpread(_objectSpread({},b),{},{note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0// dropdownRight="xs"
|
|
2
|
+
,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange})})]})}}]),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
3
|
* Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
|
|
3
4
|
*/onSearchChange:PropTypes.func,customActionLabel:PropTypes.node,onCustomAction:PropTypes.func,classNames:PropTypes.objectOf(PropTypes.string)},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:{}};// this export is necessary for react-to-typescript-definitions
|
|
4
5
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
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 classNames from"classnames";import PropTypes from"prop-types";import{Component,createRef}from"react";import Transition from"react-transition-group/Transition";import Chevron from"../chevron";import{Breakpoint}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import{addClassAndTriggerReflow,removeClass}from"./domHelpers";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}function actionableOption(a){return!a.header&&!a.separator&&!a.disabled}var isFunction=function(a){return a&&"[object Function]"==={}.toString.call(a)};function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}function getShouldRenderWithPortal(){return"undefined"!=typeof document&&"undefined"!=typeof window&&window.matchMedia&&window.matchMedia("(max-width: ".concat(Breakpoint.SMALL,"px)")).matches}var OPTIONS_PAGE_SIZE=100,BOOTSTRAP_DROPDOWN_ANIMATION_TIME=200,defer=function(a){return setTimeout(a,0)},includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())},arrayIncludesString=function(a,b){return a.some(function(a){return includesString(a,b)})},defaultFilterFunction=function(a,b){return a.label&&includesString(a.label,b)||a.note&&includesString(a.note,b)||a.secondary&&includesString(a.secondary,b)||a.currency&&includesString(a.currency,b)||a.searchStrings&&arrayIncludesString(a.searchStrings,b)},Select=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setState({shouldRenderWithPortal:getShouldRenderWithPortal()})}),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(a){return d.props.onFocus&&d.props.onFocus(a)}),_defineProperty(_assertThisInitialized(d),"handleOnBlur",function(a){var b=d.props.onBlur,c=a.nativeEvent;if(c){var e=c.relatedTarget,f=a.currentTarget;if(f&&e&&f.contains(e))return}b&&b(a)}),_defineProperty(_assertThisInitialized(d),"getOptions",function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:d.props.options,b=d.props.search;if(!b||!d.state.searchValue)return a;var c=isFunction(b)?b:defaultFilterFunction;return a.filter(function(a){return c(a,d.state.searchValue)})}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({numberOfOptionsShown:OPTIONS_PAGE_SIZE}),d.props.onSearchChange?d.props.onSearchChange(a.target.value):d.setState({searchValue:a.target.value})}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){var b=d.state.open;switch(a.keyCode){case KeyCodes.UP:b?d.moveFocusWithDifference(-1):d.open(),a.preventDefault();break;case KeyCodes.DOWN:b?d.moveFocusWithDifference(1):d.open(),a.preventDefault();break;case KeyCodes.SPACE:a.target!==d.searchBoxRef.current&&(b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault());break;case KeyCodes.ENTER:b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault();break;case KeyCodes.ESCAPE:d.close(),a.preventDefault();break;case KeyCodes.TAB:b&&d.selectKeyboardFocusedOption();break;default:}}),_defineProperty(_assertThisInitialized(d),"handleButtonClick",function(){d.props.disabled||d.open()}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){a.currentTarget===a.target&&d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a}),_defineProperty(_assertThisInitialized(d),"renderOption",function(a,b){var c;if(a.separator)return/*#__PURE__*/_jsx("li",{className:d.style("divider")},b);if(a.header)return/*#__PURE__*/_jsx("li",{className:d.style("dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:a.header},b);var e=d.props.selected&&d.props.selected.value===a.value,f=d.state.keyboardFocusedOptionIndex===d.getIndexWithoutHeadersForIndexWithHeaders(b),g=classNames(d.style("tw-dropdown-item"),d.style("tw-dropdown-item--clickable"),(c={},_defineProperty(c,d.style("active"),e),_defineProperty(c,d.style("tw-dropdown-item--focused"),f&&!a.disabled),_defineProperty(c,d.style("disabled"),a.disabled),c));return/*#__PURE__*/_jsx("li",{className:g,onClick:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),onKeyPress:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),children:/*#__PURE__*/_jsx("a",{disabled:a.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},a),{},{classNames:d.props.classNames}))})},b)}),d.state={open:!1,searchValue:"",keyboardFocusedOptionIndex:null,numberOfOptionsShown:OPTIONS_PAGE_SIZE},d.searchBoxRef=/*#__PURE__*/createRef(),d.dropdownMenuRef=/*#__PURE__*/createRef(),d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({shouldRenderWithPortal:getShouldRenderWithPortal()}),window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.close(),window.removeEventListener("resize",this.handleResize)}},{key:"getIndexWithoutHeadersForIndexWithHeaders",value:function getIndexWithoutHeadersForIndexWithHeaders(a){return this.getOptions().reduce(function(b,c,d){return d<a&&actionableOption(c)?b+1:b},0)}},{key:"selectKeyboardFocusedOption",value:function selectKeyboardFocusedOption(){if(null!==this.state.keyboardFocusedOptionIndex){var a=this.state.keyboardFocusedOptionIndex;this.selectOption(this.getOptions().filter(actionableOption)[a])}}},{key:"moveFocusWithDifference",value:function moveFocusWithDifference(a){var b=this;this.setState(function(c,d){var e=b.getOptions(d.options).filter(actionableOption),f=e.reduce(function(a,b,c){return null===a?d.selected&&d.selected.value===b.value?c:null:a},null),g=c.keyboardFocusedOptionIndex,h=g;if(null===g&&null===f)return{keyboardFocusedOptionIndex:0};null===g&&null!==f&&(h=f);var i=h+a,j=clamp(0,e.length-1,i);return{keyboardFocusedOptionIndex:j}})}},{key:"open",value:function open(){var a=this;this.setState({open:!0},function(){var b="undefined"!=typeof window&&window.matchMedia&&!!window.matchMedia("(pointer: coarse)").matches,c=!!a.props.onSearchChange||!!a.props.search;defer(function(){!b&&c&&a.searchBoxRef.current&&a.searchBoxRef.current.focus(),addClickClassToDocumentOnIos(),document.addEventListener("click",a.handleDocumentClick,!1)})})}},{key:"close",value:function close(){var a=this;this.setState({open:!1,keyboardFocusedOptionIndex:null},function(){defer(function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",a.handleDocumentClick,!1)})})}},{key:"createSelectHandlerForOption",value:function createSelectHandlerForOption(a){var b=this;return function(c){stopPropagation(c),b.selectOption(a)}}},{key:"selectOption",value:function selectOption(a){a&&!a.placeholder?this.props.onChange(a):this.props.onChange(null),this.close()}},{key:"renderOptionsList",value:function renderOptionsList(){var a,b=this.props,c=b.dropdownRight,d=b.dropdownWidth,e=b.id,f=b.onSearchChange,g=b.placeholder,h=b.required,i=b.search,j=b.searchValue,k=b.searchPlaceholder,l=this.state.open,m=this.style,n=!!f||!!i,o=classNames(m("tw-select"),m("dropdown-menu"),(a={},_defineProperty(a,m("dropdown-menu-".concat(c,"-right")),c),_defineProperty(a,m("dropdown-menu-".concat(d)),d),_defineProperty(a,m("dropdown-menu--open"),l),a));return/*#__PURE__*/_jsxs("ul",{className:o,"aria-labelledby":e,children:[h||n||!g?"":this.renderPlaceHolderOption(),n&&/*#__PURE__*/_jsx(SearchBox,{ref:this.searchBoxRef,classNames:this.props.classNames,value:j||this.state.searchValue,placeholder:k,onChange:this.handleSearchChange,onClick:stopPropagation}),this.renderOptions(),this.state.numberOfOptionsShown<this.getOptions().length?this.renderShowMore():""]})}},{key:"renderOptions",value:function renderOptions(){return this.getOptions().slice(0,this.state.numberOfOptionsShown).map(this.renderOption)}},{key:"renderShowMore",value:function renderShowMore(){return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider"),this.style("show-more")),onClick:this.showMore.bind(this),onKeyPress:this.showMore.bind(this),children:/*#__PURE__*/_jsx("a",{children:"..."})}))}},{key:"showMore",value:function showMore(a){stopPropagation(a),this.setState(function(a){return{numberOfOptionsShown:a.numberOfOptionsShown+OPTIONS_PAGE_SIZE}})}},{key:"renderPlaceHolderOption",value:function renderPlaceHolderOption(){var a=this.props.placeholder;return/*#__PURE__*/_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider")),onClick:this.createSelectHandlerForOption({placeholder:a}),onKeyPress:this.createSelectHandlerForOption({placeholder:a}),children:/*#__PURE__*/_jsx("a",{children:a})})}},{key:"renderButtonInternals",value:function renderButtonInternals(){var a=this.props,b=a.selected,c=a.placeholder;return b?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},b),{},{classNames:this.props.classNames,selected:!0})):/*#__PURE__*/_jsx("span",{className:this.style("form-control-placeholder"),children:c})}},{key:"render",value:function render(){var a,b,c=this,d=this.props,e=d.disabled,f=d.size,g=d.block,h=d.id,i=d.dropdownUp,j=d.inverse,k=d.buttonProps,l=this.state,m=l.open,n=l.shouldRenderWithPortal,o=this.style,p=classNames(o("tw-select"),o("btn-group"),(a={},_defineProperty(a,o("btn-block"),g),_defineProperty(a,o("dropup"),i),_defineProperty(a,o("dropdown"),!i),a)),q=classNames(o("btn"),o("btn-input"),(b={},_defineProperty(b,"".concat(o("btn-input-inverse")," ").concat(o("btn-addon")),j),_defineProperty(b,o("btn-xs"),"xs"===f),_defineProperty(b,o("btn-sm"),"sm"===f),_defineProperty(b,o("btn-md"),"md"===f),_defineProperty(b,o("btn-lg"),"lg"===f),b),o("dropdown-toggle")),r=o("open");return/*#__PURE__*/ (// A transition is used here in order to mount and unmount the dropdown menu while retaining animations
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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 classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
2
|
+
* No option or placeholder option is selected
|
|
3
|
+
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b=a.className,c=classNames(T("np-dropdown-menu"),_defineProperty({},T("np-dropdown-menu-".concat(v)),!ma),T(b));return/*#__PURE__*/_jsxs("ul",{className:c,"aria-labelledby":o,children:[!q&&!ka&&null!==n&&/*#__PURE__*/_jsx(h,{}),ka&&/*#__PURE__*/_jsx(SearchBox,{ref:ia,classNames:N,value:J||Z,placeholder:L||S(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),na().slice(0,ga).map(qa),ga<na().length&&/*#__PURE__*/_jsx(g,{})]})}function g(){function a(a){stopPropagation(a),ha(ga+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom"),T("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:n};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:n})}))}// eslint-disable-next-line react/prop-types
|
|
5
|
+
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:T("np-separator")},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:T("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return isPlaceholderOption(a)&&isPlaceholderOption(b)||(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return na().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=void 0===m?DEFAULT_SELECTED_OPTION:m,o=a.id,p=a.required,q=void 0!==p&&p,r=a.disabled,t=a.inverse,u=a.dropdownWidth,v=void 0===u?Size.MEDIUM:u,w=a.size,x=void 0===w?Size.MEDIUM:w,y=a.block,z=a.selected,A=void 0===z?DEFAULT_SELECTED_OPTION:z,B=a.search,C=void 0!==B&&B,D=a.onChange,E=a.onFocus,F=a.onBlur,G=a.options,H=a.onSearchChange,I=a.searchValue,J=void 0===I?DEFAULT_SEARCH_VALUE:I,K=a.searchPlaceholder,L=void 0===K?void 0:K,M=a.classNames,N=void 0===M?{}:M,O=a.dropdownUp,P=a.buttonProps,Q=void 0===P?{}:P,R=useIntl(),S=R.formatMessage,T=function(a){return N[a]||a},s=useState(!1),U=_slicedToArray(s,2),V=U[0],W=U[1],X=useState(DEFAULT_SEARCH_VALUE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useState(null),aa=_slicedToArray(_,2),ba=aa[0],ca=aa[1],da=useRef(),ea=useState(DEFAULT_OPTIONS_PAGE_SIZE),fa=_slicedToArray(ea,2),ga=fa[0],ha=fa[1],ia=useRef(null),ja=useRef(null),ka=!!H||!!C,la=useLayout(),ma=la.isMobile,na=function(){return C&&Z?G.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof C?C(a,Z):defaultFilterFunction(a,Z)}):G},oa=function(a){ha(DEFAULT_OPTIONS_PAGE_SIZE),$(a.target.value),H&&H(a.target.value)};useEffect(function(){if(da.current=ba,V){var a,b=!!(null!==(a=window)&&void 0!==a&&a.matchMedia("(pointer: coarse)").matches);b||!ka||!ia.current||ia.current.focus()}},[V,Z,ka,ba]);var pa=function(){W(!1),ca(null)},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(A,a),h=a,m=!h.disabled&&ba===l(b),n=classNames(T("np-dropdown-item"),h.disabled?[T("disabled")]:T("clickable"),(c={},_defineProperty(c,T("active"),g),_defineProperty(c,T("np-dropdown-item--focused"),m),c)),o=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:N}))})},b))},ra=!!G.length;return V&&(""!==J||""!==Z)&&(ra&&null===ba&&ca(0),!ra&&null!==ba&&ca(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
7
|
+
ref:ja,className:classNames(T("np-select")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:V?c(a.keyCode===KeyCodes.UP?-1:1):W(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ia.current&&(V?b():W(!0),stopPropagation(a));break;case KeyCodes.ENTER:V?b():W(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:V&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&V&&pa()},onFocus:function handleOnFocus(a){E&&E(a)},onBlur:function handleOnBlur(a){var b=a.nativeEvent;if(b){var c=b.relatedTarget,d=a.currentTarget;if(d&&c&&d.contains(c))return}F&&F(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({id:o,block:void 0===y||y,size:x,htmlType:"button",className:classNames(T("np-dropdown-toggle"),void 0!==t&&t?T("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
8
|
+
,type:null,priority:null,disabled:void 0!==r&&r,"aria-expanded":V,onClick:function handleOnClick(){W(!0)}},Q),{},{children:[A?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},A),{},{classNames:N,selected:!0})):/*#__PURE__*/_jsx("span",{className:T("form-control-placeholder"),children:n}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
9
|
+
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})})]})}Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
4
10
|
* Search toggle
|
|
5
11
|
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
6
12
|
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
7
13
|
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
8
14
|
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
9
15
|
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
10
|
-
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:void 0,classNames:{},dropdownUp:!1,buttonProps:{}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{defineMessages}from"react-intl";export default defineMessages({searchPlaceholder:{id:"neptune.Select.searchPlaceholder"}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function Option(a){var b=a.label,c=a.currency,d=void 0===c?"":c,e=a.note,f=void 0===e?"":e,g=a.secondary,h=void 0===g?"":g,i=a.icon,j=a.classNames,k=void 0===j?{}:j,l=a.selected,m=void 0!==l&&l,n=function(a){return a.map(function(a){return k[a]||a}).join(" ")},o=d?"".concat(n(["currency-flag","currency-flag-".concat(d.toLowerCase()),"".concat(m?"hidden-xs":"")])):void 0,p=f?"".concat(n(["d-inline-flex align-items-center"])):void 0;return/*#__PURE__*/_jsxs(_Fragment,{children:[i?/*#__PURE__*/cloneElement(i,{size:24,className:"".concat(n(["tw-icon","".concat(m&&d?"hidden-xs":"")]))}):d&&/*#__PURE__*/_jsx("i",{className:o}),/*#__PURE__*/_jsxs("span",{className:p,children:[b,f&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:f})]}),h&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:h})]})}export default Option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Search as SearchIcon}from"@transferwise/icons";import classnames from"classnames";import
|
|
1
|
+
import{Search as SearchIcon}from"@transferwise/icons";import classnames from"classnames";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var SearchBox=/*#__PURE__*/forwardRef(function(a,b){var c=a.classNames,d=void 0===c?{}:c,e=a.onChange,f=a.onClick,g=a.placeholder,h=void 0===g?void 0:g,i=a.value,j=void 0===i?"":i,k=function(a){return d[a]||a};return/*#__PURE__*/_jsx("li",{className:k("border-bottom"),children:/*#__PURE__*/_jsx("a",{className:"".concat(k("np-select-filter-link")," ").concat(k("p-a-0")),children:/*#__PURE__*/_jsxs("div",{className:k("input-group"),children:[/*#__PURE__*/_jsx("span",{className:k("input-group-addon"),children:/*#__PURE__*/_jsx(SearchIcon,{className:classnames(k("tw-icon"),k("tw-icon-search"))})}),/*#__PURE__*/_jsx("input",{ref:b,type:"text",className:classnames(k("np-select-filter"),k("form-control")),placeholder:h,value:j,spellCheck:"false",onChange:e,onClick:f})]})})})});export default SearchBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item
|
|
1
|
+
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:function onClick(){}};export default Option;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSide}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose()}function d(){// stop moving component
|
|
2
|
-
cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c():b(INITIAL_Y_POSITION),o.current=INITIAL_Y_POSITION}function e(){var a;return(null===i||void 0===i||null===(a=i.current)||void 0===a?void 0:a.scrollTop)!==void 0&&i.current.scrollTop<=CONTENT_SCROLL_THRESHOLD}/**
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import{useRef,useState}from"react";import Dimmer from"../../dimmer";import SlidingPanel from"../../slidingPanel";import CloseButton from"../closeButton";import{isServerSide}from"../domHelpers";import{useConditionalListener}from"../hooks";import{Position}from"../propsValues/position";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var INITIAL_Y_POSITION=0,CONTENT_SCROLL_THRESHOLD=1,MOVE_OFFSET_THRESHOLD=50,BottomSheet=function(a){function b(a){null!==g.current&&(g.current.style.transform="translateY(".concat(a,"px)"))}function c(b){m(!1),o.current=INITIAL_Y_POSITION,null!==g.current&&g.current.style.removeProperty("transform"),a.onClose&&a.onClose(b)}function d(a){// stop moving component
|
|
2
|
+
cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c(a):b(INITIAL_Y_POSITION),o.current=INITIAL_Y_POSITION}function e(){var a;return(null===i||void 0===i||null===(a=i.current)||void 0===a?void 0:a.scrollTop)!==void 0&&i.current.scrollTop<=CONTENT_SCROLL_THRESHOLD}/**
|
|
3
3
|
* Calculates how hard user moves component,
|
|
4
4
|
* result value used to determine whether to hide component or re-position to default state
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export function isServerSide(){return"undefined"==typeof window}export function isBrowser(){return!isServerSide()}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
|
|
1
|
+
export function isServerSide(){return"undefined"==typeof window}export function isBrowser(){return!isServerSide()}export function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}export{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"./documentIosClick";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as HistoryNavigator}from"./historyNavigator";export
|
|
1
|
+
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
|
|
2
2
|
export{Priority,ControlType}from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";
|
|
2
|
-
}}}),
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";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";var _fallbackPlacements,_excluded=["arrow","children","open","onClose","position","anchorRef"];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 classnames from"classnames";import{useState,forwardRef,useEffect}from"react";import{usePopper}from"react-popper";import{Position}from"..";import Dimmer from"../../dimmer";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var POPOVER_OFFSET=[0,16],fallbackPlacements=(_fallbackPlacements={},_defineProperty(_fallbackPlacements,Position.TOP,[Position.BOTTOM,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.BOTTOM,[Position.TOP,Position.RIGHT,Position.LEFT]),_defineProperty(_fallbackPlacements,Position.LEFT,[Position.RIGHT,Position.TOP,Position.BOTTOM]),_defineProperty(_fallbackPlacements,Position.RIGHT,[Position.LEFT,Position.TOP,Position.BOTTOM]),_fallbackPlacements),Panel=/*#__PURE__*/forwardRef(function(a,b){var c=a.arrow,d=void 0!==c&&c,e=a.children,f=a.open,g=void 0!==f&&f,h=a.onClose,i=a.position,j=void 0===i?Position.TOP:i,k=a.anchorRef,l=_objectWithoutProperties(a,_excluded),m=useState(null),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=[];d&&(u.push({name:"arrow",options:{element:o,options:{padding:8// 8px from the edges of the popper
|
|
2
|
+
}}}),u.push({name:"offset",options:{offset:POPOVER_OFFSET}})),fallbackPlacements[j]&&u.push({name:"flip",options:{fallbackPlacements:fallbackPlacements[j]}});var v=usePopper(k.current,s,{placement:j,modifiers:u}),w=v.styles,x=v.attributes,y=v.forceUpdate;// If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
|
|
3
3
|
// it is most simple just to always position before opening
|
|
4
|
-
return useEffect(function(){
|
|
4
|
+
return useEffect(function(){g&&y&&y()},[g]),/*#__PURE__*/_jsx(Dimmer,{open:g,transparent:!0,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:h,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread(_objectSpread({// @ts-expect-error Popper requirement
|
|
5
|
+
ref:t// eslint-disable-next-line react/forbid-dom-props
|
|
6
|
+
,style:_objectSpread({},w.popper)},x.popper),{},{className:classnames("np-panel",{"np-panel--open":g},l.className)},l),{},{children:/*#__PURE__*/_jsxs("div",{ref:b,className:classnames("np-panel__content"),children:[e,d&&/*#__PURE__*/_jsx("div",{// @ts-expect-error Popper requirement
|
|
7
|
+
ref:p,className:classnames("np-panel__arrow")// eslint-disable-next-line react/forbid-dom-props
|
|
8
|
+
,style:w.arrow})]})}))})});// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
|
|
5
9
|
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
|
|
6
10
|
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
|
|
7
|
-
|
|
8
|
-
// https://github.com/facebook/prop-types/issues/240
|
|
9
|
-
anchorRef:PropTypes.shape({current:PropTypes.any}).isRequired};export default Panel;
|
|
11
|
+
export default Panel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Position}from"..";import BottomSheet from"../bottomSheet";import{useLayout}from"../hooks";import Panel from"../panel";import{jsx as _jsx}from"react/jsx-runtime";var ResponsivePanel=function(a){var b=a.anchorRef,c=a.arrow,d=a.children,e=a.className,f=void 0===e?void 0:e,g=a.onClose,h=a.open,i=void 0!==h&&h,j=a.position,k=void 0===j?Position.TOP:j,l=useLayout(),m=l.isMobile;return m?/*#__PURE__*/_jsx(BottomSheet,{open:i,className:f,onClose:g,children:d},"bottomSheet"):/*#__PURE__*/_jsx(Panel,{arrow:void 0!==c&&c,open:i,position:k,anchorRef:b,className:f,onClose:g,children:d},"panel")};export default ResponsivePanel;
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"neptune.Pagination.ariaLabel": "Pagination navigation",
|
|
10
10
|
"neptune.PaginationLink.ariaLabel.active": "Go to page {pageNumber}",
|
|
11
11
|
"neptune.PaginationLink.ariaLabel.inactive": "Current page, page {pageNumber}",
|
|
12
|
+
"neptune.Select.searchPlaceholder": "Search...",
|
|
12
13
|
"neptune.Summary.statusDone": "Item done",
|
|
13
14
|
"neptune.Summary.statusNotDone": "Item to do",
|
|
14
15
|
"neptune.Summary.statusPending": "Item pending",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Types
|
|
3
3
|
*/ /**
|
|
4
4
|
* Components
|
|
5
|
-
*/export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
|
|
5
|
+
*/export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as PesponsivePanel}from"./common/responsivePanel";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";/**
|
|
6
6
|
* Hooks
|
|
7
7
|
*/export{default as useSnackbar}from"./snackbar/useSnackbar";export{useDirection,useLayout}from"./common/hooks";/**
|
|
8
8
|
* Enums
|
|
@@ -1,4 +1,5 @@
|
|
|
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.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{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";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){return"number"==typeof a?formatAmount(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:parseAmount(b,d.props.selectedCurrency.currency,c);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c)}),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:parseAmount(b,d.props.selectedCurrency.currency,d.state.locale);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),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)})}}},{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=parseAmount(b.formattedAmount,a.props.selectedCurrency.currency,a.state.locale);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale)}:{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=this.getSelectOptions(),g=!this.state.searchQuery&&(1===f.length&&f[0].currency===b.currency||!c),h=!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:this.props.id,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale),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)),h?this.style("disabled"):""),children:e}),g?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),h?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("hidden-xs"),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx("span",{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,{classNames:this.props.classNames,options:f,selected:_objectSpread(_objectSpread({},b),{},{note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0
|
|
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.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{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";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){return"number"==typeof a?formatAmount(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:parseAmount(b,d.props.selectedCurrency.currency,c);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c)}),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:parseAmount(b,d.props.selectedCurrency.currency,d.state.locale);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),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)})}}},{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=parseAmount(b.formattedAmount,a.props.selectedCurrency.currency,a.state.locale);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale)}:{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=this.getSelectOptions(),g=!this.state.searchQuery&&(1===f.length&&f[0].currency===b.currency||!c),h=!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:this.props.id,value:this.state.formattedAmount,type:"text",inputMode:"decimal",className:classNames(this.style("form-control")),disabled:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale),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)),h?this.style("disabled"):""),children:e}),g?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),h?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("hidden-xs"),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx("span",{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,{classNames:this.props.classNames,options:f,selected:_objectSpread(_objectSpread({},b),{},{note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0// dropdownRight="xs"
|
|
2
|
+
,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange})})]})}}]),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
3
|
* Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
|
|
3
4
|
*/onSearchChange:PropTypes.func,customActionLabel:PropTypes.node,onCustomAction:PropTypes.func,classNames:PropTypes.objectOf(PropTypes.string)},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:{}};// this export is necessary for react-to-typescript-definitions
|
|
4
5
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
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/web.dom-collections.for-each.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.object.to-string.js";import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.array.concat.js";import classNames from"classnames";import PropTypes from"prop-types";import{Component,createRef}from"react";import Transition from"react-transition-group/Transition";import Chevron from"../chevron";import{Breakpoint}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import{addClassAndTriggerReflow,removeClass}from"./domHelpers";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}function actionableOption(a){return!a.header&&!a.separator&&!a.disabled}var isFunction=function(a){return a&&"[object Function]"==={}.toString.call(a)};function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}function getShouldRenderWithPortal(){return"undefined"!=typeof document&&"undefined"!=typeof window&&window.matchMedia&&window.matchMedia("(max-width: ".concat(Breakpoint.SMALL,"px)")).matches}var OPTIONS_PAGE_SIZE=100,BOOTSTRAP_DROPDOWN_ANIMATION_TIME=200,defer=function(a){return setTimeout(a,0)},includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())},arrayIncludesString=function(a,b){return a.some(function(a){return includesString(a,b)})},defaultFilterFunction=function(a,b){return a.label&&includesString(a.label,b)||a.note&&includesString(a.note,b)||a.secondary&&includesString(a.secondary,b)||a.currency&&includesString(a.currency,b)||a.searchStrings&&arrayIncludesString(a.searchStrings,b)},Select=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setState({shouldRenderWithPortal:getShouldRenderWithPortal()})}),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(a){return d.props.onFocus&&d.props.onFocus(a)}),_defineProperty(_assertThisInitialized(d),"handleOnBlur",function(a){var b=d.props.onBlur,c=a.nativeEvent;if(c){var e=c.relatedTarget,f=a.currentTarget;if(f&&e&&f.contains(e))return}b&&b(a)}),_defineProperty(_assertThisInitialized(d),"getOptions",function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:d.props.options,b=d.props.search;if(!b||!d.state.searchValue)return a;var c=isFunction(b)?b:defaultFilterFunction;return a.filter(function(a){return c(a,d.state.searchValue)})}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({numberOfOptionsShown:OPTIONS_PAGE_SIZE}),d.props.onSearchChange?d.props.onSearchChange(a.target.value):d.setState({searchValue:a.target.value})}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){var b=d.state.open;switch(a.keyCode){case KeyCodes.UP:b?d.moveFocusWithDifference(-1):d.open(),a.preventDefault();break;case KeyCodes.DOWN:b?d.moveFocusWithDifference(1):d.open(),a.preventDefault();break;case KeyCodes.SPACE:a.target!==d.searchBoxRef.current&&(b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault());break;case KeyCodes.ENTER:b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault();break;case KeyCodes.ESCAPE:d.close(),a.preventDefault();break;case KeyCodes.TAB:b&&d.selectKeyboardFocusedOption();break;default:}}),_defineProperty(_assertThisInitialized(d),"handleButtonClick",function(){d.props.disabled||d.open()}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){a.currentTarget===a.target&&d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a}),_defineProperty(_assertThisInitialized(d),"renderOption",function(a,b){var c;if(a.separator)return/*#__PURE__*/_jsx("li",{className:d.style("divider")},b);if(a.header)return/*#__PURE__*/_jsx("li",{className:d.style("dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:a.header},b);var e=d.props.selected&&d.props.selected.value===a.value,f=d.state.keyboardFocusedOptionIndex===d.getIndexWithoutHeadersForIndexWithHeaders(b),g=classNames(d.style("tw-dropdown-item"),d.style("tw-dropdown-item--clickable"),(c={},_defineProperty(c,d.style("active"),e),_defineProperty(c,d.style("tw-dropdown-item--focused"),f&&!a.disabled),_defineProperty(c,d.style("disabled"),a.disabled),c));return/*#__PURE__*/_jsx("li",{className:g,onClick:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),onKeyPress:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),children:/*#__PURE__*/_jsx("a",{disabled:a.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},a),{},{classNames:d.props.classNames}))})},b)}),d.state={open:!1,searchValue:"",keyboardFocusedOptionIndex:null,numberOfOptionsShown:OPTIONS_PAGE_SIZE},d.searchBoxRef=/*#__PURE__*/createRef(),d.dropdownMenuRef=/*#__PURE__*/createRef(),d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({shouldRenderWithPortal:getShouldRenderWithPortal()}),window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.close(),window.removeEventListener("resize",this.handleResize)}},{key:"getIndexWithoutHeadersForIndexWithHeaders",value:function getIndexWithoutHeadersForIndexWithHeaders(a){return this.getOptions().reduce(function(b,c,d){return d<a&&actionableOption(c)?b+1:b},0)}},{key:"selectKeyboardFocusedOption",value:function selectKeyboardFocusedOption(){if(null!==this.state.keyboardFocusedOptionIndex){var a=this.state.keyboardFocusedOptionIndex;this.selectOption(this.getOptions().filter(actionableOption)[a])}}},{key:"moveFocusWithDifference",value:function moveFocusWithDifference(a){var b=this;this.setState(function(c,d){var e=b.getOptions(d.options).filter(actionableOption),f=e.reduce(function(a,b,c){return null===a?d.selected&&d.selected.value===b.value?c:null:a},null),g=c.keyboardFocusedOptionIndex,h=g;if(null===g&&null===f)return{keyboardFocusedOptionIndex:0};null===g&&null!==f&&(h=f);var i=h+a,j=clamp(0,e.length-1,i);return{keyboardFocusedOptionIndex:j}})}},{key:"open",value:function open(){var a=this;this.setState({open:!0},function(){var b="undefined"!=typeof window&&window.matchMedia&&!!window.matchMedia("(pointer: coarse)").matches,c=!!a.props.onSearchChange||!!a.props.search;defer(function(){!b&&c&&a.searchBoxRef.current&&a.searchBoxRef.current.focus(),addClickClassToDocumentOnIos(),document.addEventListener("click",a.handleDocumentClick,!1)})})}},{key:"close",value:function close(){var a=this;this.setState({open:!1,keyboardFocusedOptionIndex:null},function(){defer(function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",a.handleDocumentClick,!1)})})}},{key:"createSelectHandlerForOption",value:function createSelectHandlerForOption(a){var b=this;return function(c){stopPropagation(c),b.selectOption(a)}}},{key:"selectOption",value:function selectOption(a){a&&!a.placeholder?this.props.onChange(a):this.props.onChange(null),this.close()}},{key:"renderOptionsList",value:function renderOptionsList(){var a,b=this.props,c=b.dropdownRight,d=b.dropdownWidth,e=b.id,f=b.onSearchChange,g=b.placeholder,h=b.required,i=b.search,j=b.searchValue,k=b.searchPlaceholder,l=this.state.open,m=this.style,n=!!f||!!i,o=classNames(m("tw-select"),m("dropdown-menu"),(a={},_defineProperty(a,m("dropdown-menu-".concat(c,"-right")),c),_defineProperty(a,m("dropdown-menu-".concat(d)),d),_defineProperty(a,m("dropdown-menu--open"),l),a));return/*#__PURE__*/_jsxs("ul",{className:o,"aria-labelledby":e,children:[h||n||!g?"":this.renderPlaceHolderOption(),n&&/*#__PURE__*/_jsx(SearchBox,{ref:this.searchBoxRef,classNames:this.props.classNames,value:j||this.state.searchValue,placeholder:k,onChange:this.handleSearchChange,onClick:stopPropagation}),this.renderOptions(),this.state.numberOfOptionsShown<this.getOptions().length?this.renderShowMore():""]})}},{key:"renderOptions",value:function renderOptions(){return this.getOptions().slice(0,this.state.numberOfOptionsShown).map(this.renderOption)}},{key:"renderShowMore",value:function renderShowMore(){return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider"),this.style("show-more")),onClick:this.showMore.bind(this),onKeyPress:this.showMore.bind(this),children:/*#__PURE__*/_jsx("a",{children:"..."})}))}},{key:"showMore",value:function showMore(a){stopPropagation(a),this.setState(function(a){return{numberOfOptionsShown:a.numberOfOptionsShown+OPTIONS_PAGE_SIZE}})}},{key:"renderPlaceHolderOption",value:function renderPlaceHolderOption(){var a=this.props.placeholder;return/*#__PURE__*/_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider")),onClick:this.createSelectHandlerForOption({placeholder:a}),onKeyPress:this.createSelectHandlerForOption({placeholder:a}),children:/*#__PURE__*/_jsx("a",{children:a})})}},{key:"renderButtonInternals",value:function renderButtonInternals(){var a=this.props,b=a.selected,c=a.placeholder;return b?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},b),{},{classNames:this.props.classNames,selected:!0})):/*#__PURE__*/_jsx("span",{className:this.style("form-control-placeholder"),children:c})}},{key:"render",value:function render(){var a,b,c=this,d=this.props,e=d.disabled,f=d.size,g=d.block,h=d.id,i=d.dropdownUp,j=d.inverse,k=d.buttonProps,l=this.state,m=l.open,n=l.shouldRenderWithPortal,o=this.style,p=classNames(o("tw-select"),o("btn-group"),(a={},_defineProperty(a,o("btn-block"),g),_defineProperty(a,o("dropup"),i),_defineProperty(a,o("dropdown"),!i),a)),q=classNames(o("btn"),o("btn-input"),(b={},_defineProperty(b,"".concat(o("btn-input-inverse")," ").concat(o("btn-addon")),j),_defineProperty(b,o("btn-xs"),"xs"===f),_defineProperty(b,o("btn-sm"),"sm"===f),_defineProperty(b,o("btn-md"),"md"===f),_defineProperty(b,o("btn-lg"),"lg"===f),b),o("dropdown-toggle")),r=o("open");return/*#__PURE__*/ (// A transition is used here in order to mount and unmount the dropdown menu while retaining animations
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.search.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.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/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import classNames from"classnames";import PropTypes from"prop-types";import{useState,useEffect,useRef}from"react";import{useIntl}from"react-intl";import Button from"../button";import Chevron from"../chevron";import{Position,Size}from"../common";import BottomSheet from"../common/bottomSheet";import{stopPropagation}from"../common/domHelpers";import{useLayout}from"../common/hooks";import KeyCodes from"../common/keyCodes";import Panel from"../common/panel";import Drawer from"../drawer";import messages from"./Select.messages";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_SEARCH_VALUE="",DEFAULT_OPTIONS_PAGE_SIZE=100,includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())};function defaultFilterFunction(a,b){if(isPlaceholderOption(a))return!0;var c=a.label,d=a.note,e=a.secondary,f=a.currency,g=a.searchStrings;return!!c&&includesString(c,b)||!!d&&includesString(d,b)||!!e&&includesString(e,b)||!!f&&includesString(f,b)||!!g&&g.some(function(a){return includesString(a,b)})}function isActionableOption(a){return isPlaceholderOption(a)||null!==a&&"value"in a}function isHeaderOption(a){return null!==a&&"header"in a}function isSparatorOption(a){return null!==a&&"separator"in a}/**
|
|
2
|
+
* No option or placeholder option is selected
|
|
3
|
+
*/var DEFAULT_SELECTED_OPTION=null;function isPlaceholderOption(a){return a===DEFAULT_SELECTED_OPTION||"placeholder"in a}export default function Select(a){function b(){if(null!==ba){var a=na().filter(isActionableOption);e(a[ba])}}function c(a){var b=na().filter(isActionableOption),c=b.reduce(function(a,b,c){return null===a?k(A,b)?c:null:a},null),d=null===da.current||void 0===da.current?-1:da.current,e=d;null===d&&null===c&&ca(0),null===d&&null!==c&&(e=c);var f=e+a,g=Math.max(Math.min(0,b.length-1),f);ca(g)}function d(a){return function(b){stopPropagation(b),e(a)}}function e(a){D(isPlaceholderOption(a)?DEFAULT_SELECTED_OPTION:a),pa()}// eslint-disable-next-line react/prop-types
|
|
4
|
+
function f(a){var b=a.className,c=classNames(T("np-dropdown-menu"),_defineProperty({},T("np-dropdown-menu-".concat(v)),!ma),T(b));return/*#__PURE__*/_jsxs("ul",{className:c,"aria-labelledby":o,children:[!q&&!ka&&null!==n&&/*#__PURE__*/_jsx(h,{}),ka&&/*#__PURE__*/_jsx(SearchBox,{ref:ia,classNames:N,value:J||Z,placeholder:L||S(messages.searchPlaceholder),onChange:oa,onClick:stopPropagation}),na().slice(0,ga).map(qa),ga<na().length&&/*#__PURE__*/_jsx(g,{})]})}function g(){function a(a){stopPropagation(a),ha(ga+DEFAULT_OPTIONS_PAGE_SIZE)}return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom"),T("show-more")),onClick:a,onKeyPress:a,children:/*#__PURE__*/_jsx("a",{children:"..."})}))}function h(){var a={placeholder:n};return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(T("clickable"),T("border-bottom")),onClick:d(a),onKeyPress:d(a),children:/*#__PURE__*/_jsx("a",{children:n})}))}// eslint-disable-next-line react/prop-types
|
|
5
|
+
function i(a){var b=a.key;return/*#__PURE__*/_jsx("li",{className:T("np-separator")},b)}// eslint-disable-next-line react/prop-types
|
|
6
|
+
function j(a){var b=a.key,c=a.children;return/*#__PURE__*/_jsx("li",{className:T("np-dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:c},b)}function k(a,b){return isPlaceholderOption(a)&&isPlaceholderOption(b)||(null===a||void 0===a?void 0:a.value)===(null===b||void 0===b?void 0:b.value)}function l(a){return na().reduce(function(b,c,d){return d<a&&isActionableOption(c)?b+1:b},0)}var m=a.placeholder,n=void 0===m?DEFAULT_SELECTED_OPTION:m,o=a.id,p=a.required,q=void 0!==p&&p,r=a.disabled,t=a.inverse,u=a.dropdownWidth,v=void 0===u?Size.MEDIUM:u,w=a.size,x=void 0===w?Size.MEDIUM:w,y=a.block,z=a.selected,A=void 0===z?DEFAULT_SELECTED_OPTION:z,B=a.search,C=void 0!==B&&B,D=a.onChange,E=a.onFocus,F=a.onBlur,G=a.options,H=a.onSearchChange,I=a.searchValue,J=void 0===I?DEFAULT_SEARCH_VALUE:I,K=a.searchPlaceholder,L=void 0===K?void 0:K,M=a.classNames,N=void 0===M?{}:M,O=a.dropdownUp,P=a.buttonProps,Q=void 0===P?{}:P,R=useIntl(),S=R.formatMessage,T=function(a){return N[a]||a},s=useState(!1),U=_slicedToArray(s,2),V=U[0],W=U[1],X=useState(DEFAULT_SEARCH_VALUE),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useState(null),aa=_slicedToArray(_,2),ba=aa[0],ca=aa[1],da=useRef(),ea=useState(DEFAULT_OPTIONS_PAGE_SIZE),fa=_slicedToArray(ea,2),ga=fa[0],ha=fa[1],ia=useRef(null),ja=useRef(null),ka=!!H||!!C,la=useLayout(),ma=la.isMobile,na=function(){return C&&Z?G.filter(function(a){return isActionableOption(a)&&!isPlaceholderOption(a)}).filter(function(a){return"function"==typeof C?C(a,Z):defaultFilterFunction(a,Z)}):G},oa=function(a){ha(DEFAULT_OPTIONS_PAGE_SIZE),$(a.target.value),H&&H(a.target.value)};useEffect(function(){if(da.current=ba,V){var a,b=!!(null!==(a=window)&&void 0!==a&&a.matchMedia("(pointer: coarse)").matches);b||!ka||!ia.current||ia.current.focus()}},[V,Z,ka,ba]);var pa=function(){W(!1),ca(null)},qa=function(a,b){var c,e=a;if(isSparatorOption(e)&&null!==e&&void 0!==e&&e.separator)return/*#__PURE__*/_jsx(i,{},b);var f=a;if(isHeaderOption(f)&&f.header)return/*#__PURE__*/_jsx(j,{children:f.header},b);var g=k(A,a),h=a,m=!h.disabled&&ba===l(b),n=classNames(T("np-dropdown-item"),h.disabled?[T("disabled")]:T("clickable"),(c={},_defineProperty(c,T("active"),g),_defineProperty(c,T("np-dropdown-item--focused"),m),c)),o=h.disabled?stopPropagation:d(h);return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:n,onClick:o,onKeyPress:o,children:/*#__PURE__*/_jsx("a",{disabled:h.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},h),{},{classNames:N}))})},b))},ra=!!G.length;return V&&(""!==J||""!==Z)&&(ra&&null===ba&&ca(0),!ra&&null!==ba&&ca(null)),/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
7
|
+
ref:ja,className:classNames(T("np-select")),onKeyDown:function handleKeyDown(a){switch(a.keyCode){case KeyCodes.UP:case KeyCodes.DOWN:V?c(a.keyCode===KeyCodes.UP?-1:1):W(!0),stopPropagation(a);break;case KeyCodes.SPACE:a.target!==ia.current&&(V?b():W(!0),stopPropagation(a));break;case KeyCodes.ENTER:V?b():W(!0),stopPropagation(a);break;case KeyCodes.ESCAPE:pa(),stopPropagation(a);break;case KeyCodes.TAB:V&&b();break;default:}},onTouchMove:function handleTouchStart(a){a.currentTarget===a.target&&V&&pa()},onFocus:function handleOnFocus(a){E&&E(a)},onBlur:function handleOnBlur(a){var b=a.nativeEvent;if(b){var c=b.relatedTarget,d=a.currentTarget;if(d&&c&&d.contains(c))return}F&&F(a)},children:[/*#__PURE__*/_jsxs(Button,_objectSpread(_objectSpread({id:o,block:void 0===y||y,size:x,htmlType:"button",className:classNames(T("np-dropdown-toggle"),void 0!==t&&t?T("np-dropdown-toggle-navy"):null)// reset Button's styles
|
|
8
|
+
,type:null,priority:null,disabled:void 0!==r&&r,"aria-expanded":V,onClick:function handleOnClick(){W(!0)}},Q),{},{children:[A?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},A),{},{classNames:N,selected:!0})):/*#__PURE__*/_jsx("span",{className:T("form-control-placeholder"),children:n}),/*#__PURE__*/_jsx(Chevron// disabled={disabled}
|
|
9
|
+
,{className:classNames(T("tw-icon"),T("tw-chevron-up-icon"),T("tw-chevron"),T("bottom"),T("np-select-chevron"))})]})),ma?ka?/*#__PURE__*/_jsx(Drawer,{open:V,headerTitle:L||S(messages.searchPlaceholder),onClose:pa,children:/*#__PURE__*/_jsx(f,{})}):/*#__PURE__*/_jsx(BottomSheet,{open:V,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})}):/*#__PURE__*/_jsx(Panel,{open:V,anchorRef:ja,position:void 0!==O&&O?Position.TOP:Position.BOTTOM,onClose:pa,children:/*#__PURE__*/_jsx(f,{className:"p-a-1"})})]})}Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
4
10
|
* Search toggle
|
|
5
11
|
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
6
12
|
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
7
13
|
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
8
14
|
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
9
15
|
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
10
|
-
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:
|
|
16
|
+
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool,buttonProps:PropTypes.object},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:void 0,classNames:{},dropdownUp:!1,buttonProps:{}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{defineMessages}from"react-intl";export default defineMessages({searchPlaceholder:{id:"neptune.Select.searchPlaceholder"}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import
|
|
1
|
+
import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function Option(a){var b=a.label,c=a.currency,d=void 0===c?"":c,e=a.note,f=void 0===e?"":e,g=a.secondary,h=void 0===g?"":g,i=a.icon,j=a.classNames,k=void 0===j?{}:j,l=a.selected,m=void 0!==l&&l,n=function(a){return a.map(function(a){return k[a]||a}).join(" ")},o=d?"".concat(n(["currency-flag","currency-flag-".concat(d.toLowerCase()),"".concat(m?"hidden-xs":"")])):void 0,p=f?"".concat(n(["d-inline-flex align-items-center"])):void 0;return/*#__PURE__*/_jsxs(_Fragment,{children:[i?/*#__PURE__*/cloneElement(i,{size:24,className:"".concat(n(["tw-icon","".concat(m&&d?"hidden-xs":"")]))}):d&&/*#__PURE__*/_jsx("i",{className:o}),/*#__PURE__*/_jsxs("span",{className:p,children:[b,f&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:f})]}),h&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:h})]})}export default Option;
|