X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=blobdiff_plain;f=src%2Fgeneric-components%2Fpanel%2FSlidePanel.jsx;fp=src%2Fgeneric-components%2Fpanel%2FSlidePanel.jsx;h=1550cee747d87ff7f461a62cffe8ba3bb0f2b48f;hp=95808379884e7317575cda71c17b7c9e470c7f0f;hb=96319fec0d2af2be5802a56d6b05a3ada939c8df;hpb=d1975c8134f0401b0ccebf3719eda129d53dac14

diff --git a/src/generic-components/panel/SlidePanel.jsx b/src/generic-components/panel/SlidePanel.jsx
index 9580837..1550cee 100644
--- 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;