react-aria-menubutton - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

 # Changelog
 
+## 0.5.0
+- Make class names a little more explicit (change `menuWrapper--trans` to `menuWrapper--transition` and `li` to `menuItemWrapper`).
+- Add `transition` option to factory and remove `transition` prop from component.
+
 ## 0.4.0
@@ -4,0 +8,0 @@ - Options to customize css classes' component name and namespace.

package.json

 {
   "name": "react-aria-menubutton",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A fully accessible, easily themeable, React-powered menu button",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -51,4 +51,3 @@ # react-aria-menubutton [![Build Status](https://travis-ci.org/davidtheclark/react-aria-menubutton.svg?branch=master)](https://travis-ci.org/davidtheclark/react-aria-menubutton)
    triggerContent='Click me'
-   closeOnSelection={true}
-   transition={true} />,
+   closeOnSelection={true} />,
   document.getElementById('container')
@@ -93,6 +92,6 @@ );
 .AriaMenuButton-menuWrapper {}
-.AriaMenuButton-menuWrapper--trans {}
+.AriaMenuButton-menuWrapper--transition {}
 .AriaMenuButton-menu {}
 .AriaMenuButton-menu--flushRight {}
-.AriaMenuButton-li {}
+.AriaMenuButton-menuItemWrapper {}
 .AriaMenuButton-menuItem {}
@@ -152,6 +151,8 @@ .AriaMenuButton-menuItem.is-selected {}
 /* little example */
+var React = require('react/addons');
 var createAriaMenuButton = require('react-aria-menubutton');
 var MySpecialButton = createAriaMenuButton({
   componentName: 'MySpecialButton',
-  namespace: 'me'  
+  namespace: 'me',
+  transition: React.addons.CSSTransitionGroup
 });
@@ -164,9 +165,12 @@ ```
 - **namespace**: Specify a namespace for css classes. [See above](#specify-your-own-namespace).
-- **reactAddons**: If `transition` is true — because you want to use React's CSSTransitionGroup to animate the opening and closing of the menu — you need to pass in `React.addons` here. For example,
+- **transition**: If you want to animate the opening & closing of the menu, pass in [React's CSSTransitionGroup](https://facebook.github.io/react/docs/animation.html) here. For example,
+
   ```js
   var React = require('react/addons');
   var createAriaMenuButton = require('react-aria-menubutton');
