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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
	);
}