const NavigationBar = () => ( <Styles> <Navbar expand="lg"> <Navbar.Brand href="/">Shoreline IoT</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav"/> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> <Nav.Item><Nav.Link href="/">Notification</Nav.Link></Nav.Item> <Nav.Item><Nav.Link href="/organization">Quick Link</Nav.Link></Nav.Item> </Nav> </Navbar.Collapse> </Navbar> </Styles> )
moviesDisplayed.map(movie => { return (<Carousel.Item key={movie.movId}> <a onClick={() => { let item = document.getElementById('mov' + movie.movId); if (item != null) item.scrollIntoView({block: 'center', behavior: 'smooth'}) }} className="click-icon"> <img src={movie.backdrop} alt={movie.name} className="carousel-image"/> </a> <Carousel.Caption> <h3>{movie.name}</h3> <p>{movie.name}</p> </Carousel.Caption> </Carousel.Item>) })
renderMoreAction() { const { post } = this.props; const user = this.context; if (user && user.signedIn && post.author === user.username) { return ( <Dropdown className="float-right"> <Dropdown.Toggle variant="light" id="dropdown-basic" className="btn-sm" bsPrefix> <FontAwesomeIcon icon={faEllipsisH} title="more action" /> </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item href={`/editPost/${post._id}`}>Edit</Dropdown.Item> <Dropdown.Item onClick={this.onDelete}>Delete</Dropdown.Item> </Dropdown.Menu> </Dropdown> ); } return ''; }
const ListItem = (props) => { const item = props.isMobile ? ( <ListGroup.Item className={props.className}> <NavLink to={props.link} className="link"> <SVGIcon name={props.name} isMobile={true} /> </NavLink> </ListGroup.Item> ) : ( <ListGroup.Item className={props.className}> <SVGIcon name={props.name} /> <NavLink to={props.link} className="link"> <b>{props.name}</b> </NavLink> </ListGroup.Item> ); return item; }
const UrlLocation = () => ( <Breadcrumb> <LinkContainer to='/'><Breadcrumb.Item>Home</Breadcrumb.Item></LinkContainer> {routes.map((route, index) => ( <Route path={route.path} key={index} render={({location})=> ( <LinkContainer to={location.pathname}> <Breadcrumb.Item>{route.title}</Breadcrumb.Item> </LinkContainer> ) }/> ))} </Breadcrumb> )
render() { const {setTab, tabIndex} = this.props; return ( <Grid> <Description /> <Tabs currTab={tabIndex} tabClick={(tabIndex) => setTab(tabIndex)} /> <hr/> <Carousel activeIndex={tabIndex} controls={false} direction={null} indicators={false}> <Carousel.Item> <SelectProducts /> </Carousel.Item> <Carousel.Item> <ContactBilling /> </Carousel.Item> </Carousel> <hr/> <LowerNav currTab={tabIndex} tabClick={(tabIndex) => setTab(tabIndex)} /> </Grid>); }
const PaginationManager = (props) => { const paginationItems = []; let i; for (i = 1; i <= props.pages; i++) { let n = i; paginationItems.push(<Pagination.Item key={n} onClick={() => props.handlePagination(n)}>{n}</Pagination.Item>); } return ( <div> <Pagination> {/*<Pagination.First />*/} {/*<Pagination.Prev />*/} {paginationItems} {/*<Pagination.Next />*/} {/*<Pagination.Last />*/} </Pagination> </div> ); }
render() { const {theme} = this.state; const themeClass = theme ? theme.toLowerCase() : 'default'; return ( <div> <DropdownButton id="SplitButton" size="large" bsstyle={themeClass} title={`${theme || 'Default'} Theme`}> <Dropdown.Item eventKey="Primary" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item> <Dropdown.Item eventKey="Danger" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item> <Dropdown.Item eventKey="Success" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item> <Dropdown.Divider/> <Dropdown.Item eventKey="Reset" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item> </DropdownButton> <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`}> {theme || 'Default'} Theme </span> </div> ); }
render() { const { searchPlaceholder, results } = this.props; const { searchText } = this.state; const listGroupItems = results.map((result, index) => <ListGroup.Item key={index} data-index={index} action onClick={this.handleSelection}>{result}</ListGroup.Item>); // let listGroupItems = []; // for (var i = 0; i < results.length; i++) { // listGroupItems.push(<ListGroup.Item>{results[i]}</ListGroup.Item>) // } return ( <div className="search-box"> <Form.Control type="text" placeholder={searchPlaceholder} value={searchText} onChange={this.handleInputChange}/> <ListGroup className="search-results"> {listGroupItems} </ListGroup> </div> ) }