2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React from 'react';
22 import FontAwesome from 'react-fontawesome';
23 import ReactDOM from 'react-dom';
25 class SlidePanel extends React.Component {
28 direction: React.PropTypes.string.isRequired,
29 className: React.PropTypes.string,
30 title: React.PropTypes.string,
31 isOpen: React.PropTypes.bool
34 static defaultProps = {
41 isOpen: this.props.isOpen,
42 direction: this.props.direction,
48 this.setSliderPosition();
51 componentDidUpdate() {
52 this.setSliderPosition();
57 let {children, className} = this.props;
58 let {isOpen} = this.state;
61 <div className={ `slide-panel ${className}`}>
62 {this.renderHeader(isOpen)}
64 className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
69 renderHeader(isOpen) {
70 let {direction: initialDirection, title} = this.props;
71 let {direction: currentDirection} = this.state;
73 let iconName = currentDirection ===
75 ? 'angle-double-right collapse-double-icon'
76 : 'angle-double-left collapse-double-icon';
78 let awestyle = {padding: '5px'};
80 if (!isOpen && initialDirection === 'right') {
81 awestyle.marginLeft = '-1px';
84 <div className='slide-panel-header'>
85 { initialDirection === 'left' &&
86 <span className='slide-panel-header-title'>{title}</span>}
90 onClick={this.handleClick}
91 className='pull-right'
94 { initialDirection === 'right' &&
95 <span className='slide-panel-header-title'>{title}</span>}
100 handleClick = () => {
102 isOpen: !this.state.isOpen,
103 direction: this.state.direction === 'left' ? 'right' : 'left'
107 setSliderPosition = () => {
109 let el = ReactDOM.findDOMNode(this);
112 let {direction: initialDirection} = this.props;
113 let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
114 .getBoundingClientRect().width) * 2;
115 if (!this.state.isOpen) {
116 if (this.props.direction === 'left') {
117 style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
119 if (initialDirection === 'right') {
120 style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
124 if (initialDirection === 'left') {
128 if (this.props.direction === 'right') {
136 export default SlidePanel;