blob: 10c532630033cead9a52962af5a8b57737b3b5fc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
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;
|
