├── .npmignore
├── .travis.yml
├── .gitignore
├── lib
├── main.js
├── helpers
│ ├── isLeavingNode.js
│ ├── focusManager.js
│ ├── customPropTypes.js
│ └── tabbable.js
└── components
│ ├── Tray.js
│ ├── TrayPortal.js
│ └── __tests__
│ └── Tray-test.js
├── examples
├── index.html
└── basic
│ ├── index.html
│ └── app.js
├── package.json
├── README.md
├── CHANGELOG.md
└── dist
├── react-tray.min.js
└── react-tray.js
/.npmignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build/
2 | node_modules/
3 |
--------------------------------------------------------------------------------
/lib/main.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./components/Tray');
2 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/lib/helpers/isLeavingNode.js:
--------------------------------------------------------------------------------
1 | import findTabbable from '../helpers/tabbable';
2 |
3 | export default function(node, event) {
4 | const tabbable = findTabbable(node);
5 | const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
6 | const isLeavingNode = (
7 | finalTabbable === document.activeElement
8 | );
9 | return isLeavingNode;
10 | }
11 |
--------------------------------------------------------------------------------
/lib/helpers/focusManager.js:
--------------------------------------------------------------------------------
1 | let focusLaterElement = null;
2 |
3 | exports.markForFocusLater = function markForFocusLater() {
4 | focusLaterElement = document.activeElement;
5 | };
6 |
7 | exports.returnFocus = function returnFocus() {
8 | try {
9 | focusLaterElement.focus();
10 | } catch (e) {
11 | /* eslint no-console:0 */
12 | console.warn('You tried to return focus to ' + focusLaterElement + ' but it is not in the DOM anymore');
13 | }
14 | focusLaterElement = null;
15 | };
16 |
--------------------------------------------------------------------------------
/lib/helpers/customPropTypes.js:
--------------------------------------------------------------------------------
1 | // Adapted from https://github.com/react-bootstrap/react-prop-types/blob/master/src/isRequiredForA11y.js
2 | export function a11yFunction(props, propName, componentName) {
3 | if ((!props[propName]) || (typeof props[propName] !== 'function')) {
4 | return new Error(
5 | `The prop '${propName}' is required to make '${componentName}' fully accessible. ` +
6 | `This will greatly improve the experience for users of assistive technologies. ` +
7 | `You should provide a function that returns a DOM node.`
8 | );
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-tray",
3 | "version": "2.0.4",
4 | "description": "An accessible tray component useful for navigation menus",
5 | "main": "lib/main.js",
6 | "directories": {
7 | "example": "examples"
8 | },
9 | "scripts": {
10 | "test": "rackt test --single-run --browsers Firefox",
11 | "start": "rackt server"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/instructure-react/react-tray.git"
16 | },
17 | "keywords": [
18 | "react",
19 | "tray",
20 | "react-component"
21 | ],
22 | "author": "Matt Zabriskie",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/instructure-react/react-tray/issues"
26 | },
27 | "homepage": "https://github.com/instructure-react/react-tray",
28 | "dependencies": {
29 | "classnames": "^2.2.0"
30 | },
31 | "peerDependencies": {
32 | "react": "^0.14.0",
33 | "react-dom": "^0.14.0"
34 | },
35 | "devDependencies": {
36 | "rackt-cli": "^0.8.0",
37 | "react": "^0.14.0",
38 | "react-addons-test-utils": "^0.14.0",
39 | "react-dom": "^0.14.0"
40 | }
41 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-tray
2 |
3 | An accessible tray component useful for navigation menus
4 | See example at [http://instructure-react.github.io/react-tray](http://instructure-react.github.io/react-tray)
5 |
6 | ## Usage
7 |
8 | ```js
9 | var React = require('react');
10 | var Tray = require('react-tray');
11 |
12 | var App = React.createClass({
13 | getInitialState: function () {
14 | return {
15 | isTrayOpen: false
16 | };
17 | },
18 |
19 | openTray: function () {
20 | this.setState({
21 | isTrayOpen: true
22 | });
23 | },
24 |
25 | closeTray: function () {
26 | this.setState({
27 | isTrayOpen: false
28 | });
29 | },
30 |
31 |
32 | render: function () {
33 | return (
34 |
35 |
43 |
47 | Tray Content
48 | Learn to drive and everything.
49 |
50 |
react-tray
87 | React tray component
88 |
89 |
90 | 
91 |
92 |
93 |
--------------------------------------------------------------------------------
/examples/basic/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Tray from '../../lib/main';
4 | import cx from 'classnames';
5 |
6 | const App = React.createClass({
7 | getInitialState() {
8 | return {
9 | orientation: 'left',
10 | isTrayOpen: false
11 | };
12 | },
13 |
14 | handleNavClick(e) {
15 | const type = e.target.getAttribute('data-type');
16 | this.openTray(type);
17 | },
18 |
19 | handleNavKeyPress(e) {
20 | if (e.which === 13 || e.which === 32) {
21 | const type = e.target.getAttribute('data-type');
22 | this.openTray(type);
23 | }
24 | },
25 |
26 | handleOrientationChange(e) {
27 | this.setState({
28 | orientation: e.target.value
29 | });
30 | },
31 |
32 | renderTrayContent() {
33 | switch (this.state.type) {
34 | case 'foo':
35 | return (
36 |
37 |
Foo
38 |
Content for foo
39 |
44 |
49 |
Bar
50 |
Lorem Ipsum
51 |
56 |
61 |
Baz
62 |
Other stuff here
63 |
68 |
You shouldn't see me
73 | );
74 | }
75 | },
76 |
77 | render() {
78 | return (
79 |
80 |
86 | -
89 | Foo
95 |
96 | -
99 | Bar
105 |
106 | -
109 | Baz
115 |
116 |
117 |
125 | {this.renderTrayContent()}
126 |
127 |
128 |
132 |
133 |
211 |
221 | {this.props.children}
222 |
223 |