mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
Remove PropertyCollapsible
This commit is contained in:
parent
25372a3edf
commit
43c6ee929b
@ -1,96 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import ReactAddons from 'react/addons';
|
||||
|
||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||
import Panel from 'react-bootstrap/lib/Panel';
|
||||
|
||||
|
||||
let PropertyCollapsile = React.createClass({
|
||||
propTypes: {
|
||||
children: React.PropTypes.arrayOf(React.PropTypes.element),
|
||||
checkboxLabel: React.PropTypes.string,
|
||||
tooltip: React.PropTypes.string
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
|
||||
handleFocus() {
|
||||
this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
|
||||
this.setState({
|
||||
show: this.refs.checkboxCollapsible.getDOMNode().checked
|
||||
});
|
||||
},
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
|
||||
renderChildren() {
|
||||
if(this.state.show) {
|
||||
return ReactAddons.Children.map(this.props.children, (child) => {
|
||||
return ReactAddons.addons.cloneWithProps(child, {
|
||||
onChange: this.handleChange
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
// If the child input is a native HTML element, it will be reset automatically
|
||||
// by the DOM.
|
||||
// However, we need to collapse this component again.
|
||||
this.setState(this.getInitialState());
|
||||
},
|
||||
|
||||
render() {
|
||||
let tooltip = <span/>;
|
||||
if (this.props.tooltip){
|
||||
tooltip = (
|
||||
<Tooltip>
|
||||
{this.props.tooltip}
|
||||
</Tooltip>);
|
||||
}
|
||||
|
||||
let style = this.state.show ? {} : {paddingBottom: 0};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={'ascribe-property-wrapper'}
|
||||
style={style}>
|
||||
<OverlayTrigger
|
||||
delay={500}
|
||||
placement="top"
|
||||
overlay={tooltip}>
|
||||
<div
|
||||
className="ascribe-property-collapsible-toggle"
|
||||
onClick={this.handleFocus}
|
||||
onFocus={this.handleFocus}>
|
||||
<input
|
||||
onChange={this.handleChange}
|
||||
type="checkbox"
|
||||
ref="checkboxCollapsible"/>
|
||||
{/* PLEASE LEAVE THE SPACE BETWEEN LABEL and this.props.label */}
|
||||
<span className="checkbox"> {this.props.checkboxLabel}</span>
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
<Panel
|
||||
collapsible
|
||||
expanded={this.state.show}
|
||||
className="bs-custom-panel">
|
||||
<div className="ascribe-property">
|
||||
{this.renderChildren()}
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default PropertyCollapsile;
|
Loading…
Reference in New Issue
Block a user