react-collapsible - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist/Collapsible.js

@@ -23,6 +23,12 @@ 'use strict';
     classParentString: _react2.default.PropTypes.string,
-    accordionPosition: _react2.default.PropTypes.number,
+    openedClassName: _react2.default.PropTypes.string,
+    triggerClassName: _react2.default.PropTypes.string,
+    triggerOpenedClassName: _react2.default.PropTypes.string,
+    contentOuterClassName: _react2.default.PropTypes.string,
+    contentInnerClassName: _react2.default.PropTypes.string,
+    accordionPosition: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
     handleTriggerClick: _react2.default.PropTypes.func,
     trigger: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
     triggerWhenOpen: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
+    triggerDisabled: _react2.default.PropTypes.bool,
     lazyRender: _react2.default.PropTypes.bool,
@@ -39,4 +45,11 @@ overflowWhenOpen: _react2.default.PropTypes.oneOf(['hidden', 'visible', 'auto', 'scroll', 'inherit', 'initial', 'unset'])
       classParentString: 'Collapsible',
+      triggerDisabled: false,
       lazyRender: false,
-      overflowWhenOpen: 'hidden'
+      overflowWhenOpen: 'hidden',
+      openedClassName: '',
+      triggerClassName: '',
+      triggerOpenedClassName: '',
+      contentOuterClassName: '',
+      contentInnerClassName: '',
+      className: ''
     };
