refactor: toggleFade
This commit is contained in:
xidedix
GitHub
commit
12b76eea0b
@ -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
|
||||
|
||||
@ -20,7 +20,7 @@ class Cards extends Component {
|
||||
}
|
||||
|
||||
toggleFade() {
|
||||
this.setState({ fadeIn: !this.state.fadeIn });
|
||||
this.setState((prevState) => { return { fadeIn: !prevState }});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user