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

refactor(Forms): toggleFade

Browse Source
This commit is contained in:
xidedix 2018-05-23 18:35:28 +02:00
parent 2582877699
commit 68b19fbe94
2 changed files with 94 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -1,7 +1,7 @@
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
##### `v2-next` ##### `v2-next`
- feat(Forms): FormFeedback valid - feat(Forms): FormFeedback valid, toggleFade
##### `v2.0.3` ##### `v2.0.3`
- refactor: disable `ServiceWorker` by default - refactor: disable `ServiceWorker` by default

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

@ -12,6 +12,7 @@ import {
DropdownItem, DropdownItem,
DropdownMenu, DropdownMenu,
DropdownToggle, DropdownToggle,
Fade,
Form, Form,
FormGroup, FormGroup,
FormText, FormText,
@ -29,13 +30,22 @@ class Forms extends Component {
super(props); super(props);
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { collapse: true }; this.toggleFade = this.toggleFade.bind(this);
this.state = {
collapse: true,
fadeIn: true,
timeout: 300
};
} }
toggle() { toggle() {
this.setState({ collapse: !this.state.collapse }); this.setState({ collapse: !this.state.collapse });
} }
toggleFade() {
this.setState((prevState) => { return { fadeIn: !prevState }});
}
render() { render() {
return ( return (
<div className="animated fadeIn"> <div className="animated fadeIn">
@ -1062,87 +1072,89 @@ class Forms extends Component {
</Row> </Row>
<Row> <Row>
<Col xs="12"> <Col xs="12">
<Card> <Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<CardHeader> <Card>
<i className="fa fa-edit"></i>Form Elements <CardHeader>
<div className="card-header-actions"> <i className="fa fa-edit"></i>Form Elements
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button> <div className="card-header-actions">
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button> <Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-close"><i className="icon-close"></i></Button> <Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
</div> <Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</CardHeader> </div>
<Collapse isOpen={this.state.collapse} id="collapseExample"> </CardHeader>
<CardBody> <Collapse isOpen={this.state.collapse} id="collapseExample">
<Form className="form-horizontal"> <CardBody>
<FormGroup> <Form className="form-horizontal">
<Label htmlFor="prependedInput">Prepended text</Label> <FormGroup>
<div className="controls"> <Label htmlFor="prependedInput">Prepended text</Label>
<InputGroup className="input-prepend"> <div className="controls">
<InputGroupAddon addonType="prepend"> <InputGroup className="input-prepend">
<InputGroupText>@</InputGroupText> <InputGroupAddon addonType="prepend">
</InputGroupAddon> <InputGroupText>@</InputGroupText>
<Input id="prependedInput" size="16" type="text" /> </InputGroupAddon>
</InputGroup> <Input id="prependedInput" size="16" type="text" />
<p className="help-block">Here's some help text</p> </InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div> </div>
</FormGroup> </Form>
<FormGroup> </CardBody>
<Label htmlFor="appendedInput">Appended text</Label> </Collapse>
<div className="controls"> </Card>
<InputGroup> </Fade>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Col> </Col>
</Row> </Row>
</div> </div>