react-collapsible - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/Collapsible.js

@@ -34,3 +34,4 @@ 'use strict';
     lazyRender: _react2.default.PropTypes.bool,
-    overflowWhenOpen: _react2.default.PropTypes.oneOf(['hidden', 'visible', 'auto', 'scroll', 'inherit', 'initial', 'unset'])
+    overflowWhenOpen: _react2.default.PropTypes.oneOf(['hidden', 'visible', 'auto', 'scroll', 'inherit', 'initial', 'unset']),
+    triggerSibling: _react2.default.PropTypes.element
   },
@@ -53,3 +54,4 @@
       contentInnerClassName: '',
-      className: ''
+      className: '',
+      triggerSibling: null
     };
@@ -196,2 +198,14 @@ },
 
+  renderNonClickableTriggerElement: function renderNonClickableTriggerElement() {
+    if (this.props.triggerSibling) {
+      return _react2.default.createElement(
+        'span',
+        { className: this.props.classParentString + "__trigger-sibling" },
+        this.props.triggerSibling
+      );
+    }
+
+    return null;
+  },
+
   render: function render() {
@@ -233,2 +247,3 @@
       ),
+      this.renderNonClickableTriggerElement(),
       _react2.default.createElement(
@@ -235,0 +250,0 @@ 'div',

package.json

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

README.md

@@ -13,3 +13,6 @@ # React Responsive Collapsible Section Component (Collapsible)
 
-## What's new in 1.3.0
+## What's new in 1.4.0
+* Added the ability to add non-triggering elemnts to the trigger using `triggerSibling`.
+
+### 1.3.0 Notes
 * You can now disable triggers programatically using the `triggerDisabled` prop.
@@ -121,2 +124,7 @@ * More granular control over CSS classes allowing easier integration to your chosen CSS framework.
 
+### `triggerSibling` | *element* | default: null
+Escape hatch to add arbitrary content on the trigger without triggering expand/collapse. It's up to you to style it as needed. This is inserted in component tree and DOM directly
+after `.Collapsible__trigger`
+
+
 ## CSS Styles
@@ -123,0 +131,0 @@ In theory you don't need any CSS to get this to work, but let's face it, it'd be pretty rubbish without it.

src/Collapsible.js

@@ -36,4 +36,5 @@ import React from 'react';
       'initial',
-      'unset'
-    ])
+      'unset',
+    ]),
+    triggerSibling: React.PropTypes.element
   },
@@ -57,2 +58,3 @@
       className: '',
+      triggerSibling: null,
     };
@@ -202,2 +204,12 @@ },
 
+  renderNonClickableTriggerElement: function () {
+    if (this.props.triggerSibling) {
+      return (
+        <span className={this.props.classParentString  + "__trigger-sibling"}>{this.props.triggerSibling}</span>
+      )
+    }
+
+    return null;
+  },
+
   render: function () {
@@ -236,2 +248,5 @@
         <span className={triggerClassName.trim()} onClick={this.handleTriggerClick}>{trigger}</span>
+        
+        {this.renderNonClickableTriggerElement()}
+
         <div className={this.props.classParentString + "__contentOuter" + ' ' + this.props.contentOuterClassName } ref="outer" style={dropdownStyle}>
@@ -238,0 +253,0 @@ <div className={this.props.classParentString + "__contentInner" + ' ' + this.props.contentInnerClassName} ref="inner">

No alert changes

Improved metrics

Total package byte prevSize

28279

increased by4.47%

Lines of code

527

increased by4.77%

Number of lines in readme file

160

increased by5.26%

No dependency changes