onion/js/components/ascribe_forms/property_collapsible.js

'use strict';

import React from 'react';
import ReactAddons from 'react/addons';

import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';

import classNames from 'classnames';


let PropertyCollapsile = React.createClass({
    propTypes: {
        children: React.PropTypes.arrayOf(React.PropTypes.element),
        checkboxLabel: React.PropTypes.string,
        tooltip: React.PropTypes.string
    },

    mixins: [CollapsibleMixin],

    getInitialState() {
        return {
            show: false
        };
    },

    getCollapsibleDOMNode(){
        return React.findDOMNode(this.refs.panel);
    },

    getCollapsibleDimensionValue(){
        return React.findDOMNode(this.refs.panel).scrollHeight;
    },

    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
                });
            });
        }
    },

    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-settings-wrapper'}
                style={style}>
                <OverlayTrigger
                    delay={500}
                    placement="top"
                    overlay={tooltip}>
                    <div
                        className="ascribe-settings-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>
                <div
                    className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'}
                    ref="panel">
                        {this.renderChildren()}
                </div>
            </div>
        );
    }
});

export default PropertyCollapsile;