<div id="app"></div>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -10px;
}
class DividerMenuItem extends React.Component {
render = () => <div className="dropdown-divider" />;
}
class DropDownHeader extends React.Component{
render = () => <h6 className="dropdown-header">{this.props.displayText}</h6>;
}
class DropDownMenuItem extends React.Component {
render = () => (
<a className="dropdown-item" href={this.props.link}>
{this.props.displayText}
</a>
);
}
class DropDownMenu extends React.Component {
render = () => (
<div className="dropdown-menu">
{this.props.menuItems.map((menuItem, index) => {
if (menuItem.link) {
return (
<DropDownMenuItem
key={index}
link={menuItem.link}
displayText={menuItem.displayText}
/>
);
} else if (menuItem.menuItems) {
return (
<div className="dropdown-submenu" key={index}>
<DropDown
displayText={menuItem.displayText}
buttonStyle=""
subMenu={true}
menuItems={menuItem.menuItems}
/>
</div>
);
} else if (menuItem.component) {
return <menuItem.component key={index} />;
} else if (menuItem.displayText) {
return <DropDownHeader key={index} displayText={menuItem.displayText} />;
} else {
return <DividerMenuItem key={index} />;
}
})}
</div>
);
}
class DropDown extends React.Component {
dropdownButtonClickHandler(e) {
let element = $(e.target);
$(".dropdown-submenu .dropdown-menu").removeAttr("style");
$(".dropdown-submenu .dropdown, .dropright").each(function() {
$(this)
.removeClass("dropright")
.addClass("dropdown");
});
element
.parents(".dropdown-submenu .dropdown")
.removeClass("dropdown")
.addClass("dropright");
element.parents(".dropdown-submenu .dropdown-menu").toggle();
element.next(".dropdown-menu").toggle();
//e.stopPropagation();
//e.preventDefault();
}
render = () => (
<div className="dropdown">
<button
type="button"
className={`${
this.props.subMenu ? "dropdown-item" : "btn"
} dropdown-toggle ${this.props.buttonStyle}`}
aria-haspopup="true"
aria-expanded="true"
onClick={event => this.dropdownButtonClickHandler(event)}
//{...this.props.dataToggle && {"data-toggle" : "dropdown"}}
//{...this.props.dataToggle && {"onClick": (event => this.dropdownButtonClickHandler(event)) }}
>
{this.props.displayText}
</button>
<DropDownMenu menuItems={this.props.menuItems} />
</div>
);
}
const LoginForm = props => (
<div>
<form className="px-4 py-3">
<div className="form-group">
<label htmlFor="exampleDropdownFormEmail1">Email address</label>
<input
type="email"
className="form-control"
id="exampleDropdownFormEmail1"
placeholder="email@example.com"
/>
</div>
<div className="form-group">
<label htmlFor="exampleDropdownFormPassword1">Password</label>
<input
type="password"
className="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="dropdownCheck"
/>
<label className="form-check-label" htmlFor="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" className="btn btn-primary">
Sign in
</button>
</form>
<div className="dropdown-divider" />
<a className="dropdown-item" href="#">
New around here? Sign up
</a>
<a className="dropdown-item" href="#">
Forgot password?
</a>
</div>
);
const menuItems = [
{ displayText: "Front-End" },
{ displayText: "HTML", link: "#" },
{ displayText: "CSS action", link: "#" },
{ displayText: "Javascript", link: "#" },
{},
{ displayText: "Back-End" },
{ displayText: "Java", link: "#" },
{ displayText: "C++", link: "#" },
{ displayText: "C#.NET", link: "#" },
{},
{ displayText: "Login", menuItems: [{ component: LoginForm }] },
{},
{
displayText: "Databases",
menuItems: [
{ displayText: "Oracle", link: "#" },
{ displayText: "SQL Server", link: "#" },
{ displayText: "MySQL", link: "#" },
{
displayText: "No-Sql",
menuItems: [
{ displayText: "Redis", link: "#" },
{ displayText: "MongoDB", link: "#" },
{ displayText: "MemCache", link: "#" }
]
}
]
}
];
ReactDOM.render(
<DropDown
displayText="Technologies"
buttonStyle="btn-danger"
menuItems={menuItems}
/>,
document.getElementById("app")
);
$(document).ready(() => {
$(document).on("click", () => {
if ($(document.activeElement).is("body, a")) {
$(".dropdown-menu").removeAttr("style");
}
});
});
Also see: Tab Triggers