Fixes glennflanagan#99 and adds wrapper around trigger and "non click…

…able trigger" for styling possibility.
lud-hu · Apr 24, 2020 · dfd7513 · dfd7513
1 parent 2513ce9
commit dfd7513
Showing 1 changed file with 24 additions and 20 deletions.
diff --git a/src/Collapsible.js b/src/Collapsible.js
@@ -124,10 +124,11 @@ class Collapsible extends Component {
       return (
         <span className={`${this.props.classParentString}__trigger-sibling`}>{this.props.triggerSibling}</span>
       )
-    } else if (this.props.triggerSibling) {
-      return <this.props.triggerSibling />
+    } else if (typeof this.props.triggerSibling === 'object') {
+        return this.props.triggerSibling
+    } else if (typeof this.props.triggerSibling === 'function') {
+        return <this.props.triggerSibling />
     }
-
     return null;
   }
 
@@ -179,6 +180,7 @@ class Collapsible extends Component {
       && !this.state.inTransition ? null : this.props.children;
 
     // Construct CSS classes strings
+    const headerClassString = `${this.props.classParentString}__header`;
     const triggerClassString = `${this.props.classParentString}__trigger ${openClass} ${disabledClass} ${
       this.state.isClosed ? this.props.triggerClassName : this.props.triggerOpenedClassName
       }`;
@@ -190,23 +192,25 @@ class Collapsible extends Component {
 
     return (
       <ContentContainerElement className={parentClassString.trim()} {...this.props.containerElementProps} >
-        <TriggerElement
-          className={triggerClassString.trim()}
-          onClick={this.handleTriggerClick}
-          style={this.props.triggerStyle && this.props.triggerStyle}
-          onKeyPress={(event) => {
-            const { key } = event;
-            if (key === ' ' || key === 'Enter') {
-              this.handleTriggerClick(event);
-            }
-          }}
-          tabIndex={this.props.tabIndex && this.props.tabIndex}
-          {...this.props.triggerElementProps}
-        >
-          {trigger}
-        </TriggerElement>
-
-        {this.renderNonClickableTriggerElement()}
+        <div className={headerClassString}>
+            <TriggerElement
+              className={triggerClassString.trim()}
+              onClick={this.handleTriggerClick}
+              style={this.props.triggerStyle && this.props.triggerStyle}
+              onKeyPress={(event) => {
+                const { key } = event;
+                if (key === ' ' || key === 'Enter') {
+                  this.handleTriggerClick(event);
+                }
+              }}
+              tabIndex={this.props.tabIndex && this.props.tabIndex}
+              {...this.props.triggerElementProps}
+            >
+              {trigger}
+            </TriggerElement>
+
+            {this.renderNonClickableTriggerElement()}
+        </div>
 
         <div
           className={outerClassString.trim()}