Skip to content

Commit 12b76ee

Browse files
xidedixxidedix
authored
refactor: toggleFade
2 parents 2582877 + 9e9d218 commit 12b76ee

File tree

3 files changed

+96
-83
lines changed

3 files changed

+96
-83
lines changed

‎CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
22

33
##### `v2-next`
4-
- feat(Forms): FormFeedback valid
4+
- feat(Forms): FormFeedback valid, toggleFade
5+
- refactor(Cards): toggleFade
56

67
##### `v2.0.3`
78
- refactor: disable `ServiceWorker` by default

‎src/views/Base/Cards/Cards.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class Cards extends Component {
2020
}
2121

2222
toggleFade() {
23-
this.setState({ fadeIn: !this.state.fadeIn });
23+
this.setState((prevState) => { return { fadeIn: !prevState }});
2424
}
2525

2626
render() {

‎src/views/Base/Forms/Forms.js

+93-81
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
DropdownItem,
1313
DropdownMenu,
1414
DropdownToggle,
15+
Fade,
1516
Form,
1617
FormGroup,
1718
FormText,
@@ -29,13 +30,22 @@ class Forms extends Component {
2930
super(props);
3031

3132
this.toggle = this.toggle.bind(this);
32-
this.state = { collapse: true };
33+
this.toggleFade = this.toggleFade.bind(this);
34+
this.state = {
35+
collapse: true,
36+
fadeIn: true,
37+
timeout: 300
38+
};
3339
}
3440

3541
toggle() {
3642
this.setState({ collapse: !this.state.collapse });
3743
}
3844

45+
toggleFade() {
46+
this.setState((prevState) => { return { fadeIn: !prevState }});
47+
}
48+
3949
render() {
4050
return (
4151
<div className="animated fadeIn">
@@ -1062,87 +1072,89 @@ class Forms extends Component {
10621072
</Row>
10631073
<Row>
10641074
<Col xs="12">
1065-
<Card>
1066-
<CardHeader>
1067-
<i className="fa fa-edit"></i>Form Elements
1068-
<div className="card-header-actions">
1069-
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
1070-
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
1071-
<Button color="link" className="card-header-action btn-close"><i className="icon-close"></i></Button>
1072-
</div>
1073-
</CardHeader>
1074-
<Collapse isOpen={this.state.collapse} id="collapseExample">
1075-
<CardBody>
1076-
<Form className="form-horizontal">
1077-
<FormGroup>
1078-
<Label htmlFor="prependedInput">Prepended text</Label>
1079-
<div className="controls">
1080-
<InputGroup className="input-prepend">
1081-
<InputGroupAddon addonType="prepend">
1082-
<InputGroupText>@</InputGroupText>
1083-
</InputGroupAddon>
1084-
<Input id="prependedInput" size="16" type="text" />
1085-
</InputGroup>
1086-
<p className="help-block">Here's some help text</p>
1087-
</div>
1088-
</FormGroup>
1089-
<FormGroup>
1090-
<Label htmlFor="appendedInput">Appended text</Label>
1091-
<div className="controls">
1092-
<InputGroup>
1093-
<Input id="appendedInput" size="16" type="text" />
1094-
<InputGroupAddon addonType="append">
1095-
<InputGroupText>.00</InputGroupText>
1096-
</InputGroupAddon>
1097-
</InputGroup>
1098-
<span className="help-block">Here's more help text</span>
1099-
</div>
1100-
</FormGroup>
1101-
<FormGroup>
1102-
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
1103-
<div className="controls">
1104-
<InputGroup className="input-prepend">
1105-
<InputGroupAddon addonType="prepend">
1106-
<InputGroupText>$</InputGroupText>
1107-
</InputGroupAddon>
1108-
<Input id="appendedPrependedInput" size="16" type="text" />
1109-
<InputGroupAddon addonType="append">
1110-
<InputGroupText>.00</InputGroupText>
1111-
</InputGroupAddon>
1112-
</InputGroup>
1113-
</div>
1114-
</FormGroup>
1115-
<FormGroup>
1116-
<Label htmlFor="appendedInputButton">Append with button</Label>
1117-
<div className="controls">
1118-
<InputGroup>
1119-
<Input id="appendedInputButton" size="16" type="text" />
1120-
<InputGroupAddon addonType="append">
1121-
<Button color="secondary">Go!</Button>
1122-
</InputGroupAddon>
1123-
</InputGroup>
1124-
</div>
1125-
</FormGroup>
1126-
<FormGroup>
1127-
<Label htmlFor="appendedInputButtons">Two-button append</Label>
1128-
<div className="controls">
1129-
<InputGroup>
1130-
<Input id="appendedInputButtons" size="16" type="text" />
1131-
<InputGroupAddon addonType="append">
1132-
<Button color="secondary">Search</Button>
1133-
<Button color="secondary">Options</Button>
1134-
</InputGroupAddon>
1135-
</InputGroup>
1075+
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
1076+
<Card>
1077+
<CardHeader>
1078+
<i className="fa fa-edit"></i>Form Elements
1079+
<div className="card-header-actions">
1080+
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
1081+
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
1082+
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
1083+
</div>
1084+
</CardHeader>
1085+
<Collapse isOpen={this.state.collapse} id="collapseExample">
1086+
<CardBody>
1087+
<Form className="form-horizontal">
1088+
<FormGroup>
1089+
<Label htmlFor="prependedInput">Prepended text</Label>
1090+
<div className="controls">
1091+
<InputGroup className="input-prepend">
1092+
<InputGroupAddon addonType="prepend">
1093+
<InputGroupText>@</InputGroupText>
1094+
</InputGroupAddon>
1095+
<Input id="prependedInput" size="16" type="text" />
1096+
</InputGroup>
1097+
<p className="help-block">Here's some help text</p>
1098+
</div>
1099+
</FormGroup>
1100+
<FormGroup>
1101+
<Label htmlFor="appendedInput">Appended text</Label>
1102+
<div className="controls">
1103+
<InputGroup>
1104+
<Input id="appendedInput" size="16" type="text" />
1105+
<InputGroupAddon addonType="append">
1106+
<InputGroupText>.00</InputGroupText>
1107+
</InputGroupAddon>
1108+
</InputGroup>
1109+
<span className="help-block">Here's more help text</span>
1110+
</div>
1111+
</FormGroup>
1112+
<FormGroup>
1113+
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
1114+
<div className="controls">
1115+
<InputGroup className="input-prepend">
1116+
<InputGroupAddon addonType="prepend">
1117+
<InputGroupText>$</InputGroupText>
1118+
</InputGroupAddon>
1119+
<Input id="appendedPrependedInput" size="16" type="text" />
1120+
<InputGroupAddon addonType="append">
1121+
<InputGroupText>.00</InputGroupText>
1122+
</InputGroupAddon>
1123+
</InputGroup>
1124+
</div>
1125+
</FormGroup>
1126+
<FormGroup>
1127+
<Label htmlFor="appendedInputButton">Append with button</Label>
1128+
<div className="controls">
1129+
<InputGroup>
1130+
<Input id="appendedInputButton" size="16" type="text" />
1131+
<InputGroupAddon addonType="append">
1132+
<Button color="secondary">Go!</Button>
1133+
</InputGroupAddon>
1134+
</InputGroup>
1135+
</div>
1136+
</FormGroup>
1137+
<FormGroup>
1138+
<Label htmlFor="appendedInputButtons">Two-button append</Label>
1139+
<div className="controls">
1140+
<InputGroup>
1141+
<Input id="appendedInputButtons" size="16" type="text" />
1142+
<InputGroupAddon addonType="append">
1143+
<Button color="secondary">Search</Button>
1144+
<Button color="secondary">Options</Button>
1145+
</InputGroupAddon>
1146+
</InputGroup>
1147+
</div>
1148+
</FormGroup>
1149+
<div className="form-actions">
1150+
<Button type="submit" color="primary">Save changes</Button>
1151+
<Button color="secondary">Cancel</Button>
11361152
</div>
1137-
</FormGroup>
1138-
<div className="form-actions">
1139-
<Button type="submit" color="primary">Save changes</Button>
1140-
<Button color="secondary">Cancel</Button>
1141-
</div>
1142-
</Form>
1143-
</CardBody>
1144-
</Collapse>
1145-
</Card>
1153+
</Form>
1154+
</CardBody>
1155+
</Collapse>
1156+
</Card>
1157+
</Fade>
11461158
</Col>
11471159
</Row>
11481160
</div>

0 commit comments

Comments
 (0)