<div class="Collapsible js-collapsible " id="" style="">
<div class="Collapsible-trigger js-collapsible-trigger">
<div>
<p id="" class="">
<a class="">
<span id="" class="" style="">Span this</span>
</a>
</p>
</div>
</div>
<div class="Collapsible-container js-collapsible-container ">
<div>
<p id="" class="" style="background-color: #ccc;">
Porro quia non voluptatem. Ullam praesentium reiciendis sed molestias. Et non provident nostrum sed dolor sapiente totam maiores. Aut aut vero et ea quos iste. Laborum officia laboriosam culpa. Beatae excepturi quae. Vero possimus laboriosam alias consequuntur
earum. A libero eveniet. Quis quia aut quo exercitationem eaque omnis a placeat. Et necessitatibus iusto consequuntur iure unde. Accusamus inventore ut minima non deserunt.
</p>
<label>
<span>
Text
</span>
<input
id="text"
name="text"
type="text"
class=""
autocomplete
/>
</label>
</div>
</div>
</div>
<div class="Collapsible js-collapsible {{modifier}}" id="{{id}}" style="{{style}}">
<div class="Collapsible-trigger js-collapsible-trigger">
<div>
{{> @children children=trigger}}
</div>
</div>
<div class="Collapsible-container js-collapsible-container {{containerModifier}}">
<div>
{{> @children children=container}}
</div>
</div>
</div>
{
"modifier": null,
"containerModifier": null,
"trigger": [
{
"component": "p",
"context": {
"children": [
{
"component": "link",
"context": {
"children": [
{
"component": "span"
}
]
}
}
]
}
}
],
"container": [
{
"component": "p",
"context": {
"text": "Porro quia non voluptatem. Ullam praesentium reiciendis sed molestias. Et non provident nostrum sed dolor sapiente totam maiores. Aut aut vero et ea quos iste. Laborum officia laboriosam culpa. Beatae excepturi quae. Vero possimus laboriosam alias consequuntur earum. A libero eveniet. Quis quia aut quo exercitationem eaque omnis a placeat. Et necessitatibus iusto consequuntur iure unde. Accusamus inventore ut minima non deserunt.",
"style": "background-color: #ccc;"
}
},
{
"component": "input"
}
]
}
const PropTypes = require('prop-types');
const React = require('react');
const ReactDOM = require('react-dom');
const cx = require('classnames');
const uniqueId = require('lodash/util').uniqueId;
const debounce = require('lodash/function').debounce;
const toggleSlide = require('@sproutsocial/sprout-brand/modules/toggle-slide').default;
const CollapsibleTrigger = ({toggle, collapsed, ariaControls, children}) => {
return(
<div
className="Collapsible-trigger"
onClick={toggle}
aria-controls={ariaControls}
aria-expanded={!collapsed}
>
<div dangerouslySetInnerHTML={{__html: children}}></div>
</div>
);
};
CollapsibleTrigger.propTypes = {
toggle: PropTypes.func,
collapsed: PropTypes.bool,
ariaControls: PropTypes.string,
children: PropTypes.string
};
class CollapsibleContainer extends React.Component {
static propTypes = {
id: PropTypes.string,
collapsed: PropTypes.bool,
children: PropTypes.string
};
render() {
return(
<div
id={this.props.id}
aria-hidden={this.props.collapsed}
className={cx(
'Collapsible-container',
{
'is-open': !this.props.collapsed
}
)}
>
<div dangerouslySetInnerHTML={{__html: this.props.children}}></div>
</div>
);
}
}
class Collapsible extends React.Component {
static propTypes = {
collapsed: PropTypes.bool,
toggle: PropTypes.func,
trigger: PropTypes.string,
container: PropTypes.string
};
static defaultProps = {
collapsed: true
};
constructor(props) {
super(props);
this.containerDiv = null;
this.instanceId = uniqueId('collapsible-');
this.state = {
collapsed: props.collapsed
};
}
toggle = () => {
toggleSlide(ReactDOM.findDOMNode(this.containerDiv));
this.setState({
collapsed: !this.state.collapsed
});
};
render() {
return(
<div className="Collapsible">
<CollapsibleTrigger toggle={debounce(this.toggle,20)} collapsed={this.state.collapsed} ariaControls={this.instanceId}>
{this.props.trigger}
</CollapsibleTrigger>
<CollapsibleContainer ref={(div) => { this.containerDiv = div; }} collapsed={this.state.collapsed} id={this.instanceId}>
{this.props.container}
</CollapsibleContainer>
</div>
);
}
}
module.exports = Collapsible;
.Collapsible {
&-container {
display: none;
> div {
padding: 1px 0; // prevent child element margins from sticking outside of this div
}
}
}
There are no notes for this item.