React 16 Dropdown

26 | 27 | ); 28 | } 29 | 30 | ReactDOM.render(, document.getElementById('react-app')); 31 | -------------------------------------------------------------------------------- /examples/js/prism.js: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.14.0 2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+clike+javascript+jsx */ 3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){if(m&&b!=t.length-1){h.lastIndex=k;var _=h.exec(e);if(!_)break;for(var j=_.index+(d?_[1].length:0),P=_.index+_[0].length,A=b,x=k,O=t.length;O>A&&(P>x||!t[A].type&&!t[A-1].greedy);++A)x+=t[A].length,j>=x&&(++b,k=x);if(t[b]instanceof s)continue;I=A-b,w=e.slice(k,x),_.index-=k}else{h.lastIndex=0;var _=h.exec(w),I=1}if(_){d&&(p=_[1]?_[1].length:0);var j=_.index+p,_=_[0].slice(p),P=j+_.length,N=w.slice(0,j),S=w.slice(P),C=[b,I];N&&(++b,k+=N.length,C.push(N));var E=new s(u,f?n.tokenize(_,f):_,y,_,m);if(C.push(E),S&&C.push(S),Array.prototype.splice.apply(t,C),1!=I&&n.matchGrammar(e,t,r,b,k,!0,u),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+""},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*$)/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*$|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"},constant:/\b[A-Z][A-Z\d_]*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${[^}]+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}}}),Prism.languages.javascript["template-string"].inside.interpolation.inside.rest=Prism.languages.javascript,Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript; 7 | !function(t){var n=t.util.clone(t.languages.javascript);t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=/<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?)?>/i,t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,t.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},t.languages.jsx.tag),t.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:t.languages.jsx},alias:"language-javascript"}},t.languages.jsx.tag);var e=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(e).join(""):""},a=function(n){for(var s=[],g=0;g0&&s[s.length-1].tagName===e(o.content[0].content[1])&&s.pop():"/>"===o.content[o.content.length-1].content||s.push({tagName:e(o.content[0].content[1]),openedBraces:0}):s.length>0&&"punctuation"===o.type&&"{"===o.content?s[s.length-1].openedBraces++:s.length>0&&s[s.length-1].openedBraces>0&&"punctuation"===o.type&&"}"===o.content?s[s.length-1].openedBraces--:i=!0),(i||"string"==typeof o)&&s.length>0&&0===s[s.length-1].openedBraces){var p=e(o);g0&&("string"==typeof n[g-1]||"plain-text"===n[g-1].type)&&(p=e(n[g-1])+p,n.splice(g-1,1),g--),n[g]=new t.Token("plain-text",p,null,p)}o.content&&"string"!=typeof o.content&&a(o.content)}};t.hooks.add("after-tokenize",function(t){("jsx"===t.language||"tsx"===t.language)&&a(t.tokens)})}(Prism); 8 | -------------------------------------------------------------------------------- /examples/styles/examples.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | margin-bottom: 0; 3 | } 4 | 5 | code { 6 | border-radius: 3px; 7 | line-height: 1.8 !important; 8 | padding: 0 !important; 9 | margin: 0 !important; 10 | } 11 | 12 | pre { 13 | margin: 0 !important; 14 | padding: 1rem !important; 15 | } 16 | 17 | .option.option--success:hover { 18 | background-color: #28a745; 19 | color: white; 20 | } 21 | 22 | .option.option--danger:hover { 23 | background-color: #dc3545; 24 | color: white; 25 | } 26 | 27 | .option.option--primary:hover { 28 | background-color: #007bff; 29 | color: white; 30 | } 31 | 32 | .custom-option { 33 | margin-left: 10px; 34 | } 35 | 36 | .custom-option button { 37 | vertical-align: middle; 38 | } -------------------------------------------------------------------------------- /examples/styles/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.14.0 2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+clike+javascript+jsx */ 3 | /** 4 | * okaidia theme for JavaScript, CSS and HTML 5 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 6 | * @author ocodia 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: #f8f8f2; 12 | background: none; 13 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 14 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | /* Code blocks */ 33 | pre[class*="language-"] { 34 | padding: 1em; 35 | margin: .5em 0; 36 | overflow: auto; 37 | border-radius: 0.3em; 38 | } 39 | 40 | :not(pre) > code[class*="language-"], 41 | pre[class*="language-"] { 42 | background: #272822; 43 | } 44 | 45 | /* Inline code */ 46 | :not(pre) > code[class*="language-"] { 47 | padding: .1em; 48 | border-radius: .3em; 49 | white-space: normal; 50 | } 51 | 52 | .token.comment, 53 | .token.prolog, 54 | .token.doctype, 55 | .token.cdata { 56 | color: slategray; 57 | } 58 | 59 | .token.punctuation { 60 | color: #f8f8f2; 61 | } 62 | 63 | .namespace { 64 | opacity: .7; 65 | } 66 | 67 | .token.property, 68 | .token.tag, 69 | .token.constant, 70 | .token.symbol, 71 | .token.deleted { 72 | color: #f92672; 73 | } 74 | 75 | .token.boolean, 76 | .token.number { 77 | color: #ae81ff; 78 | } 79 | 80 | .token.selector, 81 | .token.attr-name, 82 | .token.string, 83 | .token.char, 84 | .token.builtin, 85 | .token.inserted { 86 | color: #a6e22e; 87 | } 88 | 89 | .token.operator, 90 | .token.entity, 91 | .token.url, 92 | .language-css .token.string, 93 | .style .token.string, 94 | .token.variable { 95 | color: #f8f8f2; 96 | } 97 | 98 | .token.atrule, 99 | .token.attr-value, 100 | .token.function, 101 | .token.class-name { 102 | color: #e6db74; 103 | } 104 | 105 | .token.keyword { 106 | color: #66d9ef; 107 | } 108 | 109 | .token.regex, 110 | .token.important { 111 | color: #fd971f; 112 | } 113 | 114 | .token.important, 115 | .token.bold { 116 | font-weight: bold; 117 | } 118 | .token.italic { 119 | font-style: italic; 120 | } 121 | 122 | .token.entity { 123 | cursor: help; 124 | } 125 | 126 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-16-dropdown", 3 | "version": "0.3.1", 4 | "description": "A zero-dependency, lightweight and fully customizable dropdown (not select) for React.", 5 | "main": "dist/react-16-dropdown.js", 6 | "scripts": { 7 | "test": "nyc mocha test/specs/*.js*", 8 | "test-lint": "eslint src", 9 | "start": "webpack-dev-server", 10 | "build": "webpack", 11 | "build-docs": "NODE_ENV=production webpack" 12 | }, 13 | "author": "muchhalaankit@gmail.com", 14 | "homepage": "https://github.com/ankit-m/react-16-dropdown", 15 | "bugs": { 16 | "url": "https://github.com/ankit-m/react-16-dropdown/issues", 17 | "email": "muchhalaankit@gmail.com" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/ankit-m/react-16-dropdown.git" 22 | }, 23 | "keywords": [ 24 | "react", 25 | "dropdown" 26 | ], 27 | "license": "ISC", 28 | "peerDependencies": { 29 | "react": "16.4.0", 30 | "react-dom": "16.4.0" 31 | }, 32 | "devDependencies": { 33 | "babel-core": "6.26.0", 34 | "babel-loader": "7.1.2", 35 | "babel-preset-env": "1.6.1", 36 | "babel-preset-react": "6.24.1", 37 | "babel-register": "6.26.0", 38 | "chai": "4.1.2", 39 | "css-loader": "0.28.8", 40 | "enzyme": "^3.3.0", 41 | "enzyme-adapter-react-16": "^1.1.1", 42 | "eslint": "4.19.1", 43 | "eslint-config-airbnb": "16.1.0", 44 | "eslint-plugin-import": "2.12.0", 45 | "eslint-plugin-jsx-a11y": "6.0.3", 46 | "eslint-plugin-react": "7.9.1", 47 | "html-webpack-plugin": "2.30.1", 48 | "jsdom": "11.11.0", 49 | "mocha": "5.2.0", 50 | "nyc": "12.0.2", 51 | "react": "16.4.0", 52 | "react-dom": "16.4.0", 53 | "sinon": "6.0.0", 54 | "style-loader": "0.19.1", 55 | "webpack": "3.10.0", 56 | "webpack-dev-server": "2.11.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import Menu from './Menu'; 4 | import Trigger from './Trigger'; 5 | import { getAbsoluteBoundingRect, optimizedResize } from './utils'; 6 | 7 | export default class Dropdown extends Component { 8 | constructor(props) { 9 | super(props); 10 | 11 | this.state = { open: Boolean(props.open) }; 12 | 13 | this.menuRef = React.createRef(); 14 | this.triggerRef = React.createRef(); 15 | this.controlled = Object.prototype.hasOwnProperty.call(this.props, 'open'); 16 | 17 | this.handleTriggerClick = this.handleTriggerClick.bind(this); 18 | this.handleOptionClick = this.handleOptionClick.bind(this); 19 | this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this); 20 | this.handleEscape = this.handleEscape.bind(this); 21 | this.closeMenu = this.closeMenu.bind(this); 22 | this.openMenu = this.openMenu.bind(this); 23 | this.handleClickOutside = this.handleClickOutside.bind(this); 24 | this.setTriggerRect = this.setTriggerRect.bind(this); 25 | this.focusTrigger = this.focusTrigger.bind(this); 26 | } 27 | 28 | componentDidMount() { 29 | this.setTriggerRect(); 30 | 31 | this.props.autoFocus && this.focusTrigger(); 32 | 33 | optimizedResize.add(this.setTriggerRect); 34 | } 35 | 36 | componentDidUpdate(prevProps, prevState) { 37 | if (this.controlled) { 38 | return; 39 | } 40 | 41 | if (this.state.open && !prevState.open) { 42 | typeof this.props.onOpen === 'function' && this.props.onOpen(); 43 | } 44 | 45 | if (this.state.open) { 46 | this.props.closeOnEscape && document.addEventListener('keyup', this.handleEscape); 47 | this.props.closeOnClickOutside && document.addEventListener('click', this.handleClickOutside); 48 | } else { 49 | this.props.closeOnEscape && document.removeEventListener('keyup', this.handleEscape); 50 | this.props.closeOnClickOutside && document.removeEventListener('click', this.handleClickOutside); 51 | } 52 | } 53 | 54 | componentWillUnmount() { 55 | document.removeEventListener('keyup', this.handleEscape); 56 | document.removeEventListener('click', this.handleClickOutside); 57 | } 58 | 59 | setTriggerRect() { 60 | if (!this.triggerRef.current) { 61 | return; 62 | } 63 | 64 | this.setState({ 65 | triggerBoundingRect: getAbsoluteBoundingRect(this.triggerRef.current), 66 | }); 67 | } 68 | 69 | // focus the custom component passed or renderer 70 | focusTrigger() { 71 | if (this.props.triggerComponent) { 72 | this.triggerRef.current.focus(); 73 | } else { 74 | this.triggerRef.current.firstChild.focus(); 75 | } 76 | } 77 | 78 | closeMenu(focus) { 79 | this.setState({ open: false }, () => { 80 | focus && this.focusTrigger(); 81 | }); 82 | } 83 | 84 | openMenu() { 85 | this.setState({ open: true }); 86 | } 87 | 88 | handleClickOutside(e) { 89 | if (!this.menuRef.current) { 90 | return; 91 | } 92 | 93 | if (!this.menuRef.current.contains(e.target)) { 94 | this.closeMenu(); 95 | } 96 | } 97 | 98 | handleEscape(e) { 99 | if (e.key === 'Escape') { 100 | this.closeMenu(true); 101 | } 102 | } 103 | 104 | handleTriggerClick() { 105 | // re-calculating the position of dropdown to remove scrolling side effects 106 | this.setTriggerRect(); 107 | 108 | typeof this.props.onTriggerClick === 'function' && this.props.onTriggerClick(); 109 | 110 | if (this.controlled) { 111 | return; 112 | } 113 | 114 | this.setState(prevState => ({ open: !prevState.open })); 115 | } 116 | 117 | handleTriggerKeyDown(e) { 118 | typeof this.props.onTriggerKeyDown === 'function' && this.props.onTriggerKeyDown(); 119 | 120 | if (this.controlled) { 121 | return; 122 | } 123 | 124 | if (e.key === 'ArrowDown') { 125 | this.openMenu(); 126 | 127 | e.preventDefault(); 128 | } 129 | } 130 | 131 | handleOptionClick(val) { 132 | typeof this.props.onClick === 'function' && this.props.onClick(val); 133 | 134 | !this.controlled && this.props.closeOnOptionClick && this.closeMenu(true); 135 | } 136 | 137 | render() { 138 | const TriggerElement = this.props.triggerComponent || Trigger; 139 | const open = this.controlled ? this.props.open : this.state.open; 140 | const classes = 'react-16-dropdown' + 141 | (this.props.className ? ` ${this.props.className}` : ''); 142 | 143 | return ( 144 |

148 | 156 | 157 | {open && this.state.triggerBoundingRect && 158 | 165 | } 166 |

167 | ); 168 | } 169 | } 170 | 171 | Dropdown.defaultProps = { 172 | autoFocus: false, 173 | triggerLabel: 'Open menu', 174 | closeOnEscape: true, 175 | closeOnClickOutside: true, 176 | closeOnOptionClick: false, 177 | disabled: false, 178 | align: 'left', 179 | options: [], 180 | sections: [], 181 | }; 182 | -------------------------------------------------------------------------------- /src/Menu.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import Option from './Option'; 5 | 6 | /** 7 | * Default menu renderer 8 | * 9 | * @param {Object} props - React props 10 | * @param {ReactElement} props.children - Options to render 11 | * @returns {ReactElement} menu 12 | */ 13 | function MenuRenderer(props) { 14 | return props.children; 15 | } 16 | 17 | /** 18 | * Default component for menu section 19 | * 20 | * @param {Object} props - React props 21 | * @param {String} props.title - Section title 22 | * @param {ReactElement} props.children - Options in the section 23 | * @returns {ReactElement} menu section 24 | */ 25 | function MenuSectionRenderer(props) { 26 | const className = 'menu-section' + 27 | (props.className ? ` ${props.className}` : ''); 28 | 29 | return ( 30 |

31 |

{props.title}

32 |

33 | {props.children} 34 |

35 |

36 | ); 37 | } 38 | 39 | /** 40 | * Default menu component 41 | * 42 | * @param {Object} props - React props 43 | * @param {ReactElement} props.renderer - Menu renderer 44 | * @param {ReactRef} props.menuRef - Ref for the menu component 45 | * @param {Object} props.style - Inline styles for menu 46 | * @param {Function} props.onKeyDown - Handler for keyboard events 47 | * @param {ReactElement} props.children - Option elements 48 | */ 49 | function Menu(props) { 50 | const Renderer = props.renderer; 51 | 52 | return ( 53 | 63 | ); 64 | } 65 | 66 | /** 67 | * Portal for the menu 68 | * 69 | * @help https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Using_tabindex 70 | */ 71 | export default class MenuPortal extends Component { 72 | constructor(props) { 73 | super(props); 74 | 75 | this.state = { focused: -1 }; 76 | 77 | this.optionRefs = {}; 78 | this.el = document.createElement('div'); 79 | this.el.classList.add('react-16-dropdown-portal'); 80 | props.portalClassName && this.el.classList.add(props.portalClassName); 81 | 82 | this.handleKeyDown = this.handleKeyDown.bind(this); 83 | this.getAlignment = this.getAlignment.bind(this); 84 | this.setOptionRefs = this.setOptionRefs.bind(this); 85 | this.getOptions = this.getOptions.bind(this); 86 | this.getOptionElements = this.getOptionElements.bind(this); 87 | } 88 | 89 | componentDidMount() { 90 | document.querySelector(this.props.menuPortalTarget).appendChild(this.el); 91 | 92 | this.props.controlled && this.props.focused && this.optionRefs[this.props.focused].focus(); 93 | 94 | if (!this.props.controlled || this.props.autoFocusMenu) { 95 | this.props.menuRef.current.focus(); 96 | } 97 | } 98 | 99 | componentDidUpdate() { 100 | const options = this.getOptions(); 101 | 102 | let key; 103 | 104 | if (!this.props.controlled) { 105 | const selected = options[this.state.focused]; 106 | 107 | key = selected && selected.value; 108 | } else { 109 | key = this.props.focused; 110 | } 111 | 112 | key && this.optionRefs[key].focus(); 113 | } 114 | 115 | componentWillUnmount() { 116 | document.querySelector(this.props.menuPortalTarget).removeChild(this.el); 117 | } 118 | 119 | getAlignment() { 120 | // @todo allow other alignments 121 | const boundingRect = this.props.triggerBoundingRect; 122 | const top = boundingRect.top + boundingRect.height; 123 | 124 | if (this.props.align === 'left') { 125 | return { 126 | top, 127 | left: boundingRect.left, 128 | }; 129 | } 130 | 131 | if (this.props.align === 'right') { 132 | return { 133 | top, 134 | right: window.innerWidth - boundingRect.right - window.scrollX, 135 | }; 136 | } 137 | 138 | return {}; 139 | } 140 | 141 | getOptions() { 142 | const { options, sections } = this.props; 143 | 144 | if (sections.length) { 145 | return sections.reduce((res, sec) => res.concat(sec.options), []); 146 | } 147 | 148 | return options; 149 | } 150 | 151 | getOptionElements() { 152 | const { sections } = this.props; 153 | const options = this.getOptions(); 154 | const OptionElement = this.props.optionComponent; 155 | const SectionRenderer = this.props.menuSectionRenderer; 156 | const focused = this.props.controlled ? 157 | options.map(o => o.value).indexOf(this.props.focused) : 158 | this.state.focused; 159 | 160 | if (sections.length) { 161 | return sections.map((sec, i) => ( 162 | 166 | {sec.options.map((option, j) => ( 167 | this.setOptionRefs(node, option.value)} 173 | renderer={this.props.optionRenderer} 174 | onClick={() => { this.props.onClick(option); }} 175 | /> 176 | ))} 177 | 178 | )); 179 | } 180 | 181 | return options.map((option, i) => ( 182 | this.setOptionRefs(node, option.value)} 188 | renderer={this.props.optionRenderer} 189 | onClick={() => { this.props.onClick(option); }} 190 | /> 191 | )); 192 | } 193 | 194 | setOptionRefs(node, key) { 195 | node && (this.optionRefs[key] = node); 196 | } 197 | 198 | handleKeyDown(e) { 199 | typeof this.props.onMenuKeyDown === 'function' && this.props.onMenuKeyDown(e); 200 | 201 | if (this.props.controlled) { 202 | return; 203 | } 204 | 205 | const options = this.getOptions(); 206 | const maxFocus = options.length - 1; 207 | const focusedOption = options[this.state.focused]; 208 | 209 | // NOTE: This method is called when the menu is 210 | // opened with the keyboard. This case handles it 211 | if (e.key === 'Enter' && focusedOption && !focusedOption.disabled) { 212 | this.props.onClick(focusedOption.value); 213 | } else if (e.key === 'ArrowDown') { 214 | this.setState(prevState => ({ 215 | focused: prevState.focused < maxFocus ? prevState.focused + 1 : maxFocus, 216 | })); 217 | } else if (e.key === 'ArrowUp') { 218 | this.setState(prevState => ({ 219 | focused: prevState.focused > 0 ? prevState.focused - 1 : 0, 220 | })); 221 | } 222 | 223 | e.preventDefault(); 224 | } 225 | 226 | render() { 227 | const MenuElement = this.props.menuComponent; 228 | 229 | const menu = ( 230 | 236 | {this.getOptionElements()} 237 | 238 | ); 239 | 240 | return ReactDOM.createPortal(menu, this.el); 241 | } 242 | } 243 | 244 | MenuPortal.defaultProps = { 245 | menuComponent: Menu, 246 | optionComponent: Option, 247 | menuRenderer: MenuRenderer, 248 | menuSectionRenderer: MenuSectionRenderer, 249 | menuPortalTarget: 'body', 250 | }; 251 | -------------------------------------------------------------------------------- /src/Option.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * Default renderer for option. Renders a div with 5 | * child as label. 6 | * 7 | * @param {Object} props - React props 8 | * @param {String} props.className - Custom class 9 | * @param {Boolean} props.focused - Is focused? 10 | * @param {String|ReactElement} props.label - Option label 11 | * @returns {ReactElement} 12 | */ 13 | export function OptionRenderer(props) { 14 | const classes = 'option' + 15 | (props.focused ? ' focused' : '') + 16 | (props.disabled ? ' disabled' : '') + 17 | (props.className ? ` ${props.className}` : ''); 18 | 19 | return ( 20 |

21 | {props.label} 22 |

23 | ); 24 | } 25 | 26 | /** 27 | * Default option component. It renders a div with 28 | * renderer as a child. 29 | * 30 | * @param {Object} props - React props 31 | * @param {Boolean} props.focused - Is option focused? 32 | * @param {ReactRef} props.optionRef - React ref for option 33 | * @param {Function} props.onClick - Click handler 34 | * @param {Object} props.data - Option data 35 | * @param {String} props.className - Custom class 36 | * @returns {ReactElement} 37 | */ 38 | export default function Option(props) { 39 | const Renderer = props.renderer; 40 | 41 | return ( 42 | 55 | ); 56 | } 57 | 58 | Option.defaultProps = { 59 | renderer: OptionRenderer, 60 | data: {}, 61 | }; 62 | -------------------------------------------------------------------------------- /src/Trigger.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * Default trigger renderer - Displays a plain button 5 | * with label 6 | * 7 | * @param {Object} props - React props 8 | * @param {Boolean} props.disabled - Trigger disabled 9 | * @param {String|ReactElement} props.label - Trigger display label 10 | */ 11 | export function TriggerRenderer(props) { 12 | return ( 13 | 19 | ); 20 | } 21 | 22 | /** 23 | * Default trigger component - Renders a div with 24 | * all the handlers 25 | * 26 | * @param {Object} props - React props 27 | * @param {ReactElement} [props.renderer] - Custom trigger renderer 28 | * @param {ReactRef} props.triggerRef - React ref for trigger 29 | * @param {Function} props.onClick - Click handler 30 | * @param {Function} props.onKeyDown - Key down handler 31 | * @param {Boolean} props.disabled - Trigger disabled 32 | * @param {String|ReactElement} props.label - Trigger display label 33 | */ 34 | export default function Trigger(props) { 35 | const Renderer = props.renderer || TriggerRenderer; 36 | 37 | return ( 38 |

45 | 49 |

50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | .react-16-dropdown, 2 | .trigger { 3 | display: inline-block; 4 | } 5 | 6 | .trigger-renderer { 7 | border-radius: 3px; 8 | line-height: 1.5; 9 | padding: .375rem .75rem; 10 | cursor: pointer; 11 | background: #ffffff; 12 | font-size: 1rem; 13 | border: 1px solid #dcdcdc; 14 | } 15 | 16 | .trigger-renderer:hover { 17 | background: #f0f0f0; 18 | } 19 | 20 | /*********************** Menu styles begin ***********************/ 21 | .menu { 22 | position: absolute; 23 | background: white; 24 | border: 1px solid #dcdcdc; 25 | border-radius: 3px; 26 | margin-top: 8px; 27 | min-width: 300px; 28 | max-width: 420px; 29 | box-shadow : 0 0 10px -5px #000000; 30 | } 31 | 32 | .menu-section { 33 | border-bottom: 1px solid #dcdcdc; 34 | border-top: 1px solid #dcdcdc; 35 | } 36 | 37 | .menu-section:first-of-type { 38 | border-top: 0; 39 | } 40 | 41 | .menu-section:last-of-type { 42 | border-bottom: 0; 43 | } 44 | 45 | .menu-section + .menu-section { 46 | border-top: 0; 47 | } 48 | 49 | .menu-section__title { 50 | font-size: 1rem; 51 | padding: .5rem; 52 | font-weight: bold; 53 | } 54 | 55 | .menu-section-title:empty { 56 | padding: 0; 57 | } 58 | 59 | .menu-section-title:empty + .menu-section { 60 | border-top: 0; 61 | } 62 | 63 | .menu:focus { 64 | /* outline: none */ 65 | } 66 | /*********************** Menu styles end ***********************/ 67 | 68 | .option { 69 | min-height: 24px; 70 | padding: 8px 16px; 71 | } 72 | 73 | .option.focused, 74 | .option:hover { 75 | background: #f0f0f0; 76 | cursor: pointer; 77 | } 78 | 79 | .option:focus { 80 | border: 10px solid pink; 81 | } 82 | 83 | .option.disabled { 84 | opacity: 0.5; 85 | background: #f0f0f0; 86 | } 87 | 88 | .option.disabled:hover { 89 | cursor: no-drop; 90 | } -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export const optimizedResize = (function () { 2 | const callbacks = []; 3 | let running = false; 4 | 5 | // run the actual callbacks 6 | function runCallbacks() { 7 | callbacks.forEach((callback) => { 8 | callback(); 9 | }); 10 | 11 | running = false; 12 | } 13 | 14 | // fired on resize event 15 | function resize() { 16 | if (!running) { 17 | running = true; 18 | 19 | if (window.requestAnimationFrame) { 20 | window.requestAnimationFrame(runCallbacks); 21 | } else { 22 | setTimeout(runCallbacks, 66); 23 | } 24 | } 25 | } 26 | 27 | // adds callback to loop 28 | function addCallback(callback) { 29 | if (callback) { 30 | callbacks.push(callback); 31 | } 32 | } 33 | 34 | return { 35 | // public method to add additional callback 36 | add(callback) { 37 | if (!callbacks.length) { 38 | window.addEventListener('resize', resize); 39 | } 40 | addCallback(callback); 41 | }, 42 | }; 43 | }()); 44 | 45 | export function getAbsoluteBoundingRect(el) { 46 | const clientRect = el.getBoundingClientRect(); 47 | const rect = {}; 48 | 49 | rect.left = window.scrollX + clientRect.left; 50 | rect.top = window.scrollY + clientRect.top; 51 | rect.right = clientRect.right; 52 | rect.bottom = clientRect.bottom; 53 | rect.height = clientRect.height; 54 | 55 | return rect; 56 | } 57 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "rules": { 6 | "prefer-arrow-callback": "off", 7 | "no-unused-expressions": "off" 8 | } 9 | } -------------------------------------------------------------------------------- /test/.setup.js: -------------------------------------------------------------------------------- 1 | import { JSDOM } from 'jsdom'; 2 | import { expect } from 'chai'; 3 | const jsdom = new JSDOM(''); 4 | const { window } = jsdom; 5 | 6 | function copyProps(src, target) { 7 | const props = Object.getOwnPropertyNames(src) 8 | .filter(prop => typeof target[prop] === 'undefined') 9 | .map(prop => Object.getOwnPropertyDescriptor(src, prop)); 10 | Object.defineProperties(target, props); 11 | } 12 | 13 | global.expect = expect; 14 | global.window = window; 15 | global.document = window.document; 16 | global.navigator = { 17 | userAgent: 'node.js', 18 | }; 19 | copyProps(window, global); 20 | -------------------------------------------------------------------------------- /test/mocha.opts: -------------------------------------------------------------------------------- 1 | 2 | --require babel-register 3 | --require test/.setup.js -------------------------------------------------------------------------------- /test/specs/Option.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { expect } from 'chai'; 3 | import { mount, shallow } from 'enzyme'; 4 | import { spy } from 'sinon'; 5 | 6 | import Option, { OptionRenderer } from '../../src/Option'; 7 | 8 | describe('', function () { 9 | it('should mount without errors', function () { 10 | const wrapper = mount(); 11 | 12 | expect(wrapper.find('div')).to.have.lengthOf(1); 13 | wrapper.unmount(); 14 | }); 15 | 16 | it('should unmount without errors', function () { 17 | const wrapper = mount(); 18 | 19 | wrapper.unmount(); 20 | expect(wrapper.find('div')).to.have.lengthOf(0); 21 | }); 22 | 23 | it('should render a div with \'option\' className', function () { 24 | const wrapper = shallow(); 25 | 26 | expect(wrapper.find('div.option')).to.have.lengthOf(1); 27 | }); 28 | 29 | it('should append focused class if the focused prop is true', function () { 30 | const wrapper = shallow(); 31 | 32 | expect(wrapper.find('div.focused')).to.have.lengthOf(1); 33 | }); 34 | 35 | it('should append custom className', function () { 36 | const wrapper = shallow(); 37 | 38 | expect(wrapper.find('div.test')).to.have.lengthOf(1); 39 | }); 40 | 41 | it('should render the label', function () { 42 | const wrapper = shallow(); 43 | 44 | expect(wrapper.text()).to.equal('label'); 45 | }); 46 | }); 47 | 48 | describe('

Basic Usage

Controlled Component

Customization

Using renderers

Replacing components

Features

react 16 dropdown

Sections