Created
March 8, 2019 18:29
-
-
Save aschyiel/a850e346e2aab584ae66ab27b6e96632 to your computer and use it in GitHub Desktop.
POC slick input wrapper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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> | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CARE: interesting idea; but too janky at this level of abstraction.