2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React from 'react';
24 import FontAwesome from 'react-fontawesome';
25 import ReactDOM from 'react-dom';
27 class SlidePanel extends React.Component {
30 direction: React.PropTypes.string.isRequired,
31 className: React.PropTypes.string,
32 title: React.PropTypes.string,
33 isOpen: React.PropTypes.bool
36 static defaultProps = {
43 isOpen: this.props.isOpen,
44 direction: this.props.direction,
50 this.setSliderPosition();
53 componentDidUpdate() {
54 this.setSliderPosition();
59 let {children, className} = this.props;
60 let {isOpen} = this.state;
63 <div className={ `slide-panel ${className}`}>
64 {this.renderHeader(isOpen)}
66 className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
71 renderHeader(isOpen) {
72 let {direction: initialDirection, title} = this.props;
73 let {direction: currentDirection} = this.state;
75 let iconName = currentDirection ===
77 ? 'angle-double-right collapse-double-icon'
78 : 'angle-double-left collapse-double-icon';
80 let awestyle = {padding: '5px'};
82 if (!isOpen && initialDirection === 'right') {
83 awestyle.marginLeft = '-1px';
86 <div className='slide-panel-header'>
87 { initialDirection === 'left' &&
88 <span className='slide-panel-header-title'>{title}</span>}
92 onClick={this.handleClick}
93 className='pull-right'
96 { initialDirection === 'right' &&
97 <span className='slide-panel-header-title'>{title}</span>}
102 handleClick = () => {
104 isOpen: !this.state.isOpen,
105 direction: this.state.direction === 'left' ? 'right' : 'left'
109 setSliderPosition = () => {
111 let el = ReactDOM.findDOMNode(this);
114 let {direction: initialDirection} = this.props;
115 let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
116 .getBoundingClientRect().width) * 2;
117 if (!this.state.isOpen) {
118 if (this.props.direction === 'left') {
119 style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
121 if (initialDirection === 'right') {
122 style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
126 if (initialDirection === 'left') {
130 if (this.props.direction === 'right') {
138 export default SlidePanel;