Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Nicolas Frandeboeuf
kresus
Commits
76ceaed9
Commit
76ceaed9
authored
Jun 21, 2017
by
ZeHiro
Browse files
Create a generic foldable component
parent
510920fe
Changes
1
Hide whitespace changes
Inline
Side-by-side
client/components/ui/foldable-panel.js
0 → 100644
View file @
76ceaed9
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
class
FoldablePanel
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
expanded
:
props
.
initiallyExpanded
};
this
.
handleToggleExpand
=
this
.
handleToggleExpand
.
bind
(
this
);
}
handleToggleExpand
()
{
this
.
setState
({
expanded
:
!
this
.
state
.
expanded
});
}
render
()
{
let
{
expanded
}
=
this
.
state
;
let
{
top
,
iconTitle
,
children
,
title
}
=
this
.
props
;
let
icon
=
expanded
?
'
minus
'
:
'
plus
'
;
// Tells whether the panel is the first component from the top of the parent component.
let
maybeTopElement
=
top
?
'
top-panel
'
:
''
;
return
(
<
div
className
=
{
`
${
maybeTopElement
}
panel panel-default`
}
>
<
div
className
=
"
panel-heading clickable
"
onClick
=
{
this
.
handleToggleExpand
}
>
<
h3
className
=
"
title panel-title
"
>
{
title
}
<
/h3
>
<
div
className
=
"
panel-options
"
>
<
span
className
=
{
`option-legend fa fa-
${
icon
}
-square`
}
aria
-
label
=
{
iconTitle
}
title
=
{
iconTitle
}
/
>
<
/div
>
<
/div
>
<
div
className
=
"
panel-body
"
hidden
=
{
!
expanded
}
>
{
children
}
<
/div
>
<
/div
>
);
}
}
FoldablePanel
.
propTypes
=
{
// A boolean saying if the panel should or not be expanded at first render.
initiallyExpanded
:
PropTypes
.
bool
,
// The title of the panel.
title
:
PropTypes
.
string
.
isRequired
,
// The title to be displayed when the cursor is over the +/- icon.
iconTitle
:
PropTypes
.
string
,
// Tells wether the panel is the top element of the containing div.
top
:
PropTypes
.
bool
};
FoldablePanel
.
defaultProps
=
{
initiallyExpanded
:
false
,
top
:
false
};
export
default
FoldablePanel
;
Nicolas Frandeboeuf
@nicofrand
mentioned in commit
95570e52
·
Sep 09, 2017
mentioned in commit
95570e52
mentioned in commit 95570e52d19a9336f5a4a425b189b7fbee25a4ac
Toggle commit list
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment