Merge pull request react-bootstrap#1349 from AlexKVal/liftup

v0.26-rc liftup

.eslintrc

@@ -16,13 +16,10 @@
     "constructor-super": 2,
     "comma-dangle": 0,
     "eqeqeq": [2, "allow-null"],
-    "func-names": 0,
-    "guard-for-in": 0,
     "one-var": [2, { "initialized": "never" }],
     "prefer-const": 0,
     "key-spacing": 0,
     "no-eq-null": 0,
-    "no-else-return": 0,
     "no-param-reassign": 0,
     "no-this-before-super": 2,
     "no-undef": 2,

docs/examples/ImageResponsive.js

@@ -0,0 +1,5 @@
+const imageResponsiveInstance = (
+  <Image src="/assets/thumbnail.png" responsive />
+);
+
+React.render(imageResponsiveInstance, mountNode);

docs/examples/ImageShape.js

@@ -0,0 +1,17 @@
+const imageShapeInstance = (
+  <Grid>
+    <Row>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" rounded />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" circle />
+      </Col>
+      <Col xs={6} md={4}>
+        <Image src="/assets/thumbnail.png" thumbnail />
+      </Col>
+    </Row>
+  </Grid>
+);
+
+React.render(imageShapeInstance, mountNode);

docs/server.js

