├── .eslintrc
├── .gitignore
├── .travis.yml
├── README.md
├── package.json
├── sagui.config.js
└── src
    ├── demo.html
    ├── demo.js
    ├── index.js
    └── index.spec.js


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./node_modules/sagui/.eslintrc"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "4.4.2"
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Controlled Focus
 2 | 
 3 | [![Build Status](https://travis-ci.org/pirelenito/react-controlled-focus.svg)](https://travis-ci.org/pirelenito/react-controlled-focus)
 4 | [![npm version](https://badge.fury.io/js/react-controlled-focus.svg)](https://badge.fury.io/js/react-controlled-focus)
 5 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
 6 | 
 7 | One of the biggest advantages of using React is having the possibility of a completely **declarative UI**, which is amazing until you run into trying to controll focus.
 8 | 
 9 | This is an attempt at managing `focus` the same way [controled components](http://facebook.github.io/react/docs/forms.html#controlled-components) handle `value`.
10 | 
11 | The biggest difference between `focus` and `value` is that `focus` is not actually a property of the input itself, but rather the document, in the form of the `document.activeElement`. This library approaches the problem by moving the focus management outside of the individual elements up to a `<ControlledFocus>` top level component.
12 | 
13 | Open the [demo page](http://pirelenito.github.io/react-controlled-focus/demo.html) to see it in action.
14 | 
15 | **WARNING**: The API is nowhere near 1.0 stability and it is pretty much an experiment at this point. Appretiate any feedback if I'm doing something that doesn't make sense.
16 | 
17 | ## Usage
18 | 
19 | Install the package:
20 | 
21 | ```bash
22 | npm intall --save react-controlled-focus
23 | ```
24 | 
25 | The API itself is very simple, wrap the entire application arround a `<ControlledFocus>`, set up which element should have the focus via the `activeElement` and handle changes in focus via the `onFocus` callback:
26 | 
27 | ```jsx
28 | <ControlledFocus activeElement='input-1' onFocus={}>
29 |   // children components that will have the focus under-controll.
30 |   <input data-focus-id='input-1'/>
31 | </ControlledFocus>
32 | ```
33 | 
34 | The value of `activeElement` must match the name in `data-focus-id`.
35 | 
36 | ## Development
37 | 
38 | For local development:
39 | 
40 | ```bash
41 | npm start
42 | ```
43 | 
44 | And open [http://0.0.0.0:3000/demo.html](http://0.0.0.0:3000/demo.html).
45 | 
46 | ## Caveats
47 | 
48 | At this point there are a couple:
49 | 
50 | - The biggest caveat of the current implementation is that there can be only one `ControlledFocus` component per page;
51 | - We still required a data attribute named `data-focus-id` on each component we wish to have focus controlled;
52 | - Depending on `data-focus-id` makes it hard to controll the focus on components that you don't own.
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-controlled-focus",
 3 |   "version": "0.1.5",
 4 |   "description": "React component for declarative focus",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "start": "npm run develop",
 8 |     "test": "NODE_ENV=test sagui test",
 9 |     "test-watch": "NODE_ENV=test sagui test --watch",
10 |     "develop": "sagui develop",
11 |     "build": "sagui build",
12 |     "dist": "NODE_ENV=production sagui dist",
13 |     "prepublish": "rm -rf dist && npm run build"
14 |   },
15 |   "files": [
16 |     "dist"
17 |   ],
18 |   "keywords": [
19 |     "react",
20 |     "reactjs",
21 |     "react-component"
22 |   ],
23 |   "author": "Paulo Ragonha <paulo@ragonha.me> (https://github.com/pirelenito)",
24 |   "license": "ISC",
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git+https://github.com/pirelenito/react-controlled-focus.git"
28 |   },
29 |   "bugs": {
30 |     "url": "https://github.com/pirelenito/react-controlled-focus/issues"
31 |   },
32 |   "homepage": "https://github.com/pirelenito/react-controlled-focus#readme",
33 |   "devDependencies": {
34 |     "sagui": "^4.0.0",
35 |     "react": "^0.14.7",
36 |     "react-dom": "^0.14.7"
37 |   },
38 |   "peerDependencies": {
39 |     "react": "^0.14.7",
40 |     "react-dom": "^0.14.7"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/sagui.config.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Sagui configuration object
3 |  */
4 | module.exports = {
5 |   pages: ['demo'],
6 |   library: 'ReactAutofocus'
7 | }
8 | 


--------------------------------------------------------------------------------
/src/demo.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>react-controlled-focus</title>
 4 |   <meta charset="utf-8" />
 5 | </head>
 6 | <body>
 7 |   <div id="react-controlled-focus"></div>
 8 | </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/src/demo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { render } from 'react-dom'
 3 | import ControlledFocus from './index'
 4 | 
 5 | const App = React.createClass({
 6 |   getInitialState () {
 7 |     return {
 8 |       inputSequence: 1
 9 |     }
10 |   },
11 | 
12 |   tick () {
13 |     this.setState({ inputSequence: this.state.inputSequence % 5 + 1 })
14 |   },
15 | 
16 |   componentDidMount () {
17 |     this.interval = setInterval(this.tick, 1000)
18 |   },
19 | 
20 |   componentWillUnmount () {
21 |     clearInterval(this.interval)
22 |   },
23 | 
24 |   render () {
25 |     return (
26 |       <ControlledFocus activeElement={`input-${this.state.inputSequence}`} onFocus={this.handleFocus}>
27 |         <h1>Focus on {this.state.inputSequence}</h1>
28 |         <input data-focus-id='input-1'/>
29 |         <input data-focus-id='input-2'/>
30 |         <input data-focus-id='input-3'/>
31 |         <input data-focus-id='input-4'/>
32 |         <input data-focus-id='input-5'/>
33 |       </ControlledFocus>
34 |     )
35 |   }
36 | })
37 | 
38 | render(<App/>, document.getElementById('react-controlled-focus'))
39 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react'
 2 | 
 3 | export default React.createClass({
 4 |   propTypes: {
 5 |     activeElement: PropTypes.string,
 6 |     children: PropTypes.arrayOf(PropTypes.element),
 7 |     onFocus: PropTypes.func
 8 |   },
 9 | 
10 |   getDefaultProps () {
11 |     return {
12 |       onFocus: () => {}
13 |     }
14 |   },
15 | 
16 |   render () {
17 |     return (
18 |       <div ref='wrapper'>
19 |         {this.props.children}
20 |       </div>
21 |     )
22 |   },
23 | 
24 |   componentDidUpdate (prevProps) {
25 |     this.focusChild(this.props.activeElement)
26 |   },
27 | 
28 |   componentDidMount () {
29 |     this.refs.wrapper.addEventListener('focusin', (event) => {
30 |       const activeElement = event.target.getAttribute('data-focus-id')
31 | 
32 |       if (activeElement !== this.props.activeElement) {
33 |         this.focusChild(this.props.activeElement)
34 |       }
35 | 
36 |       this.props.onFocus(activeElement)
37 |     })
38 |   },
39 | 
40 |   focusChild (focusId) {
41 |     const correctFocus = this.refs.wrapper.querySelector(`[data-focus-id=${focusId}]`)
42 |     correctFocus.focus()
43 |   }
44 | })
45 | 


--------------------------------------------------------------------------------
/src/index.spec.js:
--------------------------------------------------------------------------------
1 | describe('react-controlled-focus', function () {
2 |   it('should work', function () {
3 | 
4 |   })
5 | })
6 | 


--------------------------------------------------------------------------------