| /* |
| * Copyright (c) 2018 StreamNative. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import React, { Component } from 'react'; |
| import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap'; |
| |
| class ButtonDropdowns extends Component { |
| |
| constructor(props) { |
| super(props); |
| |
| this.toggle = this.toggle.bind(this); |
| this.state = { |
| dropdownOpen: new Array(19).fill(false), |
| }; |
| } |
| |
| toggle(i) { |
| const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); }); |
| this.setState({ |
| dropdownOpen: newArray, |
| }); |
| } |
| |
| render() { |
| return ( |
| <div className="animated fadeIn"> |
| <Row> |
| <Col xs="12"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Button Dropdown</strong> |
| <div className="card-header-actions"> |
| <a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action"> |
| <small className="text-muted">docs</small> |
| </a> |
| </div> |
| </CardHeader> |
| <CardBody> |
| <ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}> |
| <DropdownToggle caret> |
| Button Dropdown |
| </DropdownToggle> |
| <DropdownMenu right> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| </CardBody> |
| </Card> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Single button dropdowns</strong> |
| </CardHeader> |
| <CardBody> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}> |
| <DropdownToggle caret color="primary"> |
| Primary |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[2]} toggle={() => { this.toggle(2); }}> |
| <DropdownToggle caret color="secondary"> |
| Secondary |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[3]} toggle={() => { this.toggle(3); }}> |
| <DropdownToggle caret color="success"> |
| Success |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[4]} toggle={() => { this.toggle(4); }}> |
| <DropdownToggle caret color="info"> |
| Info |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[5]} toggle={() => { this.toggle(5); }}> |
| <DropdownToggle caret color="warning"> |
| Warning |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[6]} toggle={() => { this.toggle(6); }}> |
| <DropdownToggle caret color="danger"> |
| Danger |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| </CardBody> |
| </Card> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Split button dropdowns</strong> |
| </CardHeader> |
| <CardBody> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}> |
| <Button id="caret" color="primary">Primary</Button> |
| <DropdownToggle caret color="primary" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}> |
| <Button id="caret" color="secondary">Secondary</Button> |
| <DropdownToggle caret color="secondary" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}> |
| <Button id="caret" color="success">Success</Button> |
| <DropdownToggle caret color="success" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}> |
| <Button id="caret" color="info">Info</Button> |
| <DropdownToggle caret color="info" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}> |
| <Button id="caret" color="warning">Warning</Button> |
| <DropdownToggle caret color="warning" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}> |
| <Button id="caret" color="danger">Danger</Button> |
| <DropdownToggle caret color="danger" /> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem divider /> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| </CardBody> |
| </Card> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Dropdown directions</strong> |
| </CardHeader> |
| <CardBody> |
| <ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}> |
| <DropdownToggle caret size="lg"> |
| Direction Up |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}> |
| <DropdownToggle caret size="lg"> |
| Direction Left |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}> |
| <DropdownToggle caret size="lg"> |
| Direction Right |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}> |
| <DropdownToggle caret size="lg"> |
| Default Down |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| </CardBody> |
| </Card> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong> |
| </CardHeader> |
| <CardBody> |
| <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[13]} toggle={() => { this.toggle(13); }}> |
| <DropdownToggle caret size="lg"> |
| Large Button |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| <ButtonDropdown isOpen={this.state.dropdownOpen[14]} toggle={() => { this.toggle(14); }}> |
| <DropdownToggle caret size="sm"> |
| Small Button |
| </DropdownToggle> |
| <DropdownMenu> |
| <DropdownItem header>Header</DropdownItem> |
| <DropdownItem disabled>Action Disabled</DropdownItem> |
| <DropdownItem>Action</DropdownItem> |
| <DropdownItem>Another Action</DropdownItem> |
| </DropdownMenu> |
| </ButtonDropdown> |
| </CardBody> |
| </Card> |
| </Col> |
| </Row> |
| </div> |
| ); |
| } |
| } |
| |
| export default ButtonDropdowns; |