gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Forms): move to InputGroupButtonDropdown where applicable

Browse Source
This commit is contained in:
xidedix 2019-03-25 15:36:01 +01:00
parent 7ad00e6a33
commit 24666f6681
1 changed files with 56 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/Base/Forms/Forms.js
View File

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