react-bootstrap - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

main.js

@@ -14,2 +14,3 @@ module.exports = {
   Col: require('./Col'),
+  CollapsableMixin: require('./CollapsableMixin'),
   DropdownButton: require('./DropdownButton'),
@@ -42,2 +43,3 @@ DropdownMenu: require('./DropdownMenu'),
   TabbedArea: require('./TabbedArea'),
+  Table: require('./Table'),
   TabPane: require('./TabPane'),
@@ -44,0 +46,0 @@ Tooltip: require('./Tooltip'),

package.json

 {
   "name": "react-bootstrap",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Bootstrap 3 components build with React",
@@ -5,0 +5,0 @@ "main": "main.js",

transpiled/Alert.js

@@ -31,3 +31,3 @@ "use strict";
         'aria-hidden':"true"}, 
-        " × "
+        "×"
       )
@@ -34,0 +34,0 @@ );

transpiled/Button.js

@@ -14,3 +14,5 @@ "use strict";
     disabled: React.PropTypes.bool,
-    block:    React.PropTypes.bool
+    block:    React.PropTypes.bool,
+    navItem:    React.PropTypes.bool,
+    navDropdown: React.PropTypes.bool
   },
@@ -27,7 +29,13 @@
   render: function () {
-    var classes = this.getBsClassSet();
+    var classes = this.props.navDropdown ? {} : this.getBsClassSet();
+    var renderFuncName;
+
     classes['active'] = this.props.active;
     classes['btn-block'] = this.props.block;
 
-    var renderFuncName = this.props.href ?
+    if (this.props.navItem) {
+      return this.renderNavItem(classes);
+    }
+
+    renderFuncName = this.props.href || this.props.navDropdown ?
       'renderAnchor' : 'renderButton';
@@ -39,2 +47,3 @@
   renderAnchor: function (classes) {
+    var href = this.props.href || '#';
     classes['disabled'] = this.props.disabled;
@@ -44,3 +53,4 @@
       React.DOM.a(
-        {className:classSet(classes),
+        {href:href,
+        className:classSet(classes),
         role:"button"}, 
@@ -59,2 +69,14 @@ this.props.children
     );
+  },
+
+  renderNavItem: function (classes) {
+    var liClasses = {
+      active: this.props.active
+    };
+
+    return (
+      React.DOM.li( {className:classSet(liClasses)}, 
+        this.renderAnchor(classes)
+      )
+    );
   }
@@ -61,0 +83,0 @@ });

transpiled/DropdownButton.js

@@ -21,6 +21,38 @@ "use strict";
     onClick:  React.PropTypes.func,
-    onSelect: React.PropTypes.func
+    onSelect: React.PropTypes.func,
+    navItem:  React.PropTypes.bool
   },
 
   render: function () {
+    var className = this.props.className ?
+      this.props.className + ' dropdown-toggle' : 'dropdown-toggle';
+
+    var renderMethod = this.props.navItem ?
+      'renderNavItem' : 'renderButtonGroup';
+
+    return this[renderMethod]([
+      Button(
+        {ref:"dropdownButton",
+        href:this.props.href,
+        bsStyle:this.props.bsStyle,
+        className:className,
+        onClick:this.handleOpenClick,
+        id:this.props.id,
+        key:0,
+        navDropdown:this.props.navItem}, 
+        this.props.title,' ',
+        React.DOM.span( {className:"caret"} )
+      ),
+      DropdownMenu(
+        {ref:"menu",
+        'aria-labelledby':this.props.id,
+        onSelect:this.handleOptionSelect,
+        pullRight:this.props.pullRight,
+        key:1}, 
+        this.props.children
+      )
+    ]);
+  },
+
+  renderButtonGroup: function (children) {
     var groupClasses = {
@@ -31,5 +63,2 @@ 'open': this.state.open,
 
-    var className = this.props.className ?
-      this.props.className + ' dropdown-toggle' : 'dropdown-toggle';
-
     return (
@@ -39,20 +68,17 @@ ButtonGroup(
         className:classSet(groupClasses)}, 
-        Button(
-          {ref:"dropdownButton",
-          href:this.props.href,
-          bsStyle:this.props.bsStyle,
-          className:className,
-          onClick:this.handleOpenClick,
-          id:this.props.id}, 
-          this.props.title,' ',
-          React.DOM.span( {className:"caret"} )
-        ),
+        children
+      )
+    );
+  },
 