@@ -116,3 +129,3 @@ },
       if (this.props.open === true) {
-        this.openCollasible();
+        this.openCollapsible();
       } else {
@@ -128,2 +141,6 @@ this.closeCollapsible();
 
+    if (this.props.triggerDisabled) {
+      return;
+    }
+
     if (this.props.handleTriggerClick) {
@@ -134,3 +151,3 @@ this.props.handleTriggerClick(this.props.accordionPosition);
       if (this.state.isClosed === true) {
-        this.openCollasible();
+        this.openCollapsible();
       } else {
@@ -151,3 +168,3 @@ this.closeCollapsible();
 
-  openCollasible: function openCollasible() {
+  openCollapsible: function openCollapsible() {
     this.setState({
@@ -194,2 +211,3 @@ height: this.refs.inner.offsetHeight,
     var openClass = this.state.isClosed ? 'is-closed' : 'is-open';
+    var disabledClass = this.props.triggerDisabled ? 'is-disabled' : '';
 
@@ -203,8 +221,16 @@ //If user wants different text when tray is open
 
+    var triggerClassName = this.props.classParentString + "__trigger" + ' ' + openClass + ' ' + disabledClass;
+
+    if (this.state.isClosed) {
+      triggerClassName = triggerClassName + ' ' + this.props.triggerClassName;
+    } else {
+      triggerClassName = triggerClassName + ' ' + this.props.triggerOpenedClassName;
+    }
+
     return _react2.default.createElement(
       'div',
-      { className: this.props.classParentString },
+      { className: this.props.classParentString + ' ' + (this.state.isClosed ? this.props.className : this.props.openedClassName) },
       _react2.default.createElement(
         'span',
-        { className: this.props.classParentString + "__trigger" + ' ' + openClass, onClick: this.handleTriggerClick },
+        { className: triggerClassName.trim(), onClick: this.handleTriggerClick },
         trigger
@@ -214,6 +240,6 @@ ),
         'div',
-        { className: this.props.classParentString + "__contentOuter", ref: 'outer', style: dropdownStyle },
+        { className: this.props.classParentString + "__contentOuter" + ' ' + this.props.contentOuterClassName, ref: 'outer', style: dropdownStyle },
         _react2.default.createElement(
           'div',
-          { className: this.props.classParentString + "__contentInner", ref: 'inner' },
+          { className: this.props.classParentString + "__contentInner" + ' ' + this.props.contentInnerClassName, ref: 'inner' },
           children
@@ -224,3 +250,2 @@ )
   }
-
 });
@@ -227,0 +252,0 @@

package.json

 {
   "name": "react-collapsible",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React component to wrap content in Collapsible element with trigger to open and close.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -11,5 +11,9 @@ # React Responsive Collapsible Section Component (Collapsible)
 
-![Browserstack Logo](example/img/browserstack-logo.svg "Browserstack")
+![Browserstack Logo](example/img/browserstack-logo.png "Browserstack")
 
-## New in version 1.2.0
+## What's new in 1.3.0
+* You can now disable triggers programatically using the `triggerDisabled` prop.
+* More granular control over CSS classes allowing easier integration to your chosen CSS framework.
+
+### 1.2.0 Notes
 * `overflowWhenOpen` props added to allow setting of the CSS overflow property when Collapsible is open.
@@ -72,2 +76,5 @@
 
+### `triggerDisabled` | *boolean* | default: false
+Disables the trigger handler if `true`. Note: this has no effect other than applying the `.is-disabled` CSS class if you've provided a `handleTriggerClick` prop.
+
 ### `transitionTime` | *number* | default: 400
@@ -85,4 +92,25 @@ The number of milliseconds for the open/close transition to take.
 
+### `className` | *string* 
+`.Collapsible` element (root) when closed
+
+### `openedClassName` | *string* 
+`.Collapsible` element (root) when open
+
+### `triggerClassName` | *string* 
+`.Collapsible__trigger` element (root) when closed
+
+### `triggerOpenedClassName` | *string* 
+`.Collapsible__trigger` element (root) when open
+
+### `contentOuterClassName` | *string* 
+`.Collapsible__contentOuter` element
+
+### `contentInnerClassName` | *string* 
+`.Collapsible__contentInner` element
+
+### `accordionPosition` | *string*
+Unique key used to identify the `Collapse` instance when used in an accordion.
+
 ### `handleTriggerClick` | *function*
-Define this to override the click handler for the trigger link.
+Define this to override the click handler for the trigger link. Takes one parameter, which is `props.accordionPosition`.
 
@@ -111,2 +139,3 @@ ### `lazyRender` | *bool* | default: false
 - `is-open` | Open setState
+- `is-disabled` | Trigger is disabled
 
@@ -120,2 +149,4 @@ ### `.Collapsible__contentOuter`
 
+If you're using a CSS framework such as Foundation or Bootstrap, you probably want to use their classes instead of styling `.Collapsible`. See Properties above.
+
 ## Example
@@ -122,0 +153,0 @@ An example of the component in action is available in the example folder. To see it in action you can run `npm install` and then run `gulp`. This will compile all the JSX into JS and open the example page using BrowserSync.

src/Collapsible.js

@@ -12,3 +12,8 @@ import React from 'react';
     classParentString: React.PropTypes.string,
-    accordionPosition: React.PropTypes.number,
+    openedClassName: React.PropTypes.string,
+    triggerClassName: React.PropTypes.string,
+    triggerOpenedClassName: React.PropTypes.string,
+    contentOuterClassName: React.PropTypes.string,
+    contentInnerClassName: React.PropTypes.string,
+    accordionPosition: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
     handleTriggerClick: React.PropTypes.func,
@@ -23,2 +28,3 @@ trigger: React.PropTypes.oneOfType([
     ]),
+    triggerDisabled: React.PropTypes.bool,
     lazyRender: React.PropTypes.bool,
@@ -43,4 +49,11 @@ overflowWhenOpen: React.PropTypes.oneOf([
       classParentString: 'Collapsible',
+      triggerDisabled: false,
       lazyRender: false,
-      overflowWhenOpen: 'hidden'
+      overflowWhenOpen: 'hidden',
+      openedClassName: '',
+      triggerClassName: '',
+      triggerOpenedClassName: '',
+      contentOuterClassName: '',
+      contentInnerClassName: '',
+      className: '',
     };
@@ -120,3 +133,3 @@ },
       if(this.props.open === true) {
-        this.openCollasible();
+        this.openCollapsible();
       }
@@ -134,2 +147,6 @@ else {
 
+    if(this.props.triggerDisabled) {
+      return
+    }
+
     if(this.props.handleTriggerClick) {
@@ -141,3 +158,3 @@ this.props.handleTriggerClick(this.props.accordionPosition);
       if(this.state.isClosed === true){
-        this.openCollasible();
+        this.openCollapsible();
       }
@@ -160,3 +177,3 @@ else {
 
-  openCollasible: function() {
+  openCollapsible: function() {
     this.setState({
@@ -201,2 +218,3 @@ height: this.refs.inner.offsetHeight,
     var openClass = this.state.isClosed ? 'is-closed' : 'is-open';
+    var disabledClass = this.props.triggerDisabled ? 'is-disabled' : ''
 
@@ -212,8 +230,16 @@ //If user wants different text when tray is open
 
+    let triggerClassName = this.props.classParentString + "__trigger" + ' ' + openClass + ' ' + disabledClass;
+
+    if (this.state.isClosed) {
+      triggerClassName = triggerClassName + ' ' + this.props.triggerClassName;
+    } else {
+      triggerClassName = triggerClassName + ' ' + this.props.triggerOpenedClassName;      
+    }
+
     return(
-      <div className={this.props.classParentString}>
-        <span className={this.props.classParentString + "__trigger" + ' ' + openClass} onClick={this.handleTriggerClick}>{trigger}</span>
-        <div className={this.props.classParentString + "__contentOuter" } ref="outer" style={dropdownStyle}>
-          <div className={this.props.classParentString + "__contentInner"} ref="inner">
-            {children}
+      <div className={this.props.classParentString + ' ' + (this.state.isClosed ? this.props.className : this.props.openedClassName)}>
+        <span className={triggerClassName.trim()} onClick={this.handleTriggerClick}>{trigger}</span>
+        <div className={this.props.classParentString + "__contentOuter" + ' ' + this.props.contentOuterClassName } ref="outer" style={dropdownStyle}>
+          <div className={this.props.classParentString + "__contentInner" + ' ' + this.props.contentInnerClassName} ref="inner">
+              {children}
           </div>
@@ -224,5 +250,4 @@ </div>
   }
-
 });
 
 export default Collapsible;

No alert changes

Improved metrics

Total package byte prevSize

27069

increased by15.43%

Lines of code

503

increased by10.07%

Number of lines in readme file

152

increased by25.62%

No dependency changes