increasing test coverage to 20 percent

[aai/sparky-fe.git] / src / generic-components / panel / SlidePanel.jsx

diff --git a/src/generic-components/panel/SlidePanel.jsx b/src/generic-components/panel/SlidePanel.jsx
index 9580837..1550cee 100644 (file)
--- a/src/generic-components/panel/SlidePanel.jsx
+++ b/src/generic-components/panel/SlidePanel.jsx
@@ -24,114 +24,114 @@ import FontAwesome from 'react-fontawesome';
 import ReactDOM from 'react-dom';
 
 class SlidePanel extends React.Component {
-               
-               static PropTypes = {
-                               direction: PropTypes.string.isRequired,
-                               className: PropTypes.string,
-                               title: PropTypes.string,
-                               isOpen: PropTypes.bool
-               };
-               
-               static defaultProps = {
-                               title: '',
-                               className: '',
-                               isOpen: true
-               };
-               
-               state = {
-                               isOpen: this.props.isOpen,
-                               direction: this.props.direction,
-                               width: 0,
-                               arrowWidth: 0
-               };
-               
-               componentDidMount() {
-                               this.setSliderPosition();
-               }
-               
-               componentDidUpdate() {
-                               this.setSliderPosition();
-               }
-               
-               render() {
-                               
-                               let {children, className} = this.props;
-                               let {isOpen} = this.state;
-                               
-                               return (
-                                               <div className={ `slide-panel ${className}`}>
-                                                               {this.renderHeader(isOpen)}
-                                                               <div
-                                                                               className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
-                                               </div>
-                               );
-               }
-               
-               renderHeader(isOpen) {
-                               let {direction: initialDirection, title} = this.props;
-                               let {direction: currentDirection} = this.state;
-                               
-                               let iconName = currentDirection ===
-                                              'right'
-                                               ? 'angle-double-right collapse-double-icon'
-                                               : 'angle-double-left collapse-double-icon';
-                               
-                               let awestyle = {padding: '5px'};
-                               
-                               if (!isOpen && initialDirection === 'right') {
-                                               awestyle.marginLeft = '-1px';
-                               }
-                               return (
-                                               <div className='slide-panel-header'>
-                                                               { initialDirection === 'left' &&
-                                                               <span className='slide-panel-header-title'>{title}</span>}
-                                                               <FontAwesome
-                                                                               ref='arrowIcon'
-                                                                               style={awestyle}
-                                                                               onClick={this.handleClick}
-                                                                               className='pull-right'
-                                                                               name={iconName}
-                                                                               size='2x'/>
-                                                               { initialDirection === 'right' &&
-                                                               <span className='slide-panel-header-title'>{title}</span>}
-                                               </div>
-                               );
-               }
-               
-               handleClick = () => {
-                               this.setState({
-                                               isOpen: !this.state.isOpen,
-                                               direction: this.state.direction === 'left' ? 'right' : 'left'
-                               });
-               }
-               
-               setSliderPosition = () => {
-                               
-                               let el = ReactDOM.findDOMNode(this);
-                               let {style} = el;
-                               
-                               let {direction: initialDirection} = this.props;
-                               let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
-                                                                      .getBoundingClientRect().width) * 2;
-                               if (!this.state.isOpen) {
-                                               if (this.props.direction === 'left') {
-                                                               style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
-                                               }
-                                               if (initialDirection === 'right') {
-                                                               style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
-                                               }
-                               }
-                               else {
-                                               if (initialDirection === 'left') {
-                                                               style.left = '0px';
-                                               }
-                                               
-                                               if (this.props.direction === 'right') {
-                                                               style.right = '0px';
-                                               }
-                               }
-               }
-               
+
+  static PropTypes = {
+    direction: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    title: PropTypes.string,
+    isOpen: PropTypes.bool
+  };
+
+  static defaultProps = {
+    title: '',
+    className: '',
+    isOpen: true
+  };
+
+  state = {
+    isOpen: this.props.isOpen,
+    direction: this.props.direction,
+    width: 0,
+    arrowWidth: 0
+  };
+
+  componentDidMount() {
+    this.setSliderPosition();
+  }
+
+  componentDidUpdate() {
+    this.setSliderPosition();
+  }
+
+  render() {
+
+    let {children, className} = this.props;
+    let {isOpen} = this.state;
+
+    return (
+      <div className={ `slide-panel ${className}`}>
+        {this.renderHeader(isOpen)}
+        <div
+          className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
+      </div>
+    );
+  }
+
+  renderHeader(isOpen) {
+    let {direction: initialDirection, title} = this.props;
+    let {direction: currentDirection} = this.state;
+
+    let iconName = currentDirection ===
+    'right'
+      ? 'angle-double-right collapse-double-icon'
+      : 'angle-double-left collapse-double-icon';
+
+    let awestyle = {padding: '5px'};
+
+    if (!isOpen && initialDirection === 'right') {
+      awestyle.marginLeft = '-1px';
+    }
+    return (
+      <div className='slide-panel-header'>
+        { initialDirection === 'left' &&
+        <span className='slide-panel-header-title'>{title}</span>}
+        <FontAwesome
+          ref='arrowIcon'
+          style={awestyle}
+          onClick={this.handleClick}
+          className='pull-right'
+          name={iconName}
+          size='2x'/>
+        { initialDirection === 'right' &&
+        <span className='slide-panel-header-title'>{title}</span>}
+      </div>
+    );
+  }
+
+  handleClick = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+      direction: this.state.direction === 'left' ? 'right' : 'left'
+    });
+  }
+
+  setSliderPosition = () => {
+
+    let el = ReactDOM.findDOMNode(this);
+    let {style} = el;
+
+    let {direction: initialDirection} = this.props;
+    let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
+        .getBoundingClientRect().width) * 2;
+    if (!this.state.isOpen) {
+      if (this.props.direction === 'left') {
+        style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
+      }
+      if (initialDirection === 'right') {
+        style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
+      }
+    }
+    else {
+      if (initialDirection === 'left') {
+        style.left = '0px';
+      }
+
+      if (this.props.direction === 'right') {
+        style.right = '0px';
+      }
+    }
+  }
+
 }
 
 export default SlidePanel;