-        DropdownMenu(
-          {ref:"menu",
-          'aria-labelledby':this.props.id,
-          onSelect:this.handleOptionSelect,
-          pullRight:this.props.pullRight}, 
-          this.props.children
-        )
+  renderNavItem: function (children) {
+    var classes = {
+        'dropdown': true,
+        'open': this.state.open,
+        'dropup': this.props.dropup
+      };
+
+    return (
+      React.DOM.li( {className:classSet(classes)}, 
+        children
       )
@@ -62,4 +88,6 @@ );
 
-  handleOpenClick: function () {
+  handleOpenClick: function (e) {
     this.setDropdownState(true);
+
+    e.preventDefault();
   },
@@ -66,0 +94,0 @@

transpiled/Input.js

@@ -37,2 +37,8 @@ "use strict";
 
+  getInitialState: function () {
+    return {
+      error: false
+    };
+  },
+
   getValue: function () {
@@ -39,0 +45,0 @@ return this.refs.input.getDOMNode().value;

transpiled/Nav.js

@@ -7,7 +7,9 @@ "use strict";
 var BootstrapMixin = require("./BootstrapMixin")["default"];
+var CollapsableMixin = require("./CollapsableMixin")["default"];
 var utils = require("./utils")["default"];
+var domUtils = require("./domUtils")["default"];
 
 
 var Nav = React.createClass({displayName: 'Nav',
-  mixins: [BootstrapMixin],
+  mixins: [BootstrapMixin, CollapsableMixin],
 
@@ -18,3 +20,6 @@ propTypes: {
     justified: React.PropTypes.bool,
-    onSelect: React.PropTypes.func
+    onSelect: React.PropTypes.func,
+    isCollapsable: React.PropTypes.bool,
+    isOpen: React.PropTypes.bool,
+    navbar: React.PropTypes.bool
   },
@@ -28,3 +33,31 @@
 
+  getCollapsableDOMNode: function () {
+    return this.getDOMNode();
+  },
+
+  getCollapsableDimensionValue: function () {
+    var node = this.refs.ul.getDOMNode(),
+        height = node.offsetHeight,
+        computedStyles = domUtils.getComputedStyles(node);
+
+    return height + parseInt(computedStyles.marginTop, 10) + parseInt(computedStyles.marginBottom, 10);
+  },
+
   render: function () {
+    var classes = this.props.isCollapsable ? this.getCollapsableClassSet() : {};
+
+    classes['navbar-collapse'] = this.props.isCollapsable;
+
+    if (this.props.navbar) {
+      return this.renderUl();
+    }
+
+    return this.transferPropsTo(
+      React.DOM.nav( {className:classSet(classes)}, 
+        this.renderUl()
+      )
+    );
+  },
+
+  renderUl: function () {
     var classes = this.getBsClassSet();
@@ -34,8 +67,7 @@
     classes['nav-justified'] = this.props.justified;
+    classes['navbar-nav'] = this.props.navbar;
 
-    return this.transferPropsTo(
-      React.DOM.nav(null, 
-        React.DOM.ul( {className:classSet(classes)}, 
-          utils.modifyChildren(this.props.children, this.renderNavItem)
-        )
+    return (
+      React.DOM.ul( {className:classSet(classes), ref:"ul"}, 
+        utils.modifyChildren(this.props.children, this.renderNavItem)
       )
@@ -72,3 +104,4 @@ );
         ref: child.props.ref,
-        key: child.props.key
+        key: child.props.key,
+        navItem: true
       }
@@ -75,0 +108,0 @@ );

transpiled/Navbar.js

@@ -8,2 +8,4 @@ "use strict";
 var PropTypes = require("./PropTypes")["default"];
+var utils = require("./utils")["default"];
+var Nav = require("./Nav")["default"];
 
@@ -20,3 +22,7 @@
     role: React.PropTypes.string,
-    componentClass: PropTypes.componentClass
+    componentClass: PropTypes.componentClass,
+    brand: React.PropTypes.renderable,
+    toggleButton: React.PropTypes.renderable,
+    onToggle: React.PropTypes.func,
+    fluid: React.PropTypes.func
   },
@@ -33,2 +39,29 @@
 
+  getInitialState: function () {
+    return {
+      navOpen: this.props.defaultNavOpen
+    };
+  },
+
+  shouldComponentUpdate: function() {
+    // Defer any updates to this component during the `onSelect` handler.
+    return !this._isChanging;
+  },
+
+  handleToggle: function () {
+    if (this.props.onToggle) {
+      this._isChanging = true;
+      this.props.onToggle();
+      this._isChanging = false;
+    }
+
+    this.setState({
+      navOpen: !this.state.navOpen
+    });
+  },
+
+  isNavOpen: function () {
+    return this.props.navOpen != null ? this.props.navOpen : this.state.navOpen;
+  },
+
   render: function () {
@@ -44,6 +77,62 @@ var classes = this.getBsClassSet();
     return this.transferPropsTo(
-      componentClass( {className:classSet(classes), role:this.props.role}, 
-        this.props.children
+      componentClass( {className:classSet(classes)}, 
+        React.DOM.div( {className:this.props.fluid ? 'container-fluid' : 'container'}, 
+          (this.props.brand || this.props.toggleButton || this.props.toggleNavKey) ? this.renderHeader() : null,
+          React.Children.map(this.props.children, this.renderChild)
+        )
       )
     );
+  },
+
+  renderChild: function (child) {
+    return utils.cloneWithProps(child, {
+      navbar: true,
+      isCollapsable: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.key,
+      isOpen: this.props.toggleNavKey != null && this.props.toggleNavKey === child.props.key && this.isNavOpen(),
+      key: child.props.key,
+      ref: child.props.ref
+    });
+  },
+
+  renderHeader: function () {
+    var brand;
+
+    if (this.props.brand) {
+      brand = React.isValidComponent(this.props.brand) ?
+        utils.cloneWithProps(this.props.brand, {
+          className: 'navbar-brand'
+        }) : React.DOM.span( {className:"navbar-brand"}, this.props.brand);
+    }
+
+    return (
+      React.DOM.div( {className:"navbar-header"}, 
+        brand,
+        (this.props.toggleButton || this.props.toggleNavKey != null) ? this.renderToggleButton() : null
+      )
+    );
+  },
+
+  renderToggleButton: function () {
+    var children;
+
+    if (React.isValidComponent(this.props.toggleButton)) {
+      return utils.cloneWithProps(this.props.toggleButton, {
+        className: 'navbar-toggle',
+        onClick: utils.createChainedFunction(this.handleToggle, this.props.toggleButton.props.onClick)
+      });
+    }
+
+    children = (this.props.toggleButton != null) ?
+      this.props.toggleButton : [
+        React.DOM.span( {className:"sr-only", key:0}, "Toggle navigation"),
+        React.DOM.span( {className:"icon-bar", key:1}),
+        React.DOM.span( {className:"icon-bar", key:2}),
+        React.DOM.span( {className:"icon-bar", key:3})
+    ];
+
+    return (
+      React.DOM.button( {className:"navbar-toggle", type:"button", onClick:this.handleToggle}, 
+        children
+      )
+    );
   }
@@ -50,0 +139,0 @@ });

transpiled/Panel.js

@@ -8,6 +8,7 @@ "use strict";
 var BootstrapMixin = require("./BootstrapMixin")["default"];
+var CollapsableMixin = require("./CollapsableMixin")["default"];
 var utils = require("./utils")["default"];
 
 var Panel = React.createClass({displayName: 'Panel',
-  mixins: [BootstrapMixin],
+  mixins: [BootstrapMixin, CollapsableMixin],
 
@@ -29,9 +30,2 @@ propTypes: {
 
-  getInitialState: function() {
-    return {
-      isOpen: this.props.defaultOpen != null ? this.props.defaultOpen : null,
-      isCollapsing: false
-    };
-  },
-
   handleSelect: function (e) {
@@ -55,75 +49,12 @@ if (this.props.onSelect) {
 
-  handleTransitionEnd: function () {
-    this._collapseEnd = true;
-    this.setState({
-      collapsePhase: 'end',
-      isCollapsing: false
-    });
-  },
-
-  componentWillReceiveProps: function (newProps) {
-    if (newProps.isOpen !== this.props.isOpen) {
-      this._collapseEnd = false;
-      this.setState({
-        collapsePhase: 'start',
-        isCollapsing: true
-      });
-    }
-  },
-
-  _addEndTransitionListener: function () {
-    if (this.refs && this.refs.panel) {
-      ReactTransitionEvents.addEndEventListener(
-        this.refs.panel.getDOMNode(),
-        this.handleTransitionEnd
-      );
-    }
-  },
-
-  _removeEndTransitionListener: function () {
-    if (this.refs && this.refs.panel) {
-      ReactTransitionEvents.addEndEventListener(
-        this.refs.panel.getDOMNode(),
-        this.handleTransitionEnd
-      );
-    }
-  },
-
-  componentDidMount: function () {
-    this._afterRender();
-  },
-
-  componentWillUnmount: function () {
-    this._removeEndTransitionListener();
-  },
-
-  componentWillUpdate: function (nextProps) {
-    this._removeEndTransitionListener();
-    if (nextProps.isOpen !== this.props.isOpen && this.props.isOpen) {
-      this.refs.panel.getDOMNode().style.height = this._getBodyHeight() + 'px';
-    }
-  },
-
-  componentDidUpdate: function () {
-    this._afterRender();
-  },
-
-  _afterRender: function () {
-    this._addEndTransitionListener();
-    setTimeout(this._updateHeightAfterRender, 0);
-  },
-
-  _getBodyHeight: function () {
+  getCollapsableDimensionValue: function () {
     return this.refs.body.getDOMNode().offsetHeight;
   },
 
-  _updateHeightAfterRender: function () {
-    if (this.isMounted() && this.refs && this.refs.panel) {
-      this.refs.panel.getDOMNode().style.height = this.isOpen() ?
-        this._getBodyHeight() + 'px' : '0px';
+  getCollapsableDOMNode: function () {
+    if (!this.isMounted() || !this.refs || !this.refs.panel) {
+      return null;
     }
-  },
 
-  isOpen: function () {
-    return (this.props.isOpen != null) ? this.props.isOpen : this.state.isOpen;
+    return this.refs.panel.getDOMNode();
   },
@@ -145,12 +76,4 @@
   renderCollapsableBody: function () {
-    var classes = {
-          'panel-collapse': true,
-          'collapsing': this.state.isCollapsing,
-          'collapse': !this.state.isCollapsing,
-          'in': this.isOpen() && !this.state.isCollapsing
-        };
-
-
     return (
-      React.DOM.div( {className:classSet(classes), id:this.props.id, ref:"panel"}, 
+      React.DOM.div( {className:classSet(this.getCollapsableClassSet('panel-collapse')), id:this.props.id, ref:"panel"}, 
         this.renderBody()
@@ -157,0 +80,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126319

increased by6.03%

Number of package files

116

increased by3.57%

Lines of code

4016

increased by5.63%

No dependency changes