diff --git a/.prettierrc b/.prettierrc
index fa51da2..0a72520 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
- "semi": false,
+ "semi": true,
"singleQuote": true
}
diff --git a/src/Collapsible.js b/src/Collapsible.js
index 66480e8..88f32ba 100644
--- a/src/Collapsible.js
+++ b/src/Collapsible.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
class Collapsible extends Component {
constructor(props) {
- super(props)
+ super(props);
- this.timeout = undefined
+ this.timeout = undefined;
// Defaults the dropdown to be closed
if (props.open) {
@@ -17,7 +17,7 @@ class Collapsible extends Component {
hasBeenOpened: true,
overflow: props.overflowWhenOpen,
inTransition: false,
- }
+ };
} else {
this.state = {
isClosed: true,
@@ -27,20 +27,20 @@ class Collapsible extends Component {
hasBeenOpened: false,
overflow: 'hidden',
inTransition: false,
- }
+ };
}
}
componentDidUpdate(prevProps, prevState) {
if (this.state.shouldOpenOnNextCycle) {
- this.continueOpenCollapsible()
+ this.continueOpenCollapsible();
}
if (
prevState.height === 'auto' &&
this.state.shouldSwitchAutoOnNextCycle === true
) {
- window.clearTimeout(this.timeout)
+ window.clearTimeout(this.timeout);
this.timeout = window.setTimeout(() => {
// Set small timeout to ensure a true re-render
this.setState({
@@ -48,24 +48,24 @@ class Collapsible extends Component {
overflow: 'hidden',
isClosed: true,
shouldSwitchAutoOnNextCycle: false,
- })
- }, 50)
+ });
+ }, 50);
}
// If there has been a change in the open prop (controlled by accordion)
if (prevProps.open !== this.props.open) {
if (this.props.open === true) {
- this.openCollapsible()
- this.props.onOpening()
+ this.openCollapsible();
+ this.props.onOpening();
} else {
- this.closeCollapsible()
- this.props.onClosing()
+ this.closeCollapsible();
+ this.props.onClosing();
}
}
}
componentWillUnmount() {
- window.clearTimeout(this.timeout)
+ window.clearTimeout(this.timeout);
}
closeCollapsible() {
@@ -78,14 +78,14 @@ class Collapsible extends Component {
: this.props.transitionTime
}ms ${this.props.easing}`,
inTransition: true,
- })
+ });
}
openCollapsible() {
this.setState({
inTransition: true,
shouldOpenOnNextCycle: true,
- })
+ });
}
continueOpenCollapsible = () => {
@@ -96,30 +96,30 @@ class Collapsible extends Component {
hasBeenOpened: true,
inTransition: true,
shouldOpenOnNextCycle: false,
- })
- }
+ });
+ };
handleTriggerClick = (event) => {
if (this.props.triggerDisabled || this.state.inTransition) {
- return
+ return;
}
- event.preventDefault()
+ event.preventDefault();
if (this.props.handleTriggerClick) {
- this.props.handleTriggerClick(this.props.accordionPosition)
+ this.props.handleTriggerClick(this.props.accordionPosition);
} else {
if (this.state.isClosed === true) {
- this.openCollapsible()
- this.props.onOpening()
- this.props.onTriggerOpening()
+ this.openCollapsible();
+ this.props.onOpening();
+ this.props.onTriggerOpening();
} else {
- this.closeCollapsible()
- this.props.onClosing()
- this.props.onTriggerClosing()
+ this.closeCollapsible();
+ this.props.onClosing();
+ this.props.onTriggerClosing();
}
}
- }
+ };
renderNonClickableTriggerElement() {
if (
@@ -130,22 +130,22 @@ class Collapsible extends Component {
{this.props.triggerSibling}
- )
+ );
} else if (
this.props.triggerSibling &&
typeof this.props.triggerSibling === 'function'
) {
- return this.props.triggerSibling()
+ return this.props.triggerSibling();
} else if (this.props.triggerSibling) {
- return
+ return ;
}
- return null
+ return null;
}
handleTransitionEnd = (e) => {
// only handle transitions that origin from the container of this component
if (e.target !== this.innerRef) {
- return
+ return;
}
// Switch to height auto to make the container responsive
if (!this.state.isClosed) {
@@ -153,15 +153,15 @@ class Collapsible extends Component {
height: 'auto',
overflow: this.props.overflowWhenOpen,
inTransition: false,
- })
- this.props.onOpen()
+ });
+ this.props.onOpen();
} else {
- this.setState({ inTransition: false })
- this.props.onClose()
+ this.setState({ inTransition: false });
+ this.props.onClose();
}
- }
+ };
- setInnerRef = (ref) => (this.innerRef = ref)
+ setInnerRef = (ref) => (this.innerRef = ref);
render() {
const dropdownStyle = {
@@ -170,21 +170,21 @@ class Collapsible extends Component {
msTransition: this.state.transition,
transition: this.state.transition,
overflow: this.state.overflow,
- }
+ };
- var openClass = this.state.isClosed ? 'is-closed' : 'is-open'
- var disabledClass = this.props.triggerDisabled ? 'is-disabled' : ''
+ var openClass = this.state.isClosed ? 'is-closed' : 'is-open';
+ var disabledClass = this.props.triggerDisabled ? 'is-disabled' : '';
//If user wants different text when tray is open
var trigger =
this.state.isClosed === false && this.props.triggerWhenOpen !== undefined
? this.props.triggerWhenOpen
- : this.props.trigger
+ : this.props.trigger;
- const ContentContainerElement = this.props.contentContainerTagName
+ const ContentContainerElement = this.props.contentContainerTagName;
// If user wants a trigger wrapping element different than 'span'
- const TriggerElement = this.props.triggerTagName
+ const TriggerElement = this.props.triggerTagName;
// Don't render children until the first opening of the Collapsible if lazy rendering is enabled
var children =
@@ -193,7 +193,7 @@ class Collapsible extends Component {
this.state.isClosed &&
!this.state.inTransition
? null
- : this.props.children
+ : this.props.children;
// Construct CSS classes strings
const triggerClassString = `${
@@ -202,12 +202,12 @@ class Collapsible extends Component {
this.state.isClosed
? this.props.triggerClassName
: this.props.triggerOpenedClassName
- }`
+ }`;
const parentClassString = `${this.props.classParentString} ${
this.state.isClosed ? this.props.className : this.props.openedClassName
- }`
- const outerClassString = `${this.props.classParentString}__contentOuter ${this.props.contentOuterClassName}`
- const innerClassString = `${this.props.classParentString}__contentInner ${this.props.contentInnerClassName}`
+ }`;
+ const outerClassString = `${this.props.classParentString}__contentOuter ${this.props.contentOuterClassName}`;
+ const innerClassString = `${this.props.classParentString}__contentInner ${this.props.contentInnerClassName}`;
return (
{
- const { key } = event
+ const { key } = event;
if (
(key === ' ' &&
this.props.triggerTagName.toLowerCase() !== 'button') ||
key === 'Enter'
) {
- this.handleTriggerClick(event)
+ this.handleTriggerClick(event);
}
}}
tabIndex={this.props.tabIndex && this.props.tabIndex}
@@ -241,12 +241,16 @@ class Collapsible extends Component {
style={dropdownStyle}
onTransitionEnd={this.handleTransitionEnd}
ref={this.setInnerRef}
- hidden={this.props.contentHiddenWhenClosed && this.state.isClosed && !this.state.inTransition}
+ hidden={
+ this.props.contentHiddenWhenClosed &&
+ this.state.isClosed &&
+ !this.state.inTransition
+ }
>
{children}
- )
+ );
}
}
@@ -287,13 +291,10 @@ Collapsible.propTypes = {
'unset',
]),
contentHiddenWhenClosed: PropTypes.bool,
- triggerSibling: PropTypes.oneOfType([
- PropTypes.element,
- PropTypes.func,
- ]),
+ triggerSibling: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
tabIndex: PropTypes.number,
contentContainerTagName: PropTypes.string,
-}
+};
Collapsible.defaultProps = {
transitionTime: 400,
@@ -322,6 +323,6 @@ Collapsible.defaultProps = {
onTriggerClosing: () => {},
tabIndex: null,
contentContainerTagName: 'div',
-}
+};
-export default Collapsible
+export default Collapsible;