├── .gitignore ├── package.json ├── LICENSE ├── index.jsx ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-shortcut-chooser", 3 | "version": "1.1.2", 4 | "description": "A React component that lets the user choose keyboard shortcuts", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "standard index.jsx", 8 | "build": "./node_modules/react-tools/bin/jsx index.jsx > index.js", 9 | "prepublish": "npm run build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/florian/react-shortcut-chooser.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "react-component", 18 | "keyboard", 19 | "shortcuts" 20 | ], 21 | "author": "Florian Hartmann", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/florian/react-shortcut-chooser/issues" 25 | }, 26 | "homepage": "https://github.com/florian/react-shortcut-chooser#readme", 27 | "dependencies": { 28 | "key-event-to-string": "^1.1.1" 29 | }, 30 | "peerDependencies": { 31 | "react": "^0.14.7" 32 | }, 33 | "devDependencies": { 34 | "react-tools": "^0.13.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Florian Hartmann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react') 2 | 3 | var EventStringifier = require('key-event-to-string') 4 | 5 | module.exports = React.createClass({ 6 | displayName: 'ShortcutChooser', 7 | 8 | getDefaultProps: function () { 9 | return { 10 | onUpdate: function () {}, 11 | onInvalid: function () {}, 12 | modifierNeeded: true, 13 | keyNeeded: true, 14 | modifierChars: {}, 15 | validate: function (value) { return true } 16 | } 17 | }, 18 | 19 | propTypes: { 20 | onUpdate: React.PropTypes.func.isRequired, 21 | onInvalid: React.PropTypes.func, 22 | modifierNeeded: React.PropTypes.bool, 23 | keyNeeded: React.PropTypes.bool, 24 | modifierChars: React.PropTypes.object, 25 | validate: React.PropTypes.func 26 | }, 27 | 28 | getInitialState: function () { 29 | return { value: '' } 30 | }, 31 | 32 | render: function () { 33 | var value = this.state.value || this.props.defaultValue || '' 34 | 35 | return 36 | }, 37 | 38 | keyDown: function (e) { 39 | var event2string = EventStringifier(this.props.modifierChars) 40 | var eventDetails = EventStringifier.details 41 | 42 | var oldValue = e.target.value 43 | var newValue = event2string(e) 44 | var details = eventDetails(e) 45 | 46 | var isValid = (!this.props.keyNeeded || details.hasKey) && (!this.props.modifierNeeded || details.hasModifier) 47 | 48 | if (isValid && this.props.validate(newValue)) { 49 | this.setState({ value: newValue }) 50 | if (newValue !== oldValue) this.props.onUpdate(newValue, oldValue) 51 | } else { 52 | this.props.onInvalid(newValue) 53 | } 54 | 55 | this.select(e) 56 | 57 | e.preventDefault() 58 | e.stopPropagation() 59 | }, 60 | 61 | select: function (e) { 62 | e.target.select() 63 | }, 64 | 65 | noop: function () {} 66 | }) 67 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var React = require('react') 2 | 3 | var EventStringifier = require('key-event-to-string') 4 | 5 | module.exports = React.createClass({ 6 | displayName: 'ShortcutChooser', 7 | 8 | getDefaultProps: function () { 9 | return { 10 | onUpdate: function () {}, 11 | onInvalid: function () {}, 12 | modifierNeeded: true, 13 | keyNeeded: true, 14 | modifierChars: {}, 15 | validate: function (value) { return true } 16 | } 17 | }, 18 | 19 | propTypes: { 20 | onUpdate: React.PropTypes.func.isRequired, 21 | onInvalid: React.PropTypes.func, 22 | modifierNeeded: React.PropTypes.bool, 23 | keyNeeded: React.PropTypes.bool, 24 | modifierChars: React.PropTypes.object, 25 | validate: React.PropTypes.func 26 | }, 27 | 28 | getInitialState: function () { 29 | return { value: '' } 30 | }, 31 | 32 | render: function () { 33 | var value = this.state.value || this.props.defaultValue || '' 34 | 35 | return React.createElement("input", React.__spread({type: "text"}, this.props, {value: value, onKeyDown: this.keyDown, onFocus: this.select, onChange: this.noop})) 36 | }, 37 | 38 | keyDown: function (e) { 39 | var event2string = EventStringifier(this.props.modifierChars) 40 | var eventDetails = EventStringifier.details 41 | 42 | var oldValue = e.target.value 43 | var newValue = event2string(e) 44 | var details = eventDetails(e) 45 | 46 | var isValid = (!this.props.keyNeeded || details.hasKey) && (!this.props.modifierNeeded || details.hasModifier) 47 | 48 | if (isValid && this.props.validate(newValue)) { 49 | this.setState({ value: newValue }) 50 | if (newValue !== oldValue) this.props.onUpdate(newValue, oldValue) 51 | } else { 52 | this.props.onInvalid(newValue) 53 | } 54 | 55 | this.select(e) 56 | 57 | e.preventDefault() 58 | e.stopPropagation() 59 | }, 60 | 61 | select: function (e) { 62 | e.target.select() 63 | }, 64 | 65 | noop: function () {} 66 | }) 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Shortcut Chooser 2 | 3 | This is a React component that lets the user choose a keyboard shortcut. Native Mac apps have nice input fields that, when focused, capture all keyboard events and display the chosen keyboard shortcut in a nice string format. There was no equivalent JavaScript UI component for that, so I developed this library. 4 | 5 | It's based on the [key-event-to-string](https://github.com/florian/key-event-to-string/) library that converts an event object into a readable format. 6 | 7 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) 8 | 9 | ## Demo 10 | 11 | I've added a minimalistic demo on [RequireBin](http://requirebin.com/?gist=0a89b084af7a1e614202). It sometimes takes RequireBin a while to load the NPM modules though. 12 | 13 | ## Installation 14 | 15 | ``` 16 | $ npm install --save react-shortcut-chooser 17 | ``` 18 | 19 | ## Usage 20 | 21 | ```js 22 | var ShortcutChooser = require('react-shortcut-chooser') 23 | ReactDOM.render(, el) 24 | ``` 25 | 26 | `ShortcutChooser` accepts a bunch of options: 27 | 28 | | key | value | default value | 29 | |:--|:--|:--| 30 | | `modifierNeeded` | Are only shortcuts with modifiers valid? Modifiers are cmd, ctrl, alt and shift | `true` | 31 | | `keyNeeded` | Is a key, other than a modifier, needed? | `true` | 32 | | `onUpdate` | A callback that's called with the new value and the old value | None, it's required | 33 | | `validate` | Can be used to validate a potential keyboard shortcut. Is only called if `modifierNeeded` and `keyNeeded` were satisfied | A function that always returns `true` | 34 | | `onInvalid` | Depending on `modifierNeeded` / `keyNeeded` / `validate` some keyboard shortcuts will be rejected. This callback will be called with the invalid keyboard shortcut if that happens. Could e.g. be used to display an error message | Empty function | 35 | | `modifierChars` | Can be used to change the format according to the [key-event-to-string](https://github.com/florian/key-event-to-string#options) options. Could e.g. be used to get a Mac style | `{}` 36 | 37 | All other properties will be passed straight to the underlying input element. This is especially useful for setting a default value and styling it: 38 | 39 | ```js 40 | 41 | ``` 42 | --------------------------------------------------------------------------------