From 68b19fbe9468786bc2a2a29c2fa291108b2694ba Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Wed, 23 May 2018 18:35:28 +0200
Subject: [PATCH] refactor(Forms): toggleFade

---
 CHANGELOG.md                  |   2 +-
 src/views/Base/Forms/Forms.js | 174 ++++++++++++++++++----------------
 2 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6cfca3d..03ab375 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
 
 ##### `v2-next`
-- feat(Forms): FormFeedback valid
+- feat(Forms): FormFeedback valid, toggleFade
 
 ##### `v2.0.3`
 - refactor: disable `ServiceWorker` by default
diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js
index ddd3850..e8db662 100644
--- a/src/views/Base/Forms/Forms.js
+++ b/src/views/Base/Forms/Forms.js
@@ -12,6 +12,7 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
+  Fade,
   Form,
   FormGroup,
   FormText,
@@ -29,13 +30,22 @@ class Forms extends Component {
     super(props);
 
     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() {
     this.setState({ collapse: !this.state.collapse });
   }
 
+  toggleFade() {
+    this.setState((prevState) => { return { fadeIn: !prevState }});
+  }
+
   render() {
     return (
       <div className="animated fadeIn">
@@ -1062,87 +1072,89 @@ class Forms extends Component {
         </Row>
         <Row>
           <Col xs="12">
-            <Card>
-              <CardHeader>
-                <i className="fa fa-edit"></i>Form Elements
-                <div className="card-header-actions">
-                  <Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
-                  <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-close"><i className="icon-close"></i></Button>
-                </div>
-              </CardHeader>
-              <Collapse isOpen={this.state.collapse} id="collapseExample">
-                <CardBody>
-                  <Form className="form-horizontal">
-                    <FormGroup>
-                      <Label htmlFor="prependedInput">Prepended text</Label>
-                      <div className="controls">
-                        <InputGroup className="input-prepend">
-                          <InputGroupAddon addonType="prepend">
-                            <InputGroupText>@</InputGroupText>
-                          </InputGroupAddon>
-                          <Input id="prependedInput" size="16" type="text" />
-                        </InputGroup>
-                        <p className="help-block">Here's some help text</p>
+            <Fade timeout={this.state.timeout} in={this.state.fadeIn}>
+              <Card>
+                <CardHeader>
+                  <i className="fa fa-edit"></i>Form Elements
+                  <div className="card-header-actions">
+                    <Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
+                    <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-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
+                  </div>
+                </CardHeader>
+                <Collapse isOpen={this.state.collapse} id="collapseExample">
+                  <CardBody>
+                    <Form className="form-horizontal">
+                      <FormGroup>
+                        <Label htmlFor="prependedInput">Prepended text</Label>
+                        <div className="controls">
+                          <InputGroup className="input-prepend">
+                            <InputGroupAddon addonType="prepend">
+                              <InputGroupText>@</InputGroupText>
+                            </InputGroupAddon>
+                            <Input id="prependedInput" size="16" type="text" />
+                          </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>
-                    </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>
-                  </Form>
-                </CardBody>
-              </Collapse>
-            </Card>
+                    </Form>
+                  </CardBody>
+                </Collapse>
+              </Card>
+            </Fade>
           </Col>
         </Row>
       </div>