refactor(Forms): move to InputGroupButtonDropdown where applicable

This commit is contained in:
xidedix 2019-03-25 15:36:01 +01:00
parent 7ad00e6a33
commit 24666f6681

View File

@ -2,7 +2,6 @@ import React, { Component } from 'react';
import {
Badge,
Button,
ButtonDropdown,
Card,
CardBody,
CardFooter,
@ -20,6 +19,7 @@ import {
Input,
InputGroup,
InputGroupAddon,
InputGroupButtonDropdown,
InputGroupText,
Label,
Row,
@ -739,21 +739,20 @@ class Forms extends Component {
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
@ -762,57 +761,54 @@ class Forms extends Component {
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
{/*<Button id="caret" color="primary">Action</Button>*/}
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>