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=14a3f1ffbeb743720cfdf817eead1d97114c794c;hp=0000000000000000000000000000000000000000;hb=ca007e933bcd9f63aa77801656ed9dd4142c432c;hpb=42b788b852f0604748828e9e325e4a0f01152c75

diff --git a/src/generic-components/panel/SlidePanel.jsx b/src/generic-components/panel/SlidePanel.jsx
new file mode 100644
index 0000000..14a3f1f
--- /dev/null
+++ b/src/generic-components/panel/SlidePanel.jsx
@@ -0,0 +1,141 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import ReactDOM from 'react-dom';
+
+class SlidePanel extends React.Component {
+		
+		static PropTypes = {
+				direction: React.PropTypes.string.isRequired,
+				className: React.PropTypes.string,
+				title: React.PropTypes.string,
+				isOpen: React.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;