Refactor codebase to use CollapsibleMixin

Panel, Nav and ComponentsPage

Author: AlexKVal

docs/examples/.eslintrc

@@ -14,7 +14,7 @@
     "ButtonGroup",
     "ButtonToolbar",
     "CollapsableNav",
-    "CollapsableMixin",
+    "CollapsibleMixin",
     "Carousel",
     "CarouselItem",
     "Col",

docs/examples/CollapsableParagraph.js docs/examples/CollapsibleParagraph.jsdocs/examples/CollapsableParagraph.js renamed to docs/examples/CollapsibleParagraph.js

@@ -1,11 +1,11 @@
-const CollapsableParagraph = React.createClass({
-  mixins: [CollapsableMixin],
+const CollapsibleParagraph = React.createClass({
+  mixins: [CollapsibleMixin],
 
-  getCollapsableDOMNode: function(){
+  getCollapsibleDOMNode: function(){
     return this.refs.panel.getDOMNode();
   },
 
-  getCollapsableDimensionValue: function(){
+  getCollapsibleDimensionValue: function(){
     return this.refs.panel.getDOMNode().scrollHeight;
   },
 
@@ -15,7 +15,7 @@ const CollapsableParagraph = React.createClass({
   },
 
   render: function(){
-    let styles = this.getCollapsableClassSet();
+    let styles = this.getCollapsibleClassSet();
     let text = this.isExpanded() ? 'Hide' : 'Show';
     return (
       <div>
@@ -29,9 +29,9 @@ const CollapsableParagraph = React.createClass({
 });
 
 const panelInstance = (
-  <CollapsableParagraph>
+  <CollapsibleParagraph>
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-  </CollapsableParagraph>
+  </CollapsibleParagraph>
 );
 
 React.render(panelInstance, mountNode);

docs/src/ComponentsPage.js

@@ -208,9 +208,9 @@ const ComponentsPage = React.createClass({
                   <p><code>&lt;Accordion /&gt;</code> aliases <code>&lt;PanelGroup accordion /&gt;</code>.</p>
                   <ReactPlayground codeText={Samples.PanelGroupAccordion} />
 
-                  <h3 id='panels-collapsable'>Collapsable Mixin</h3>
-                  <p><code>CollapsableMixin</code> can be used to create your own components with collapse functionality.</p>
-                  <ReactPlayground codeText={Samples.CollapsableParagraph} />
+                  <h3 id='panels-collapsible'>Collapsible Mixin</h3>
+                  <p><code>CollapsibleMixin</code> can be used to create your own components with collapse functionality.</p>
+                  <ReactPlayground codeText={Samples.CollapsibleParagraph} />
                 </div>
 
                 <div className='bs-docs-section'>

docs/src/ReactPlayground.js

@@ -7,7 +7,7 @@ import * as modmodButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
 import * as modmodButtonToolbar from '../../src/ButtonToolbar';
 import * as modCollapsableNav from '../../src/CollapsableNav';
-import * as modCollapsableMixin from '../../src/CollapsableMixin';
+import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
 import * as modCarousel from '../../src/Carousel';
 import * as modCarouselItem from '../../src/CarouselItem';
 import * as modCol from '../../src/Col';
@@ -54,7 +54,7 @@ const Button = modmodButton.default;
 const ButtonGroup = modButtonGroup.default;
 const ButtonToolbar = modmodButtonToolbar.default;
 const CollapsableNav = modCollapsableNav.default;
-const CollapsableMixin = modCollapsableMixin.default;
+const CollapsibleMixin = modCollapsibleMixin.default;
 const Carousel = modCarousel.default;
 const CarouselItem = modCarouselItem.default;
 const Col = modCol.default;

docs/src/Samples.js

@@ -28,7 +28,7 @@ export default {
   PanelGroupControlled:          require('fs').readFileSync(__dirname + '/../examples/PanelGroupControlled.js', 'utf8'),
   PanelGroupUncontrolled:        require('fs').readFileSync(__dirname + '/../examples/PanelGroupUncontrolled.js', 'utf8'),
   PanelGroupAccordion:           require('fs').readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8'),
-  CollapsableParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsableParagraph.js', 'utf8'),
+  CollapsibleParagraph:          require('fs').readFileSync(__dirname + '/../examples/CollapsibleParagraph.js', 'utf8'),
   ModalStatic:                   require('fs').readFileSync(__dirname + '/../examples/ModalStatic.js', 'utf8'),
   ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
   ModalOverlayMixin:             require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),

src/CollapsibleMixin.js

@@ -95,7 +95,7 @@ const CollapsibleMixin = {
 
     let complete = () => {
       this._removeEndEventListener(node, complete);
-      // remove dimension value - this ensures the collapsable item can grow
+      // remove dimension value - this ensures the collapsible item can grow
       // in dimension after initial display (such as an image loading)
       node.style[dimension] = '';
       this.setState({

src/Nav.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
-import CollapsableMixin from './CollapsableMixin';
+import CollapsibleMixin from './CollapsibleMixin';
 import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 
@@ -9,7 +9,7 @@ import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
 const Nav = React.createClass({
-  mixins: [BootstrapMixin, CollapsableMixin],
+  mixins: [BootstrapMixin, CollapsibleMixin],
 
   propTypes: {
     activeHref: React.PropTypes.string,
@@ -32,11 +32,11 @@ const Nav = React.createClass({
     };
   },
 
-  getCollapsableDOMNode() {
+  getCollapsibleDOMNode() {
     return React.findDOMNode(this);
   },
 
-  getCollapsableDimensionValue: function () {
+  getCollapsibleDimensionValue: function () {
     let node = React.findDOMNode(this.refs.ul),
         height = node.offsetHeight,
         computedStyles = domUtils.getComputedStyles(node);
@@ -45,7 +45,7 @@ const Nav = React.createClass({
   },
 
   render() {
-    let classes = this.props.collapsable ? this.getCollapsableClassSet() : {};
+    let classes = this.props.collapsable ? this.getCollapsibleClassSet() : {};
 
     classes['navbar-collapse'] = this.props.collapsable;
 

src/Panel.js

@@ -2,10 +2,10 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 
 import BootstrapMixin from './BootstrapMixin';
-import CollapsableMixin from './CollapsableMixin';
+import CollapsibleMixin from './CollapsibleMixin';
 
 const Panel = React.createClass({
-  mixins: [BootstrapMixin, CollapsableMixin],
+  mixins: [BootstrapMixin, CollapsibleMixin],
 
   propTypes: {
     collapsable: React.PropTypes.bool,
@@ -41,11 +41,11 @@ const Panel = React.createClass({
     this.setState({expanded:!this.state.expanded});
   },
 
-  getCollapsableDimensionValue() {
+  getCollapsibleDimensionValue() {
     return React.findDOMNode(this.refs.panel).scrollHeight;
   },
 
-  getCollapsableDOMNode() {
+  getCollapsibleDOMNode() {
     if (!this.isMounted() || !this.refs || !this.refs.panel) {
       return null;
     }
@@ -72,7 +72,7 @@ const Panel = React.createClass({
 
     return (
       <div
-        className={classNames(this.getCollapsableClassSet(collapseClass))}
+        className={classNames(this.getCollapsibleClassSet(collapseClass))}
         id={this.props.id}
         ref='panel'
         aria-expanded={this.isExpanded() ? 'true' : 'false'}>