react-select-popover
Version:
A react component to convert a select box into a nifty popover with prepopulated options
1 lines • 8.38 kB
JavaScript
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.SelectPopover=e()}}(function(){return function e(t,s,n){function o(a,i){if(!s[a]){if(!t[a]){var r="function"==typeof require&&require;if(!i&&r)return r(a,!0);if(l)return l(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var p=s[a]={exports:{}};t[a][0].call(p.exports,function(e){var s=t[a][1][e];return o(s?s:e)},p,p.exports,e,t,s,n)}return s[a].exports}for(var l="function"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}({1:[function(e,t,s){(function(e){var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,n=s.createClass({displayName:"HiddenSelectField",render:function(){var e=[];this.props.options.map(function(t,n){var o=t.label,l=t.value;e.push(s.createElement("option",{key:n,value:l},o))});var t=this.props.selectedValues.map(function(e){return e.value});return s.createElement("select",{ref:"hiddenSelectBox",defaultValue:t,name:this.props.name,className:"hidden-select-box",multiple:"true"},e)}});t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(e,t,s){(function(e){var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,n=s.createClass({displayName:"PopoverItem",handleClick:function(e){e.preventDefault();var t={label:this.props.label,value:this.props.value};this.props.selectValue(t)},render:function(){return s.createElement("span",{className:"tag ignore-react-onclickoutside",onClick:this.handleClick},this.props.label)}});t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[function(e,t,s){(function(s){var n=e("./popover-item"),o="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,l=o.createClass({displayName:"Popover",render:function(){var e=[],t=this.props.searchTerm.toString().toLowerCase();this.props.options.forEach(function(s,l){var a=s.label,i=s.value,r=a.toString().toLowerCase(),c=this.props.isInSelectedValues(s);c&&this.props.selectedValues.indexOf(c)>=0||t&&-1==r.indexOf(t)||e.push(o.createElement(n,{key:l,label:a,value:i,selectValue:this.props.selectValue}))},this),e.length||e.push(o.createElement("span",{key:"none",className:"empty-list"},"No Options to show"));var s=this.props.popoverClassNames;-1==s.indexOf("ignore-react-onclickoutside")&&s.push("ignore-react-onclickoutside");var l={display:"in"==this.props.focus?"block":"none"};return o.createElement("div",{className:s.join(" "),style:l},e)}});t.exports=l}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./popover-item":2}],4:[function(e,t,s){(function(e){var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,n=s.createClass({displayName:"SelectBoxItem",handleRemove:function(e){e.preventDefault();var t={label:this.props.label,value:this.props.value};this.props.unselectValue(t)},render:function(){return s.createElement("span",{className:"tag"},s.createElement("button",{onClick:this.handleRemove},"×"),this.props.label)}});t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],5:[function(e,t,s){(function(s){var n=e("./select-box-item"),o=e("./select-input"),l="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,a=l.createClass({displayName:"SelectBox",mixins:["undefined"!=typeof window?window.OnClickOutside:"undefined"!=typeof s?s.OnClickOutside:null],handleClickOutside:function(e){this.props.focusOut()},handleClick:function(){this.props.focusIn()},render:function(){var e=this.props.selectedValues.map(function(e,t){var s=e.label,o=e.value;return l.createElement(n,{label:s,value:o,key:t,unselectValue:this.props.unselectValue})},this),t=this.props.selectBoxClassNames;return e.length||"in"==this.props.focus||(e=l.createElement("p",{className:"empty-list"},this.props.selectPlaceholder)),l.createElement("div",{className:t.join(" ")+("in"==this.props.focus?" active":""),onClick:this.handleClick},e,l.createElement(o,{focus:this.props.focus,searchTerm:this.props.searchTerm,handleSearch:this.props.handleSearch,unselectValue:this.props.unselectValue}))}});t.exports=a}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./select-box-item":4,"./select-input":6}],6:[function(e,t,s){(function(e){var s="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,n="undefined"!=typeof window?window.ReactDOM:"undefined"!=typeof e?e.ReactDOM:null,o=s.createClass({displayName:"SelectInput",handleSearch:function(e){var t=n.findDOMNode(this.refs.searchInput);this.props.handleSearch(t.value)},handleBackspace:function(e){0!=this.props.searchTerm.length||8!=e.keyCode&&46!=e.keyCode||this.props.unselectValue()},componentDidUpdate:function(){var e=n.findDOMNode(this.refs.searchInput);"in"==this.props.focus?e.focus():e.blur()},render:function(){return s.createElement("input",{type:"text",className:"search-input",ref:"searchInput",onKeyDown:this.handleBackspace,value:this.props.searchTerm,onChange:this.handleSearch})}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],7:[function(e,t,s){(function(s){var n=e("./hidden-select-field"),o=e("./select-box"),l=e("./popover"),a="undefined"!=typeof window?window.React:"undefined"!=typeof s?s.React:null,i=a.createClass({displayName:"SelectPopover",propTypes:{options:a.PropTypes.arrayOf(a.PropTypes.object).isRequired,name:a.PropTypes.string,selectPlaceholder:a.PropTypes.string,componentClassNames:a.PropTypes.arrayOf(a.PropTypes.string),selectBoxClassNames:a.PropTypes.arrayOf(a.PropTypes.string),popoverClassNames:a.PropTypes.arrayOf(a.PropTypes.string),onChange:a.PropTypes.func},getDefaultProps:function(){return{options:[],name:"react-select-popover",selectPlaceholder:"Choose some options",componentClassNames:["react-select-popover"],selectBoxClassNames:["select-input"],popoverClassNames:["popover","arrow-top"]}},getInitialState:function(){return{searchTerm:"",selectedValues:[],focus:"out"}},selectValue:function(e){var t=this.state.selectedValues;t.push(e),this.setState({selectedValues:t,searchTerm:""}),this.triggerOnChange({event:"added",item:e,value:this.state.selectedValues})},unselectValue:function(e){var t=this.state.selectedValues;if(!e){var s=t[t.length-1];e=s?s:null}var n=this.isInSelectedValues(e);if(n){var o=t.indexOf(n);t.splice(o,1),this.setState({selectedValues:t}),this.triggerOnChange({event:"removed",item:n,value:this.state.selectedValues})}},isInSelectedValues:function(e){if(e){var t=this.state.selectedValues.filter(function(t){return t.label==e.label&&t.value==e.value});return t?t[0]:null}},handleSearch:function(e){this.setState({searchTerm:e})},focusIn:function(){this.setState({focus:"in"})},focusOut:function(){this.setState({focus:"out",searchTerm:""})},triggerOnChange:function(e){this.props.onChange&&this.props.onChange(e)},render:function(){return a.createElement("div",{className:"react-select-popover"},a.createElement(n,{selectedValues:this.state.selectedValues,name:this.props.name,options:this.props.options,isInSelectedValues:this.isInSelectedValues}),a.createElement(o,{selectedValues:this.state.selectedValues,unselectValue:this.unselectValue,handleSearch:this.handleSearch,searchTerm:this.state.searchTerm,focusIn:this.focusIn,focus:this.state.focus,focusOut:this.focusOut,selectPlaceholder:this.props.selectPlaceholder,selectBoxClassNames:this.props.selectBoxClassNames}),a.createElement(l,{options:this.props.options,selectedValues:this.state.selectedValues,selectValue:this.selectValue,searchTerm:this.state.searchTerm,focus:this.state.focus,popoverClassNames:this.props.popoverClassNames,isInSelectedValues:this.isInSelectedValues}))}});t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./hidden-select-field":1,"./popover":3,"./select-box":5}]},{},[7])(7)});