reactstrap#DropdownMenu JavaScript Examples
The following examples show how to use
reactstrap#DropdownMenu.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: NavMenu.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar className="ui-header" expand="md">
<NavbarBrand className="ui-header-brand">Hexacta Labs</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<UncontrolledDropdown className="ui-header-options" nav inNavbar>
<DropdownToggle caret>
<FaUserInjured />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag={() => (
<Link className="dropdown-item" to="/logout">
Salir
</Link>
)}
/>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
);
}
Example #2
| Source File: LanguageDropdown.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
LanguageDropdown = () => {
const [dropdownOpen, setDropdownOpen] = React.useState(false)
const [language, setLanguage] = React.useState('')
const languages = ['JavaScript', 'Ruby', 'Java', 'C#']
const toggle = () => setDropdownOpen(prevState => !prevState)
return (
<div className="p-2 d-inline-block">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Programming Language
</DropdownToggle>
<DropdownMenu style={{ width: '214px' }}>
{languages.map(lang => {
return (
<DropdownItem key={lang} onClick={() => setLanguage(lang)}>
{lang}
</DropdownItem>
)
})}
</DropdownMenu>
</Dropdown>
{language ? <h4>You selected: {language}</h4> : null}
</div>
)
}
Example #3
| Source File: CardHeader.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<CardBody>
<UncontrolledDropdown className="float-right">
<DropdownToggle tag="i" style={{cursor:"pointer"}} className="arrow-none">
<i className="mdi mdi-dots-vertical m-0 text-muted font-size-20"></i>
</DropdownToggle >
<DropdownMenu right>
<DropdownItem>Edit</DropdownItem>
<DropdownItem>Delete</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<h4 className="card-title">{this.props.title}</h4>
<p className="mb-0">{this.props.columnsubtitle}</p>
</CardBody>
</React.Fragment>
);
}
Example #4
| Source File: UserConfig.jsx From watchmo with MIT License | 6 votes |
|
UserConfig = () => {
// setting the state for the drop down button with typescript
const [dropdownCatOpen, setCatOpen] = React.useState;
// function that is in charge of changing the state
const toggleCat = () => {
setCatOpen(!dropdownCatOpen);
};
// request file from backend and loop through categories to create category selectors
// replace this arrayOfCategories with logic that parses the response object into specific cats
const arrayOfCategories = ['Cat 1', 'Cat 2', 'Cat 3'];
const categories = [];
for (let i = 0; i < arrayOfCategories.length; i += 1) {
categories.push(<DropdownItem key={i}> {arrayOfCategories[i]} </DropdownItem>);
}
return (
<div id="UserConfig">
<h1> User Config </h1>
<button type="button" className="userDashboard">
Back to User Dashboard
</button>
<div className="configCategoriesDrop">
<ButtonDropdown isOpen={dropdownCatOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Categories:
</DropdownToggle>
<DropdownMenu>{categories}</DropdownMenu>
</ButtonDropdown>
</div>
<div>
<ConfigDashboard />
</div>
</div>
);
}
Example #5
| Source File: LteNavDropdown.jsx From react-lte with MIT License | 6 votes |
|
LteNavDropdown = ({ icon, badgeText, badgeColor, children }) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(!dropdownOpen);
return (
<Dropdown tag='li' isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle nav>
<FontAwesomeIcon icon={icon} />
<Badge color={badgeColor} className='navbar-badge'>
{badgeText}
</Badge>
</DropdownToggle>
<DropdownMenu right className='dropdown-menu-lg'>
{children}
</DropdownMenu>
</Dropdown>
);
}
Example #6
| Source File: Tables.js From covidsos with MIT License | 6 votes |
|
getDropDown(tableConfig, rowData) {
return (
<UncontrolledDropdown>
<DropdownToggle
className="btn-icon-only text-light"
href="#"
role="button"
color=""
onClick={e => e.preventDefault()}>
<i className="fas fa-ellipsis-h"/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{
tableConfig.actions.map(action => {
return (
<DropdownItem href="#" key={action.key + '_' + (rowData.r_id || rowData.v_id)}
onClick={e => {
this.takeAction(action, rowData, tableConfig);
e.preventDefault();
}}>
{action.name}
</DropdownItem>
);
})
}
</DropdownMenu>
</UncontrolledDropdown>
);
}
Example #7
| Source File: index.js From relay_09 with MIT License | 6 votes |
|
MyNav = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="primary" light expand="md">
<NavbarBrand href="/" id="navItem">
<b>?하부리?</b>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://49.50.160.6:8080/">Chat</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>하부리란?</DropdownItem>
<DropdownItem>하부리 기능</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText id="navItem">Latta is horse</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #8
| Source File: UserDropDown.js From covidsos with MIT License | 5 votes |
|
render() {
const {className, dropDownToggleClassName} = this.props;
const loggedIn = isLoggedIn();
const username = (loggedIn && localStorage.getItem(config.fullNameStorageKey)) || 'Login';
return (
<Nav className={className} navbar>
<UncontrolledDropdown nav>
<DropdownToggle className={dropDownToggleClassName} nav>
<Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle">
<i className="fas fa-user"/>
</span>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold">
{username}
</span>
</Media>
</Media>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{loggedIn ?
<>
<DropdownItem href="#" onClick={e => {
localStorage.clear();
e.preventDefault();
this.props.history.push("/");
}}>
<i className="ni ni-user-run"/>
<span>Logout</span>
</DropdownItem>
</>
:
<>
<DropdownItem href="#" onClick={() => this.props.history.push("/login")}>
<i className="fas fa-user"/>
<span>Volunteer</span>
</DropdownItem>
<DropdownItem href="#" onClick={() => this.props.history.push("/admin-login")}>
<i className="fas fa-users"/>
<span>Admin</span>
</DropdownItem>
</>
}
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
)
;
}
Example #9
| Source File: DefaultHeader.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
// eslint-disable-next-line
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile />
<AppNavbarBrand
full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }}
/>
<AppSidebarToggler className="d-md-down-none" display="lg" />
{/* <Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<Link to="/users" className="nav-link">Users</Link>
</NavItem>
<NavItem className="px-3">
<NavLink to="#" className="nav-link">Settings</NavLink>
</NavItem>
</Nav> */}
<Nav className="ml-auto" navbar>
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem> */}
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
</NavItem> */}
{/* <NavItem className="d-md-down-none">
<NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
</NavItem> */}
<UncontrolledDropdown nav direction="down">
<DropdownToggle nav>
<img src={'../../assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
</DropdownToggle>
<DropdownMenu right>
{/* <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem> */}
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
{/* <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem> */}
{/* <DropdownItem divider />
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem> */}
<DropdownItem onClick={this.handleLogout}><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
{/* <AppAsideToggler className="d-md-down-none" /> */}
{/*<AppAsideToggler className="d-lg-none" mobile />*/}
</React.Fragment>
);
}
Example #10
| Source File: RevenueByLocations.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Col lg={4}>
<Card>
<CardBody>
<Dropdown className="float-right" isOpen={this.state.menu} toggle={() => this.setState({menu : !this.state.menu})}>
<DropdownToggle tag="i" className="darrow-none card-drop" aria-expanded="false">
<i className="mdi mdi-dots-vertical"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="">Sales Report</DropdownItem>
<DropdownItem href="">Export Report</DropdownItem>
<DropdownItem href="">Profit</DropdownItem>
<DropdownItem href="">Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<h4 className="card-title mb-4">Revenue by Locations</h4>
<div id="usa-vectormap" style={{height: "196px"}}>
<Vector
value="us_aea"
width="200"
color="#e8ecf4"
/>
</div>
<Row className="justify-content-center">
<Col xl={5} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2542</h5>
<p className="text-muted mb-0 text-truncate">California :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2245</h5>
<p className="text-muted mb-0 text-truncate">Nevada :</p>
</div>
</div>
</Col>
<Col xl={{size:5, offset:1}} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2156</h5>
<p className="text-muted mb-0 text-truncate">Montana :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 1845</h5>
<p className="text-muted mb-0 text-truncate">Texas :</p>
</div>
</div>
</Col>
</Row>
<div className="text-center mt-4">
<Link to="#" className="btn btn-primary btn-sm">Learn more</Link>
</div>
</CardBody>
</Card>
</Col>
</React.Fragment>
);
}
Example #11
| Source File: Navbars.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
{/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
{/*waiting for [email protected]*/}
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
</CardHeader>
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
</div>
);
}
Example #12
| Source File: ProjectSelect.jsx From watchmo with MIT License | 5 votes |
|
function ProjectSelect() {
// setting the state for the drop down button with typescript
const [dropdownProjOpen, setProjOpen] = useState(false);
const { project, updateProject } = useContext(ProjectContext);
// these are used to grab data from watchmo and loaded it into the state
const [projsFromServer, setProjsFromServer] = useState([1, 2]);
const [projGained, setDataGained] = useState(false);
// function that is in charge of changing the state
const toggleCat = () => {
setProjOpen(!dropdownProjOpen);
};
useEffect(() => {
if (!projGained) {
fetch('/projectNames.json')
.then(data => data.json())
.then(parsed => {
setProjsFromServer(parsed);
});
setDataGained(true);
}
}, [projsFromServer]);
const projcategoriesInDropDown = [];
for (const projects of projsFromServer) {
projcategoriesInDropDown.push(
<DropdownItem key={projects} onClick={() => updateProject({ projects })}>
{projects}
</DropdownItem>
);
}
return (
<div id="projectSelect">
<div className="projDrop">
<ButtonDropdown isOpen={dropdownProjOpen} toggle={toggleCat}>
<DropdownToggle caret color="primary">
Projects:
</DropdownToggle>
<DropdownMenu>{projcategoriesInDropDown}</DropdownMenu>
</ButtonDropdown>
</div>
{project.projects && (
<div>
<div id="userDashBtn">
<Link to="/userDashBoard">
<Button size="md" type="button" className="btnSecondary">
DASHBOARD
</Button>
</Link>
</div>
<div id="configBtn">
<Link to="/configDash">
<Button type="button" className="btnSecondary">
CONFIG
</Button>
</Link>
</div>
</div>
)}
</div>
);
}
Example #13
| Source File: Job.component.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
Job = ({ job }) => {
const {
userId,
jobTitle,
jobCreatorLogo,
jobLocation,
// jobApplyURL,
jobCreator,
dateModified,
jobDescription,
jobWorkType,
} = job;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
return (
<ListGroupItem className="job-card" key={userId}>
<div className="d-flex flex-column">
<div className="job-card--header mb-3">
{jobCreatorLogo ? (
<img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
) : (
<h3 className="company mr-4">{jobCreator}</h3>
)}
<span className="text-tiny job-time">
{moment(dateModified).fromNow()}
</span>
<Dropdown
className="drop-down-icon"
isOpen={dropdownOpen}
toggle={toggle}
>
<DropdownToggle>
<FontAwesomeIcon icon={faEllipsisV} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
</DropdownItem>
<DropdownItem>
<FontAwesomeIcon icon={faBan} className="mr-2" />
Not Interested
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="mr-auto">
<h4 className="job-card--title text-dark">{jobTitle}</h4>
<h6 className="text-muted">
<FontAwesomeIcon icon={faMapMarkerAlt} />
<span className="ml-2">{jobLocation}</span>
</h6>
<p>
{jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
</p>
<Badge className="p-2 mt-1 mr-2" color="primary">
{jobWorkType}
</Badge>
</div>
</div>
</ListGroupItem>
);
}
Example #14
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { isOpen, isOpenToggler } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Navbar</strong>
</h5>
<div className="mb-5">
<Navbar color="light" expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
<h5 className="mb-4">
<strong>Navbar Toggler</strong>
</h5>
<div className="mb-5">
<Navbar color="faded">
<NavbarBrand href="/" className="mr-auto">
reactstrap
</NavbarBrand>
<NavbarToggler onClick={this.toggleToggler} className="mr-2" />
<Collapse isOpen={!isOpenToggler} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</div>
)
}
Example #15
| Source File: NavBar.js From covid19 with MIT License | 5 votes |
|
render() {
const { scale, lang, darkMode, languageToggle } = this.props
return (
<div className="nav-bar">
<UncontrolledDropdown>
<DropdownToggle
tag="div"
className="nav-bar-icon"
data-toggle="dropdown"
data-tip={i18n.LANGUAGE_HELP_TEXT[lang]}
>
{i18n.LANGUAGE[lang]}
</DropdownToggle>
<DropdownMenu>
{Object.keys(i18n.LANGUAGE).map((x) => (
<DropdownItem
key={x}
className={x === lang ? 'current' : ''}
onClick={() => languageToggle(x)}
>
{i18n.LANGUAGE[x]}
</DropdownItem>
))}
</DropdownMenu>
</UncontrolledDropdown>
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.props.darkModeToggle}>
{darkMode ? i18n.DARK[lang] : i18n.LIGHT[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={darkMode ? i18n.LIGHT_MODE_HELP_TEXT[lang] : i18n.DARK_MODE_HELP_TEXT[lang]}
onClick={this.props.darkModeToggle}
onMouseEnter={() =>
this.setState({
darkModeText: darkMode ? i18n.LIGHT[lang] : i18n.DARK[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.darkModeText}
</div>
)}
{isMobile || isIPad13 ? (
<div className="nav-bar-icon" onTouchStart={this.onScaleChange}>
{scale === 'linear' ? i18n.LINEAR_SCALE[lang] : i18n.LOG_SCALE[lang]}
</div>
) : (
<div
className="nav-bar-icon"
data-tip={
scale === 'linear' ? i18n.LOG_SCALE_HELP_TEXT[lang] : i18n.LINEAR_SCALE_HELP_TEXT[lang]
}
onClick={this.onScaleChange}
onMouseEnter={() =>
this.setState({
scaleText: scale === 'linear' ? i18n.LOG_SCALE[lang] : i18n.LINEAR_SCALE[lang]
})}
onMouseLeave={this.setTexts}
>
{this.state.scaleText}
</div>
)}
<div className="nav-bar-icon" data-tip={i18n.RESET_HELP_TEXT[lang]} onClick={this.props.reset}>
{i18n.RESET[lang]}
</div>
</div>
)
}
Example #16
| Source File: index.js From strapi-plugins with MIT License | 5 votes |
|
Logout = ({ history: { push } }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(prev => !prev);
// -- add this role variable --
const role = get(auth.getUserInfo(), 'role') || 'admin';
// -- --- --
const handleGoTo = () => {
const id = get(auth.getUserInfo(), 'id');
push({
pathname: `/plugins/content-manager/collectionType/strapi::administrator/${id}`,
search: '?redirectUrl=/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleGoToAdministrator = () => {
push({
pathname: '/plugins/content-manager/collectionType/strapi::administrator',
});
};
const handleLogout = () => {
auth.clearAppStorage();
// -- send reload notice for login page using 'location.state'
// -- so we refresh to re-fetch content-types for a new user role
push('/auth/login', { reload: true });
// -- --- --
};
return (
<Wrapper>
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle>
{get(auth.getUserInfo(), 'username')}
<FontAwesomeIcon icon="caret-down" />
</DropdownToggle>
<DropdownMenu className="dropDownContent">
{/* -- add this condition -- */}
{role === 'admin' && (
<>
<DropdownItem onClick={handleGoTo} className="item">
<FormattedMessage id="app.components.Logout.profile" />
</DropdownItem>
<DropdownItem onClick={handleGoToAdministrator} className="item">
<FormattedMessage id="app.components.Logout.admin" />
</DropdownItem>
</>
)}
{/* -- --- -- */}
<DropdownItem onClick={handleLogout}>
<FormattedMessage id="app.components.Logout.logout" />
<FontAwesomeIcon icon="sign-out-alt" />
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</Wrapper>
);
}
Example #17
| Source File: Header.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
Header = () => {
const { isAuthenticated, user, loginUrl } = React.useContext(authContext);
const { authUrl, logoutRedirectUrl } = React.useContext(configContext);
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
const logoutUrl = `${authUrl}/logout?returnUrl=${logoutRedirectUrl}`;
return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand tag={Link} to="/">
EdLib Admin
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuthenticated && (
<NavItem>
<NavLink href={loginUrl}>Login</NavLink>
</NavItem>
)}
{user && (
<>
<NavItem>
<NavLink tag={Link} to="/system-status">
System status
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
{user.firstName} {user.lastName}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag="a" href={logoutUrl}>
Logg ut
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #18
| Source File: navbar.component.js From blogApp with MIT License | 5 votes |
|
render() {
return (
<Navbar color='dark' dark expand='lg'>
<Link
to='/'
className='navbar-brand'
style={{ fontFamily: "Monoton", fontWeight: "100" }}>
<img
src={logo}
style={{ maxWidth: "40px" }}
className='mx-2'
/>
BlogApp
</Link>
<NavbarToggler onClick={this.toggle} />{" "}
<Collapse isOpen={this.state.isOpen} navbar>
{this.state.user ? (
<Nav className='ml-auto mr-2' navbar>
<NavItem className='navbar-item'>
<ButtonDropdown
isOpen={this.state.isDropdownOpen}
toggle={this.dropdownToggle}>
<Button id='caret' color='primary'>
<FontAwesomeIcon
icon={faUser}
className='mr-2'
/>
{this.state.user.username}
</Button>
<DropdownToggle caret color='primary' />
<DropdownMenu right>
<Link
to='/myblogs/'
className='dropdown-item'>
My Blogs
</Link>
<DropdownItem divider />
<DropdownItem onClick={this.logout}>
logout
<FontAwesomeIcon
icon={faSignOutAlt}
className='ml-3'
/>
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</NavItem>
</Nav>
) : (
<Nav className='ml-auto' navbar>
<NavItem className='navbar-item'>
<Link className='nav-link' to='/login'>
Login
</Link>
</NavItem>
</Nav>
)}
</Collapse>
</Navbar>
);
}
Example #19
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const user = localStorage.getItem('user');
useEffect(() => {
if (!user) history.push('/login');
}, [])
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
history.push("/")
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Cancel
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #20
| Source File: CronjobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
if (list.spec.suspend == false) {
status = "READY"
} else {
status = "NOR READY"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
schedule: list.spec.schedule,
successfulJobsHistoryLimit: list.spec.successfulJobsHistoryLimit,
failedJobsHistoryLimit: list.spec.failedJobsHistoryLimit,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const joblist = this.state.joblist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="CronJOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
정보수정
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">이름</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder={params.name}
disabled
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Alias"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Rerun</DropdownItem>
<DropdownItem href="/view_yaml">View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<div>
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
</div>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td>클러스터</td>
<td>{test.name}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>Status</td>
<td>{test.status}</td>
</tr>
<tr>
<td>schedule</td>
<td>{test.schedule}</td>
</tr>
<tr>
<td>successfulJobsHistoryLimit</td>
<td>{test.successfulJobsHistoryLimit}</td>
</tr>
<tr>
<td>failedJobsHistoryLimit</td>
<td>{test.failedJobsHistoryLimit}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
<tr>
<td>Creator</td>
<td></td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
job Records
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div >
<CronjobResource joblist={joblist} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<JobDetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<Event eventlist={eventlist} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #21
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #22
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Dropdowns</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle caret>Clear</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<br />
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-primary" caret>
Primary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-secondary" caret>
Secondary
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-success" caret>
Success
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-info" caret>
Info
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-warning" caret>
Warning
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-danger" caret>
Danger
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-light" caret>
Light
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-dark" caret>
Dark
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Alignment</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Right Aligned Dropdown
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dividers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With dividers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Headers</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With headers
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem header>Header</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Icons</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With icons
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<i className="fe fe-activity mr-2" />
Reply
</DropdownItem>
<DropdownItem>
<i className="fe fe-clock mr-2" />
Share
</DropdownItem>
<DropdownItem>
<i className="fe fe-credit-card mr-2" />
Delete
</DropdownItem>
<DropdownItem>
<i className="fe fe-plus-circle mr-2" />
Add
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<i className="fe fe-settings mr-2" />
Settings
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Active Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
With active item
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem active>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Disabled Item</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" caret>
Disabled items
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem disabled>Another Action</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Enabled</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Sizing</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="lg" caret>
Large
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown className="mb-2 mr-2">
<DropdownToggle color="outline-default" size="sm" caret>
Small
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Split Buttons</strong>
</h5>
<UncontrolledButtonDropdown>
<Button color="outline-default">Split buttons</Button>
<DropdownToggle caret color="outline-default" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="col-lg-4 mb-5">
<h5 className="mb-4">
<strong>Dropup</strong>
</h5>
<UncontrolledButtonDropdown className="mb-2 mr-2" direction="up">
<DropdownToggle color="outline-default" caret>
Default
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem divider />
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
</div>
)
}
Example #23
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #24
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { activeTab } = this.state
return (
<div>
<div className="row">
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>No Bottom Border</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-noborder">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Icons</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Justified Pills</strong>
</h5>
<div className="mb-5">
<Nav pills justified>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Icons</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-12">
<h5 className="mb-4">
<strong>Vertical Pills</strong>
</h5>
<div className="mb-5">
<div className="row">
<div className="col-3">
<Nav pills vertical>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</div>
<div className="col-9">
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
When an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="3">
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
</TabContent>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #25
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage({ history }) {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('Sport')
const [date, setDate] = useState('')
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "Sport" &&
date !== "" &&
thumbnail !== null
) {
await api.post("/event", eventData, { headers: { user_id } })
setSuccess(true)
setTimeout(() => {
setSuccess(false)
}, 2000)
} else {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
const sportEventHandler = (sport) => setSport(sport);
console.log(sport)
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<div className="input-group">
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<FormGroup>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<Button id="caret" value={sport} disabled>{sport}</Button>
<DropdownToggle caret />
<DropdownMenu>
<DropdownItem onClick={() => sportEventHandler('running')}>running</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('cycling')}>cycling</DropdownItem>
<DropdownItem onClick={() => sportEventHandler('swimming')}>swimming</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</FormGroup>
</div>
<FormGroup>
<Button className="submit-btn">Submit</Button>
</FormGroup>
<FormGroup>
<Button className="secondary-btn" onClick={() => history.push("/")}>
Dashboard
</Button>
</FormGroup>
</Form>
{error ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was created successfully!</Alert>
) : ""}
</Container>
)
}
Example #26
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="" className="btn btn-success">
Left
</Button>
<Button color="" className="btn btn-success">
Middle
</Button>
<Button color="" className="btn btn-success">
Right
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="white" className="btn btn-rounded">
Left
</Button>
<Button color="white">Middle</Button>
<Button color="danger" className="btn btn-rounded">
Right
</Button>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Nesting Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="primary">1</Button>
<Button color="primary">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="light">1</Button>
<Button color="light">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-3">
<h5 className="mb-4">
<strong>Vertical Group</strong>
</h5>
<div className="btn-group-vertical mr-2 mb-2">
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
</div>
<ButtonGroup vertical>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Button color="light">Button</Button>
<Button color="primary">Button</Button>
<Button color="light">Button</Button>
</ButtonGroup>
</div>
</div>
)
}
Example #27
| Source File: Dropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[0]} toggle={() => {
this.toggle(0);
}}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> alignment</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle caret>
This dropdown's menu is right-aligned
</DropdownToggle>
<DropdownMenu right style={{right: 'auto'}}>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[2]} toggle={() => {this.toggle(2);}} size="lg" className="mb-3">
<DropdownToggle caret>
Large Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => {this.toggle(3);}} className="mb-3">
<DropdownToggle caret>
Normal Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[4]} toggle={() => {this.toggle(4);}} size="sm">
<DropdownToggle caret>
Small Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle
tag="span"
onClick={() => {this.toggle(5);}}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]}
>
Custom Dropdown Content <strong> * </strong>
</DropdownToggle>
<DropdownMenu>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div className="dropdown-item-text" onClick={() => {this.toggle(5);}}>Custom dropdown text 3</div>
<hr className="my-0 dropdown-item-text" />
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Uncontrolled Dropdown</strong>
</CardHeader>
<CardBody>
<UncontrolledDropdown>
<DropdownToggle caret>
Uncontrolled Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #28
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
AppModuleHeader = (props) => {
const [searchBox, setSearchBox] = useState(false);
const [popoverOpen, setPopOverOpen] = useState(false);
const onSearchBoxSelect = () => {
setSearchBox(!searchBox);
};
const toggle = () => {
setPopOverOpen(!popoverOpen)
};
const {placeholder, onChange, value, user, notification, apps} = props;
return (
<div className="module-box-header-inner" data-test="container-component">
<div className="search-bar right-side-icon bg-transparent d-none d-sm-block">
<div className="form-group">
<input className="form-control border-0" type="search" placeholder={placeholder}
data-test="input-component"
onChange={onChange}
value={value}/>
<button className="search-icon"><i className="zmdi zmdi-search zmdi-hc-lg"/></button>
</div>
</div>
<Popover className="p-3" placement="bottom" isOpen={popoverOpen} target="Popover1"
toggle={toggle} data-test="popover-component">
<h3>{user.name}</h3>
<h4>{user.email}</h4>
</Popover>
<div className="d-inline-block d-sm-none">
<Dropdown data-test="dropdown-component"
className="quick-menu nav-searchbox"
isOpen={searchBox}
toggle={onSearchBoxSelect}>
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className="zmdi zmdi-search zmdi-hc-fw text-grey"/>
</IconButton>
</DropdownToggle>
<DropdownMenu className="p-0">
<SearchBox styleName="search-dropdown" placeholder="" data-test="search-component"
onChange={onChange}
value={value}/>
</DropdownMenu>
</Dropdown>
</div>
<div className="module-box-header-right">
{apps && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-apps"/>
</IconButton>}
{notification && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-notifications-none"/>
</IconButton>}
<img className="ml-2 rounded-circle size-40 pointer" id="Popover1" alt={user.name}
data-test="pointer-component"
onMouseEnter={toggle}
onMouseLeave={toggle}
onClick={toggle}
src={user.avatar}/>
</div>
</div>
)
}
Example #29
| Source File: Dropdown.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
DropdownComponent = props => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const editContext = useContext(EditContext);
const colors = [
"black",
"red",
"orange",
"blue",
"green",
"deeppink",
"darkviolet",
"dodgerblue",
];
const setValue = aItemValue => {
if (colors.includes(aItemValue)) {
if (aItemValue === "dodgerblue") {
return "Light Blue";
} else if (aItemValue === "deeppink") {
return "Pink";
} else if (aItemValue === "darkviolet") {
return "Violet";
} else {
return aItemValue.charAt(0).toUpperCase() + aItemValue.slice(1);
}
} else {
return aItemValue;
}
};
const DropDownOptions = () => {
return (
<div>
{props.items.map((aItem, index) => (
<DropdownItem
onClick={getTargetFunc()}
name={
// prettier-ignore
props.type === "download"
? aItem
: `body${
props.type === "font"
? "Font"
: props.type === "font-weight"
? "FontWeight"
: "Color"
}`
}
value={aItem}
style={{
fontFamily: `${aItem}`,
color: `${aItem}`,
fontWeight: `${aItem}`,
}}
key={index}
>
{setValue(aItem)}
</DropdownItem>
))}
</div>
);
};
const getTargetFunc = () => {
if (
props.type === "font" ||
props.type === "color" ||
props.type === "font-weight"
)
return editContext.onValueChange;
else if (props.type === "download") return editContext.downloadAction;
return editContext.pageSrcHandler;
};
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret className={styles.drbtn}>
{props.name} ({props.active})
</DropdownToggle>
<DropdownMenu>
<DropDownOptions />
</DropdownMenu>
</Dropdown>
);
}
