UNPKG

ddm-dropdown

Version:

Dropdown component used in Deseret Digital projects.

6 lines 10.9 kB
!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("react"),require("react-dom"),require("jquery"));else if("function"==typeof define&&define.amd)define(["react","react-dom","jquery"],o);else{var t="object"==typeof exports?o(require("react"),require("react-dom"),require("jquery")):o(e.React,e.ReactDOM,e.jQuery);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(this,function(e,o,t){return function(e){function o(n){if(t[n])return t[n].exports;var r=t[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}var t={};return o.m=e,o.c=t,o.p="",o(0)}([function(e,o,t){t(1),e.exports.Dropdown=t(5),e.exports.DropdownToggle=t(10),e.exports.DropdownBody=t(11)},function(e,o,t){var n=t(2);"string"==typeof n&&(n=[[e.id,n,""]]);t(4)(n,{});n.locals&&(e.exports=n.locals)},function(e,o,t){o=e.exports=t(3)(),o.push([e.id,'.ddm-dropdown,.ddm-dropdown__toggle{position:relative;display:inline-block}.ddm-dropdown__toggle{cursor:pointer}.ddm-dropdown__toggle--with-arrow:before{position:relative;content:"";border-bottom:7px solid;border-left:7px solid transparent;border-right:7px solid transparent;position:absolute;bottom:0;left:50%;margin-left:-7px;display:none}.ddm-dropdown--open .ddm-dropdown__toggle--with-arrow:before{display:block;content:" "}.ddm-dropdown__body{display:none;min-width:100%;position:absolute;top:100%;left:0;z-index:300}.ddm-dropdown--open .ddm-dropdown__body{display:block}.ddm-dropdown-is-open{cursor:pointer}',""])},function(e,o){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],o=0;o<this.length;o++){var t=this[o];t[2]?e.push("@media "+t[2]+"{"+t[1]+"}"):e.push(t[1])}return e.join("")},e.i=function(o,t){"string"==typeof o&&(o=[[null,o,""]]);for(var n={},r=0;r<this.length;r++){var s=this[r][0];"number"==typeof s&&(n[s]=!0)}for(r=0;r<o.length;r++){var i=o[r];"number"==typeof i[0]&&n[i[0]]||(t&&!i[2]?i[2]=t:t&&(i[2]="("+i[2]+") and ("+t+")"),e.push(i))}},e}},function(e,o,t){function n(e,o){for(var t=0;t<e.length;t++){var n=e[t],r=f[n.id];if(r){r.refs++;for(var s=0;s<r.parts.length;s++)r.parts[s](n.parts[s]);for(;s<n.parts.length;s++)r.parts.push(a(n.parts[s],o))}else{for(var i=[],s=0;s<n.parts.length;s++)i.push(a(n.parts[s],o));f[n.id]={id:n.id,refs:1,parts:i}}}}function r(e){for(var o=[],t={},n=0;n<e.length;n++){var r=e[n],s=r[0],i=r[1],d=r[2],p=r[3],a={css:i,media:d,sourceMap:p};t[s]?t[s].parts.push(a):o.push(t[s]={id:s,parts:[a]})}return o}function s(e,o){var t=v(),n=w[w.length-1];if("top"===e.insertAt)n?n.nextSibling?t.insertBefore(o,n.nextSibling):t.appendChild(o):t.insertBefore(o,t.firstChild),w.push(o);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");t.appendChild(o)}}function i(e){e.parentNode.removeChild(e);var o=w.indexOf(e);o>=0&&w.splice(o,1)}function d(e){var o=document.createElement("style");return o.type="text/css",s(e,o),o}function p(e){var o=document.createElement("link");return o.rel="stylesheet",s(e,o),o}function a(e,o){var t,n,r;if(o.singleton){var s=g++;t=y||(y=d(o)),n=l.bind(null,t,s,!1),r=l.bind(null,t,s,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(t=p(o),n=c.bind(null,t),r=function(){i(t),t.href&&URL.revokeObjectURL(t.href)}):(t=d(o),n=u.bind(null,t),r=function(){i(t)});return n(e),function(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap)return;n(e=o)}else r()}}function l(e,o,t,n){var r=t?"":n.css;if(e.styleSheet)e.styleSheet.cssText=b(o,r);else{var s=document.createTextNode(r),i=e.childNodes;i[o]&&e.removeChild(i[o]),i.length?e.insertBefore(s,i[o]):e.appendChild(s)}}function u(e,o){var t=o.css,n=o.media;o.sourceMap;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}function c(e,o){var t=o.css,n=(o.media,o.sourceMap);n&&(t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var r=new Blob([t],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(r),s&&URL.revokeObjectURL(s)}var f={},h=function(e){var o;return function(){return"undefined"==typeof o&&(o=e.apply(this,arguments)),o}},m=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=h(function(){return document.head||document.getElementsByTagName("head")[0]}),y=null,g=0,w=[];e.exports=function(e,o){o=o||{},"undefined"==typeof o.singleton&&(o.singleton=m()),"undefined"==typeof o.insertAt&&(o.insertAt="bottom");var t=r(e);return n(t,o),function(e){for(var s=[],i=0;i<t.length;i++){var d=t[i],p=f[d.id];p.refs--,s.push(p)}if(e){var a=r(e);n(a,o)}for(var i=0;i<s.length;i++){var p=s[i];if(0===p.refs){for(var l=0;l<p.parts.length;l++)p.parts[l]();delete f[p.id]}}}};var b=function(){var e=[];return function(o,t){return e[o]=t,e.filter(Boolean).join("\n")}}()},function(e,o,t){"use strict";function n(){return l++}var r=t(6),s=t(7),i=t(8),d=t(9),p=t(10),a=t(11),l=0,u=r.createClass({displayName:"Dropdown",propTypes:{title:r.PropTypes.string,className:r.PropTypes.string,url:r.PropTypes.string,arrow:r.PropTypes.bool,hover:r.PropTypes.bool,hoverDelay:r.PropTypes.number,onOpen:r.PropTypes.func,onClose:r.PropTypes.func,links:r.PropTypes.array},getDefaultProps:function(){return{title:"",className:"",url:null,arrow:!0,hover:!0,hoverDelay:300,onOpen:null,onClose:null,links:[]}},getInitialState:function(){return{ddmDropdownId:null,open:!1,hoverTimeout:null}},toggleOpenState:function(){this.state.open?this.close():this.open()},open:function(){this.addDocumentCloseHandlers(),this.setState({open:!0}),this.props.onOpen&&this.props.onOpen(),d(s.findDOMNode(this)).trigger("open.ddm.dropdown")},close:function(){this.removeDocumentCloseHandlers(),this.setState({open:!1}),this.props.onClose&&this.props.onClose(),d(s.findDOMNode(this)).trigger("close.ddm.dropdown")},renderToggle:function(){var e=null;return r.Children.forEach(this.props.children,function(o){o.type===p&&(e=r.cloneElement(o,{open:this.state.open,onToggleClick:this.handleClick,ref:"dropdownToggle"}))}.bind(this)),null===e&&(e=r.createElement(p,{href:this.props.url,open:this.state.open,arrow:this.props.arrow,onToggleClick:this.handleClick,ref:"dropdownToggle"},this.props.title)),e},renderBody:function(){var e=null,o=[];return r.Children.forEach(this.props.children,function(e){e.type!==p&&o.push(e)}),r.Children.forEach(o,function(o){o.type===a&&(e=r.cloneElement(o,{ref:"dropdownBody"}))}),null===e&&(e=r.createElement(a,{links:this.props.links,ref:"dropdownBody"},o)),e},render:function(){var e={"ddm-dropdown":!0,"ddm-dropdown--open":this.state.open};this.props.className.split(" ").forEach(function(o){e[o]=!0});var o=this.renderToggle(),t=this.renderBody();return r.createElement("div",{className:i(e),onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},o,t)},componentDidUpdate:function(e,o){this.state.open&&!o.open&&(this.refs.dropdownBody.scrollTop=0),this.state.open?d("body").addClass("ddm-dropdown-is-open"):d("body").removeClass("ddm-dropdown-is-open")},componentDidMount:function(){this.setState({ddmDropdownId:n()})},componentWillUnmount:function(){this.removeDocumentCloseHandlers()},addDocumentCloseHandlers:function(){d(document).on("click.ddm.dropdown."+this.state.ddmDropdownId,this.handleDocumentClick),d(document).on("keyup.ddm.dropdown."+this.state.ddmDropdownId,this.handleDocumentKeyUp),d(document).on("open.ddm.dropdown."+this.state.ddmDropdownId,this.handleDropdownOpen)},removeDocumentCloseHandlers:function(){d(document).off("click.ddm.dropdown."+this.state.ddmDropdownId),d(document).off("keyup.ddm.dropdown."+this.state.ddmDropdownId),d(document).off("open.ddm.dropdown."+this.state.ddmDropdownId)},handleClick:function(){this.toggleOpenState()},handleMouseEnter:function(){if(this.props.hover){clearTimeout(this.state.hoverTimeout);var e=setTimeout(function(){this.open()}.bind(this),this.props.hoverDelay);this.setState({hoverTimeout:e})}},handleMouseLeave:function(){if(this.props.hover){clearTimeout(this.state.hoverTimeout);var e=setTimeout(function(){this.close()}.bind(this),this.props.hoverDelay);this.setState({hoverTimeout:e})}},handleDocumentClick:function(e){this.isNodeInComponent(e.target)||this.close()},handleDocumentKeyUp:function(e){27===e.keyCode&&this.close()},handleDropdownOpen:function(e){this.isNodeInComponent(e.target)||this.close()},isNodeInComponent:function(e){for(var o=s.findDOMNode(this);e;){if(e===o)return!0;e=e.parentNode}return!1}});e.exports=u},function(o,t){o.exports=e},function(e,t){e.exports=o},function(e,o,t){var n,r;/*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ !function(){"use strict";function t(){for(var e=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var r=typeof n;if("string"===r||"number"===r)e.push(n);else if(Array.isArray(n))e.push(t.apply(null,n));else if("object"===r)for(var i in n)s.call(n,i)&&n[i]&&e.push(i)}}return e.join(" ")}var s={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=t:(n=[],r=function(){return t}.apply(o,n),!(void 0!==r&&(e.exports=r)))}()},function(e,o){e.exports=t},function(e,o,t){"use strict";var n=t(6),r=t(8),s=n.createClass({displayName:"DropdownToggle",propTypes:{href:n.PropTypes.string,arrow:n.PropTypes.bool,open:n.PropTypes.bool,onToggleClick:n.PropTypes.func,className:n.PropTypes.string},getDefaultProps:function(){return{href:null,arrow:!0,open:!1,onToggleClick:null,className:""}},render:function(){var e={"ddm-dropdown__toggle":!0,"ddm-dropdown__toggle--with-arrow":this.props.arrow};this.props.className.split(" ").forEach(function(o){e[o]=!0});var o=this.props.href||"#";return n.createElement("a",{href:o,className:r(e),onClick:this.handleClick},this.props.children)},handleClick:function(e){this.props.href&&this.props.open||this.props.onToggleClick&&(e.preventDefault(),this.props.onToggleClick())}});e.exports=s},function(e,o,t){"use strict";var n=t(6),r=t(8),s=n.createClass({displayName:"DropdownBody",propTypes:{links:n.PropTypes.array,className:n.PropTypes.string},getDefaultProps:function(){return{links:[],className:""}},renderLinkList:function(){var e=null,o=null;return e=this.props.links.map(function(e,o){return n.createElement("li",{className:"ddm-dropdown__menu-item",key:"link"+o},n.createElement("a",{href:e.href,title:e.title,onClick:e.onClick,className:"ddm-dropdown__link"},e.link))}),e.length>0&&(o=n.createElement("ul",{className:"ddm-dropdown__menu"},e)),o},render:function(){var e=this.renderLinkList(),o={"ddm-dropdown__body":!0};return this.props.className.split(" ").forEach(function(e){o[e]=!0}),n.createElement("div",{className:r(o)},e,this.props.children)}});e.exports=s}])});