Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@blueprintjs/select
Advanced tools
@blueprintjs/select - npm Package Compare versions
Comparing version 3.1.0 to 3.2.0
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["@blueprintjs/core","tslib","react","classnames"],t):"object"==typeof exports?exports.Select=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Select=t(e.Blueprint.Core,e.tslib,e.React,e.classNames))}("undefined"!=typeof self?self:this,function(e,t,n,r){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t,n){e.exports=n(5)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={};n.d(r,"MULTISELECT",function(){return s}),n.d(r,"MULTISELECT_POPOVER",function(){return p}),n.d(r,"OMNIBAR",function(){return a}),n.d(r,"OMNIBAR_OVERLAY",function(){return u}),n.d(r,"SELECT",function(){return l}),n.d(r,"SELECT_POPOVER",function(){return c});var o=n(0),i=o.Classes.getClassNamespace(),s=i+"-multi-select",p=s+"-popover",a=i+"-omnibar",u=a+"-overlay",l=i+"-select",c=l+"-popover";function d(e,t,n){if(0===e.query.length&&void 0!==n)return n;var r=e.filteredItems.map(e.renderItem).filter(function(e){return null!=e});return r.length>0?r:t}var v=n(1),f=n(3),m=n.n(f),h=n(2),y=function(e){function t(t,n){var r=e.call(this,t,n)||this;r.refHandlers={itemsParent:function(e){return r.itemsParentRef=e}},r.shouldCheckActiveItemInViewport=!1,r.renderItemList=function(e){var t=r.props,n=t.initialContent,i=d(e,t.noResults,n);return h.createElement(o.Menu,{ulRef:e.itemsParentRef},i)},r.renderItem=function(e,t){var n=r.state,o=n.activeItem,i=n.query,s=r.state.filteredItems.indexOf(e)>=0,p={active:o===e,disabled:O(e,t,r.props.itemDisabled),matchesPredicate:s};return r.props.itemRenderer(e,{handleClick:function(t){return r.handleItemSelect(e,t)},index:t,modifiers:p,query:i})},r.handleItemSelect=function(e,t){r.setActiveItem(e),o.Utils.safeInvoke(r.props.onItemSelect,e,t),r.props.resetOnSelect&&r.setQuery("",!0)},r.handleKeyDown=function(e){var t=e.keyCode;if(t===o.Keys.ARROW_UP||t===o.Keys.ARROW_DOWN){e.preventDefault();var n=r.getNextActiveItem(t===o.Keys.ARROW_UP?-1:1);null!=n&&(r.shouldCheckActiveItemInViewport=!0,r.setActiveItem(n))}o.Utils.safeInvoke(r.props.onKeyDown,e)},r.handleKeyUp=function(e){var t=r.props.onKeyUp,n=r.state.activeItem;e.keyCode===o.Keys.ENTER&&null!=n&&(e.preventDefault(),r.handleItemSelect(n,e)),o.Utils.safeInvoke(t,e)},r.handleQueryChange=function(e){var t=null==e?"":e.target.value;r.setQuery(t),o.Utils.safeInvoke(r.props.onQueryChange,t,e)};var i=r.props.query,s=void 0===i?"":i,p=P(s,r.props);return r.state={activeItem:g(p,r.props.itemDisabled),filteredItems:p,query:s},r}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.className,n=e.items,r=e.renderer,o=e.itemListRenderer,i=void 0===o?this.renderItemList:o;return r(v.__assign({},this.state,{className:t,handleItemSelect:this.handleItemSelect,handleKeyDown:this.handleKeyDown,handleKeyUp:this.handleKeyUp,handleQueryChange:this.handleQueryChange,itemList:i(v.__assign({},this.state,{items:n,itemsParentRef:this.refHandlers.itemsParent,renderItem:this.renderItem}))}))},t.prototype.componentWillReceiveProps=function(e){void 0!==e.activeItem&&this.setState({activeItem:e.activeItem}),null!=e.query&&this.setQuery(e.query)},t.prototype.componentDidUpdate=function(e){var t=this;o.Utils.shallowCompareKeys(this.props,e,{include:["items","itemListPredicate","itemPredicate"]})||(this.setState(function(e){return{filteredItems:P(e.query,t.props)}}),this.shouldCheckActiveItemInViewport=!0),this.shouldCheckActiveItemInViewport&&(requestAnimationFrame(function(){return t.scrollActiveItemIntoView()}),this.shouldCheckActiveItemInViewport=!1);var n=this.getActiveIndex();void 0!==this.props.activeItem&&(n<0||O(this.props.activeItem,n,this.props.itemDisabled))&&this.setFirstActiveItem()},t.prototype.scrollActiveItemIntoView=function(){var e=this.getActiveElement();if(null!=this.itemsParentRef&&null!=e){var t=e.offsetTop,n=e.offsetHeight,r=this.itemsParentRef,o=r.offsetTop,i=r.scrollTop,s=r.clientHeight,p=this.getItemsParentPadding(),a=p.paddingTop,u=t+n+p.paddingBottom-o,l=t-a-o;u>=i+s?this.itemsParentRef.scrollTop=u+n-s:l<=i&&(this.itemsParentRef.scrollTop=l-n)}},t.prototype.setQuery=function(e,t){var n=this;void 0===t&&(t=!1),e!==this.state.query&&o.Utils.safeInvoke(this.props.onQueryChange,e),this.setState({filteredItems:P(e,this.props),query:e},function(){t&&n.setFirstActiveItem()})},t.prototype.getActiveElement=function(){if(null!=this.itemsParentRef)return this.itemsParentRef.children.item(this.getActiveIndex())},t.prototype.getActiveIndex=function(){var e=this.state.activeItem;return null==e?-1:this.state.filteredItems.indexOf(e)},t.prototype.getItemsParentPadding=function(){var e=getComputedStyle(this.itemsParentRef),t=e.paddingTop;return{paddingBottom:I(e.paddingBottom),paddingTop:I(t)}},t.prototype.getNextActiveItem=function(e,t){return void 0===t&&(t=this.getActiveIndex()),g(this.state.filteredItems,this.props.itemDisabled,e,t)},t.prototype.setActiveItem=function(e){void 0===this.props.activeItem&&this.setState({activeItem:e}),o.Utils.safeInvoke(this.props.onActiveItemChange,e)},t.prototype.setFirstActiveItem=function(){this.setActiveItem(this.getNextActiveItem(1,this.state.filteredItems.length-1))},t.displayName=o.DISPLAYNAME_PREFIX+".QueryList",t}(h.Component);function I(e){return null==e?0:parseInt(e.slice(0,-2),10)}function P(e,t){var n=t.items,r=t.itemPredicate,i=t.itemListPredicate;return o.Utils.isFunction(i)?i(e,n):o.Utils.isFunction(r)?n.filter(function(t,n){return r(e,t,n)}):n}function O(e,t,n){return null!=n&&null!=e&&(o.Utils.isFunction(n)?n(e,t):!!e[n])}function g(e,t,n,r){if(void 0===n&&(n=1),void 0===r&&(r=e.length-1),0===e.length)return null;var o,i,s,p=r,a=e.length-1;do{if(s=a,!O(e[p=(o=p+n)<(i=0)?s:o>s?i:o],p,t))return e[p]}while(p!==r);return null}var E=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.TypedQueryList=y.ofType(),t.refHandlers={queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,i=n.inputProps,s=void 0===i?{}:i,p=n.isOpen,a=n.overlayProps,u=void 0===a?{}:a,l=e.handleKeyDown,c=e.handleKeyUp,d=p&&e.query.length>0?{onKeyDown:l,onKeyUp:c}:{};return h.createElement(o.Overlay,v.__assign({hasBackdrop:!0},u,{isOpen:p,className:m()(r.OMNIBAR_OVERLAY,u.className),onClose:t.handleOverlayClose}),h.createElement("div",v.__assign({className:m()(r.OMNIBAR,e.className)},d),h.createElement(o.InputGroup,v.__assign({autoFocus:!0,large:!0,leftIcon:"search",placeholder:"Search..."},s,{onChange:e.handleQueryChange,value:e.query})),e.itemList))},t.handleOverlayClose=function(e){var n=t.props.overlayProps,r=void 0===n?{}:n;o.Utils.safeInvoke(r.onClose,e),o.Utils.safeInvoke(t.props.onClose,e)},t}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.initialContent,n=void 0===t?null:t,r=(e.isOpen,e.inputProps,e.overlayProps,v.__rest(e,["initialContent","isOpen","inputProps","overlayProps"]));return h.createElement(this.TypedQueryList,v.__assign({},r,{initialContent:n,onItemSelect:this.props.onItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.displayName=o.DISPLAYNAME_PREFIX+".Omnibar",t}(h.PureComponent),_=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:t.props.popoverProps&&t.props.popoverProps.isOpen||!1},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){t.input=e;var n=t.props.tagInputProps,r=void 0===n?{}:n;o.Utils.safeInvoke(r.inputRef,e)},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,i=n.tagInputProps,s=void 0===i?{}:i,p=n.popoverProps,a=void 0===p?{}:p,u=n.selectedItems,l=void 0===u?[]:u,c=e.handleKeyDown,d=e.handleKeyUp;return h.createElement(o.Popover,v.__assign({autoFocus:!1,canEscapeKeyClose:!0,enforceFocus:!1,isOpen:t.state.isOpen,position:o.Position.BOTTOM_LEFT},a,{className:m()(e.className,a.className),onInteraction:t.handlePopoverInteraction,popoverClassName:m()(r.MULTISELECT_POPOVER,a.popoverClassName),onOpened:t.handlePopoverOpened}),h.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(c),onKeyUp:t.state.isOpen?d:void 0},h.createElement(o.TagInput,v.__assign({placeholder:"Search..."},s,{className:m()(r.MULTISELECT,s.className),inputRef:t.refHandlers.input,inputValue:e.query,onInputChange:e.handleQueryChange,values:l.map(t.props.tagRenderer)}))),h.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(c),onKeyUp:d},e.itemList))},t.handleItemSelect=function(e,n){null!=t.input&&t.input.focus(),o.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleQueryChange=function(e,n){t.setState({isOpen:e.length>0||!t.props.openOnKeyDown}),o.Utils.safeInvoke(t.props.onQueryChange,e,n)},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.input&&t.input!==document.activeElement?t.setState({isOpen:!1}):t.props.openOnKeyDown||t.setState({isOpen:!0}),o.Utils.safeInvoke(r.onInteraction,e)})},t.handlePopoverOpened=function(e){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),o.Utils.safeInvoke(r.onOpened,e)},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which;r===o.Keys.ESCAPE||r===o.Keys.TAB?(null!=t.input&&t.input.blur(),t.setState({isOpen:!1})):r!==o.Keys.BACKSPACE&&r!==o.Keys.ARROW_LEFT&&r!==o.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&o.Utils.safeInvoke(e,n)}},t}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.openOnKeyDown,e.popoverProps,e.tagInputProps,v.__rest(e,["openOnKeyDown","popoverProps","tagInputProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,onQueryChange:this.handleQueryChange,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.displayName=o.DISPLAYNAME_PREFIX+".MultiSelect",t}(h.PureComponent),C=function(e){function t(t,n){var i=e.call(this,t,n)||this;return i.TypedQueryList=y.ofType(),i.refHandlers={input:function(e){i.input=e;var t=i.props.inputProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.inputRef,e)},queryList:function(e){return i.list=e}},i.renderQueryList=function(e){var t=i.props,n=t.filterable,s=void 0===n||n,p=t.disabled,a=void 0!==p&&p,u=t.inputProps,l=void 0===u?{}:u,c=t.popoverProps,d=void 0===c?{}:c,f=h.createElement(o.InputGroup,v.__assign({leftIcon:"search",placeholder:"Filter...",rightElement:i.maybeRenderClearButton(e.query)},l,{inputRef:i.refHandlers.input,onChange:e.handleQueryChange,value:e.query})),y=e.handleKeyDown,I=e.handleKeyUp;return h.createElement(o.Popover,v.__assign({autoFocus:!1,enforceFocus:!1,isOpen:i.state.isOpen,disabled:a,position:o.Position.BOTTOM_LEFT},d,{className:m()(e.className,d.className),onInteraction:i.handlePopoverInteraction,popoverClassName:m()(r.SELECT_POPOVER,d.popoverClassName),onOpening:i.handlePopoverOpening,onOpened:i.handlePopoverOpened,onClosing:i.handlePopoverClosing}),h.createElement("div",{onKeyDown:i.state.isOpen?y:i.handleTargetKeyDown,onKeyUp:i.state.isOpen?I:void 0},i.props.children),h.createElement("div",{onKeyDown:y,onKeyUp:I},s?f:void 0,e.itemList))},i.handleTargetKeyDown=function(e){e.which!==o.Keys.ARROW_UP&&e.which!==o.Keys.ARROW_DOWN||(e.preventDefault(),i.setState({isOpen:!0}))},i.handleItemSelect=function(e,t){i.setState({isOpen:!1}),o.Utils.safeInvoke(i.props.onItemSelect,e,t)},i.handlePopoverInteraction=function(e){i.setState({isOpen:e});var t=i.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onInteraction,e)},i.handlePopoverOpening=function(e){var t=i.props,n=t.popoverProps,r=void 0===n?{}:n,s=t.resetOnClose;i.previousFocusedElement=document.activeElement,s&&i.resetQuery(),o.Utils.safeInvoke(r.onOpening,e)},i.handlePopoverOpened=function(e){null!=i.list&&i.list.scrollActiveItemIntoView(),requestAnimationFrame(function(){var e=i.props.inputProps;!1!==(void 0===e?{}:e).autoFocus&&null!=i.input&&i.input.focus()});var t=i.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onOpened,e)},i.handlePopoverClosing=function(e){requestAnimationFrame(function(){void 0!==i.previousFocusedElement&&(i.previousFocusedElement.focus(),i.previousFocusedElement=void 0)});var t=i.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onClosing,e)},i.resetQuery=function(){return i.list&&i.list.setQuery("",!0)},i.state={isOpen:!1},i}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.filterable,e.inputProps,e.popoverProps,v.__rest(e,["filterable","inputProps","popoverProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.list&&this.list.scrollActiveItemIntoView()},t.prototype.maybeRenderClearButton=function(e){return e.length>0?h.createElement(o.Button,{icon:"cross",minimal:!0,onClick:this.resetQuery}):void 0},t.displayName=o.DISPLAYNAME_PREFIX+".Select",t}(h.PureComponent),S=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:t.props.popoverProps&&t.props.popoverProps.isOpen||!1},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){t.input=e;var n=t.props.inputProps,r=void 0===n?{}:n;o.Utils.safeInvoke(r.inputRef,e)},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,i=n.inputProps,s=void 0===i?{}:i,p=n.popoverProps,a=void 0===p?{}:p,u=t.state,l=u.isOpen,c=u.selectedItem,d=e.handleKeyDown,f=e.handleKeyUp,y=s.placeholder,I=void 0===y?"Search...":y,P=c?t.props.inputValueRenderer(c):"";return h.createElement(o.Popover,v.__assign({autoFocus:!1,enforceFocus:!1,isOpen:l,position:o.Position.BOTTOM_LEFT},a,{className:m()(e.className,a.className),onInteraction:t.handlePopoverInteraction,popoverClassName:m()(r.SELECT_POPOVER,a.popoverClassName),onOpened:t.handlePopoverOpened}),h.createElement(o.InputGroup,v.__assign({},s,{placeholder:l&&P?P:I,inputRef:t.refHandlers.input,onChange:e.handleQueryChange,onFocus:t.handleInputFocus,onKeyDown:t.getTargetKeyDownHandler(d),onKeyUp:t.getTargetKeyUpHandler(f),value:l?e.query:P})),h.createElement("div",{onKeyDown:d,onKeyUp:f},e.itemList))},t.selectText=function(){requestAnimationFrame(function(){null!=t.input&&t.input.setSelectionRange(0,t.input.value.length)})},t.handleInputFocus=function(e){var n=t.props,r=n.openOnKeyDown,i=n.inputProps,s=void 0===i?{}:i;t.selectText(),r||t.setState({isOpen:!0}),o.Utils.safeInvoke(s.onFocus,e)},t.handleItemSelect=function(e,n){var r;t.props.closeOnSelect?(null!=t.input&&t.input.blur(),r=!1):(null!=t.input&&t.input.focus(),t.selectText(),r=!0),t.setState({isOpen:r,selectedItem:e}),o.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.input&&t.input!==document.activeElement&&t.setState({isOpen:!1}),o.Utils.safeInvoke(r.onInteraction,e)})},t.handlePopoverOpened=function(e){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),o.Utils.safeInvoke(r.onOpened,e)},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which,i=t.props,s=i.inputProps,p=void 0===s?{}:s,a=i.openOnKeyDown;r===o.Keys.ESCAPE||r===o.Keys.TAB?(null!=t.input&&t.input.blur(),t.setState({isOpen:!1})):a&&r!==o.Keys.BACKSPACE&&r!==o.Keys.ARROW_LEFT&&r!==o.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&o.Utils.safeInvoke(e,n),o.Utils.safeInvoke(p.onKeyDown,n)}},t.getTargetKeyUpHandler=function(e){return function(n){var r=t.props.inputProps,i=void 0===r?{}:r;t.state.isOpen&&o.Utils.safeInvoke(e,n),o.Utils.safeInvoke(i.onKeyUp,n)}},t}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.inputProps,e.popoverProps,v.__rest(e,["inputProps","popoverProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.queryList&&this.queryList.scrollActiveItemIntoView()},t.displayName=o.DISPLAYNAME_PREFIX+".Suggest",t.defaultProps={closeOnSelect:!0,openOnKeyDown:!1},t}(h.PureComponent);n.d(t,"Classes",function(){return r}),n.d(t,"renderFilteredItems",function(){return d}),n.d(t,"Omnibar",function(){return E}),n.d(t,"QueryList",function(){return y}),n.d(t,"getFirstEnabledItem",function(){return g}),n.d(t,"MultiSelect",function(){return _}),n.d(t,"Select",function(){return C}),n.d(t,"Suggest",function(){return S})}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames")):"function"==typeof define&&define.amd?define(["@blueprintjs/core","tslib","react","classnames"],t):"object"==typeof exports?exports.Select=t(require("@blueprintjs/core"),require("tslib"),require("react"),require("classnames")):(e.Blueprint=e.Blueprint||{},e.Blueprint.Select=t(e.Blueprint.Core,e.tslib,e.React,e.classNames))}("undefined"!=typeof self?self:this,function(e,t,n,r){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t,n){e.exports=n(5)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={};n.d(r,"MULTISELECT",function(){return i}),n.d(r,"MULTISELECT_POPOVER",function(){return p}),n.d(r,"OMNIBAR",function(){return a}),n.d(r,"OMNIBAR_OVERLAY",function(){return l}),n.d(r,"SELECT",function(){return u}),n.d(r,"SELECT_POPOVER",function(){return c});var o=n(0),s=o.Classes.getClassNamespace(),i=s+"-multi-select",p=i+"-popover",a=s+"-omnibar",l=a+"-overlay",u=s+"-select",c=u+"-popover";function d(e,t,n){if(0===e.query.length&&void 0!==n)return n;var r=e.filteredItems.map(e.renderItem).filter(function(e){return null!=e});return r.length>0?r:t}var v=n(1),f=n(3),m=n.n(f),h=n(2),y=function(e){function t(t,n){var r=e.call(this,t,n)||this;r.refHandlers={itemsParent:function(e){return r.itemsParentRef=e}},r.shouldCheckActiveItemInViewport=!1,r.renderItemList=function(e){var t=r.props,n=t.initialContent,s=d(e,t.noResults,n);return h.createElement(o.Menu,{ulRef:e.itemsParentRef},s)},r.renderItem=function(e,t){var n=r.state,o=n.activeItem,s=n.query,i=r.state.filteredItems.indexOf(e)>=0,p={active:o===e,disabled:O(e,t,r.props.itemDisabled),matchesPredicate:i};return r.props.itemRenderer(e,{handleClick:function(t){return r.handleItemSelect(e,t)},index:t,modifiers:p,query:s})},r.handleItemSelect=function(e,t){r.setActiveItem(e),o.Utils.safeInvoke(r.props.onItemSelect,e,t),r.props.resetOnSelect&&r.setQuery("",!0)},r.handleKeyDown=function(e){var t=e.keyCode;if(t===o.Keys.ARROW_UP||t===o.Keys.ARROW_DOWN){e.preventDefault();var n=r.getNextActiveItem(t===o.Keys.ARROW_UP?-1:1);null!=n&&r.setActiveItem(n)}o.Utils.safeInvoke(r.props.onKeyDown,e)},r.handleKeyUp=function(e){var t=r.props.onKeyUp,n=r.state.activeItem;e.keyCode===o.Keys.ENTER&&null!=n&&(e.preventDefault(),r.handleItemSelect(n,e)),o.Utils.safeInvoke(t,e)},r.handleQueryChange=function(e){var t=null==e?"":e.target.value;r.setQuery(t),o.Utils.safeInvoke(r.props.onQueryChange,t,e)};var s=r.props.query,i=void 0===s?"":s,p=P(i,r.props);return r.state={activeItem:g(p,r.props.itemDisabled),filteredItems:p,query:i},r}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.className,n=e.items,r=e.renderer,o=e.itemListRenderer,s=void 0===o?this.renderItemList:o;return r(v.__assign({},this.state,{className:t,handleItemSelect:this.handleItemSelect,handleKeyDown:this.handleKeyDown,handleKeyUp:this.handleKeyUp,handleQueryChange:this.handleQueryChange,itemList:s(v.__assign({},this.state,{items:n,itemsParentRef:this.refHandlers.itemsParent,renderItem:this.renderItem}))}))},t.prototype.componentWillReceiveProps=function(e){void 0!==e.activeItem&&(this.shouldCheckActiveItemInViewport=!0,this.setState({activeItem:e.activeItem})),null!=e.query&&this.setQuery(e.query)},t.prototype.componentDidUpdate=function(e){var t=this;o.Utils.shallowCompareKeys(this.props,e,{include:["items","itemListPredicate","itemPredicate"]})||this.setQuery(this.state.query),this.shouldCheckActiveItemInViewport&&(requestAnimationFrame(function(){return t.scrollActiveItemIntoView()}),this.shouldCheckActiveItemInViewport=!1)},t.prototype.scrollActiveItemIntoView=function(){var e=this.getActiveElement();if(null!=this.itemsParentRef&&null!=e){var t=e.offsetTop,n=e.offsetHeight,r=this.itemsParentRef,o=r.offsetTop,s=r.scrollTop,i=r.clientHeight,p=this.getItemsParentPadding(),a=p.paddingTop,l=t+n+p.paddingBottom-o,u=t-a-o;l>=s+i?this.itemsParentRef.scrollTop=l+n-i:u<=s&&(this.itemsParentRef.scrollTop=u-n)}},t.prototype.setQuery=function(e,t){void 0===t&&(t=this.props.resetOnQuery),this.shouldCheckActiveItemInViewport=!0,e!==this.state.query&&o.Utils.safeInvoke(this.props.onQueryChange,e);var n=P(e,this.props);this.setState({filteredItems:n,query:e});var r=this.getActiveIndex(n);(t||r<0||O(this.state.activeItem,r,this.props.itemDisabled))&&this.setActiveItem(g(n,this.props.itemDisabled))},t.prototype.getActiveElement=function(){if(null!=this.itemsParentRef)return this.itemsParentRef.children.item(this.getActiveIndex())},t.prototype.getActiveIndex=function(e){void 0===e&&(e=this.state.filteredItems);var t=this.state.activeItem;return null==t?-1:e.indexOf(t)},t.prototype.getItemsParentPadding=function(){var e=getComputedStyle(this.itemsParentRef),t=e.paddingTop;return{paddingBottom:I(e.paddingBottom),paddingTop:I(t)}},t.prototype.getNextActiveItem=function(e,t){return void 0===t&&(t=this.getActiveIndex()),g(this.state.filteredItems,this.props.itemDisabled,e,t)},t.prototype.setActiveItem=function(e){void 0===this.props.activeItem&&(this.shouldCheckActiveItemInViewport=!0,this.setState({activeItem:e})),o.Utils.safeInvoke(this.props.onActiveItemChange,e)},t.displayName=o.DISPLAYNAME_PREFIX+".QueryList",t.defaultProps={resetOnQuery:!0},t}(h.Component);function I(e){return null==e?0:parseInt(e.slice(0,-2),10)}function P(e,t){var n=t.items,r=t.itemPredicate,s=t.itemListPredicate;return o.Utils.isFunction(s)?s(e,n):o.Utils.isFunction(r)?n.filter(function(t,n){return r(e,t,n)}):n}function O(e,t,n){return null!=n&&null!=e&&(o.Utils.isFunction(n)?n(e,t):!!e[n])}function g(e,t,n,r){if(void 0===n&&(n=1),void 0===r&&(r=e.length-1),0===e.length)return null;var o,s,i,p=r,a=e.length-1;do{if(i=a,!O(e[p=(o=p+n)<(s=0)?i:o>i?s:o],p,t))return e[p]}while(p!==r);return null}var E=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.TypedQueryList=y.ofType(),t.refHandlers={queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,s=n.inputProps,i=void 0===s?{}:s,p=n.isOpen,a=n.overlayProps,l=void 0===a?{}:a,u=e.handleKeyDown,c=e.handleKeyUp,d=p&&e.query.length>0?{onKeyDown:u,onKeyUp:c}:{};return h.createElement(o.Overlay,v.__assign({hasBackdrop:!0},l,{isOpen:p,className:m()(r.OMNIBAR_OVERLAY,l.className),onClose:t.handleOverlayClose}),h.createElement("div",v.__assign({className:m()(r.OMNIBAR,e.className)},d),h.createElement(o.InputGroup,v.__assign({autoFocus:!0,large:!0,leftIcon:"search",placeholder:"Search..."},i,{onChange:e.handleQueryChange,value:e.query})),e.itemList))},t.handleOverlayClose=function(e){var n=t.props.overlayProps,r=void 0===n?{}:n;o.Utils.safeInvoke(r.onClose,e),o.Utils.safeInvoke(t.props.onClose,e)},t}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=e.initialContent,n=void 0===t?null:t,r=(e.isOpen,e.inputProps,e.overlayProps,v.__rest(e,["initialContent","isOpen","inputProps","overlayProps"]));return h.createElement(this.TypedQueryList,v.__assign({},r,{initialContent:n,onItemSelect:this.props.onItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.displayName=o.DISPLAYNAME_PREFIX+".Omnibar",t}(h.PureComponent),C=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={isOpen:t.props.popoverProps&&t.props.popoverProps.isOpen||!1},t.TypedQueryList=y.ofType(),t.refHandlers={input:function(e){t.input=e;var n=t.props.tagInputProps,r=void 0===n?{}:n;o.Utils.safeInvoke(r.inputRef,e)},queryList:function(e){return t.queryList=e}},t.renderQueryList=function(e){var n=t.props,s=n.tagInputProps,i=void 0===s?{}:s,p=n.popoverProps,a=void 0===p?{}:p,l=n.selectedItems,u=void 0===l?[]:l,c=n.placeholder,d=e.handleKeyDown,f=e.handleKeyUp;return h.createElement(o.Popover,v.__assign({autoFocus:!1,canEscapeKeyClose:!0,enforceFocus:!1,isOpen:t.state.isOpen,position:o.Position.BOTTOM_LEFT},a,{className:m()(e.className,a.className),onInteraction:t.handlePopoverInteraction,popoverClassName:m()(r.MULTISELECT_POPOVER,a.popoverClassName),onOpened:t.handlePopoverOpened}),h.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(d),onKeyUp:t.state.isOpen?f:void 0},h.createElement(o.TagInput,v.__assign({placeholder:c},i,{className:m()(r.MULTISELECT,i.className),inputRef:t.refHandlers.input,inputValue:e.query,onInputChange:e.handleQueryChange,values:u.map(t.props.tagRenderer)}))),h.createElement("div",{onKeyDown:t.getTargetKeyDownHandler(d),onKeyUp:f},e.itemList))},t.handleItemSelect=function(e,n){null!=t.input&&t.input.focus(),o.Utils.safeInvoke(t.props.onItemSelect,e,n)},t.handleQueryChange=function(e,n){t.setState({isOpen:e.length>0||!t.props.openOnKeyDown}),o.Utils.safeInvoke(t.props.onQueryChange,e,n)},t.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.input&&t.input!==document.activeElement?t.setState({isOpen:!1}):t.props.openOnKeyDown||t.setState({isOpen:!0}),o.Utils.safeInvoke(r.onInteraction,e)})},t.handlePopoverOpened=function(e){var n=t.props.popoverProps,r=void 0===n?{}:n;null!=t.queryList&&t.queryList.scrollActiveItemIntoView(),o.Utils.safeInvoke(r.onOpened,e)},t.getTargetKeyDownHandler=function(e){return function(n){var r=n.which;r===o.Keys.ESCAPE||r===o.Keys.TAB?(null!=t.input&&t.input.blur(),t.setState({isOpen:!1})):r!==o.Keys.BACKSPACE&&r!==o.Keys.ARROW_LEFT&&r!==o.Keys.ARROW_RIGHT&&t.setState({isOpen:!0}),t.state.isOpen&&o.Utils.safeInvoke(e,n)}},t}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.openOnKeyDown,e.popoverProps,e.tagInputProps,v.__rest(e,["openOnKeyDown","popoverProps","tagInputProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,onQueryChange:this.handleQueryChange,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.displayName=o.DISPLAYNAME_PREFIX+".MultiSelect",t.defaultProps={placeholder:"Search..."},t}(h.PureComponent),_=function(e){function t(t,n){var s=e.call(this,t,n)||this;return s.TypedQueryList=y.ofType(),s.refHandlers={input:function(e){s.input=e;var t=s.props.inputProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.inputRef,e)},queryList:function(e){return s.list=e}},s.renderQueryList=function(e){var t=s.props,n=t.filterable,i=void 0===n||n,p=t.disabled,a=void 0!==p&&p,l=t.inputProps,u=void 0===l?{}:l,c=t.popoverProps,d=void 0===c?{}:c,f=h.createElement(o.InputGroup,v.__assign({leftIcon:"search",placeholder:"Filter...",rightElement:s.maybeRenderClearButton(e.query)},u,{inputRef:s.refHandlers.input,onChange:e.handleQueryChange,value:e.query})),y=e.handleKeyDown,I=e.handleKeyUp;return h.createElement(o.Popover,v.__assign({autoFocus:!1,enforceFocus:!1,isOpen:s.state.isOpen,disabled:a,position:o.Position.BOTTOM_LEFT},d,{className:m()(e.className,d.className),onInteraction:s.handlePopoverInteraction,popoverClassName:m()(r.SELECT_POPOVER,d.popoverClassName),onOpening:s.handlePopoverOpening,onOpened:s.handlePopoverOpened,onClosing:s.handlePopoverClosing}),h.createElement("div",{onKeyDown:s.state.isOpen?y:s.handleTargetKeyDown,onKeyUp:s.state.isOpen?I:void 0},s.props.children),h.createElement("div",{onKeyDown:y,onKeyUp:I},i?f:void 0,e.itemList))},s.handleTargetKeyDown=function(e){e.which!==o.Keys.ARROW_UP&&e.which!==o.Keys.ARROW_DOWN||(e.preventDefault(),s.setState({isOpen:!0}))},s.handleItemSelect=function(e,t){s.setState({isOpen:!1}),o.Utils.safeInvoke(s.props.onItemSelect,e,t)},s.handlePopoverInteraction=function(e){s.setState({isOpen:e});var t=s.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onInteraction,e)},s.handlePopoverOpening=function(e){var t=s.props,n=t.popoverProps,r=void 0===n?{}:n,i=t.resetOnClose;s.previousFocusedElement=document.activeElement,i&&s.resetQuery(),o.Utils.safeInvoke(r.onOpening,e)},s.handlePopoverOpened=function(e){null!=s.list&&s.list.scrollActiveItemIntoView(),requestAnimationFrame(function(){var e=s.props.inputProps;!1!==(void 0===e?{}:e).autoFocus&&null!=s.input&&s.input.focus()});var t=s.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onOpened,e)},s.handlePopoverClosing=function(e){requestAnimationFrame(function(){void 0!==s.previousFocusedElement&&(s.previousFocusedElement.focus(),s.previousFocusedElement=void 0)});var t=s.props.popoverProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.onClosing,e)},s.resetQuery=function(){return s.list&&s.list.setQuery("",!0)},s.state={isOpen:!1},s}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.filterable,e.inputProps,e.popoverProps,v.__rest(e,["filterable","inputProps","popoverProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.list&&this.list.scrollActiveItemIntoView()},t.prototype.maybeRenderClearButton=function(e){return e.length>0?h.createElement(o.Button,{icon:"cross",minimal:!0,onClick:this.resetQuery}):void 0},t.displayName=o.DISPLAYNAME_PREFIX+".Select",t}(h.PureComponent),S=function(e){function t(t,n){var s=e.call(this,t,n)||this;return s.TypedQueryList=y.ofType(),s.refHandlers={input:function(e){s.input=e;var t=s.props.inputProps,n=void 0===t?{}:t;o.Utils.safeInvoke(n.inputRef,e)},queryList:function(e){return s.queryList=e}},s.renderQueryList=function(e){var t=s.props,n=t.inputProps,i=void 0===n?{}:n,p=t.popoverProps,a=void 0===p?{}:p,l=s.state,u=l.isOpen,c=l.selectedItem,d=e.handleKeyDown,f=e.handleKeyUp,y=i.placeholder,I=void 0===y?"Search...":y,P=c?s.props.inputValueRenderer(c):"";return h.createElement(o.Popover,v.__assign({autoFocus:!1,enforceFocus:!1,isOpen:u,position:o.Position.BOTTOM_LEFT},a,{className:m()(e.className,a.className),onInteraction:s.handlePopoverInteraction,popoverClassName:m()(r.SELECT_POPOVER,a.popoverClassName),onOpened:s.handlePopoverOpened}),h.createElement(o.InputGroup,v.__assign({},i,{placeholder:u&&P?P:I,inputRef:s.refHandlers.input,onChange:e.handleQueryChange,onFocus:s.handleInputFocus,onKeyDown:s.getTargetKeyDownHandler(d),onKeyUp:s.getTargetKeyUpHandler(f),value:u?e.query:P})),h.createElement("div",{onKeyDown:d,onKeyUp:f},e.itemList))},s.selectText=function(){requestAnimationFrame(function(){null!=s.input&&s.input.setSelectionRange(0,s.input.value.length)})},s.handleInputFocus=function(e){var t=s.props,n=t.openOnKeyDown,r=t.inputProps,i=void 0===r?{}:r;s.selectText(),n||s.setState({isOpen:!0}),o.Utils.safeInvoke(i.onFocus,e)},s.handleItemSelect=function(e,t){var n;s.props.closeOnSelect?(null!=s.input&&s.input.blur(),n=!1):(null!=s.input&&s.input.focus(),s.selectText(),n=!0),void 0===s.props.selectedItem?s.setState({isOpen:n,selectedItem:e}):s.setState({isOpen:n}),o.Utils.safeInvoke(s.props.onItemSelect,e,t)},s.handlePopoverInteraction=function(e){return requestAnimationFrame(function(){var t=s.props.popoverProps,n=void 0===t?{}:t;null!=s.input&&s.input!==document.activeElement&&s.setState({isOpen:!1}),o.Utils.safeInvoke(n.onInteraction,e)})},s.handlePopoverOpened=function(e){var t=s.props.popoverProps,n=void 0===t?{}:t;null!=s.queryList&&s.queryList.scrollActiveItemIntoView(),o.Utils.safeInvoke(n.onOpened,e)},s.getTargetKeyDownHandler=function(e){return function(t){var n=t.which,r=s.props,i=r.inputProps,p=void 0===i?{}:i,a=r.openOnKeyDown;n===o.Keys.ESCAPE||n===o.Keys.TAB?(null!=s.input&&s.input.blur(),s.setState({isOpen:!1})):a&&n!==o.Keys.BACKSPACE&&n!==o.Keys.ARROW_LEFT&&n!==o.Keys.ARROW_RIGHT&&s.setState({isOpen:!0}),s.state.isOpen&&o.Utils.safeInvoke(e,t),o.Utils.safeInvoke(p.onKeyDown,t)}},s.getTargetKeyUpHandler=function(e){return function(t){var n=s.props.inputProps,r=void 0===n?{}:n;s.state.isOpen&&o.Utils.safeInvoke(e,t),o.Utils.safeInvoke(r.onKeyUp,t)}},s.state={isOpen:t.popoverProps&&t.popoverProps.isOpen||!1,selectedItem:s.getInitialSelectedItem()},s}return v.__extends(t,e),t.ofType=function(){return t},t.prototype.render=function(){var e=this.props,t=(e.inputProps,e.popoverProps,v.__rest(e,["inputProps","popoverProps"]));return h.createElement(this.TypedQueryList,v.__assign({},t,{onItemSelect:this.handleItemSelect,ref:this.refHandlers.queryList,renderer:this.renderQueryList}))},t.prototype.componentWillReceiveProps=function(e){void 0!==e.selectedItem&&e.selectedItem!==this.state.selectedItem&&this.setState({selectedItem:e.selectedItem})},t.prototype.componentDidUpdate=function(e,t){this.state.isOpen&&!t.isOpen&&null!=this.queryList&&this.queryList.scrollActiveItemIntoView()},t.prototype.getInitialSelectedItem=function(){return void 0!==this.props.selectedItem?this.props.selectedItem:void 0!==this.props.defaultSelectedItem?this.props.defaultSelectedItem:null},t.displayName=o.DISPLAYNAME_PREFIX+".Suggest",t.defaultProps={closeOnSelect:!0,openOnKeyDown:!1},t}(h.PureComponent);n.d(t,"Classes",function(){return r}),n.d(t,"renderFilteredItems",function(){return d}),n.d(t,"Omnibar",function(){return E}),n.d(t,"QueryList",function(){return y}),n.d(t,"getFirstEnabledItem",function(){return g}),n.d(t,"MultiSelect",function(){return C}),n.d(t,"Select",function(){return _}),n.d(t,"Suggest",function(){return S})}])}); |
@@ -84,5 +84,10 @@ /// <reference types="react" /> | ||
| /** | ||
| * Whether the querying state should be reset to initial when an item is | ||
| * selected (immediately before `onItemSelect` is invoked). The query will | ||
| * become the empty string and the first item will be made active. | ||
| * Whether the active item should be reset to the first matching item _every | ||
| * time the query changes_ (via prop or by user input). | ||
| * @default true | ||
| */ | ||
| resetOnQuery?: boolean; | ||
| /** | ||
| * Whether the active item should be reset to the first matching item _when | ||
| * an item is selected_. The query will also be reset to the empty string. | ||
| * @default false | ||
@@ -89,0 +94,0 @@ */ |
@@ -62,2 +62,5 @@ /// <reference types="react" /> | ||
| static displayName: string; | ||
| static defaultProps: { | ||
| resetOnQuery: boolean; | ||
| }; | ||
| static ofType<T>(): new (props: IQueryListProps<T>) => QueryList<T>; | ||
@@ -67,4 +70,5 @@ private itemsParentRef?; | ||
| /** | ||
| * flag indicating that we should check whether selected item is in viewport after rendering, | ||
| * typically because of keyboard change. | ||
| * Flag indicating that we should check whether selected item is in viewport | ||
| * after rendering, typically because of keyboard change. Set to `true` when | ||
| * manipulating state in a way that may cause active item to scroll away. | ||
| */ | ||
@@ -77,3 +81,3 @@ private shouldCheckActiveItemInViewport; | ||
| scrollActiveItemIntoView(): void; | ||
| setQuery(query: string, resetActiveItem?: boolean): void; | ||
| setQuery(query: string, resetActiveItem?: boolean | undefined): void; | ||
| /** default `itemListRenderer` implementation */ | ||
@@ -84,3 +88,3 @@ private renderItemList; | ||
| private getActiveElement(); | ||
| private getActiveIndex(); | ||
| private getActiveIndex(items?); | ||
| private getItemsParentPadding(); | ||
@@ -98,3 +102,2 @@ private handleItemSelect; | ||
| private setActiveItem(activeItem); | ||
| private setFirstActiveItem(); | ||
| } | ||
@@ -101,0 +104,0 @@ /** |
@@ -20,4 +20,5 @@ "use strict"; | ||
| /** | ||
| * flag indicating that we should check whether selected item is in viewport after rendering, | ||
| * typically because of keyboard change. | ||
| * Flag indicating that we should check whether selected item is in viewport | ||
| * after rendering, typically because of keyboard change. Set to `true` when | ||
| * manipulating state in a way that may cause active item to scroll away. | ||
| */ | ||
@@ -60,4 +61,2 @@ _this.shouldCheckActiveItemInViewport = false; | ||
| if (nextActiveItem != null) { | ||
| // indicate that the active item may need to be scrolled into view after update. | ||
| _this.shouldCheckActiveItemInViewport = true; | ||
| _this.setActiveItem(nextActiveItem); | ||
@@ -99,2 +98,3 @@ } | ||
| if (nextProps.activeItem !== undefined) { | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setState({ activeItem: nextProps.activeItem }); | ||
@@ -111,4 +111,3 @@ } | ||
| })) { | ||
| this.setState(function (state) { return ({ filteredItems: getFilteredItems(state.query, _this.props) }); }); | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setQuery(this.state.query); | ||
| } | ||
@@ -122,9 +121,2 @@ if (this.shouldCheckActiveItemInViewport) { | ||
| } | ||
| // reset active item (in the same step) if it's no longer valid | ||
| // Also don't fire the event if the active item is already undefined and there is nothing to pick | ||
| var activeIndex = this.getActiveIndex(); | ||
| if (this.props.activeItem !== undefined && | ||
| (activeIndex < 0 || isItemDisabled(this.props.activeItem, activeIndex, this.props.itemDisabled))) { | ||
| this.setFirstActiveItem(); | ||
| } | ||
| }; | ||
@@ -151,15 +143,17 @@ QueryList.prototype.scrollActiveItemIntoView = function () { | ||
| }; | ||
| // TODO resetActiveItem = this.props.resetOnQuery | ||
| QueryList.prototype.setQuery = function (query, resetActiveItem) { | ||
| var _this = this; | ||
| if (resetActiveItem === void 0) { resetActiveItem = false; } | ||
| if (resetActiveItem === void 0) { resetActiveItem = this.props.resetOnQuery; } | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| if (query !== this.state.query) { | ||
| core_1.Utils.safeInvoke(this.props.onQueryChange, query); | ||
| } | ||
| this.setState({ filteredItems: getFilteredItems(query, this.props), query: query }, function () { | ||
| // wait will state has updated so we select the first from newly filtered items | ||
| if (resetActiveItem) { | ||
| _this.setFirstActiveItem(); | ||
| } | ||
| }); | ||
| var filteredItems = getFilteredItems(query, this.props); | ||
| this.setState({ filteredItems: filteredItems, query: query }); | ||
| // always reset active item if it's now filtered or disabled | ||
| var activeIndex = this.getActiveIndex(filteredItems); | ||
| if (resetActiveItem || | ||
| activeIndex < 0 || | ||
| isItemDisabled(this.state.activeItem, activeIndex, this.props.itemDisabled)) { | ||
| this.setActiveItem(getFirstEnabledItem(filteredItems, this.props.itemDisabled)); | ||
| } | ||
| }; | ||
@@ -172,6 +166,7 @@ QueryList.prototype.getActiveElement = function () { | ||
| }; | ||
| QueryList.prototype.getActiveIndex = function () { | ||
| QueryList.prototype.getActiveIndex = function (items) { | ||
| if (items === void 0) { items = this.state.filteredItems; } | ||
| var activeItem = this.state.activeItem; | ||
| // NOTE: this operation is O(n) so it should be avoided in render(). safe for events though. | ||
| return activeItem == null ? -1 : this.state.filteredItems.indexOf(activeItem); | ||
| return activeItem == null ? -1 : items.indexOf(activeItem); | ||
| }; | ||
@@ -197,2 +192,4 @@ QueryList.prototype.getItemsParentPadding = function () { | ||
| if (this.props.activeItem === undefined) { | ||
| // indicate that the active item may need to be scrolled into view after update. | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setState({ activeItem: activeItem }); | ||
@@ -202,6 +199,6 @@ } | ||
| }; | ||
| QueryList.prototype.setFirstActiveItem = function () { | ||
| this.setActiveItem(this.getNextActiveItem(1, this.state.filteredItems.length - 1)); | ||
| QueryList.displayName = core_1.DISPLAYNAME_PREFIX + ".QueryList"; | ||
| QueryList.defaultProps = { | ||
| resetOnQuery: true, | ||
| }; | ||
| QueryList.displayName = core_1.DISPLAYNAME_PREFIX + ".QueryList"; | ||
| return QueryList; | ||
@@ -208,0 +205,0 @@ }(React.Component)); |
@@ -13,2 +13,7 @@ /// <reference types="react" /> | ||
| openOnKeyDown?: boolean; | ||
| /** | ||
| * Input placeholder text. Shorthand for `tagInputProps.placeholder`. | ||
| * @default "Search..." | ||
| */ | ||
| placeholder?: string; | ||
| /** Props to spread to `Popover`. Note that `content` cannot be changed. */ | ||
@@ -26,2 +31,5 @@ popoverProps?: Partial<IPopoverProps> & object; | ||
| static displayName: string; | ||
| static defaultProps: { | ||
| placeholder: string; | ||
| }; | ||
| static ofType<T>(): new (props: IMultiSelectProps<T>) => MultiSelect<T>; | ||
@@ -28,0 +36,0 @@ state: IMultiSelectState; |
@@ -30,7 +30,7 @@ "use strict"; | ||
| _this.renderQueryList = function (listProps) { | ||
| var _a = _this.props, _b = _a.tagInputProps, tagInputProps = _b === void 0 ? {} : _b, _c = _a.popoverProps, popoverProps = _c === void 0 ? {} : _c, _d = _a.selectedItems, selectedItems = _d === void 0 ? [] : _d; | ||
| var _a = _this.props, _b = _a.tagInputProps, tagInputProps = _b === void 0 ? {} : _b, _c = _a.popoverProps, popoverProps = _c === void 0 ? {} : _c, _d = _a.selectedItems, selectedItems = _d === void 0 ? [] : _d, placeholder = _a.placeholder; | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
| return (React.createElement(core_1.Popover, tslib_1.__assign({ autoFocus: false, canEscapeKeyClose: true, enforceFocus: false, isOpen: _this.state.isOpen, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: classnames_1.default(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classnames_1.default(common_1.Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), onOpened: _this.handlePopoverOpened }), | ||
| React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.state.isOpen ? handleKeyUp : undefined }, | ||
| React.createElement(core_1.TagInput, tslib_1.__assign({ placeholder: "Search..." }, tagInputProps, { className: classnames_1.default(common_1.Classes.MULTISELECT, tagInputProps.className), inputRef: _this.refHandlers.input, inputValue: listProps.query, onInputChange: listProps.handleQueryChange, values: selectedItems.map(_this.props.tagRenderer) }))), | ||
| React.createElement(core_1.TagInput, tslib_1.__assign({ placeholder: placeholder }, tagInputProps, { className: classnames_1.default(common_1.Classes.MULTISELECT, tagInputProps.className), inputRef: _this.refHandlers.input, inputValue: listProps.query, onInputChange: listProps.handleQueryChange, values: selectedItems.map(_this.props.tagRenderer) }))), | ||
| React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: handleKeyUp }, listProps.itemList))); | ||
@@ -101,2 +101,5 @@ }; | ||
| MultiSelect.displayName = core_1.DISPLAYNAME_PREFIX + ".MultiSelect"; | ||
| MultiSelect.defaultProps = { | ||
| placeholder: "Search...", | ||
| }; | ||
| return MultiSelect; | ||
@@ -103,0 +106,0 @@ }(React.PureComponent)); |
@@ -27,4 +27,4 @@ /// <reference types="react" /> | ||
| /** | ||
| * Whether the filtering state should be reset to initial when the popover closes. | ||
| * The query will become the empty string and the first item will be made active. | ||
| * Whether the active item should be reset to the first matching item _when | ||
| * the popover closes_. The query will also be reset to the empty string. | ||
| * @default false | ||
@@ -31,0 +31,0 @@ */ |
@@ -20,2 +20,13 @@ /// <reference types="react" /> | ||
| /** | ||
| * The uncontrolled default selected item. | ||
| * This prop is ignored if `selectedItem` is used to control the state. | ||
| */ | ||
| defaultSelectedItem?: T; | ||
| /** | ||
| * The currently selected item, or `null` to indicate that no item is selected. | ||
| * If omitted, this prop will be uncontrolled (managed by the component's state). | ||
| * Use `onItemSelect` to listen for updates. | ||
| */ | ||
| selectedItem?: T | null; | ||
| /** | ||
| * Whether the popover opens on key down or when the input is focused. | ||
@@ -30,3 +41,3 @@ * @default false | ||
| isOpen: boolean; | ||
| selectedItem?: T; | ||
| selectedItem: T | null; | ||
| } | ||
@@ -40,3 +51,2 @@ export declare class Suggest<T> extends React.PureComponent<ISuggestProps<T>, ISuggestState<T>> { | ||
| static ofType<T>(): new (props: ISuggestProps<T>) => Suggest<T>; | ||
| state: ISuggestState<T>; | ||
| private TypedQueryList; | ||
@@ -46,3 +56,5 @@ private input?; | ||
| private refHandlers; | ||
| constructor(props: ISuggestProps<T>, context?: any); | ||
| render(): JSX.Element; | ||
| componentWillReceiveProps(nextProps: ISuggestProps<T>): void; | ||
| componentDidUpdate(_prevProps: ISuggestProps<T>, prevState: ISuggestState<T>): void; | ||
@@ -53,2 +65,3 @@ private renderQueryList; | ||
| private handleItemSelect; | ||
| private getInitialSelectedItem(); | ||
| private handlePopoverInteraction; | ||
@@ -55,0 +68,0 @@ private handlePopoverOpened; |
@@ -16,7 +16,4 @@ "use strict"; | ||
| tslib_1.__extends(Suggest, _super); | ||
| function Suggest() { | ||
| var _this = _super !== null && _super.apply(this, arguments) || this; | ||
| _this.state = { | ||
| isOpen: (_this.props.popoverProps && _this.props.popoverProps.isOpen) || false, | ||
| }; | ||
| function Suggest(props, context) { | ||
| var _this = _super.call(this, props, context) || this; | ||
| _this.TypedQueryList = queryList_1.QueryList.ofType(); | ||
@@ -73,6 +70,13 @@ _this.refHandlers = { | ||
| } | ||
| _this.setState({ | ||
| isOpen: nextOpenState, | ||
| selectedItem: item, | ||
| }); | ||
| // the internal state should only change when uncontrolled. | ||
| if (_this.props.selectedItem === undefined) { | ||
| _this.setState({ | ||
| isOpen: nextOpenState, | ||
| selectedItem: item, | ||
| }); | ||
| } | ||
| else { | ||
| // otherwise just set the next open state. | ||
| _this.setState({ isOpen: nextOpenState }); | ||
| } | ||
| core_1.Utils.safeInvoke(_this.props.onItemSelect, item, event); | ||
@@ -131,2 +135,6 @@ }; | ||
| }; | ||
| _this.state = { | ||
| isOpen: (props.popoverProps && props.popoverProps.isOpen) || false, | ||
| selectedItem: _this.getInitialSelectedItem(), | ||
| }; | ||
| return _this; | ||
@@ -142,2 +150,8 @@ } | ||
| }; | ||
| Suggest.prototype.componentWillReceiveProps = function (nextProps) { | ||
| // If the selected item prop changes, update the underlying state. | ||
| if (nextProps.selectedItem !== undefined && nextProps.selectedItem !== this.state.selectedItem) { | ||
| this.setState({ selectedItem: nextProps.selectedItem }); | ||
| } | ||
| }; | ||
| Suggest.prototype.componentDidUpdate = function (_prevProps, prevState) { | ||
@@ -148,2 +162,14 @@ if (this.state.isOpen && !prevState.isOpen && this.queryList != null) { | ||
| }; | ||
| Suggest.prototype.getInitialSelectedItem = function () { | ||
| // controlled > uncontrolled > default | ||
| if (this.props.selectedItem !== undefined) { | ||
| return this.props.selectedItem; | ||
| } | ||
| else if (this.props.defaultSelectedItem !== undefined) { | ||
| return this.props.defaultSelectedItem; | ||
| } | ||
| else { | ||
| return null; | ||
| } | ||
| }; | ||
| Suggest.displayName = core_1.DISPLAYNAME_PREFIX + ".Suggest"; | ||
@@ -150,0 +176,0 @@ // Note: can't use <T> in static members, so this remains dynamically typed. |
@@ -84,5 +84,10 @@ /// <reference types="react" /> | ||
| /** | ||
| * Whether the querying state should be reset to initial when an item is | ||
| * selected (immediately before `onItemSelect` is invoked). The query will | ||
| * become the empty string and the first item will be made active. | ||
| * Whether the active item should be reset to the first matching item _every | ||
| * time the query changes_ (via prop or by user input). | ||
| * @default true | ||
| */ | ||
| resetOnQuery?: boolean; | ||
| /** | ||
| * Whether the active item should be reset to the first matching item _when | ||
| * an item is selected_. The query will also be reset to the empty string. | ||
| * @default false | ||
@@ -89,0 +94,0 @@ */ |
@@ -62,2 +62,5 @@ /// <reference types="react" /> | ||
| static displayName: string; | ||
| static defaultProps: { | ||
| resetOnQuery: boolean; | ||
| }; | ||
| static ofType<T>(): new (props: IQueryListProps<T>) => QueryList<T>; | ||
@@ -67,4 +70,5 @@ private itemsParentRef?; | ||
| /** | ||
| * flag indicating that we should check whether selected item is in viewport after rendering, | ||
| * typically because of keyboard change. | ||
| * Flag indicating that we should check whether selected item is in viewport | ||
| * after rendering, typically because of keyboard change. Set to `true` when | ||
| * manipulating state in a way that may cause active item to scroll away. | ||
| */ | ||
@@ -77,3 +81,3 @@ private shouldCheckActiveItemInViewport; | ||
| scrollActiveItemIntoView(): void; | ||
| setQuery(query: string, resetActiveItem?: boolean): void; | ||
| setQuery(query: string, resetActiveItem?: boolean | undefined): void; | ||
| /** default `itemListRenderer` implementation */ | ||
@@ -84,3 +88,3 @@ private renderItemList; | ||
| private getActiveElement(); | ||
| private getActiveIndex(); | ||
| private getActiveIndex(items?); | ||
| private getItemsParentPadding(); | ||
@@ -98,3 +102,2 @@ private handleItemSelect; | ||
| private setActiveItem(activeItem); | ||
| private setFirstActiveItem(); | ||
| } | ||
@@ -101,0 +104,0 @@ /** |
@@ -18,4 +18,5 @@ /* | ||
| /** | ||
| * flag indicating that we should check whether selected item is in viewport after rendering, | ||
| * typically because of keyboard change. | ||
| * Flag indicating that we should check whether selected item is in viewport | ||
| * after rendering, typically because of keyboard change. Set to `true` when | ||
| * manipulating state in a way that may cause active item to scroll away. | ||
| */ | ||
@@ -58,4 +59,2 @@ _this.shouldCheckActiveItemInViewport = false; | ||
| if (nextActiveItem != null) { | ||
| // indicate that the active item may need to be scrolled into view after update. | ||
| _this.shouldCheckActiveItemInViewport = true; | ||
| _this.setActiveItem(nextActiveItem); | ||
@@ -97,2 +96,3 @@ } | ||
| if (nextProps.activeItem !== undefined) { | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setState({ activeItem: nextProps.activeItem }); | ||
@@ -109,4 +109,3 @@ } | ||
| })) { | ||
| this.setState(function (state) { return ({ filteredItems: getFilteredItems(state.query, _this.props) }); }); | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setQuery(this.state.query); | ||
| } | ||
@@ -120,9 +119,2 @@ if (this.shouldCheckActiveItemInViewport) { | ||
| } | ||
| // reset active item (in the same step) if it's no longer valid | ||
| // Also don't fire the event if the active item is already undefined and there is nothing to pick | ||
| var activeIndex = this.getActiveIndex(); | ||
| if (this.props.activeItem !== undefined && | ||
| (activeIndex < 0 || isItemDisabled(this.props.activeItem, activeIndex, this.props.itemDisabled))) { | ||
| this.setFirstActiveItem(); | ||
| } | ||
| }; | ||
@@ -149,15 +141,17 @@ QueryList.prototype.scrollActiveItemIntoView = function () { | ||
| }; | ||
| // TODO resetActiveItem = this.props.resetOnQuery | ||
| QueryList.prototype.setQuery = function (query, resetActiveItem) { | ||
| var _this = this; | ||
| if (resetActiveItem === void 0) { resetActiveItem = false; } | ||
| if (resetActiveItem === void 0) { resetActiveItem = this.props.resetOnQuery; } | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| if (query !== this.state.query) { | ||
| Utils.safeInvoke(this.props.onQueryChange, query); | ||
| } | ||
| this.setState({ filteredItems: getFilteredItems(query, this.props), query: query }, function () { | ||
| // wait will state has updated so we select the first from newly filtered items | ||
| if (resetActiveItem) { | ||
| _this.setFirstActiveItem(); | ||
| } | ||
| }); | ||
| var filteredItems = getFilteredItems(query, this.props); | ||
| this.setState({ filteredItems: filteredItems, query: query }); | ||
| // always reset active item if it's now filtered or disabled | ||
| var activeIndex = this.getActiveIndex(filteredItems); | ||
| if (resetActiveItem || | ||
| activeIndex < 0 || | ||
| isItemDisabled(this.state.activeItem, activeIndex, this.props.itemDisabled)) { | ||
| this.setActiveItem(getFirstEnabledItem(filteredItems, this.props.itemDisabled)); | ||
| } | ||
| }; | ||
@@ -170,6 +164,7 @@ QueryList.prototype.getActiveElement = function () { | ||
| }; | ||
| QueryList.prototype.getActiveIndex = function () { | ||
| QueryList.prototype.getActiveIndex = function (items) { | ||
| if (items === void 0) { items = this.state.filteredItems; } | ||
| var activeItem = this.state.activeItem; | ||
| // NOTE: this operation is O(n) so it should be avoided in render(). safe for events though. | ||
| return activeItem == null ? -1 : this.state.filteredItems.indexOf(activeItem); | ||
| return activeItem == null ? -1 : items.indexOf(activeItem); | ||
| }; | ||
@@ -195,2 +190,4 @@ QueryList.prototype.getItemsParentPadding = function () { | ||
| if (this.props.activeItem === undefined) { | ||
| // indicate that the active item may need to be scrolled into view after update. | ||
| this.shouldCheckActiveItemInViewport = true; | ||
| this.setState({ activeItem: activeItem }); | ||
@@ -200,6 +197,6 @@ } | ||
| }; | ||
| QueryList.prototype.setFirstActiveItem = function () { | ||
| this.setActiveItem(this.getNextActiveItem(1, this.state.filteredItems.length - 1)); | ||
| QueryList.displayName = DISPLAYNAME_PREFIX + ".QueryList"; | ||
| QueryList.defaultProps = { | ||
| resetOnQuery: true, | ||
| }; | ||
| QueryList.displayName = DISPLAYNAME_PREFIX + ".QueryList"; | ||
| return QueryList; | ||
@@ -206,0 +203,0 @@ }(React.Component)); |
@@ -13,2 +13,7 @@ /// <reference types="react" /> | ||
| openOnKeyDown?: boolean; | ||
| /** | ||
| * Input placeholder text. Shorthand for `tagInputProps.placeholder`. | ||
| * @default "Search..." | ||
| */ | ||
| placeholder?: string; | ||
| /** Props to spread to `Popover`. Note that `content` cannot be changed. */ | ||
@@ -26,2 +31,5 @@ popoverProps?: Partial<IPopoverProps> & object; | ||
| static displayName: string; | ||
| static defaultProps: { | ||
| placeholder: string; | ||
| }; | ||
| static ofType<T>(): new (props: IMultiSelectProps<T>) => MultiSelect<T>; | ||
@@ -28,0 +36,0 @@ state: IMultiSelectState; |
@@ -28,7 +28,7 @@ /* | ||
| _this.renderQueryList = function (listProps) { | ||
| var _a = _this.props, _b = _a.tagInputProps, tagInputProps = _b === void 0 ? {} : _b, _c = _a.popoverProps, popoverProps = _c === void 0 ? {} : _c, _d = _a.selectedItems, selectedItems = _d === void 0 ? [] : _d; | ||
| var _a = _this.props, _b = _a.tagInputProps, tagInputProps = _b === void 0 ? {} : _b, _c = _a.popoverProps, popoverProps = _c === void 0 ? {} : _c, _d = _a.selectedItems, selectedItems = _d === void 0 ? [] : _d, placeholder = _a.placeholder; | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
| return (React.createElement(Popover, tslib_1.__assign({ autoFocus: false, canEscapeKeyClose: true, enforceFocus: false, isOpen: _this.state.isOpen, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), onOpened: _this.handlePopoverOpened }), | ||
| React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: _this.state.isOpen ? handleKeyUp : undefined }, | ||
| React.createElement(TagInput, tslib_1.__assign({ placeholder: "Search..." }, tagInputProps, { className: classNames(Classes.MULTISELECT, tagInputProps.className), inputRef: _this.refHandlers.input, inputValue: listProps.query, onInputChange: listProps.handleQueryChange, values: selectedItems.map(_this.props.tagRenderer) }))), | ||
| React.createElement(TagInput, tslib_1.__assign({ placeholder: placeholder }, tagInputProps, { className: classNames(Classes.MULTISELECT, tagInputProps.className), inputRef: _this.refHandlers.input, inputValue: listProps.query, onInputChange: listProps.handleQueryChange, values: selectedItems.map(_this.props.tagRenderer) }))), | ||
| React.createElement("div", { onKeyDown: _this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: handleKeyUp }, listProps.itemList))); | ||
@@ -99,2 +99,5 @@ }; | ||
| MultiSelect.displayName = DISPLAYNAME_PREFIX + ".MultiSelect"; | ||
| MultiSelect.defaultProps = { | ||
| placeholder: "Search...", | ||
| }; | ||
| return MultiSelect; | ||
@@ -101,0 +104,0 @@ }(React.PureComponent)); |
@@ -27,4 +27,4 @@ /// <reference types="react" /> | ||
| /** | ||
| * Whether the filtering state should be reset to initial when the popover closes. | ||
| * The query will become the empty string and the first item will be made active. | ||
| * Whether the active item should be reset to the first matching item _when | ||
| * the popover closes_. The query will also be reset to the empty string. | ||
| * @default false | ||
@@ -31,0 +31,0 @@ */ |
@@ -20,2 +20,13 @@ /// <reference types="react" /> | ||
| /** | ||
| * The uncontrolled default selected item. | ||
| * This prop is ignored if `selectedItem` is used to control the state. | ||
| */ | ||
| defaultSelectedItem?: T; | ||
| /** | ||
| * The currently selected item, or `null` to indicate that no item is selected. | ||
| * If omitted, this prop will be uncontrolled (managed by the component's state). | ||
| * Use `onItemSelect` to listen for updates. | ||
| */ | ||
| selectedItem?: T | null; | ||
| /** | ||
| * Whether the popover opens on key down or when the input is focused. | ||
@@ -30,3 +41,3 @@ * @default false | ||
| isOpen: boolean; | ||
| selectedItem?: T; | ||
| selectedItem: T | null; | ||
| } | ||
@@ -40,3 +51,2 @@ export declare class Suggest<T> extends React.PureComponent<ISuggestProps<T>, ISuggestState<T>> { | ||
| static ofType<T>(): new (props: ISuggestProps<T>) => Suggest<T>; | ||
| state: ISuggestState<T>; | ||
| private TypedQueryList; | ||
@@ -46,3 +56,5 @@ private input?; | ||
| private refHandlers; | ||
| constructor(props: ISuggestProps<T>, context?: any); | ||
| render(): JSX.Element; | ||
| componentWillReceiveProps(nextProps: ISuggestProps<T>): void; | ||
| componentDidUpdate(_prevProps: ISuggestProps<T>, prevState: ISuggestState<T>): void; | ||
@@ -53,2 +65,3 @@ private renderQueryList; | ||
| private handleItemSelect; | ||
| private getInitialSelectedItem(); | ||
| private handlePopoverInteraction; | ||
@@ -55,0 +68,0 @@ private handlePopoverOpened; |
@@ -14,7 +14,4 @@ /* | ||
| tslib_1.__extends(Suggest, _super); | ||
| function Suggest() { | ||
| var _this = _super !== null && _super.apply(this, arguments) || this; | ||
| _this.state = { | ||
| isOpen: (_this.props.popoverProps && _this.props.popoverProps.isOpen) || false, | ||
| }; | ||
| function Suggest(props, context) { | ||
| var _this = _super.call(this, props, context) || this; | ||
| _this.TypedQueryList = QueryList.ofType(); | ||
@@ -71,6 +68,13 @@ _this.refHandlers = { | ||
| } | ||
| _this.setState({ | ||
| isOpen: nextOpenState, | ||
| selectedItem: item, | ||
| }); | ||
| // the internal state should only change when uncontrolled. | ||
| if (_this.props.selectedItem === undefined) { | ||
| _this.setState({ | ||
| isOpen: nextOpenState, | ||
| selectedItem: item, | ||
| }); | ||
| } | ||
| else { | ||
| // otherwise just set the next open state. | ||
| _this.setState({ isOpen: nextOpenState }); | ||
| } | ||
| Utils.safeInvoke(_this.props.onItemSelect, item, event); | ||
@@ -129,2 +133,6 @@ }; | ||
| }; | ||
| _this.state = { | ||
| isOpen: (props.popoverProps && props.popoverProps.isOpen) || false, | ||
| selectedItem: _this.getInitialSelectedItem(), | ||
| }; | ||
| return _this; | ||
@@ -140,2 +148,8 @@ } | ||
| }; | ||
| Suggest.prototype.componentWillReceiveProps = function (nextProps) { | ||
| // If the selected item prop changes, update the underlying state. | ||
| if (nextProps.selectedItem !== undefined && nextProps.selectedItem !== this.state.selectedItem) { | ||
| this.setState({ selectedItem: nextProps.selectedItem }); | ||
| } | ||
| }; | ||
| Suggest.prototype.componentDidUpdate = function (_prevProps, prevState) { | ||
@@ -146,2 +160,14 @@ if (this.state.isOpen && !prevState.isOpen && this.queryList != null) { | ||
| }; | ||
| Suggest.prototype.getInitialSelectedItem = function () { | ||
| // controlled > uncontrolled > default | ||
| if (this.props.selectedItem !== undefined) { | ||
| return this.props.selectedItem; | ||
| } | ||
| else if (this.props.defaultSelectedItem !== undefined) { | ||
| return this.props.defaultSelectedItem; | ||
| } | ||
| else { | ||
| return null; | ||
| } | ||
| }; | ||
| Suggest.displayName = DISPLAYNAME_PREFIX + ".Suggest"; | ||
@@ -148,0 +174,0 @@ // Note: can't use <T> in static members, so this remains dynamically typed. |
| { | ||
| "name": "@blueprintjs/select", | ||
| "version": "3.1.0", | ||
| "version": "3.2.0", | ||
| "description": "Components related to selecting items from a list", | ||
@@ -36,3 +36,3 @@ "main": "lib/cjs/index.js", | ||
| "dependencies": { | ||
| "@blueprintjs/core": "^3.1.0", | ||
| "@blueprintjs/core": "^3.6.0", | ||
| "classnames": "^2.2", | ||
@@ -39,0 +39,0 @@ "tslib": "^1.9.0" |
@@ -102,5 +102,11 @@ /* | ||
| /** | ||
| * Whether the querying state should be reset to initial when an item is | ||
| * selected (immediately before `onItemSelect` is invoked). The query will | ||
| * become the empty string and the first item will be made active. | ||
| * Whether the active item should be reset to the first matching item _every | ||
| * time the query changes_ (via prop or by user input). | ||
| * @default true | ||
| */ | ||
| resetOnQuery?: boolean; | ||
| /** | ||
| * Whether the active item should be reset to the first matching item _when | ||
| * an item is selected_. The query will also be reset to the empty string. | ||
| * @default false | ||
@@ -107,0 +113,0 @@ */ |
@@ -98,3 +98,3 @@ @# Select | ||
| const renderFilm: ItemRenderer<Film> = (item, { handleClick, modifiers }) => { | ||
| const renderFilm: ItemRenderer<Film> = (film, { handleClick, modifiers }) => { | ||
| if (!modifiers.filtered) { | ||
@@ -101,0 +101,0 @@ return null; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.61%
286681
- Lines of code
- increased by4.08%
4006
Dependency changes
Updated@blueprintjs/core@^3.6.0