refactor: toggleFade

CHANGELOG.md

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

src/views/Base/Cards/Cards.js

@@ -20,7 +20,7 @@ class Cards extends Component {
   }
 
   toggleFade() {
-    this.setState({ fadeIn: !this.state.fadeIn });
+    this.setState((prevState) => { return { fadeIn: !prevState }});
   }
 
   render() {

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,13 +1072,14 @@ class Forms extends Component {
         </Row>
         <Row>
           <Col xs="12">
+            <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"><i className="icon-close"></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">
@@ -1143,6 +1154,7 @@ class Forms extends Component {
                   </CardBody>
                 </Collapse>
               </Card>
+            </Fade>
           </Col>
         </Row>
       </div>