openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx

   1 import React from 'react';
   2 import FontAwesome from 'react-fontawesome';
   3 import ReactDOM from 'react-dom';
   4
   5 class SlidePanel extends React.Component {
   6
   7         static PropTypes = {
   8                 direction: React.PropTypes.string.isRequired,
   9                 className: React.PropTypes.string,
  10                 title: React.PropTypes.string,
  11                 isOpen: React.PropTypes.bool
  12         };
  13
  14         static defaultProps = {
  15                 title: '',
  16                 className: '',
  17                 isOpen: true
  18         };
  19
  20         state = {
  21                 isOpen: this.props.isOpen,
  22                 direction: this.props.direction,
  23                 width: 0,
  24                 arrowWidth: 0
  25         };
  26
  27         componentDidMount() {
  28                 this.setSliderPosition();
  29         }
  30
  31         componentDidUpdate() {
  32                 this.setSliderPosition();
  33         }
  34
  35         render() {
  36
  37                 let {children, className} = this.props;
  38                 let {isOpen} = this.state;
  39
  40                 return (
  41                         <div className={ `slide-panel ${className}`}>
  42                                 {this.renderHeader(isOpen)}
  43                                 <div className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
  44                         </div>
  45                 );
  46         }
  47
  48         renderHeader(isOpen) {
  49                 let {direction: initialDirection, title} = this.props;
  50                 let {direction: currentDirection} = this.state;
  51
  52                 let iconName = currentDirection === 'right' ? 'angle-double-right collapse-double-icon' : 'angle-double-left collapse-double-icon';
  53
  54                 let awestyle = {padding: '5px'};
  55
  56                 if (!isOpen && initialDirection === 'right') {
  57                         awestyle.marginLeft = '-1px';
  58                 }
  59                 return (
  60                         <div className='slide-panel-header'>
  61                                 { initialDirection === 'left' && <span className='slide-panel-header-title'>{title}</span>}
  62                                 <FontAwesome
  63                                         ref='arrowIcon'
  64                                         style={awestyle}
  65                                         onClick={this.handleClick}
  66                                         className='pull-right'
  67                                         name={iconName}
  68                                         size='2x'/>
  69                                 { initialDirection === 'right' && <span className='slide-panel-header-title'>{title}</span>}
  70                         </div>
  71                 );
  72         }
  73
  74         handleClick = () => {
  75                 this.setState({
  76                         isOpen: !this.state.isOpen,
  77                         direction: this.state.direction === 'left' ? 'right' : 'left'
  78                 });
  79         }
  80
  81         setSliderPosition = () => {
  82
  83                 let el = ReactDOM.findDOMNode(this);
  84                 let {style} = el;
  85
  86                 let {direction: initialDirection} = this.props;
  87                 let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon).getBoundingClientRect().width) * 2;
  88                 if (!this.state.isOpen) {
  89                         if (this.props.direction === 'left') {
  90                                 style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
  91                         }
  92                         if (initialDirection === 'right') {
  93                                 style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
  94                         }
  95                 }
  96                 else {
  97                         if (initialDirection === 'left') {
  98                                 style.left = '0px';
  99                         }
 100
 101                         if (this.props.direction === 'right') {
 102                                 style.right = '0px';
 103                         }
 104                 }
 105         }
 106
 107 }
 108
 109 export default SlidePanel;