@@ -21,11 +21,11 @@ if (development) {
   let webpackPort = process.env.WEBPACK_DEV_PORT;
   let target = `http://${ip.address()}:${webpackPort}`;
 
-  app.get('/assets/*', function(req, res) {
+  app.get('/assets/*', (req, res) => {
     proxy.web(req, res, { target });
   });
 
-  proxy.on('error', function(e) {
+  proxy.on('error', e => {
     console.log('Could not connect to webpack proxy'.red);
     console.log(e.toString().red);
   });
@@ -49,7 +49,7 @@ if (development) {
   app.use(express.static(path.join(__dirname, '../docs-built')));
 }
 
-app.listen(port, function() {
+app.listen(port, () => {
   console.log(`Server started at:`);
   console.log(`- http://localhost:${port}`);
   console.log(`- http://${ip.address()}:${port}`);

docs/src/ComponentsPage.js

@@ -675,6 +675,22 @@ const ComponentsPage = React.createClass({
                   <PropTable component="Col"/>
                 </div>
 
+                {/* Images */}
+                <div className="bs-docs-section">
+                  <h1 className="page-header"><Anchor id="images">Images</Anchor></h1>
+
+                  <h3><Anchor id="image-shape">Shape</Anchor></h3>
+                  <p>Use the <code>rounded</code>, <code>circle</code> and <code>thumbnail</code> props to customise the image.</p>
+                  <ReactPlayground codeText={Samples.ImageShape} />
+
+                  <h3><Anchor id="image-responsive">Responsive</Anchor></h3>
+                  <p>Use the <code>responsive</code> to scale image nicely to the parent element.</p>
+                  <ReactPlayground codeText={Samples.ImageResponsive} />
+
+                  <h3><Anchor id="image-props">Props</Anchor></h3>
+                  <PropTable component="Image"/>
+                </div>
+
                 {/* Thumbnail */}
                 <div className="bs-docs-section">
                   <h1 className="page-header"><Anchor id="thumbnail">Thumbnail</Anchor></h1>
@@ -937,6 +953,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href="#alerts" key={14}>Alerts</NavItem>
                     <NavItem href="#carousels" key={15}>Carousels</NavItem>
                     <NavItem href="#grids" key={16}>Grids</NavItem>
+                    <NavItem href="#images" key={29}>Images</NavItem>
                     <NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
                     <NavItem href="#listgroup" key={18}>List group</NavItem>
                     <NavItem href="#labels" key={19}>Labels</NavItem>

docs/src/GettingStartedPage.js

@@ -104,11 +104,11 @@ $ bower install react-bootstrap`
                 <div className="bs-docs-section">
                   <h2 className="page-header"><Anchor id="browser-support">Browser support</Anchor></h2>
                   <p>We aim to support all browsers supported by both <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">React</a> and <a href="http://getbootstrap.com/getting-started/#support">Bootstrap</a>.</p>
+                  <p>Unfortunately, due to the lack of resources and the will of dedicating the efforts to modern browsers and getting closer to Bootstrap's features, we will not be testing <code>react-bootstrap</code> against IE8 anymore.
+                    <br/>We will however continue supporting IE8 as long as people submit PRs addressing compatibility issues with it.</p>
 
                   <p>React requires <a href="http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills">polyfills for non-ES5 capable browsers.</a></p>
 
-                  <p><a href="http://jquery.com">jQuery</a> is currently required only for IE8 support for components which require reading element positions from the DOM: <code>Popover</code> and <code>Tooltip</code> when launched with <code>OverlayTrigger</code>. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:</p>
-
                   <div className="highlight">
                     <CodeExample
                       mode="htmlmixed"
@@ -123,7 +123,6 @@ $ bower install react-bootstrap`
   </script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
 <![endif]-->`

docs/src/PropTable.js

@@ -1,4 +1,4 @@
-import merge from 'lodash/object/merge';
+import merge from 'lodash-compat/object/merge';
 import React from 'react';
 import Glyphicon from '../../src/Glyphicon';
 import Label from '../../src/Label';
@@ -174,9 +174,9 @@ const PropTable = React.createClass({
       return 'function';
     } else if (typeName === 'bool') {
       return 'boolean';
-    } else {
-      return typeName;
     }
+
+    return typeName;
   },
 
   renderEnum(enumType) {

docs/src/ReactPlayground.js

@@ -17,14 +17,15 @@ const CarouselItem = require('../../src/CarouselItem');
 const Col = require('../../src/Col');
 const Collapse = require('../../src/Collapse');
 const CollapsibleNav = require('../../src/CollapsibleNav');
-const Dropdown = require('../../src/Dropdown').default;
+const Dropdown = require('../../src/Dropdown');
 const DropdownButton = require('../../src/DropdownButton');
 const DropdownMenu = require('../../src/DropdownMenu');
 const Fade = require('../../src/Fade');
 const FormControls = require('../../src/FormControls');
 const Glyphicon = require('../../src/Glyphicon');
 const Grid = require('../../src/Grid');
 const Input = require('../../src/Input');
+const Image = require('../../src/Image');
 const Jumbotron = require('../../src/Jumbotron');
 const Label = require('../../src/Label');
 const ListGroup = require('../../src/ListGroup');

docs/src/Samples.js

@@ -105,6 +105,8 @@ export default {
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
   MenuItem:                      require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'),
+  ImageResponsive:               require('fs').readFileSync(__dirname + '/../examples/ImageResponsive.js', 'utf8'),
+  ImageShape:                    require('fs').readFileSync(__dirname + '/../examples/ImageShape.js', 'utf8'),
 
   Overlay:                       require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'),
   OverlayCustom:                 require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8')

karma.conf.js

@@ -1,4 +1,4 @@
-/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0 */
+/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0, func-names: 0 */
 require('babel/register');
 
 var webpackConfig = require('./webpack/test.config.js');

package.json

@@ -85,6 +85,7 @@
     "karma-webpack": "^1.7.0",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
+    "lodash": "^3.10.1",
     "marked": "^0.3.5",
     "mocha": "^2.2.5",
     "mt-changelog": "^0.6.1",
@@ -114,7 +115,7 @@
     "classnames": "^2.1.3",
     "dom-helpers": "^2.2.4",
     "keycode": "^2.0.0",
-    "lodash": "^3.10.0",
+    "lodash-compat": "^3.10.1",
     "react-overlays": "^0.4.4",
     "uncontrollable": "^3.1.1"
   },

src/ButtonGroup.js

@@ -15,7 +15,7 @@ const ButtonGroup = React.createClass({
      */
     block: all(
       React.PropTypes.bool,
-      function(props) {
+      props => {
         if (props.block && !props.vertical) {
           return new Error('The block property requires the vertical property to be set to have any effect');
         }

src/Carousel.js

@@ -208,7 +208,7 @@ const Carousel = React.createClass({
   renderIndicators() {
     let indicators = [];
     ValidComponentChildren
-      .forEach(this.props.children, function(child, index) {
+      .forEach(this.props.children, (child, index) => {
         indicators.push(
           this.renderIndicator(child, index),
 
@@ -233,7 +233,7 @@ const Carousel = React.createClass({
     this.setState({
       previousActiveIndex: null,
       direction: null
-    }, function() {
+    }, () => {
       this.waitForNext();
 
       if (this.props.onSlideEnd) {

src/Col.js

@@ -149,7 +149,7 @@ const Col = React.createClass({
     let ComponentClass = this.props.componentClass;
     let classes = {};
 
-    Object.keys(styleMaps.SIZES).forEach(function(key) {
+    Object.keys(styleMaps.SIZES).forEach( key => {
       let size = styleMaps.SIZES[key];
       let prop = size;
       let classPart = size + '-';

src/CollapsibleNav.js

@@ -44,9 +44,8 @@ const CollapsibleNav = React.createClass({
           { nav }
         </Collapse>
       );
-    } else {
-      return nav;
     }
+    return nav;
   },
 
   getChildActiveProp(child) {

src/Dropdown.js

@@ -8,19 +8,17 @@ import DropdownMenu from './DropdownMenu';
 import CustomPropTypes from './utils/CustomPropTypes';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
-import find from 'lodash/collection/find';
-import omit from 'lodash/object/omit';
+import find from 'lodash-compat/collection/find';
+import omit from 'lodash-compat/object/omit';
 import all from 'react-prop-types/lib/all';
 import elementType from 'react-prop-types/lib/elementType';
 import isRequiredForA11y from 'react-prop-types/lib/isRequiredForA11y';
-
 import activeElement from 'dom-helpers/activeElement';
 import contains from 'dom-helpers/query/contains';
 
 const TOGGLE_REF = 'toggle-btn';
-
-export const TOGGLE_ROLE = DropdownToggle.defaultProps.bsRole;
-export const MENU_ROLE = DropdownMenu.defaultProps.bsRole;
+const TOGGLE_ROLE = DropdownToggle.defaultProps.bsRole;
+const MENU_ROLE = DropdownMenu.defaultProps.bsRole;
 
 class Dropdown extends React.Component {
 
@@ -231,6 +229,8 @@ class Dropdown extends React.Component {
 Dropdown.Toggle = DropdownToggle;
 
 Dropdown.TOGGLE_REF = TOGGLE_REF;
+Dropdown.TOGGLE_ROLE = TOGGLE_ROLE;
+Dropdown.MENU_ROLE = MENU_ROLE;
 
 Dropdown.defaultProps = {
   componentClass: ButtonGroup

src/DropdownButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import Dropdown from './Dropdown';
-import omit from 'lodash/object/omit';
+import omit from 'lodash-compat/object/omit';
 
 class DropdownButton extends React.Component {
 

src/DropdownMenu.js

@@ -80,37 +80,36 @@ class DropdownMenu extends React.Component {
   }
 
   render() {
-    const items = ValidComponentChildren.map(this.props.children, child => {
-      let {
-        children,
-        onKeyDown,
-        onSelect
-      } = child.props || {};
+    let {children, onSelect, pullRight, className, labelledBy, open, onClose, ...props} = this.props;
+
+    const items = ValidComponentChildren.map(children, child => {
+      let childProps  = child.props || {};
 
       return React.cloneElement(child, {
-        onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
-        onSelect: createChainedFunction(onSelect, this.props.onSelect)
-      }, children);
+        onKeyDown: createChainedFunction(childProps.onKeyDown, this.handleKeyDown),
+        onSelect: createChainedFunction(childProps.onSelect, onSelect)
+      }, childProps.children);
     });
 
     const classes = {
       'dropdown-menu': true,
-      'dropdown-menu-right': this.props.pullRight
+      'dropdown-menu-right': pullRight
     };
 
     let list = (
       <ul
-        className={classNames(this.props.className, classes)}
+        className={classNames(className, classes)}
         role="menu"
-        aria-labelledby={this.props.labelledBy}
+        aria-labelledby={labelledBy}
+        {...props}
       >
         {items}
       </ul>
     );
 
-    if (this.props.open) {
+    if (open) {
       list = (
-        <RootCloseWrapper noWrap onRootClose={this.props.onClose}>
+        <RootCloseWrapper noWrap onRootClose={onClose}>
           {list}
         </RootCloseWrapper>
       );

src/Image.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Image = React.createClass({
+
+  propTypes: {
+
+    /**
+     * Sets image as responsive image
+     */
+    responsive: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as rounded
+     */
+    rounded: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as circle
+     */
+    circle: React.PropTypes.bool,
+
+    /**
+     * Sets image shape as thumbnail
+     */
+    thumbnail: React.PropTypes.bool
+  },
+
+  getDefaultProps() {
+    return {
+      responsive: false,
+      rounded: false,
+      circle: false,
+      thumbnail: false
+    };
+  },
+
+  render() {
+    const classes = {
+      'img-responsive': this.props.responsive,
+      'img-rounded': this.props.rounded,
+      'img-circle': this.props.circle,
+      'img-thumbnail': this.props.thumbnail
+    };
+
+    return (
+      <img {...this.props}  className={classNames(this.props.className, classes)} />
+    );
+  }
+});
+
+export default Image;

src/InputBase.js

@@ -14,12 +14,10 @@ class InputBase extends React.Component {
     } else if (this.props.type) {
       if (this.props.type === 'select' && this.props.multiple) {
         return this.getSelectedOptions();
-      } else {
-        return this.getInputDOMNode().value;
       }
-    } else {
-      throw new Error('Cannot use getValue without specifying input type.');
+      return this.getInputDOMNode().value;
     }
+    throw new Error('Cannot use getValue without specifying input type.');
   }
 
   getChecked() {