Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React + react-query + bootstrap
.DropDown-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.DropDown.open .DropDown-backdrop{
display: block;
}
/** @jsx React.DOM */
var React = require("react");
var VError = require("verror");
var $ = require("react-query");
var DropDown = React.createClass({
propTypes: {
children: function validateChildren(props, propName, componentName) {
var $children = $(props.children);
if($children.size() !== 1) {
return new Error("Children shoult contain exactly one element.");
}
if($children.find(".dropdown").size() !== 1) {
return new Error("Children should contain exactly one .dropdown element.");
}
if($children.find(".dropdown-toggle").size() !== 1) {
return new Error("Children should contain exactly one .dropdown-toggle element.");
}
if($children.find(".dropdown-menu").size() !== 1) {
return new Error("Children should contain exactly one .dropdown-menu element.");
}
},
initiallyToggled: React.PropTypes.bool,
},
getInitialState: function getInitialState() {
return { toggled: this.props.initiallyToggled };
},
getDefaultProps: function getDefaultProps() {
return { initiallyToggled: false };
},
_toggle: function _toggle() {
this.setState({ toggled: !this.state.toggled });
},
render: function render() {
var _this = this;
return $(this.props.children).replace({
".dropdown": function() { return $(this).toggleClass("open", _this.state.toggled); },
".dropdown-toggle": function() { return $(this).props({ onClick: _this._toggle }); },
".dropdown-backdrop": function() { return $(this).props({ onClick: _this._toggle }); },
}).addClass("DropDown").append(
<div className="DropDown-backdrop" onClick={this._toggle} />
).single();
},
});
module.exports = DropDown;
/** @jsx React.DOM */
var React = require("react");
var DropDown = require("./DropDown");
React.renderComponent(<DropDown>
<div className="dropdown">
<a className="dropdown-toggle">Toggle</a>
<ul className="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</DropDown>, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment