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
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { isWidthDown } from '@material-ui/core/withWidth';
import classNames from 'classnames';
import CloseIcon from '@material-ui/icons/Close';
import ExpandIcon from '@material-ui/icons/CallMade';
import MinimizeIcon from '@material-ui/icons/CallReceived';
import { withWidth, Tooltip, IconButton } from '@material-ui/core';
import styles from './panel-jss';
class FloatingPanel extends React.Component {
state = {
expanded: false
}
toggleExpand() {
this.setState({ expanded: !this.state.expanded });
}
render() {
const {
classes,
openForm,
closeForm,
children,
branch,
title,
extraSize,
width
} = this.props;
const { expanded } = this.state;
return (
<div>
<div className={
classNames(
classes.formOverlay,
openForm && (isWidthDown('sm', width) || expanded) ? classes.showForm : classes.hideForm
)}
/>
<section className={
classNames(
!openForm ? classes.hideForm : classes.showForm,
expanded ? classes.expanded : '',
classes.floatingForm,
classes.formTheme,
extraSize && classes.large
)}
>
<header>
{ title }
<div className={classes.btnOpt}>
<Tooltip title={expanded ? 'Exit Full Screen' : 'Full Screen'}>
<IconButton className={classes.expandButton} onClick={() => this.toggleExpand()} aria-label="Expand">
{expanded ? <MinimizeIcon /> : <ExpandIcon />}
</IconButton>
</Tooltip>
<Tooltip title="Close">
<IconButton className={classes.closeButton} onClick={() => closeForm(branch)} aria-label="Close">
<CloseIcon />
</IconButton>
</Tooltip>
</div>
</header>
{children}
</section>
</div>
);
}
}
FloatingPanel.propTypes = {
classes: PropTypes.object.isRequired,
openForm: PropTypes.bool.isRequired,
closeForm: PropTypes.func.isRequired,
children: PropTypes.node.isRequired,
branch: PropTypes.string.isRequired,
width: PropTypes.string.isRequired,
title: PropTypes.string,
extraSize: PropTypes.bool,
};
FloatingPanel.defaultProps = {
title: 'Añadir nuevo',
extraSize: false,
};
const FloatingPanelResponsive = withWidth()(FloatingPanel);
export default withStyles(styles)(FloatingPanelResponsive);
|
