POC slick input wrapper

slick.js.jsx

/**
* Slick UX for displaying text while allowing focus input.
*/
const React = require('react');
const classNames = require('classnames');

module.exports = React.createClass({
  getInitialState() {
    return {
      'toggled': false
    };
  },

  focus_handler() {
    var that = this;
    let toggled = true;
    const { focus_handler } = that.props;
    if ( focus_handler ) {
      toggled = focus_handler(ev);
    }
    that.setState({ toggled });
  },

  blur_handler(ev) {
    var that = this;
    let toggled = false;
    const { blur_handler } = that.props;
    if ( blur_handler ) {
      toggled = blur_handler(ev);
    }
    that.setState({ toggled });
  },

  // click_handler() {
  //   const { toggled } = this.state;
  //   if ( !toggled ) {
  //     this.setState({
  //       'toggled': true
  //     });
  //   }
  // },

  click_handler() {
    this.setState({
      'toggled': !this.state.toggled
    });
  },

  render() {
    var that = this;

    const {
      children
    , text
    } = that.props;

    const {
      toggled
    } = that.state;

    // GOTCHA: allow zero.
    const is_blank = (
      ''   === text ||
      null === text ||
      _.isUndefined(text)
    );

    return (
        /*onBlur={ that.blur_handler }
        onFocus={ that.focus_handler }
        onMouseEnter={ that.focus_handler }
        onMouseLeave={ that.blur_handler }*/
      <div className='slick'
        onClick={ that.click_handler }
        >
        <div className={ ( toggled )? null : 'visibility-very-hidden' } >
          { children }
        </div>

        {(function() {
          if ( !toggled ) {
            return (
              <text className={ classNames('animated fadeIn cursor-pointer', {
                'text-muted': is_blank
              }) }>
                { ( is_blank )? '---' : text }
              </text>
            );
          }
        })()}
      </div>
    );
  }
});

CARE: interesting idea; but too janky at this level of abstraction.