react-bootstrap#ToggleButtonGroup JavaScript Examples

The following examples show how to use react-bootstrap#ToggleButtonGroup. 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: mygroups.js    From SpotifyParty with MIT License 4 votes vote down vote up
render() {

        return (
            <div className="fullsize">
                { this.state.user !== null ?
                    <div className="fullsize">

                        <Accordion>
                            <Accordion.Toggle as={Card.Header} eventKey={1}>
                                Create Group
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey={1}>
                                <Card.Body>
                                    <form onSubmit={this.handleAddGroupSubmit}>
                                        <Form>
                                            <Form.Group>
                                            <Form.Control className="input" onChange={this.handleInputChange} name="newGroup" type="text" placeholder="Enter name" value={this.state.newGroup}/>
                                            </Form.Group>
                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                Create
                                            </Button>
                                        </Form>
                                    </form>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Accordion>
                        { this.state.groups !== null ?
                            <Accordion defaultActiveKey="0">
                                {   this.state.groups.map((group, index) =>
                                    {
                                        return (
                                        <Card>
                                            <Accordion.Toggle as={"button"} className="btn btn-secondary" onClick={this.handleSelectedGroup} value={group.groupname} eventKey={index}>
                                                {group.groupname}
                                            </Accordion.Toggle>
                                            <Accordion.Collapse eventKey={index}>
                                                <Card.Body>
                                                    <h4>Members</h4>
                                                    <ul id="MemberList">
                                                        {group.members.map((member, i) => {
                                                            var displayName = member.split("@")[0];
                                                            return(<h6>{displayName}</h6>)
                                                            })
                                                        }
                                                    </ul>
                                                    <Accordion>
                                                        <Accordion.Toggle as={Button} eventKey={3}>
                                                            Add Member
                                                        </Accordion.Toggle>
                                                       
                                                        <Accordion.Collapse eventKey={3}>
                                                            <Card.Body>
                                                                <form onSubmit={this.handleAddMemberSubmit}>
                                                                    <Form role="form">
                                                                        <Form.Group>
                                                                            <Form.Control name="newMemberGroup" type="hidden" value={this.state.groups[index].groupname}/>
                                                                            <Form.Control onChange={this.handleInputChange} name="newMember" type="email" placeholder="Enter email" value={this.state.newMember}/>
                                                                            
                                                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                                                Add
                                                                            </Button>
                                                                        </Form.Group>
                                                                    </Form>
                                                                </form>
                                                            </Card.Body>
                                                        </Accordion.Collapse>
                                                    </Accordion>
                                                    <h4 className="labelPlaylist">Playlists</h4>
                                                    <div id="fixedspacing">
                                                        <p></p>
                                                    </div>
                                                    <ToggleButtonGroup type="radio" name="playlists" vertical onChange={this.handleSelectedPlaylist}>
                                                        {group.playlists.map((playlist, i) => {
                                                            return(
            
                                                                <ToggleButton id="playlistbtns" value={[this.state.groups[index].playlists[i],this.state.groups[index].groupname]} >{playlist.name}</ToggleButton>
                                                                
                                                            )
                                                        })
                                                        }
                                                    </ToggleButtonGroup>
                                                    <div id="fixedspacing">
                                                        <p></p>
                                                    </div>
                                                    <Accordion>
                                                        <Accordion.Toggle as={Button} eventKey={2}>
                                                            Create Playlist
                                                        </Accordion.Toggle>
                                                       
                                                        <Accordion.Collapse eventKey={2}>
                                                            <Card.Body>
                                                                <form onSubmit={this.handleAddPlaylistSubmit}>
                                                                    <Form role="form">
                                                                        <Form.Group>
                                                                            <Form.Control name="newPlaylistGroup" type="hidden" value={this.state.groups[index].groupname}/>
                                                                            <Form.Control onChange={this.handleInputChange} name="newPlaylist" type="text" placeholder="Enter name" value={this.state.newPlaylist}/>
                                                                            
                                                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                                                Create
                                                                            </Button>
                                                                        </Form.Group>
                                                                    </Form>
                                                                </form>
                                                            </Card.Body>
                                                        </Accordion.Collapse>
                                                    </Accordion>
                                              </Card.Body>
                                            </Accordion.Collapse>
                                        </Card>
                                        
                                        )
                                    })
                                }
                            </Accordion> 
                        :
                            <div>
                                
                            </div>
                        }
                            
                    </div>
                    :
                    <h4>Not logged in</h4>
                }
                    
                
            </div>
        );
    }