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 { PropTypes } from 'prop-types';
23 import FontAwesome from 'react-fontawesome';
24 import ReactDOM from 'react-dom';
26 class SlidePanel extends React.Component {
29 direction: PropTypes.string.isRequired,
30 className: PropTypes.string,
31 title: PropTypes.string,
32 isOpen: PropTypes.bool
35 static defaultProps = {
42 isOpen: this.props.isOpen,
43 direction: this.props.direction,
49 this.setSliderPosition();
52 componentDidUpdate() {
53 this.setSliderPosition();
58 let {children, className} = this.props;
59 let {isOpen} = this.state;
62 <div className={ `slide-panel ${className}`}>
63 {this.renderHeader(isOpen)}
65 className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
70 renderHeader(isOpen) {
71 let {direction: initialDirection, title} = this.props;
72 let {direction: currentDirection} = this.state;
74 let iconName = currentDirection ===
76 ? 'angle-double-right collapse-double-icon'
77 : 'angle-double-left collapse-double-icon';
79 let awestyle = {padding: '5px'};
81 if (!isOpen && initialDirection === 'right') {
82 awestyle.marginLeft = '-1px';
85 <div className='slide-panel-header'>
86 { initialDirection === 'left' &&
87 <span className='slide-panel-header-title'>{title}</span>}
91 onClick={this.handleClick}
92 className='pull-right'
95 { initialDirection === 'right' &&
96 <span className='slide-panel-header-title'>{title}</span>}
101 handleClick = () => {
103 isOpen: !this.state.isOpen,
104 direction: this.state.direction === 'left' ? 'right' : 'left'
108 setSliderPosition = () => {
110 let el = ReactDOM.findDOMNode(this);
113 let {direction: initialDirection} = this.props;
114 let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
115 .getBoundingClientRect().width) * 2;
116 if (!this.state.isOpen) {
117 if (this.props.direction === 'left') {
118 style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
120 if (initialDirection === 'right') {
121 style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
125 if (initialDirection === 'left') {
129 if (this.props.direction === 'right') {
137 export default SlidePanel;