-  var AriaMenuButton = createAriaMenuButton({ reactAddons: React.addons });
+  var AriaMenuButton = createAriaMenuButton({ transition: React.addons.CSSTransitionGroup });
   ```
 
+  Make sure you read React's docs on the component and setup your CSS to properly work with it.
+
 ### AriaMenuButton
@@ -224,11 +228,1 @@
 The item that has this value will receive the state class `is-selected`, which CSS can use for special standout styling.
-
-#### transition: Boolean, optional
-
-If `true`, the menu will be wrapped in a [`ReactCSSTransitionGroup`](https://facebook.github.io/react/docs/animation.html).
-This wrapping element will have the classes `AriaMenuButton-menuWrapper` and `AriaMenuButton-menuWrapper--trans`.
-Your CSS, then, can respond to the changing state classes `is-enter`, `is-enter-active`, `is-leave`, and `is-leave-active` to apply a CSS transition of one kind or another.
-
-The second example in [the demo](http://davidtheclark.github.io/react-aria-menubutton/) exemplifies a transition.
-
-Note this: If you want to use `transition`, the component will need access to React *with addons*, since `ReactCSSTransitionGroup` is an addon. This is done by passing `React.addons` as the option `reactAddons`, as [described above](#options).

src/createAriaMenuButton.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import * as keys from './keys';
@@ -9,7 +9,16 @@ import Menu from './Menu';
 
-  const CSSTransitionGroup = (opts.reactAddons) ? opts.reactAddons.CSSTransitionGroup : false;
   cssClassnamer.init(opts.componentName, opts.namespace);
 
-  class AriaMenuButton extends React.Component {
+  let TransitionGroup = false;
+  if (opts.transition) {
+    if (opts.transition.displayName !== 'ReactCSSTransitionGroup') {
+      throw new Error(
+        'createAriaMenuButton\s `transition` option expects a ReactCSSTransitionGroup'
+      );
+    }
+    TransitionGroup = opts.transition;
+  }
 
+  class MenuButton extends Component {
+
     constructor(props) {
@@ -28,11 +37,2 @@ super(props);
 
-    componentWillMount() {
-      if (this.props.transition && !CSSTransitionGroup) {
-        throw new Error(
-          'If you want to use transitions with ariaMenuButton, you need to pass it ' +
-          'React with addons'
-        );
-      }
-    }
-
     componentDidMount() {
@@ -111,3 +111,3 @@ this.focusManager.trigger = React.findDOMNode(this.refs.trigger);
     handleBlur() {
-      this.blurTimeout = setTimeout(() => {
+      setTimeout(() => {
         const activeEl = document.activeElement;
@@ -126,3 +126,2 @@ if (activeEl === this.focusManager.trigger) return;
     handleOverlayClick() {
-      console.log('overlay click triggered');
       this.closeMenu(false);
@@ -147,12 +146,12 @@ }
 
-      const menuWrapper = (props.transition) ? (
-        <CSSTransitionGroup transitionName={cssClassnamer.applyNamespace('is')}
+      const menuWrapper = (TransitionGroup) ? (
+        <TransitionGroup transitionName={cssClassnamer.applyNamespace('is')}
          component='div'
          className={[
            cssClassnamer.componentPart('menuWrapper'),
-           cssClassnamer.componentPart('menuWrapper--trans')
+           cssClassnamer.componentPart('menuWrapper--transition')
          ].join(' ')}
          onKeyDown={this.handleMenuKey.bind(this)}>
           {menu}
-        </CSSTransitionGroup>
+        </TransitionGroup>
       ) : (
@@ -221,17 +220,14 @@ <div className={cssClassnamer.componentPart('menuWrapper')}
 
-  const pt = React.PropTypes;
-
-  AriaMenuButton.propTypes = {
-    handleSelection: pt.func.isRequired,
-    items: pt.arrayOf(pt.object).isRequired,
-    triggerContent: pt.oneOfType([pt.string, pt.element]).isRequired,
-    closeOnSelection: pt.bool,
-    flushRight: pt.bool,
-    id: pt.string,
-    startOpen: pt.bool,
-    selectedValue: pt.oneOfType([pt.string, pt.number, pt.bool]),
-    transition: pt.bool
+  MenuButton.propTypes = {
+    handleSelection: PropTypes.func.isRequired,
+    items: PropTypes.arrayOf(PropTypes.object).isRequired,
+    triggerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+    closeOnSelection: PropTypes.bool,
+    flushRight: PropTypes.bool,
+    id: PropTypes.string,
+    startOpen: PropTypes.bool,
+    selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
   };
 
-  return AriaMenuButton;
+  return MenuButton;
 }
@@ -238,0 +234,0 @@

src/cssClassnamer.js

@@ -17,2 +17,3 @@ export default {
   }
+
 };

src/Menu.js

@@ -1,6 +0,6 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import MenuItem from './MenuItem';
 import cssClassnamer from './cssClassnamer';
 
-export default class Menu extends React.Component {
+export default class Menu extends Component {
 
@@ -26,3 +26,3 @@ shouldComponentUpdate(newProps) {
         <li key={i}
-         className={cssClassnamer.componentPart('li')}
+         className={cssClassnamer.componentPart('menuItemWrapper')}
          role='presentation'>
@@ -49,11 +49,9 @@ <MenuItem {...item}
 
-const pt = React.PropTypes;
-
 Menu.propTypes = {
-  focusManager: pt.object.isRequired,
-  items: pt.arrayOf(pt.object).isRequired,
-  flushRight: pt.bool,
-  handleSelection: pt.func,
-  receiveFocus: pt.bool,
-  selectedValue: pt.any
+  focusManager: PropTypes.object.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  flushRight: PropTypes.bool,
+  handleSelection: PropTypes.func,
+  receiveFocus: PropTypes.bool,
+  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 };

src/MenuItem.js

@@ -1,6 +0,6 @@
-import React from 'react';
+import React, { PropTypes, Component } from 'react';
 import { ENTER, SPACE } from './keys';
 import cssClassnamer from './cssClassnamer';
 
-export default class MenuItem extends React.Component {
+export default class MenuItem extends Component {
 
@@ -59,12 +59,10 @@ shouldComponentUpdate(newProps) {
 
-const pt = React.PropTypes;
-
 MenuItem.propTypes = {
-  focusManager: pt.object.isRequired,
-  handleSelection: pt.func.isRequired,
-  content: pt.oneOfType([pt.string, pt.element]).isRequired,
-  id: pt.string,
-  isSelected: pt.bool,
-  text: pt.string,
-  value: pt.oneOfType([pt.string, pt.number, pt.bool])
+  focusManager: PropTypes.object.isRequired,
+  handleSelection: PropTypes.func.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  id: PropTypes.string,
+  isSelected: PropTypes.bool,
+  text: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 };

webpack.config.test.js

@@ -13,2 +13,3 @@ module.exports = {
   },
+  // Hack due to https://github.com/webpack/webpack/issues/451
   node: {
@@ -15,0 +16,0 @@ fs: 'empty'

No alert changes

Worsened metrics

Total package byte prevSize

88665

decreased by-0.22%

Lines of code

1704

decreased by-0.23%

Number of lines in readme file

224

decreased by-2.61%

No dependency changes